Steuerelement in HTML-Tabelle
-
@HeinrichB
Hier mal deine Tabelle in angepasster Form.
<table border="1"> <tr> <td class="HeaderFormat" align="center">Gerät</td> <td class="HeaderFormat" align="center"><b>Heute</b></td> <td class="HeaderFormat" align="center"><b>Gestern</b></td> <td class="HeaderFormat" align="center"><b>Gesamt</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Geraet" ondblclick="setOnDblClickCustom(this.value)">{Gerät An/Aus Visu}</button> </td> </tr> <tr> <td class="LineFormat" align="center"><b>SolarHaus</b></td> <td class="LineFormat" align="center"><b>{hs100.0.192_168_2_112.totalNow}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.daily_earning_solar_house}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.total_earning_solar_house}kWh</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="SolarHaus" ondblclick="setOnDblClickCustom(this.value)">{SolarHaus An/Aus Visu}</button> </td> </tr> </table> <script> function setOnDblClickCustom(val) { var objID = "0_userdata.0.ZielObjID"; this.servConn._socket.emit('setState', objID, val); } </script>Folgendes müsstest du noch machen:
-
Anpassung der beiden Bindings zum Schluss der neuen Zellen-Einträge. Was in diesen Bindings steht, wird auf dem Button als Text angezeigt.
{Gerät An/Aus Visu} bzw {SolarHaus An/Aus Visu} -
Unten in der Funktion steht eine Objekt ID. Diese auch anpassen. Bei einem Doppeklick auf einem der neuen Buttons wird mit dieser Funktion entweder "Geraet" bzw. "SolarHaus" in die hier eingetragene Objekt ID geschrieben.
Mit einem Standard Skript/Blockly in ioBroker reagierst du nun auf eine Aktualisierung von "0_userdata.0.ZielObjID" (bzw angepasste ID). Je nach Inhalt schaltest Du etwas An oder Aus UND (Empfehlung) Du passt den dynamischen Text der Buttons mit Hilfe derer Bindings an.
Hoffe, das bringt etwas Licht ins Dunkle
-
-
Hallo
danke Dir. Ich habe mich mal dran probiert und den folgenden DP als Zeichenkette angelegt:
0_userdata.0.TestDPIm Nachlauf die HTML-Tabelle in der Funktion angepasst. Die Texte und zu schreibenden Value habe ich erstmal gelassen. Das Blockly-Skript dann erst, wenn der DP geschrieben wird.
<table border="1"> <tr> <td class="HeaderFormat" align="center">Gerät</td> <td class="HeaderFormat" align="center"><b>Heute</b></td> <td class="HeaderFormat" align="center"><b>Gestern</b></td> <td class="HeaderFormat" align="center"><b>Gesamt</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Geraet" ondblclick="setOnDblClickCustom(this.value)">{Gerät An/Aus Visu}</button> </td> </tr> <tr> <td class="LineFormat" align="center"><b>SolarHaus</b></td> <td class="LineFormat" align="center"><b>{hs100.0.192_168_2_112.totalNow}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.daily_earning_solar_house}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.total_earning_solar_house}kWh</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="SolarHaus" ondblclick="setOnDblClickCustom(this.value)">{SolarHaus An/Aus Visu}</button> </td> </tr> </table> <script> function setOnDblClickCustom(val) { var objID = "0_userdata.0.TestDP"; this.servConn._socket.emit('setState', objID, val); } </script>So sieht es aktuell aus und der DP wird noch nicht geschrieben. Etwas habe ich noch vergessen anzupassen
-
@HeinrichB
Das hast du richtig erfasst. Da fehlt noch eine Anpassung...
Am Ende der beiden Button-Zeilen stehen Bindings. Siehe Post oben. Diese hast du noch nicht angepasst. Theoretisch kannst du direkt einen Text eingeben, schöner ist es aber den Text in Abhängigkeit vom Geräte-Status anzuzeigen. Beispiel
SolarHaus = Aus - - - Text = An
SolarHaus = An - - - Text = Aus -
Nächster Versuch. Erstmal mit einem fixen Text und dann das mit dem dynamischen
Hier die angepasste:
<table border="1"> <tr> <td class="HeaderFormat" align="center">Gerät</td> <td class="HeaderFormat" align="center"><b>Heute</b></td> <td class="HeaderFormat" align="center"><b>Gestern</b></td> <td class="HeaderFormat" align="center"><b>Gesamt</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Geraet" ondblclick="setOnDblClickCustom(this.value)">Gerät</button> </td> </tr> <tr> <td class="LineFormat" align="center"><b>SolarHaus</b></td> <td class="LineFormat" align="center"><b>{hs100.0.192_168_2_112.totalNow}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.daily_earning_solar_house}kWh</b></td> <td class="LineFormat" align="center"><b>{0_userdata.0.total_earning_solar_house}kWh</b></td> <td> <button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="SolarHaus" ondblclick="setOnDblClickCustom(this.value)">SolarHaus</button> </td> </tr> </table> <script> function setOnDblClickCustom(val) { var objID = "0_userdata.0.TestDP"; this.servConn._socket.emit('setState', objID, val); } </script>Wenn ich nun draufklicke, müsste doch der Wert in den DP geschrieben werden oder nicht? Aktuell ist da noch NULL (nicht 0)
EDIT: Ich habe es gefunden. Das ist ein Funktion für Doppelklick "OnDblClickCustom"; Da habe ich nicht genau die Funktion mir angesehen
-
@HeinrichB
Es klappt auch mit einem einfachen Klick wenn "onClick" bei den Buttons verwendet wird. Im html Code aus meiner Tabelle sind beide Funktionen drin. Einfach reinschauen. Wollte es hier unkomplizierter halten
-
@GiuseppeS Hallo, das war meine Schusseligkeit. Ich kenn grundsätzlich beide Varianten, nur habe ich da nicht sauber hingeschauen
Und jetz baue ich meinen Trigger auf den DP und setze dann die anderen DP zum Anzeigen des Butto-Texts per Binding
-
@GiuseppeS kann man da eine toggle function einbauen ?
ich bekomm diesen getStates befehl nicht hin - hast du da ahnung ?
<script> function setOnDblClickCustom(val) { var objID = "0_userdata.0.buttonTestBox"; var getty =this.servConn._socket.emit('getStates', objID); if (getty.val) {this.servConn._socket.emit('setState', objID, false);} else {this.servConn._socket.emit('setState', objID, true);} } </script>ist das machbar - getStates soll ja ein object zurückgeben
-
@liv-in-sky
Mit getStates hatte ich noch nicht gearbeitet.
Funktioniert sicher die Abfrage nicht? Oder scheitert es bei der If-Bedingung? Wenn ein Objekt zurück kommt, dann könnte getty.state.val statt getty.val funktionieren. -
@GiuseppeS habe einen eigenen thread aufgemacht - da einzige was ich gefunden haben zu getStates habe ich im thread https://forum.iobroker.net/topic/29851/socket-io-state-lesen-und-setzen
probiert
-
Im anderen Thread ist man ein gutes Stück weiter gekommen. Anscheinend funktioniert auch die Funktion aus VIS heraus auch mit dieser Schreibweise:
function setOnClickDevices(val) { var objID = "javascript.0.Timer.Devices.clickTarget"; servConn.setState(objID, val); }Zuvor hatte ich hier meine Lösung gezeigt, wo ich die Hauptfunktionen nach diesem Schema gezeigt habe:
this.servConn._socket.emit('setState', objID, val);Keine Ahnung ob es Nebenwirkungen gibt, aber auf diese Weise ist der Code kürzer und (viel wichtiger) die offizielle socket.io Doku auf Github macht mit den Aufrufen endlich Sinn.
@HeinrichB
Im verlinkten Thread von @liv-in-sky wird das Togglen geklärt. Wenn Du in deiner Tabelle rein statisch ausschließlich togglen möchtest, wäre das was für dich. Dann wird kein Trigger-Skript benötigt, wie ich es bei mir mache. -
@GiuseppeS said in Steuerelement in HTML-Tabelle:
Im verlinkten Thread von @liv-in-sky wird das Togglen geklärt. Wenn Du in deiner Tabelle rein statisch ausschließlich togglen möchtest, wäre das was für dich. Dann wird kein Trigger-Skript benötigt, wie ich es bei mir mache.
Danke für den Hinweis. Das schaue ich mir auf jeden Fall mal an
-
@HeinrichB
Könntest du vielleicht dein ganzes Skript zur Verfügung stellen , da es ja jetzt bei dir funktioniert !?
Bin ja auch gerne am Basteln -
@Glasfaser ist das nicht hier - ist ein wenig hin und her zwischen den threads
-
Hier meine Tabelle, wofür ich die Buttons verwende. Ich hab nur ein paar Tabellenzeilen der Übersichtlichkeit wegen rausgelöscht.
-
@HeinrichB
wie sieht den der button in der tabelle aus - magst du ein bild zeigen - ich würde ein z.b. für toggle
genutzt oder 
-
@liv-in-sky Der ist aktuell sehr primitiv noch
Funktioniert aber; jedoch muss man der Tabelle etwas Zeit beim ersten Mal lassen /2-3sec., da die Bindings etwas brauchen
-
@HeinrichB ah - der button wird bei mir nicht angezeigt - da habe ich wohl wieder einen kleinen "unsichtbaren" fehler
-
@HeinrichB
wenn mal die muse stimmt, werde ich mal versuchen, dass in mein sonoff script zu integrieren
-
@liv-in-sky Was ein Performance-Problem werden könnte, zumindestens bei mir, sind die Bindings. ich habe meine Tabelle bspw. auf zwei aufbrechen müssen, damit alle geladen wurden. Aber das ist ja ein bekanntes Problem. Das schläft sich auch auf die Buttons durch, dass sie bei vielen Zeilen dann wohl nicht immer direkt reagieren. Aber das muss ich noch genauer beobachten. Manchmal läuft auch der Chrome bei mir voll, und ich muss einmal alles neu öffnen und dann rennt es wieder
-
@HeinrichB du hast auch ein anderes vorgehen wie bei meinen scripts - bei mir werden diese tabellen immer wieder erzeugt - z.b minütlich - in der tabelle selbst steht bei mir kein binding sondern nur statisch werte. wenn ich den toggle knopf drücke, muss das script in der html-tabelle das hauptscript (die ja völlig getrennt sind) erst triggern, damit ich den wert sehe (oder eine minute warten bis der wert wieder ausgelesen und in der tabelle verarbeitet ist) - dazu benötige ich einen extra datenpunkt, den das haupt-tabellenscript überprüft, bzw der es triggert. dann wären die werte sofort sichtbar
bei deinem script, zeigt das binding die werte
du hast sozusagen eine statische tabelle mit dynam. binding
ich nutze eine dynamische tabelle mit stat. werten, die immer einen trigger brauchen um aktuell zu sein
