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

s.bormann

Für alle Widget-Entwickler, z.B. @blackeagle998 oder @dslraser und alle Interessierten: Es gibt

Neues zu Widgets:
Die Plattform zur Entwicklung von Widgets wächst so langsam. Was nun mit der aktuellen Github-Version geht, ist folgendes:

Man kann im Unterordner /userwidgets HTML, CSS und JS-Dateien erstellen oder hochladen und (mit Click auf das Datei-Icon) auch direkt bearbeiten
Wenn man im head-Teil der Widget-HTML-Seite einen Meta-Tag mit dem Schema
<meta name="widget-datapoint" content="postMessageTest.MyState" data-type="string" data-role="text" />
einfügt, erstellt iQontrol den Datenpunkt iqontrol.<instanz>.Widgets.postMessageTest.MyState

(der Datenpunkt wird aber nur erstellt, wenn man das Widget auch als URL oder BACKGROUND_URL bei einem seiner Gerätekacheln angegeben hat. Weitere Konfigurationen wie z.B. data-unit stehen in der Readme)
Um das Widget mit diesem Datenpunkt kommunizieren zu lassen, kann man die postMessage-Kommunikation nutzen. Diese wurde um die Befehle setWidgetState, getWidgetState und getWidgetStateSubscribed ergänzt (siehe Readme, hier findet sich auch eine Beispiel-Datei)

Was ist der Plan?
Die Idee dahinter wäre, dass wir hier zusammen neue Widgets erstellen und die schon bestehenden tollen Widgets so umgestalten, dass sie komplett unabhängig von externen Datenpunkten und externen Scripten werden.

Sprich: Alle Logik (javascript etc.) sollte in die Widget-Webseite direkt eingebunden werden, so dass man keine externen Scripte mehr im Javascript-Adapter erstellen muss. Die noch benötigten Datenpunkte kann sich das Widget dann über den oben beschriebenen meta-Tag selbst erstellen.

Ich plane auch noch, ein paar weitere Meta-Tags hinzuzufügen, mit dem sich das Widget seine Gerätekachel selbst konfigurieren kann (z.B. die Größe der Kachel, Icon etc.). Damit könnte dann z.B. auch eine "Widget hier hinzufügen"-Funktion bespielt werden. So könnte auch ein Meta-Tag mit einem Info-Text, der beim Hinzufügen angezeigt wird ganz nützlich sein (z.B. für Hilfestellungen oder Credits / Copyright des Erstellers etc.).

Wenn dann damit gute und autark funktionierende Widgets entstanden sind, können diese fest in iQontrol integriert werden und damit allen auf einfache Weise zugänglich gemacht werden.

Viel Spaß beim Testen und Entwickeln :)
VG

blackeagle998

@s-bormann
Hallo Sebastian, das hört sich super an und ich bin gespannt darauf, das auszuprobieren.
Mir drängen sich aber zwei Fragen auf, wo mir nicht klar ist, wie das zu realisieren ist:

Ich baue die HTML Inhalte in Abhängigkeit verschiedener Datenpunkte zusammen. Beispielsweise wird eine Staubsauger Fehlermeldung nur angezeigt, wenn der entsprechende Datenpunkt auch auf Fehler steht.
Ich kann doch keine HTML Datei mit if/then/else erstellen oder?
Ich aktualisiere die HTML Erstellung in Abhängigkeit verschiedener Datenpunkte. Ändert sich irgendein Datenpunkt, der für das HTML relevant ist, wird der gesamte HTML Inhalt neu geschrieben.
Wie stelle ich zukünftig diese Subscription her, wenn ich kein externes Skript nutzen soll?

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.3.x:

@s-bormann
Hallo Sebastian, das hört sich super an und ich bin gespannt darauf, das auszuprobieren.
Mir drängen sich aber zwei Fragen auf, wo mir nicht klar ist, wie das zu realisieren ist:

Ich baue die HTML Inhalte in Abhängigkeit verschiedener Datenpunkte zusammen. Beispielsweise wird eine Staubsauger Fehlermeldung nur angezeigt, wenn der entsprechende Datenpunkt auch auf Fehler steht.
Ich kann doch keine HTML Datei mit if/then/else erstellen oder?

Ich aktualisiere die HTML Erstellung in Abhängigkeit verschiedener Datenpunkte. Ändert sich irgendein Datenpunkt, der für das HTML relevant ist, wird der gesamte HTML Inhalt neu geschrieben.
Wie stelle ich zukünftig diese Subscription her, wenn ich kein externes Skript nutzen soll?

