Bindings in einem HTML Widget [gelöst]

[hotshot14167]

@liv-in-sky Nein habe ich nicht aber ich bin ja auch erst 2 Wochen dabei. Ich weiß ja jetzt den Weg und werde es schon rausfinden.

[liv-in-sky]

@hotshot14167

hier mal super einfaches beispiel, wie man das dann theoretisch aufbaut

[hotshot14167]

@liv-in-sky So ich habe es geschafft mit einem Java Script jedoch werden die Daten nur beim Neustart des Skriptes aktualisiert. Warum?

[hotshot14167]

@gombersiob Ja habe ich hin bekommen:

Leider werden die Daten aber nur beim Neustart aktualisierte. Warum?

[GombersIOB]

@hotshot14167 said in Bindings in einem HTML Widget:

Leider werden die Daten aber nur beim Neustart aktualisierte. Warum?

Da fehlt ein Trigger:

Meine Lösung sähe so aus:

schedule("* * * * *", async function () {
	let shelly1Path:string="shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.";
	let shelly2Path:string="shelly.0.SHPLG-S#5A6DB5#1.Relay0.";
	let userDataPath:string="0_userdata.0.Datenpunkt.Messwerte_Wohnzimmer.";

	let shelly1Power:number=Number(getState(shelly1Path+"Power").val);
	let shelly2Power:number=Number(getState(shelly2Path+"Power").val);
	let sum:number=shelly1Power+shelly2Power;

	setState(userDataPath+"Verbrauch-summe", sum, true);
});

Die "schedule"-Anweisung lässt über die CRON-Parameter das Script jede Minute anlaufen.

Noch eins: Bitte Code nicht als Bild, sondern als echten anzeigen.
Man klickt dazu das entprechende Editor-Zeichen an

Es werden dann an die Stelle, wo der Cursor steht, diese drei Zeilen erzeugt:
.
Und den Code fügt man dann anstelle des Wortes "code_text" ein.

Noch eine Anmerkung kann ich mir nicht verkneifen.
Es geht mir um die Namensgebung des neuen Datenpunktes.

1. Das Wort "Datenpunkt" würde ich im Namen weglassen. Das macht den String nur lang und gibt null Information. Was soll es den anders sein als ein Datenpunkt?
2. Ich würde vermutlich nicht ein Verzeichnis "Messwerte_Wohnzimmer" anlegen. Sondern ein Verzeichnis "Messwerte" und darunter ein Verzeichnis "Wohnzimmer". Also "Messwerte.Wohnzimmer". Und fürs Schlafzimmer wäre es dann ein Pfad "0_userdata.0.Messwerte.Schlafzimmer.". Unter Objekten findet sich dann die Strukur

0_userdata
   0
      Messwerte
         Schlafzimmer
            Verbraucher-X
         Wohnzimmer
            Verbraucher-Y 

[OliverIO]

@hotshot14167

ich will evtl auch mal noch auf die folgende rein client-seitige technik hinweisen.
das folgende skript in ein html-widget kopiert funktioniert ebenfalls.

<div id="val1" style="display:none">{0_userdata.0.test.test1}</div>
<div id="val2" style="display:none">{0_userdata.0.test.test2}</div>
<script>
    debugger;
    var val1 = parseFloat($("#val1").html());
    var val2 = parseFloat($("#val2").html());

    $("#meineID").html(val1+val2);

</script> 

<div id="meineID"></div>

In Zeile 1 und 2 werden die datenpunkte per binding in versteckte html-elemente geschrieben und von vis auch regelmäßig aktualisiert
Zeile 4 habe ich mal das debugger statement eingefügt, mit dem man im edit (aber da wird das binding nicht eingetragen) wie auch im runtime durch sein skript debuggen kann
In zeile 5+6 werden dann die Werte mit jquery aus den elementen geholt und entsprechend typ geparset
zeile 8 wird zusammengerechnet und das ergebnis wieder per jquery in ein anderes element geschrieben.
Zeile 12 enthält das sichtbare Platzhalterelement, in das dann das Ergebnis geschrieben wird.

Man kann auch den Umweg über die versteckten html-elemente sparen und das binding direkt in den skriptteil schreiben:

var val1 = {0_userdata.0.test.test1};

allerdings wird dann das browser log mit fehlermeldungen zugespammt, da im edit modus keine gültige anweisung ist.
im runtime modus funktioniert es aber.
Als workaround könnte man es noch als String notieren

<script>
debugger;
    var val1 = parseFloat("{0_userdata.0.test.test1}");
    var val2 = parseFloat("{0_userdata.0.test.test2}");

    $("#meineID").html(val1+val2);

</script> 
test
<div id="meineID"></div>

wer es genauer verstehen will, schaut sich den html inhalt des widgets in der runtime an.

[GombersIOB]

@oliverio said in Bindings in einem HTML Widget:

das folgende skript in ein html-widget kopiert funktioniert ebenfalls.

Dazu kann ich technisch wenig sagen, ich bin jetzt auch gerade mal 2 Monate mit ioBroker unterwegs.
Nur so viel: Ich habe ganz am Anfang mal versucht im Widget eine zu machen, wie es hier auch, als Grund für diesen Thread, gemacht wurde.
Aber ich habe gleich wieder die Finger davon gelassen. Ich finde das vom Ansatz her schon falsch. Das Widget hat die Aufgabe, die Darstellung zu gestalten. Da jetzt noch komplizierte sonstige Logik reinzupacken würde mir definitv nicht zusagen. Es widerspricht aus meiner Sicht, wie ich oben schon sagte, dem Gedanken der Objektorientierung und macht dadurch das Ganze schlecht pflegbar.

[OliverIO]

@gombersiob

in einem html-widget kannst du dir dein eigenes widget gestalten, wie du es haben möchtest.
solange zeichen in datenpunktnamen existieren, die in javascript nicht erlaubt sind, bzw. schwierigkeiten machen, wird man mit workarounds leben müssen.

und von objektorientierung ist javascript und insbesondere der iobroker meilenweit weg

auch ob man das skript serverseitig oder client seitig baut, kann ja der anwender selber entscheiden.

[GombersIOB]

@oliverio said in Bindings in einem HTML Widget:

solange zeichen in datenpunktnamen existieren, die in javascript nicht erlaubt sind, bzw. schwierigkeiten machen, wird man mit workarounds leben müssen.

Es mag Gründe geben, warum man es im Widget machen muss. Mir ist bisher noch keiner begegnet. Da würde ich doch noch lieber Zeichen escapen als Logik gemischt in den Skripten und in den Widgets zu betreiben.

und von objektorientierung ist javascript und insbesondere der iobroker meilenweit weg.

Objektorientierung war insofern der falsche Begriff, weil er zugegeben auch Eigenschaften beinhaltet, wie Vererbung, die JavaScript, nicht leisten kann. Trotzdem halte ich die Objektorientierung auch wesentlich eher für eine Philosopie. Ich kann umgekehrt eben auch Spagetti-Code in Java schreiben.
Folgende Gedanken der Objektorientierung halte aber für wesentlich überall zu verfolgen: Die Kapselung (Verwendung von Funktionen) und das Prinzip, dass jede Methode/Funktion nur eine Aufgabe haben sollte

[hotshot14167]

@gombersiob Danke für die info alle klar. Jetzt weiß ich bescheid.

[GombersIOB]

@hotshot14167

Beachte: Der Code ist nicht JavaScript sondern TypeScript!