VIS-1 HTML Widget mit Datenpunkt verbinden/steuern

[900icarD]

Hallo Zusammen,

ich bin noch mit der VIS 1 unterwegs weil ich damit echt gut zurechtkomme und bisher alles funktioniert was ich umsetzen wollte.
Nun habe ich auch mal ChatGPT als Helferknecht benutzt und bin erstaunt was damit schon alles geht (fast alles, scheinbar).

Ich habe mir eingebildet einen Apple iOS Style Toggle Button kreieren zu lassen.

Der von ChatGPT generierte Code sieht so aus:

<!-- ---------- BEGIN: iOS-Style Toggle für ioBroker VIS ---------- -->
<style>
#iosToggleWidget {
  font-family: sans-serif;
  text-align: center;
  margin: 20px;
}
#iosToggleWidget .toggleWrapper {
  display: inline-block;
  padding: 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}
#iosToggleWidget input[type="checkbox"] {
  display: none;
}
#iosToggleWidget label {
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  background: lightgray;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s;
}
#iosToggleWidget label:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 28px;
  height: 28px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: left 0.3s;
}
#iosToggleWidget input[type="checkbox"]:checked + label {
  background: #2ecc71;
}
#iosToggleWidget input[type="checkbox"]:checked + label:after {
  left: 21px;
}
</style>

<div id="iosToggleWidget">
  <div class="toggleWrapper">
    <!-- ✅ Ersetze diesen Datenpunkt mit deinem echten Datenpunkt -->
    <input type="checkbox" id="iosToggle" data-oid="0_userdata.0.Test.Testschalter_3" onchange="vis.setValue(this.dataset.oid, this.checked)">
    <label for="iosToggle"></label>
  </div>
</div>
<script>
var datenpunktname= "0_userdata.0.Test.Testschalter_3";
function setzeWert(variablenName, Wert){
   this.servConn._socket.emit('setState', variablenName, Wert);
}
$("input[name=station]").change(function(){
    var station=this.value;
    var playername = $("input[name=squeeze]:checked").val();
    setzeWert(datenpunktname,station);
});
</script>

Wenn ich den Schalter betätige, ändert sich auch brav der Datenpunkt, so wie es sein soll. Was jedoch nicht klappt, ist, dass wenn ich den Datenpunkt in der Objektstruktur ändere (also nicht den Vis Button) dann ändert sich der Vis Button aber nicht mit.

Auf meine freundliche Frage "Wenn ich den Datenpunkt ändere dann ändert sich der Button in der Vis nicht mit. Woran kann das liegen?" hat dann ChatGPT eine "Lösung" vorgeschlagen:

Antwort:
Das Verhalten, dass sich der Toggle-Button nicht automatisch aktualisiert, wenn sich der Wert des Datenpunkts außerhalb des Widgets (z. B. durch ein anderes Widget oder Script) ändert, deutet auf einen Fehler oder eine Inkompatibilität im Binding-Code hin.

⸻

Mögliche Ursachen & Lösungen

1. vis.binds.basic.value wird nicht ausgeführt

Problem: Die Funktion vis.binds.basic.value(...) funktioniert nicht, weil vis.binds.basic evtl. nicht geladen ist oder das Timing nicht stimmt.

Lösung: Nutze stattdessen das offizielle Binding-System von ioBroker VIS, das automatisch Trigger setzt.

....

aber das funktioniert nicht und ich habe da auch mehrere Versionen probiert, ohne Erfolg.
Daher hier die Frage an die Script-Profis (ich habe da nur sehr rudimentär Ahnung davon) wie der untere <div> bzw. <script> Teil aussehen müsste damit das auch klappt.

Generell, wie sind eure Erfahrungen mit ChatGPT in diesem Bereich? Gerade was CSS angeht, finde ich, bietet es da schon sehr gute, schnelle Lösungen.

Wäre super wenn eine MI (Menschliche Intelligenz) hier helfen könnte

Vielen Dank und viele Grüße

Edit: der komplette Code befindet sich im HTML Widget unter dem Punkt HTML. Also nichts im Reiter CSS oder Reiter Script.

[OliverIO]