Man nutzt dynamische Bereiche auf der Seite. Z.b. mit <div id="Nachricht"></div> und/oder analog mit <span id="mySpan"></span>-Tags.

Im javascript-Teil bespielt man die dann mit Inhalten, z.B. mit document.getElementById('Nachricht').innerHTML = "<h1>Irgendwas</h1><br>Text"

Abhängig von den Widget-Datenpunkten geht das dann mit der postMessage-Kommunikation z.B. so:

<script type="text/javascript">    
	//send postMessages
	function sendPostMessage(command, stateId, value){
		message = { command: command, stateId: stateId, value: value };
		window.parent.postMessage(message, "*");
	}

	//receive postMessages
	window.addEventListener("message", receivePostMessage, false);
	function receivePostMessage(event) { //event = {data: message data, origin: url of origin, source: id of sending element}
		if(event.data && event.data.command) switch(event.data.command){
			case "getState":
				if(event.data.stateId && event.data.value) switch(event.data.stateId){
					case "Testwidget.MESSAGE":
						document.getElementById('Nachricht').innerHTML = "<b>Nachricht erhalten:</b> " + JSON.stringify(event.data.value);
					break;
					
					case "Testwidget.ANOTHER_DATAPONT":
						if(event.data.value == "Hallo")
							document.getElementById('mySpan').innerHTML = "Es wurde Hallo gesagt <img src='smiley.png'>";
						} else {
							document.getElementById('mySpan').innerHTML = "Keiner grüßt mehr ordentlich <img src='sad.png'>";
						}
					break;
				}
			break;
		}
	}
	
	//Subscribe to WidgetDatapoints now
	sendPostMessage("getWidgetStateSubscribed", "Testwidget.MESSAGE");
	sendPostMessage("getWidgetStateSubscribed", "Testwidget.ANOTHER_DATAPONT");
</script>

Auf Grund der Uhrzeit habe ich es nicht mehr testen können, aber zumindest so in der Art muss es gehen.
LG

martinschm

@s-bormann said in Test Adapter iQontrol 1.3.x:

@martinschm sagte in Test Adapter iQontrol 1.3.x:

@s-bormann : Mir ist mal aufgefallen, das wenn man den Namen einer Ansicht ändert, danach die Verknüpfungen mit der Ansicht nicht mehr funktioniert und man die neu anlegen oder anpassen muß.

Vermutlich wird der Name als Referenz verwendet. Könnte man das so ändern, das der Name nur noch ein String ist und das Objekt "Ansicht" eine feste unique ID hat?

Dann bricht nichts wenn man mal was umbenennt.

Eigentlich sollte er das automatisch anpassen. Habe das auch gerade noch mal getestet, bei mir macht er das auch korrekt. Wenn es bei Dir weiter nicht geht, dann mach doch mal die F12-Konsole auf während des Umbenennens und schau, ob es Fehlermeldungen gibt VG

Hi, hab es grade testet. Sobald ich den Namen der Ansicht ändere steht bei der Ansicht auf die ich verweise nichts mehr drin (hier Feuer Wasser Alarm)

Wenn ich umbenenne und dann auf Speichern klicke sehe ich in der Entwicklerkonsole keine Fehlermeldungen.

Ich hab aber noch diesen Eintrag gefunden (removed dead link):

Es wird also gelöscht und nicht umgehangen.

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.3.x:

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

@blackeagle998 Sag mal, mir kam gerade der Gedanke, dass man ja auch einige beliebte Widgets fest in iQontrol einbauen könnte. Da ich Dein Widget richtig gut finde, könnte man z.B. damit mal starten. @dslraser hat auch schon einiges in diese Richtung programmiert. Dazu müsste man zwar Dein Script noch mal ein wenig abwandeln, so dass es ohne den javascript-Adapter auskommt (ich denke, das müsste eigentlich gehen - iQontrol müsste dann die benötigten Konfigurations-Datenpunkte anlegen und alles, was Script ist, müsste in der Widget-Webseite selbst laufen) - aber das Grundgerüst, Design, Idee etc. könnte man komplett übernehmen. Hättest Du da grundsätzlich Interesse dran?

(Ist erst mal nur ein Gedankenspiel und erfordert noch etwas Zeit - aber man muss ja Pläne für die kalte Jahreszeit haben :) )

