Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

[blackeagle998]

@s-bormann
Ist es möglich die Kachelgrößen zur Laufzeit per Javascript zu ändern?

Hintergrund:
Ich habe eine Kachel mit HTML Background für offene Fenster. Im Normalfall reicht die Größe 3x2, ab einer gewissen Anzahl offener Fenster müsste es aber 3x3 sein um es ordentlich lesbar anzuzeigen.

[CrazyFloyd]

@blackeagle998
Nicht schlecht. Welche Kachel hast du dafür verwendet und wie hast du die zusätzlichen Werte der nachfolgenden Tage in der aufgeklappten Hauptansicht hin bekommen?

[CrazyFloyd]

@s-bormann Ich nutze es nicht..

[Marco Laser]

@blackeagle998 sieht echt gut aus, machst du das Script dazu eventuell teilen?

[blackeagle998]

@s-bormann sagte in Test Adapter iQontrol 1.2.x:

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Wenn ich einen HTML Button auf einer Kachel platziere, kann ich darüber irgendwie einen iobroker Datenpunkt steuern?
Wenn ja, wie?

Hi,
bis eben noch nicht... aber mit der aktuellen Github-Version schon

Schau mal hier:
https://github.com/sbormann/ioBroker.iqontrol#postmessage-communication-for-experts-only

Da ist auch eine Beispiels-Webseite. Aus Sicherheitsgründen muss man die Kommunikation aber pro Gerät einzeln erlauben. Das sollte dann so aussehen:

LG

Hey Sebastian,

ich habe das am Wochenende mal ausprobiert und es funktioniert sehr gut.
Für den Anfang habe ich die Müllabfuhr in meine Uhr/Wetter Kachel integriert.
Angezeigt wird die schwarze, blaue oder gelbe Tonne, wenn sie innerhalb der nächsten zwei Tage abgeholt wird. Falls nichts davon zutrifft wird ein Müllauto als Icon angezeigt.

Die Bilder habe ich als Buttons eingefügt:
*<input type="image" src="hier Bilddatei rein" onclick="Funktion die ausgeführt werden soll">

Wenn ich da drauf drücke wird ein Trigger Datenpunkt (type=button) auf true gesetzt, der ein Popup an die iQontrol Instanz sendet. Hier werden mir dann die nächsten Abholungen angezeigt:

Für die erste Idee das so auszuprobieren, ist das Ergebnis echt super geworden!

[blackeagle998]

Hier stand Unsinn.

[s.bormann]

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Ist es möglich die Kachelgrößen zur Laufzeit per Javascript zu ändern?

Hintergrund:
Ich habe eine Kachel mit HTML Background für offene Fenster. Im Normalfall reicht die Größe 3x2, ab einer gewissen Anzahl offener Fenster müsste es aber 3x3 sein um es ordentlich lesbar anzuzeigen.

Du meinst per postMessage aus dem iFrame?

[s.bormann]

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann sagte in Test Adapter iQontrol 1.2.x:

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

@s-bormann
Wenn ich einen HTML Button auf einer Kachel platziere, kann ich darüber irgendwie einen iobroker Datenpunkt steuern?
Wenn ja, wie?

Hi,
bis eben noch nicht... aber mit der aktuellen Github-Version schon

Schau mal hier:
https://github.com/sbormann/ioBroker.iqontrol#postmessage-communication-for-experts-only

Da ist auch eine Beispiels-Webseite. Aus Sicherheitsgründen muss man die Kommunikation aber pro Gerät einzeln erlauben. Das sollte dann so aussehen:

LG

Hey Sebastian,

ich habe das am Wochenende mal ausprobiert und es funktioniert sehr gut.
Für den Anfang habe ich die Müllabfuhr in meine Uhr/Wetter Kachel integriert.
Angezeigt wird die schwarze, blaue oder gelbe Tonne, wenn sie innerhalb der nächsten zwei Tage abgeholt wird. Falls nichts davon zutrifft wird ein Müllauto als Icon angezeigt.

