Monatsrückblick Januar/Februar 2026 ist online!

[GombersIOB]

@hotshot14167 said in Bindings in einem HTML Widget:

Ich möchte mehrere Werte von Datenpunkten (Shellys) zusammen rechnen Plus

Ganz offen. Selbst wenn man das mit VIS hinbekommt, finde ich den Ansatz maximal unhandlich. Besonders, wenn man das systematisch, für alle möglichen Anzeigen, machen will. Es widerspricht auch dem objektorientierten Ansatz: "Jede Methode hat nur eine Aufgabe"!
Warum nicht einen eigenen Datenpunkt darstellen, der per JavaScript berechnet wird?

[hotshot14167]

@liv-in-sky Stimmt das ist es!
erster Wert: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value1} <br/>
erster Wert: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; typeof(value1)} <br/>
zweiter Wert: {value2:0_userdata.0.Textstrings.Ein-shelly-test; value2} <br/>
zweiter Wert: {value2:0_userdata.0.Textstrings.Ein-shelly-test; typeof(value2)} <br/>
erster Wert: Umwandlung: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power;parseFloat(value1)} <br/>
zweiter Wert: Umwandlung: {value2:0_userdata.0.Textstrings.Ein-shelly-test;parseFloat(value2)} <br/>
Ausgabe1: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;value1} <br/>
Ausgabe2: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;value2} <br/>
Berechnung: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;parseFloat(value1)+parseFloat(value2)} <br/>

erster Wert: 10.29
erster Wert: string
zweiter Wert: 12.3
zweiter Wert: string
erster Wert: Umwandlung: 10.29
zweiter Wert: Umwandlung: 12.3
Ausgabe1: 10.29
Ausgabe2: 12.3
Berechnung: 22.59

Aber wie kann ich das lösen?

[liv-in-sky]

@hotshot14167

@gombersiob sagte in Bindings in einem HTML Widget:

Warum nicht einen eigenen Datenpunkt darstellen, der per JavaScript berechnet wird

mit anderen worten - du machst dir eine html tabelle deiner werte mit einem kleinen script und nutzt das html widget zur anzeige

wenn du das nicht machen willst, müßtest du dir aliase der dp anlegen, die diese zeichen nicht haben

[hotshot14167]

@liv-in-sky Ja ok gibt es dafür ein Beispiel wie ich das machen könnte. Mit alias möchte ich nicht arbeite.

[liv-in-sky]

@hotshot14167

letztlich muss das z.b. so aussehen:

Spoiler

<table>
  <tr>

<td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (1):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30007_Phase_1}&nbsp;A</b></td>

</tr>

<tr>

<td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (2):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30009_Phase_2}&nbsp;A</b></td>

</tr>

<tr>
<td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (3):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30011_Phase_3}>&nbsp;A</b></td>

</tr>

</table>

du kannst dir deine tabelle erstellen und diese tabell als variable erstellen - dann fügst du die datenpunkte in diese tabellen variable ein - also die bindings in dem beispiel werden ersetzt - am ende des scriptes schreibst du das ganze in einen extra-dp und den nimmst du im html widget als binding wert zur anzeige

hift dir das weiter

[hotshot14167]

@gombersiob Ja gerne ich weiß aber nicht wie. Gibt es da ein Beispiel?

[hotshot14167]

@liv-in-sky Ja ok und wo erstelle ich die Tabelle. Sicher nicht in Vis.

[liv-in-sky]

@hotshot14167 nee- in einem javascript oder blockly im scripte tab

aber evtl lkannst du das mal versuchen

~~https://forum.iobroker.net/post/682815~~

[liv-in-sky]

@hotshot14167

sorry - mein fehler - mit dieser tabelle geht das nicht - braucht auch bindings

[liv-in-sky]

@hotshot14167

was nutzt du blockly oder javascript

[hotshot14167]

@liv-in-sky bisher noch gar nichts

[liv-in-sky]

@hotshot14167

das ist nicht viel :-)

[liv-in-sky]

@hotshot14167

dann sollten wir wohl eher einfach anfangen - das wird aber jetzt nicht mehr zeitlich möglich sein

hast du noch kein blockly in anwendung ? oder evtl den script adapter noch nie genutzt ?

[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.