Einen Wunsch hätte ich da direkt noch...:blush:
Du könntest ein Widget von/für openstreetmap einbauen. Ein schönes Beispiel hat hier der Adapter jarvis. Das hat mir schön länger gefehlt, aber das sollte jetzt mit den ganzen Kacheln möglich sein, oder ?
Hier gibt es sogar fertige Sachen. https://leafletjs.com/
Fertige Koordinaten bekommt man von anderen Adaptern. Es wäre schön, dort mehrere Benutzer "anspringen" zu können. Verschiedene Symbole dazu wären auch schön.

Beispiel :

Hier noch ein Basis html dazu (aber das geht viel besser)
<!DOCTYPE html>
<html lang="de">
  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>HowTo: Mini-Beispiel "Leaflet Karte mit Marker"</title>
     
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  </head>
  <body>
     <div id='meineKarte' style='height: 800px; width: 100%;'></div>
     
     <script type='text/javascript'>
        var Karte = L.map('meineKarte').setView([52.521918,13.413215], 11);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
        'useCache': true
        }).addTo(Karte);
     </script>
     
     <script>
        var marker = L.marker([52.518620,13.376187]).addTo(Karte);
     </script>
  </body>
</html>
EDIT: wenn Du das html in eine leere Datei einfügst und speicherst und dann mit einem Browser öffnest, erscheint schon eine Karte. Die Koordinaten habe ich mal verändert, ich wollte nicht, das direkt meine Anschrift angezeigt wird...:astonished:

EDIT:
für die Koordinaten nutze ich diesen Adapter
https://github.com/t4qjXH8N/ioBroker.google-sharedlocations/blob/master/README.md

Hi,

hier mal ein erster Entwurf (quasi eine Machbarkeits-Studie :) ) zum Thema Widget und OpenStreetMap/Leaflet.

Die folgende Datei in das Verzeichnis /userwidgets/Map hochladen (geht nur mit der aktuellen Github-Version. Das Verzeichnis muss erst angelegt werden).

map.html (edit: korrigierte Version der Datei, Rundungsfehler behoben)

Dann ein Widget erstellen und die Datei als BACKGROUND_URL angeben.

In den Optionen unter URL/HTML die Option Erlaube postMessage-Kommunikation für BACKGROUND_URL/HTML einschalten.

iQontrol erzeugt dann die Datenpunkte iqontrol.0.Widgets.Map.Position.latitude, .altitude und .zoom, mit denen man die Position der Karte festlegen kann.

Mehr geht erst mal noch nicht, aber ich würde mich schon mal freuen, wenn ich Rückmeldung bekäme, dass das so weit bei Euch funktioniert. Dann kann man weitere Funktionen einbauen.

VG!

s.bormann

@martinschm sagte in Test Adapter iQontrol 1.3.x:

@s-bormann said in Test Adapter iQontrol 1.3.x:

@martinschm sagte in Test Adapter iQontrol 1.3.x:

@s-bormann : Mir ist mal aufgefallen, das wenn man den Namen einer Ansicht ändert, danach die Verknüpfungen mit der Ansicht nicht mehr funktioniert und man die neu anlegen oder anpassen muß.

Vermutlich wird der Name als Referenz verwendet. Könnte man das so ändern, das der Name nur noch ein String ist und das Objekt "Ansicht" eine feste unique ID hat?

Dann bricht nichts wenn man mal was umbenennt.

Eigentlich sollte er das automatisch anpassen. Habe das auch gerade noch mal getestet, bei mir macht er das auch korrekt. Wenn es bei Dir weiter nicht geht, dann mach doch mal die F12-Konsole auf während des Umbenennens und schau, ob es Fehlermeldungen gibt VG

Hi, hab es grade testet. Sobald ich den Namen der Ansicht ändere steht bei der Ansicht auf die ich verweise nichts mehr drin (hier Feuer Wasser Alarm)

Wenn ich umbenenne und dann auf Speichern klicke sehe ich in der Entwicklerkonsole keine Fehlermeldungen.

Ich hab aber noch diesen Eintrag gefunden (removed dead link):

Es wird also gelöscht und nicht umgehangen.

Es tut mir wirklich leid, bei mir funktioniert es. Habe es auch gerade noch mal mit einem Leerzeichen im Namen versucht - klappt aber auch. Ich habe wirklich keine Ahnung, woran das liegen könnte, sorry.

dslraser

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

iQontrol erzeugt dann die Datenpunkte iqontrol.0.Widgets.Map.Position.latitude, .altitude und .zoom, mit denen man die Position der Karte festlegen kann.
Mehr geht erst mal noch nicht, aber ich würde mich schon mal freuen, wenn ich Rückmeldung bekäme, dass das so weit bei Euch funktioniert. Dann kann man weitere Funktionen einbauen.