Die Bilder habe ich als Buttons eingefügt:
*<input type="image" src="hier Bilddatei rein" onclick="Funktion die ausgeführt werden soll">

Wenn ich da drauf drücke wird ein Trigger Datenpunkt (type=button) auf true gesetzt, der ein Popup an die iQontrol Instanz sendet. Hier werden mir dann die nächsten Abholungen angezeigt:

Für die erste Idee das so auszuprobieren, ist das Ergebnis echt super geworden!

WOW, richtig cool!!

[blackeagle998]

@s-bormann
Gerne auch aus dem iFrame, wobei mein momentaner Bedarf ist, dies per iobroker Skript zu steuern, also normales Javascript.
Verständlich so?

[dslraser]

@blackeagle998
welche Wettersymbole hast Du und kannst Du die zur Verfügung stellen ? (meine sehen nicht so gut aus)

EDIT: hab die Symbole gefunden...

[DocGame]

@blackeagle998 Das liest sich ja super. Wenn die Müllgeschichte noch drin wäre, ist das die ultimative Kachel für meine Iqontrol-VIS.
Die V5 hat gut funktioniert. Bei der V7 scheintdein Script das "<html><head>" am anfang nicht zu erzeugen ....die Kachel bleibt leer.
Hier die 2 Werte (Oben V7, unten V5)

Den Temperatursensor habe ich an meinen angepasst...

[dslraser]

@blackeagle998 sagte in Test Adapter iQontrol 1.2.x:

str_HTML = str_HTML + '<span class="box_wetter"><b><i>' + Math.round(getState('linkeddevices.0.Außenbereich.Sensoren.Temperatur').val) + '°C</i></b></span>';

Nur zur Info...
In Deinem Script muß diese Zeile 140 an den eigenen Sensor oder Temperaturlieferanten angepasst werden.

[blackeagle998]

@dslraser
Stimmt, habe ich übersehen, danke!

[dslraser]

@DocGame
bei mir funktioniert die V7

[blackeagle998]

@DocGame
<html><head> hat das neue Skript nicht mehr, läuft auch so, weil die Kachel ja schon einen iframe bereitstellt.

Ich schaue nachher nochmal woran es liegen könnte.
Bezüglich Abfallentsorgung melde ich mich nachher nochmal.

Edit: Wenn es bei @dslraser funktioniert, liegt es nicht am Skript.

[blackeagle998]

@DocGame
Hast du den neuen Datenpunkt bei der Kachel eingetragen?

[DocGame]

@blackeagle998 Hatte noch das_und_ von V5 drin
Von der 3x1 bin ich über 3x2 bei der 3x3 Kachel gelandet. Passt leider immer noch nicht rein und scrollen geht nicht. Wenn ich noch grösser gehe ist das Tabletdisplay fast mit dieser Kachel voll. Sieht aber toll aus. Wenn jetzt noch der Müll dazukommt werde ich vielleicht nee extra Ansicht machen. Ein Anpassen an die Boxgröße ist bei dieser aufwändigen Kachel nicht mehr möglich (wie die V5)?

Achtung Screenshot sieht wild aus und ist gerade nur zum testen!!

[dslraser]

@blackeagle998
ich lasse mir schon länger über ein Blockly verschiedene Zustände dynamisch, z.B. ein html von meinen Fenstern in einen Datenpunkt schreiben.
Nun überlege ich auch gerade, ob man das über die ganzen neuen Widget nicht etwas aufhübschen könnte, aber html und css sind bei mir immer nur probieren...
Im Moment sieht es so aus, wenn etwas aktiv ist, dann ist das Icon hell.

Beim Klick drauf sieht es dann so, oder so ähnlich aus.

oder eben so

Vielleicht hast Du ja eine Idee dazu ?
Hier noch so ein html Beispiel dazu

