Über HTML Widget mit Toggle Button Datenpunkt Wert ändern

[alexmi]

Hallo,

ich möchte gerne über einen Toggle Button welcher über ein HTML Widget mit CSS eingebunden ist einen Datenpunkt (Boolean) ändern. Leider habe ich dafür bisher keine Lösung gefunden.

Vielleicht hat jemand von euch so etwas schon mal versucht?

Vielen Dank

[liv-in-sky]

@alexmi

du kannst sowas nutzen, wenn du den simple-api adapter installiert hast

https://forum.iobroker.net/post/947385

zum testen einfach mal das mit deinem datenpunkt in den script-tab schreiben und bei jedem refresh der view wird der wert geändert - mußte halt in deinen button einbauen

$.get("http://192.168.178.59:8087/toggle/0_userdata.0.CONTROL-OWN.AAATEST.TestLogic3")

[alexmi]

@liv-in-sky Danke für deine schnelle Antwort.
Leider weiß ich gerade nicht wie ich das in meinem Button mit einbinden soll.
Stelle mich gerade irgendwie zu doof an.

Ich habe im HTML Widget den HTML Code meines Buttons ich weiß aber gerade nicht wie ich das da mit einbinden soll.

$('#w00198').click(function () { 
vis.setValue('0_userdata.0.test', true);
});

Das habe ich jetzt im JS Tab eingefügt, aber es passiert nichts wenn ich auf den ToggleButton klicke.

[liv-in-sky]

@alexmi sagte in Über HTML Widget mit Toggle Button Datenpunkt Wert ändern:

$('#w00198').click(function () { vis.setValue('0_userdata.0.test', true); });

$('#w00198').click(function () { 
$.get("http://192.168.178.59:8087/toggle/0_userdata.0.CONTROL-OWN.AAATEST.TestLogic3")
});
 

oder wie im anderen beispiel im button definieren

<button onclick='$.get(\"http://192.168.178.59:8087/toggle/0_userdata.0.CONTROL-OWN.AAATEST.TestLogic3\")'>Click me</button>

[ExMatador]

@alexmi
Ich habe auch mehrere eigene Checkboxes im Einsatz, alle via CSS aufgebaut.
Die CSS-Klassen liegen bei mir im CSS-Projekt Bereich, können aber auch via Binding im HTML-Widget selsbt abgelegt werden.
Ansonsten steht bei mir im HTML-Widget folgender Code

<label class="my-checkbox my-checkbox-toggle" > 
<input id="WohnzimmerLampe" type="checkbox" onclick="return setValueCheckbox(this);"> 
<span class="my-slider"></span> 
</label>

<script type="text/javascript">  
//----- Setzen true | false einer einfachen Checkbox
function setValueCheckbox(obj) { 
    if (obj.checked == true)  vis.setValue("alias.0.Lights." + obj.id, true);
    else vis.setValue("alias.0.Lights." + obj.id, false);
}
</script>

Damit klappts eigentlich problemlos.
ExMatador

[liv-in-sky]

@exmatador

ist halt kein toggle - dazu müßtest du bei vis.setValue zuerst den dp abfragen, um ihn dann anders zu setzen

datenpunkt abfragen ginge so:

var Self = this;
Self.servConn.getStates(['0_userdata.0.CONTROL-OWN.ECHO8.Echo2Player-PP',
                      'javascript.0.YouTube.whichDevice'], (error, states) => {
                          console.log(states['0_userdata.0.CONTROL-OWN.ECHO8.Echo2Player-PP'].val);                                         
                          console.log(states['javascript.0.YouTube.whichDevice'].val)})

oder wieder über simpleapi adapter:

$.get( "http://192.168.178.59:8087/get/0_userdata.0.CONTROL-OWN.AAATEST.TestLogic3", function( data ) {
  console.log( "Data Loaded: " + data.val );
  console.log( "Data Loaded: " + data.lc )
});	  ```

[ExMatador]

@liv-in-sky
Meine Checkbox arbeitet anders. Wenn diese beim Klick auf 'true' geht, setze ich den dp auf 'true' - und andersherum.
Ohne den dp nochmal abzufragen.
Aber natürlich kann im Hintergrund der dp geändert werden, z.B. via Alexa oder über sonstwas.
Diese Änderung überwacht ein Script und aktualisiert die Checkbox an der Oberfläche. Das erledige ich mit einem dynamischen Script, das im HTML-Widget als Binding eingetragen ist.
Damit kann man im Übrigen auch Checkboxes mit 3 Zuständen abbilden (true | uncertain | false), mache ich bei Szenen so.
ExMatador