Erstmal vielen Dank für das einfügen der Karte.👍
"Grundsätzlich" funktioniert die Karte. Zwei Dinge sind mir aufgefallen:

klick auf das minus funktioniert
klick auf das plus funktioniert nicht

(mit zwei Fingern zoomen funktioniert)

Wo setzt Du in der Karte den Focus für die Koordinaten ? (oben links/oben rechts/ unten links/ unten rechts / zentriert ?) Mit meinen Koordinaten startet die Ansicht bei größerem Zoom immer weit unten links, so das der Standort nicht auf dem Bild zu sehen ist.

20201011_183605 (1).gif

martinschm

@s-bormann said in Test Adapter iQontrol 1.3.x:

@martinschm sagte in Test Adapter iQontrol 1.3.x:

@s-bormann said in Test Adapter iQontrol 1.3.x:

@martinschm sagte in Test Adapter iQontrol 1.3.x:

@s-bormann : Mir ist mal aufgefallen, das wenn man den Namen einer Ansicht ändert, danach die Verknüpfungen mit der Ansicht nicht mehr funktioniert und man die neu anlegen oder anpassen muß.

Vermutlich wird der Name als Referenz verwendet. Könnte man das so ändern, das der Name nur noch ein String ist und das Objekt "Ansicht" eine feste unique ID hat?

Dann bricht nichts wenn man mal was umbenennt.

Eigentlich sollte er das automatisch anpassen. Habe das auch gerade noch mal getestet, bei mir macht er das auch korrekt. Wenn es bei Dir weiter nicht geht, dann mach doch mal die F12-Konsole auf während des Umbenennens und schau, ob es Fehlermeldungen gibt VG

Hi, hab es grade testet. Sobald ich den Namen der Ansicht ändere steht bei der Ansicht auf die ich verweise nichts mehr drin (hier Feuer Wasser Alarm)

Wenn ich umbenenne und dann auf Speichern klicke sehe ich in der Entwicklerkonsole keine Fehlermeldungen.

Ich hab aber noch diesen Eintrag gefunden (removed dead link):

Es wird also gelöscht und nicht umgehangen.

Es tut mir wirklich leid, bei mir funktioniert es. Habe es auch gerade noch mal mit einem Leerzeichen im Namen versucht - klappt aber auch. Ich habe wirklich keine Ahnung, woran das liegen könnte, sorry.

Ja kein Ding, ist ja zum Glück relativ einfach zu fixen. Am Browser kann es nicht liegen, oder?

s.bormann

@martinschm Ich denke eher nicht, die javascript-funktion, die das checkt, ist eigentlich so simpel, dass ich mir kaum vorstellen kann, dass das ein Browser nicht hinbekommt. Aber, es gibt ja nichts, was es nicht gibt. Ggf. kannst Du es ja mal mit einem anderen Browser probieren?

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.3.x:

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

iQontrol erzeugt dann die Datenpunkte iqontrol.0.Widgets.Map.Position.latitude, .altitude und .zoom, mit denen man die Position der Karte festlegen kann.
Mehr geht erst mal noch nicht, aber ich würde mich schon mal freuen, wenn ich Rückmeldung bekäme, dass das so weit bei Euch funktioniert. Dann kann man weitere Funktionen einbauen.

Erstmal vielen Dank für das einfügen der Karte.👍
"Grundsätzlich" funktioniert die Karte. Zwei Dinge sind mir aufgefallen:

klick auf das minus funktioniert

klick auf das plus funktioniert nicht

(mit zwei Fingern zoomen funktioniert)

Wo setzt Du in der Karte den Focus für die Koordinaten ? (oben links/oben rechts/ unten links/ unten rechts / zentriert ?) Mit meinen Koordinaten startet die Ansicht bei größerem Zoom immer weite unten links, so das der Standort nicht auf dem Bild zu sehen ist.

Zum Plus/Minus: Schalte mal die Option "Mauszeiger-Events für das Icon ignorieren" für aktiv, inaktiv und vergrößert ein, ich denke das unsichtbare Geräte-Icon hängt Dir vorm plus-Knopf :)

Zum Focus: Habe da gerade den Bug gefunden. In der Datei kommt 3 x parseInt vor, das muss parseFloat heißen (sonst wird auf ganzzahlige Koordinaten abgerundet...)...

Versuche die Datei im ursprünglichen Beitrag zu ändern.

dslraser

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