Spoiler

<!DOCTYPE html><html lang="de"><head><title>Fenster</title><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body><p style="color:#0000FF; font-family:Helvetica; font-weight: bold">Fensterstatus Haus</p> <p style="color:#ff0000; font-family:Helvetica; font-weight: bold">letze Änderung:  21.09.2020 13:25:00 </p> <table border="8" cellspacing="10" cellpadding="20" style="color:black; font-family:Helvetica;background-image: linear-gradient(42deg,transparent,lightblue);"><tr style="color:#0000FF"; font-weight: bold"><td>Fenster Haus&ensp;&ensp;&ensp;</td><td>Status</td></tr><tr><td>Badezimmer rechts<td><span style="color:#FF0000"> geöffnet </span><tr><td>Küche rechts<td><span style="color:#FF0000"> geöffnet </span><tr><td>Keller Heizung<td><span style="color:#0000FF"> gekippt </span><tr><td>Keller Sauna links<td><span style="color:#0000FF"> gekippt </span><tr><td>Keller Sauna rechts<td><span style="color:#0000FF"> gekippt </span><tr><td>Keller W Baum<td><span style="color:#0000FF"> gekippt </span><tr><td>Keller Wohnzimmer links<td><span style="color:#0000FF"> gekippt </span><tr><td>Badezimmer links<td>geschlossen<tr><td>Gästezimmer links<td>geschlossen<tr><td>Gästezimmer rechts<td>geschlossen<tr><td>Keller Vorrat<td>geschlossen<tr><td>Keller Werkstatt<td>geschlossen<tr><td>Keller Wohnzimmer mitte<td>geschlossen<tr><td>Keller Wohnzimmer rechts<td>geschlossen<tr><td>Küche links<td>geschlossen<tr><td>Küche mitte<td>geschlossen<tr><td>Schlafzimmer links<td>geschlossen<tr><td>Schlafzimmer rechts<td>geschlossen<tr><td>Wohnzimmer links<td>geschlossen<tr><td>Wohnzimmer rechts<td>geschlossen</table></body>

Dieses Blockly generiert die Zustände
Klick hier

[blackeagle998]

@DocGame
Hmm und genau das verstehe ich nicht, dache eigentlich, das würde sich dynamisch anpassen...
Was hast du denn für eine Auflösung am Tablet?

Du kannst in folgenden Abschnitten die vw- bzw. vmax-Werte ändern, bis es für dich passt:

Spoiler

str_HTML_style = str_HTML_style + '.box_uhr {font-size:14vmax;}';
  str_HTML_style = str_HTML_style + '.box_datum {font-size:4vmax;text-align:center;}';
  str_HTML_style = str_HTML_style + '.box_wetter {font-size:4vmax;margin-right:1.5vw;text-align:center;}';
  
  str_HTML_style = str_HTML_style + '.table_Wettervorschau {';
  str_HTML_style = str_HTML_style + 'margin-top:3vw;';
  str_HTML_style = str_HTML_style + 'border-collapse: collapse;';
  str_HTML_style = str_HTML_style + 'font-size:3vmax;';
  str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
  str_HTML_style = str_HTML_style + '}';
  str_HTML_style = str_HTML_style + '</style>';

[blackeagle998]

@dslraser
Die Möglichkeiten jetzt sind vielfältig.
Ich hatte mal angefangen Fenster und Rollladen-Status in einer Ansicht zusammen zu bringen:

Theoretisch könnte man vom Raum ausgehen und dann alles per Icon daneben darstellen, was "an/aktiv/offen" ist, also Fenster, Rollladen, Licht, Steckdosen etc...

Ich bin erst am Anfang, den Staubsauger will ich auch noch vernünftig darstellen, im Prinzip kann man sich seine eigene VIS als HTML mit Icons als Buttons nachbauen.
Wenn ich was habe, werde ich es hier zeigen.