@900icard sagte in VIS-1 HTML Widget mit Datenpunkt verbinden/steuern:

es fehlt der rückweg, als der weg vom datenunkt zum html code.
auch ist das setzen des wertes doppelt gemoppelt bzw der script teil nicht funktional,
da es kein html element gibt das auf den selektor

input[name=station]

reagiert. das script tag könntest du entfernen und es dürfte immer noch so funktionieren wie bisher. lustigerweise kommt mir der code teil seltsamer weise bekannt vor, wegen den schlüsselnamen squeeze und station. ich hatte mal vor mehreren jahren hier im forum mal was gepostet.
ha, ki beim falsch kopieren erwischt
https://forum.iobroker.net/topic/53617/html-css-radio-button-mit-datenpunkt-verbinden/6?_=1750168027529

hier ein beispiel mit der entsprechenden anpassung. achtung den datenpunktnamen musst du wieder für dich anpassen, an allen 2 stellen

<style>
#iosToggleWidget {
  font-family: sans-serif;
  text-align: center;
  margin: 20px;
}
#iosToggleWidget .toggleWrapper {
  display: inline-block;
  padding: 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}
#iosToggleWidget input[type="checkbox"] {
  display: none;
}
#iosToggleWidget label {
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  background: lightgray;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s;
}
#iosToggleWidget label:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 28px;
  height: 28px;
  background: whitesmoke;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: left 0.3s;
}
#iosToggleWidget input[type="checkbox"]:checked + label {
  background: #2ecc71;
}
#iosToggleWidget input[type="checkbox"]:checked + label:after {
  left: 21px;
}
</style>
 
<div id="iosToggleWidget">
  <div class="toggleWrapper">
    <!-- ✅ Ersetze diesen Datenpunkt mit deinem echten Datenpunkt -->
    <input type="checkbox" id="iosToggle" data-oid="0_userdata.0.val1" onchange="vis.setValue(this.dataset.oid, this.checked)">
    <label for="iosToggle"></label>
  </div>
</div>
<script>
var wert = {0_userdata.0.val1};
$('#iosToggle').prop('checked', wert);
</script>

der datenpunkt in geschweiften klammern sorgt dafür, das der datenpunkt dort von vis eingetragen wird. bei jeder änderung baut vis das widget dynamisch neu auf.
die 2.zeile setzt dann den wert in das html element.
allerdings bin ich mir nicht ganz so sicher, was du da im datenpunkt stehen hast. ich habe es mit einem datenpunkt vom typ bool verwendet

[900icarD]

@oliverio
Hallo Oliver, vielen Dank für Deine schnelle Hilfe.
Jetzt funktioniert das Ganze auch so wie gedacht.

Ja ich denke, die KI wird die "Lösungen" sich sicherlich auch hier aus dem Forum ziehen und dann ist halt immer mal was dabei was nicht passt oder halt nicht 100%. Mal sehn wann die Ki das nächste Mal neue Beiträge hier im Forum scannt. Dann sollte sie ja auch über diese Lösung hier stolpern und für andere passts dann gleich aufs erste Mal.

Cool wäre es natürlich wenn jemand aus dieser Lösung gleich ein fertiges Widget bauen könnte was dann andere nutzen können. Dazu reichen meine Fähigkeiten leider nicht.

Viele Grüße,
Robert

[OliverIO]

@900icard

Theoretisch geht das auch mit den Standard Widgets.
Es wird ja nur Standard html mit viel css verwendet.
Man müsste sich nun einfach nur eines der vorhandenen checkbox/bool widgets suchen. Dann hätte man schonmal die Funktion.
Dann müsste man evtl. vorhandene formatsnweisungen neutralisieren und neue draufsetzen.

Die meisten kennen sich mit css nicht wirklich aus und so ein iOS Button ist Design technisch schon komplexer. Da steigen viele aus.
Aktuell ist es nun mal mit KI so, das man die Ergebnisse verstehen und ggfs. Korrigieren muss. Aber das wird auch irgendwann dann mal anders.
Wenn iobroker bis dann mal einen mcp Service hat, wird die ki auch vorhandene Designs entsprechend anpassen können.