Zum Plus/Minus: Schalte mal die Option "Mauszeiger-Events für das Icon ignorieren" für aktiv, inaktiv und vergrößert ein, ich denke das unsichtbare Geräte-Icon hängt Dir vorm plus-Knopf
Zum Focus: Habe da gerade den Bug gefunden. In der Datei kommt 3 x parseInt vor, das muss parseFloat heißen (sonst wird auf ganzzahlige Koordinaten abgerundet...)...

hat beides funktioniert :+1:

Jetzt bräuchte es noch die Möglichkeit mehrere User mit eigenen Koordinaten und ein zugehöriges Symbol auf der Karte, dann wäre es schon perfekt für mich.:blush:

EDIT: @blackeagle998
auch die Datei map.html hilft vielleicht etwas das ganze Prinzip zu verstehen.

<!doctype html>
<html style="width: 100%; height: 100%; margin: 0px;">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <meta name="widget-datapoint" content="Map.Position.latitude" data-type="number" data-role="value.gps.latitude" />
   <meta name="widget-datapoint" content="Map.Position.longitude" data-type="number" data-role="value.gps.longitude" />
   <meta name="widget-datapoint" content="Map.Position.zoom" data-type="number" data-role="value.zoom" />
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
   <title>iQontrol Map Widget</title>
</head>
<body style="width: 100%; height: 100%; margin: 0px;">
   <div id="mapid" style="width: 100%; height: 100%; margin: 0px;"></div>
   <script type="text/javascript">
     //Declarations
     var mapPositionLatitude = 20;
     var mapPositionLongitude = 30;
     var mapPositionZoom = 10;
     var mymap = false;

     //Subscribe to WidgetDatapoints now
     sendPostMessage("getWidgetStateSubscribed", "Map.Position.latitude");
     sendPostMessage("getWidgetStateSubscribed", "Map.Position.longitude");
     sendPostMessage("getWidgetStateSubscribed", "Map.Position.zoom");

     //Initialize map (with timeout to give script the time go get the initial position values)
     setTimeout(function(){
        console.log("Init map: " + mapPositionLatitude + "|" + mapPositionLongitude + "|" + mapPositionZoom);
         mymap = L.map('mapid').setView([mapPositionLatitude, mapPositionLongitude], mapPositionZoom);        
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
             'useCache': true
         }).addTo(mymap);
     }, 250);
     
     //Reposition map
     function repositionMap(){
       console.log("Reposition map: " + mapPositionLatitude + "|" + mapPositionLongitude + "|" + mapPositionZoom);
       if(mymap) mymap.setView([mapPositionLatitude, mapPositionLongitude], mapPositionZoom); else console.log("   Abort, map not initialized yet");
     }
     
     //send postMessages
     function sendPostMessage(command, stateId, value){
         message = { command: command, stateId: stateId, value: value };
         window.parent.postMessage(message, "*");
     }

     //receive postMessages
     window.addEventListener("message", receivePostMessage, false);
     function receivePostMessage(event) { //event = {data: message data, origin: url of origin, source: id of sending element}
         if(event.data && event.data.command) switch(event.data.command){
             case "getState":
                 if(event.data.stateId && event.data.value) switch(event.data.stateId){
                   case "Map.Position.latitude":
                     	console.log("Set latitude to " + event.data.value.val);
                   	mapPositionLatitude = parseFloat(event.data.value.val) || 0;
                     	if(mymap) repositionMap();
                   break;

                   case "Map.Position.longitude":
                     	console.log("Set longitude to " + event.data.value.val);
                   	mapPositionLongitude = parseFloat(event.data.value.val) || 0;
                     	if(mymap) repositionMap();
                   break;
                     
                   case "Map.Position.zoom":
                     	console.log("Set zoom to " + event.data.value.val);
                   	mapPositionZoom = parseFloat(event.data.value.val) || 0;
                     	if(mymap) repositionMap();
                   break;
                 }
             break;
         }
     }
   </script>
</body>
</html>

blackeagle998

@dslraser @s-bormann
Dankeschön, das ist sehr hilfreich.
Bitte nicht wundern, wenn ich die nächsten zwei / drei Wochen nur eingeschränkt entwickeln / kommunizieren werde.

blackeagle998

@s-bormann
Hab noch kleinen Bug bei der Bearbeitung von .html, .css und .js Dateien gefunden.
Wenn ich das erste mal gespeichert habe und danach noch etwas ändere, ist der speichern Button zwar aktiv aber es passiert nichts mehr wenn ich darauf klicke.
Ich muss das Fenster schließen und erneut öffnen, dann kann ich wieder einmal speichern usw.

s.bormann

@blackeagle998 sagte in Test Adapter iQontrol 1.3.x:

@s-bormann
Hab noch kleinen Bug bei der Bearbeitung von .html, .css und .js Dateien gefunden.
Wenn ich das erste mal gespeichert habe und danach noch etwas ändere, ist der speichern Button zwar aktiv aber es passiert nichts mehr wenn ich darauf klicke.
Ich muss das Fenster schließen und erneut öffnen, dann kann ich wieder einmal speichern usw.

Hi, ist mir heute auch aufgefallen. Ist schon behoben (die neue Version kommt dann demnächst online).

s.bormann

1.3.2 (2020-10-12)

(sbormann) Added icons to REMOTE_ADDITIONAL_BUTTONS of remote control.
(sbormann) Added REMOTE_CHANNELS to display channel buttons inside remote control.
(sbormann) Enhanced positioning of dialog if URL/HTML is set.
(sbormann) When writing data to an iframe replace encoded cr chars.
(sbormann) Added option to remove overlay of tile, if device is enlarged.
(sbormann) Added possibility to add and edit html/css/js files to folder /userwidgets.
(sbormann) Withdrawn changes to blank icons (now they catch mouse events again) - but for that added an option to optionally ignore mouse events for icons.
(sbormann) Added option which sections of remote are opened at start.
(sbormann) Added new postMessage-communication options for widgets and allow widgets to create datapoints unter iqontrol.x.Widgets by using a meta-tag inside html-code.

blackeagle998

@s-bormann
Ich brauche nochmal deine Hilfe, das Thema receivePostMessage ist mir noch nicht klar.

Ich habe eine Funktion getRoomLocked die ermitteln soll, ob der zugehörige Datenpunkt auf true oder false steht. Mir ist klar, dass ich ein getState auf den Datenpunkt mache und dass dann die Funktion receivePostMessage das Ergebnis erhält, aber wie zur Hölle bekomme ich das Ergebnis in meine Funktion getRoomLocked um damit weiter arbeiten zu können?

Ich steh aufm Schlauch...

dslraser

@blackeagle998 sagte in Test Adapter iQontrol 1.3.x:

ob der zugehörige Datenpunkt auf true oder false steht.

Ich habe es auch noch nicht kapiert !
Ich denke es gehen nur Datenpunkte die iQontrol selbst erstellt hat, oder ?
Oder kann man auch auf eigenen Datenpunkte, z.B. in 0_userdata.0 oder javascript.x zugreifen ?

s.bormann

@dslraser sagte in Test Adapter iQontrol 1.3.x:

@blackeagle998 sagte in Test Adapter iQontrol 1.3.x:

ob der zugehörige Datenpunkt auf true oder false steht.

Ich habe es auch noch nicht kapiert !
Ich denke es gehen nur Datenpunkte die iQontrol selbst erstellt hat, oder ?
Oder kann man auch auf eigenen Datenpunkte, z.B. in 0_userdata.0 oder javascript.x zugreifen ?

Beides geht. Mit getWidgetStateSubscribed bekommt man die unter iQontrol mittels meta-tag angelegten Datenpunkte. Mit getStateSubscribed kommt man auf alle Datenpunkte, also auch die unter userdata.

Für die Widget Entwicklung ist es aber natürlich von Vorteil, alle benötigten Datenpunkten über die meta-Tags unter iqontrol.x... anlegen zu lassen und zu nutzen. So ist sichergestellt, dass die Widgets bei allen ohne zusätzlichen Konfigurationsaufwand laufen.

blackeagle998

@s-bormann
Du bist uns definitiv einige Schritte / Meilen voraus :blush:

wie kriege ich von einem State nicht den Wert, sondern den dazugehörigen String (bspw. "Ampel rot")?
Beispiel im RAW:

states: {
"0": "Ampel rot",
"1": "Ampel gelb",
"2": "Ampel grün"
}

--> getState liefert hier ja nur 0, 1 oder 2.
Irgendwann habe ich mal im Forum dafür folgende funktionierende Funktionen gefunden:

function getStatetxt(id, val) {
    let states = getStatesObj(id);
    if(states) return states[val];
    else return null;
}

function getStatesObj(id) {
    if(!getObject(id)) {
        log(id + ': kein Objekt', 'warn');
        return null;
    }
    let obj = getObject(id);
    if (!obj.common.states) {
        log(id + ': keine Zustandtexte', 'warn');
        return null;
    }
    var states = obj.common.states;
    if (typeof states == 'string') {
        var arr = states.split(';');
        states = {};
        for(var i = 0; i < arr.length; i++) {
            var ele = arr[i].split(':');
            states[ele[0]] = ele[1];
        }
    }
    return states;
}

Nochmal die Frage, wie ich den getState Rückgabewert in eine andere Funktion als receivePostMessage bekomme.
Folgendes Beispiel soll ungefähr verdeutlichen worauf ich hinaus will:

function showBatteryGIF() {
   let vacuum_state = sendPostMessage("getState", 'mihome-vacuum.0.info.state');
   if (vacuum_state == 8){
       blende GIF Battery ein
   }
}

function clearCleanCounter(){
    let vacuum_state = sendPostMessage("getState", 'mihome-vacuum.0.info.state');
    if (vacuum_state == 1){
       setze CleanCounter auf 0 zurück
   }
}

Ich habe zwei verschiedene Funktionen, die beide den State desselben Datenpunktes abfragen, aber zu völlig unterschiedlichen Zeiten benutzt werden können.

Bisher habe ich verstanden, dass die Funktion receivePostMessage den Rückgabewert verarbeiten kann, deshalb habe ich teshalber folgendes gebaut, was auch funktioniert:

var img_locked 		= 'http://192.x.x.x:8082/iqontrol.meta/userimages/usericons/vacuum/locked.png';
var img_unlocked 	= 'http://192.x.x.x:8082/iqontrol.meta/userimages/usericons/vacuum/unlocked.png';

window.addEventListener("message", receivePostMessage, false);
function receivePostMessage(event) { //event = {data: message data, origin: url of origin, source: id of sending element}
  if(event.data && event.data.command) switch(event.data.command){
    case "getState":
      if (((event.data.stateId == '0_userdata.0.vacuum.rooms.Bad.locked'){
	let img_room_locked = document.getElementById('img_room_locked');
	if (event.data.value.val){
          img_room_locked.setAttribute("onclick", "setState('0_userdata.0.vacuum.room_lock', 'Bad')");
	  img_room_locked.setAttribute("src", img_locked);
	}else{
          img_room_locked.setAttribute("onclick", "setState('0_userdata.0.vacuum.room_lock', 'Bad')");
	  img_room_locked.setAttribute("src", img_unlocked);
	}
      }
      break;
  }
}

Momentan sehe ich mit dieser Funktion nur die Möglichkeit, jeden einzelnen Datenpunkt innerhalb jedes einzelnen Case (getState oder setState oder.....) abzufragen und den Rückgabewert auszuwerten.
Im obigen Beispiel ist genau definiert, was passieren soll, wenn der Rückgabewert true / false ist. Was wäre jetzt aber, wenn ich im true-Fall was anderes ausführen lassen will, aber nicht parallel zu dem Beispiel, sondern alternativ?

Ich hoffe das ist halbwegs verständlich ausgedrückt, ansonsten müssen wir mal chatten :-)

dslraser

@Julian-0 sagte in Test Adapter iQontrol 1.3.x:

@dslraser aber klar doch :-)

Die API ist lhier
ganz gut beschrieben:

schedule('*/1 * * * *', function(){
    var url = 'http://IP-ADRESSE/api/epgbouquet?bRef=1:7:1:0:0:0:0:0:0:0:FROM%20BOUQUET%20%22userbouquet.dbe00.tv%22%20ORDER%20BY%20bouquet'; //bRef der entsprechenden Favoritenliste
    request(url, function (err, state, body){
        if (body) {
            body = JSON.parse(body);    
            for(var i=0;i<body.events.length;i++) {    
                var current_service = body['events'][i]['sname'];
                var title = body['events'][i]['title'];
                var shortdesc = body['events'][i]['shortdesc'];
                var longdesc = body['events'][i]['longdesc'];
                var begin_timestamp = body['events'][i]['begin_timestamp'];
                var duration = (body['events'][i]['duration_sec'])/60;
                duration = Math.floor(duration);
                var time;

                time = new Date(begin_timestamp*1000).toLocaleTimeString();
                
                createState("javascript.0.EPG.jetzt." + current_service + ".title");
                createState("javascript.0.EPG.jetzt." + current_service + ".shortdesc");
                createState("javascript.0.EPG.jetzt." + current_service + ".longdesc");
                createState("javascript.0.EPG.jetzt." + current_service + ".begin_timestamp");
                createState("javascript.0.EPG.jetzt." + current_service + ".duration_sec");

                setState("javascript.0.EPG.jetzt." + current_service + ".title", title);
                setState("javascript.0.EPG.jetzt." + current_service + ".shortdesc", shortdesc);
                setState("javascript.0.EPG.jetzt." + current_service + ".longdesc", longdesc);
                setState("javascript.0.EPG.jetzt." + current_service + ".begin_timestamp", time);
                setState("javascript.0.EPG.jetzt." + current_service + ".duration_sec", duration);
            }
        } else {
            log('EPG_now meldet Fehler: ' + err, 'error');
        }
    });
});

Ich habe mal etwas Dein Script verändert. (nur die Fehlermeldungen nach dem ersten Start, bis alles befüllt ist, ist noch da, das nervt mich etwas)
Sieht dann so aus
Bildschirmfoto 2020-10-12 um 21.37.34.png

Damit lässt sich dann die iQontrol Fernbedienung ganz gut einrichten. Den Button kann mann dann ganz gut in iot einbinden und als Trigger benutzen--mit der Servicereference über ein Blockly schalten, aber das ist noch ungetestet.

schedule('*/1 * * * *', function(){
   var url = 'http://192.168.1.53/api/epgbouquet?bRef=1%3A7%3A1%3A0%3A0%3A0%3A0%3A0%3A0%3A0%3AFROM%20BOUQUET%20%22userbouquet.favourites.tv%22%20ORDER%20BY%20bouquet&stype=tv'; //bRef der entsprechenden Favoritenliste
   request(url, function (err, state, body){
       if (body) {
           body = JSON.parse(body);    
           for(var i=0;i<body.events.length;i++) {    
               var current_service = body['events'][i]['sname'];
               var title = body['events'][i]['title'];
               var shortdesc = body['events'][i]['shortdesc'];
               var longdesc = body['events'][i]['longdesc'];
               var sref = body['events'][i]['sref'];
               var begin_timestamp = body['events'][i]['begin_timestamp'];
               var duration = (body['events'][i]['duration_sec'])/60;
               duration = Math.floor(duration);
               var time;

               time = new Date(begin_timestamp*1000).toLocaleTimeString();

               createState("javascript.0.VU.Wohnzimmer." + current_service + ".00Alexa_Trigger",{name: current_service + ' Button_Alexa_Trigger', 'type':'boolean', 'read':true, 'write':true, 'role':'button'});                                
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".01Sendername",{name: current_service + ' Sender Name', 'type':'string', 'read':true, 'write':true, 'role':'string'});                
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".02EPG_jetzt_Beginn",{name: current_service + ' 02EPG jetzt Beginn', 'type':'string', 'read':true, 'write':true, 'role':'string'});
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".03EPG_jetzt_Dauer",{name: current_service + ' EPG jetzt Dauer', 'type':'number', 'read':true, 'write':true, 'role':'number'});                
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".04EPG_jetzt_Titel",{name: current_service + ' EPG jetzt Titel', 'type':'string', 'read':true, 'write':true, 'role':'string'});
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".05EPG_jetzt_Kurzinfo",{name: current_service + ' EPG jetzt Kurzinfo', 'type':'string', 'read':true, 'write':true, 'role':'string'});
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".06EPG_jetzt_Langinfo",{name: current_service + ' EPG jetzt Langinfo', 'type':'string', 'read':true, 'write':true, 'role':'string'});
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".07EPG_gesamt",{name: current_service + ' EPG gesamt', 'type':'string', 'read':true, 'write':true, 'role':'string'});
               createState("javascript.0.VU.Wohnzimmer." + current_service + ".08Servicereference",{name: current_service + ' Servicereference', 'type':'string', 'read':true, 'write':true, 'role':'string'});

               setState("javascript.0.VU.Wohnzimmer." + current_service + ".01Sendername", current_service);
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".02EPG_jetzt_Beginn", time);
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".03EPG_jetzt_Dauer", duration);
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".04EPG_jetzt_Titel", title);
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".05EPG_jetzt_Kurzinfo", shortdesc);
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".06EPG_jetzt_Langinfo", longdesc);   
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".07EPG_gesamt", 'Beginn: ' + time + '\n' + 'Dauer: ' + duration + '\n' + title + '\n' + shortdesc + '\n' + longdesc);  
               setState("javascript.0.VU.Wohnzimmer." + current_service + ".08Servicereference", sref); 

           }
       } else {
           log('EPG_now meldet Fehler: ' + err, 'error');
       }
   });
});

Community Forum

NEWS

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

1.3.2 (2020-10-12)

Support us

391

32.4k

81.4k

1.3m