Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Steuerelement in HTML-Tabelle

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.5k

Steuerelement in HTML-Tabelle

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
45 Beiträge 5 Kommentatoren 3.6k Aufrufe 9 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • G GiuseppeS

    @Glasfaser
    Danke für die Blumen

    @liv-in-sky
    Bei mir sind die Tabellen in reinen html-Widgets integriert. Grundsätzlich kannst du alles in diese Widgets packen, inkl. CSS und Javascript.
    Mein Javascript erstellt html Code und darin nochmals zwei JavaScript Funktionen, die auf einfache Klicks und Doppelklicks reagieren.
    Kann mal schauen, dass ich da den relevanten Teil raus kopiere und hier poste. Oder reicht der reine HTML Code der Tabelle? Da sind dann ja die Funktionen abgebildet.

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    schrieb am zuletzt editiert von
    #14

    @GiuseppeS das wäre super - ich dachte mir schon, dass ich irgendwelche zusätzlichen scripte im widget brauche -, da ich aber javascript nur von iobroker kenne, fehlen mir diese art von grundlagen - aber vielleicht kapiere ich es , wenn du mir ein paar codeschnippsel gibst

    ich habe vermutet, dass solche scripte in den script-tab bei den widgets gehören - bin gespannt - den code über binding einzubinden - coole idee

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    1 Antwort Letzte Antwort
    0
    • liv-in-skyL liv-in-sky

      @Glasfaser ich frage, weil ich schon mal dieses thema hatte - ich konnte zwar ein widget (kästchen) in eine tabelle einbauen - aber ich fand dann keinen weg, diesem kästchen eine referenz auf einen datenpunkt zu geben - ich sah dann etwas zum anklicken - aber es passierte dann natürlich nix

      ? Offline
      ? Offline
      Ein ehemaliger Benutzer
      schrieb am zuletzt editiert von Ein ehemaliger Benutzer
      #15

      @liv-in-sky @Glasfaser

      Darauf wollte ich hinaus: Einfach ein Aus/Ein-Schalter als HTML-Tabellenelement in einer Zelle.
      :)

      So ein Tabelle habe ich

      <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>    
        </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>    
        </tr>
      </table>
      

      Da hätte ich gerne eine letzte Spalte mit An/Aus: Also den DP setzten :)

      1 Antwort Letzte Antwort
      1
      • G Offline
        G Offline
        GiuseppeS
        schrieb am zuletzt editiert von
        #16

        @OliverIO
        Echte ioBroker Widgets in HTML Tabellen einbinden kann ich mir kaum vorstellen, dass es ohne Weiteres möglich ist. Widgets bekommen ja immer eine eindeutige Zuweisung wie w_12345. Man müsste schon per Javascript das vis.json in Rohform bearbeiten. Ansonsten kenne ich zumindest keine Möglichkeit. Bin aber auch nicht so tief in den Eingeweiden ioBroker's unterwegs.

        1 Antwort Letzte Antwort
        0
        • G Offline
          G Offline
          GiuseppeS
          schrieb am zuletzt editiert von GiuseppeS
          #17

          @HeinrichB
          @liv-in-sky
          Sitze gerade im Zug und mit Handy bekomme ich mein html Code nicht anständig angezeigt. Aber im Skript wäre dieser Teil relevant:

          // Button-Darstellung 
          var symbDisab = "❌";
          var symbEnab = "️️✅"; 
          
          // Button überträgt bei Klick den Wert:
          // Pfad~~~Gerät~Timer-Nummer~Funktion
          function getButtonCode(buttonVal, buttonText, color){
              var htmlButton;
              htmlButton = "<button style=\""
          		        + "border:none; "
          		        + "background-color:transparent; "
          		        + "color:" + color + "; "
          		        + "font-size:" + fontSize + "em; "
          		        + "text-align:left"
          		        + "\" value=\"" + buttonVal + "\""
                          + "onclick=\"setOnClick" + path + "(this.value)\""
                          + "ondblclick=\"setOnDblClick" + path + "(this.value)\">" + buttonText + "</button>"
              return htmlButton
          }
          
          // Button überträgt bei Klick den Wert:
          // Pfad~~~Gerät~Timer-Nummer~Funktion
          function getFakeButtonCode(buttonText){
              var htmlButton;
              htmlButton = "<button style=\""
          		        + "border:none; "
          		        + "background-color:transparent; "
                          + "color:white; "
          		        + "font-size:" + fontSize + "em; "
          		        + "text-align:left\" >" + buttonText + "</button>"
              return htmlButton
          }
          
          
          function jsonToHtml(tabelle, withDevice) {
          	var html = "";
              var astro = "";
              var tmpTage = "";
          
              html = "<table style='font-size:" + fontSize + "em;width:100%;'><thead>\n<tr>\n"
                   + ( withDevice  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Device") + "</th>\n"  : "" ) // Wenn splitHTML true ist, dann keine Spalte "Device"
                   + ( showTimerNr ?  "<th style='text-align:left;'>" + getFakeButtonCode("Nr") + "</th>\n"      : "" )
                   + ( showSymbol  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Aktiv") + "</th>\n"   : "" )
                   + "<th style='text-align:left;'>Bed</th>\n"
                   + ( showGroupNr ?  "<th style='text-align:left;'>Grp</th>\n"                                : "" )
                   + "<th style='text-align:left;'>" + getFakeButtonCode("Zeit") + "</th>\n"
                   + "<th style='text-align:left;'>Wochentag</th>\n"
                   + "<th style='text-align:left;'>Soll</th>\n"
                   + "<th style='text-align:left;'>Astro</th>\n"
                   + "<th style='text-align:left;'>Offset</th>\n"
                   + "<th style='text-align:left;'>Zufall</th>\n"
                   + "</tr></thead><tbody>\n\n"
              
          	for (var i=0; i<tabelle.length; i++){
          
              	html += "<tr>\n"
                        + ( withDevice  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~dev", tabelle[i].Geraet, "white") + "</td>\n" : "" )
                        + ( showTimerNr ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", tabelle[i].Nr, ( tabelle[i].Aktiv ? "#00FF7F"  : "#FF0000" )) + "</td>\n" : "" )
                        + ( showSymbol  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", ( tabelle[i].Aktiv ? symbEnab : symbDisab ), "white") + "</td>\n" : "" )
                        + ( tabelle[i].CondNr > 0 ? "<td style=\"color:" + ( tabelle[i].CondTrue ? "#00FF7F" : "#FF0000" ) + ";\">*" + tabelle[i].CondNr + "</td>\n" : "<td> </td>\n" )
                        + ( showGroupNr ? "<td>" + tabelle[i].Gruppe + "</td>" : "" )
                        + "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~time", tabelle[i].Zeit, "white") + "</td>\n"
                        + "<td>" + tabelle[i].Tage + "</td>\n"
                        + "<td>" + tabelle[i].Sollwert + "</td>\n"
                        + "<td>" + tabelle[i].Astro + "</td>\n"
                        + "<td>" + tabelle[i].offset + "</td>\n"
                        + "<td>" + tabelle[i].rand + "</td>\n"
                        + "</tr>\n\n";
              }
          
              html += "</body></table>\n\n";
          
              // Funktionen für Klick und Doppel-Klick werden direkt im html Code der Buttons hinterlegt
              html += "<script>\n"
                    + "\n"
                    + "function setOnClick" + path + "(val) {\n"
                    + "var objID = \"javascript.0.Timer." + path + ".clickTarget\";\n"
                    + "this.servConn._socket.emit('setState', objID, val);}\n"
                    + "\n"
                    + "function setOnDblClick" + path + "(val) {\n"
                    + "var objID = \"javascript.0.Timer." + path + ".dblClickTarget\";\n"
                    + "this.servConn._socket.emit('setState', objID, val);}\n"
                    + "\n"
                    + "</script>";
          
          	return html;
          }
          

          Es folgt ein Edit von diesem Beitrag... Komme nicht hinterher...

          EDIT:
          Die Funktion jsonToHtml erzeugt den HTML Code.
          Die ganzen Bedingungen sind zunächst irrelevant.
          Wichtig ist, dass für die Buttons eine Funktion hinterlegt wird und diese Funktion dann auch zum Schluss hinterlegt wird.
          Hier erstmal der reine Skript-Code. HTML Ergebnis wird deutlicher. Poste ich dann später.

          ? liv-in-skyL 2 Antworten Letzte Antwort
          1
          • G GiuseppeS

            @HeinrichB
            @liv-in-sky
            Sitze gerade im Zug und mit Handy bekomme ich mein html Code nicht anständig angezeigt. Aber im Skript wäre dieser Teil relevant:

            // Button-Darstellung 
            var symbDisab = "❌";
            var symbEnab = "️️✅"; 
            
            // Button überträgt bei Klick den Wert:
            // Pfad~~~Gerät~Timer-Nummer~Funktion
            function getButtonCode(buttonVal, buttonText, color){
                var htmlButton;
                htmlButton = "<button style=\""
            		        + "border:none; "
            		        + "background-color:transparent; "
            		        + "color:" + color + "; "
            		        + "font-size:" + fontSize + "em; "
            		        + "text-align:left"
            		        + "\" value=\"" + buttonVal + "\""
                            + "onclick=\"setOnClick" + path + "(this.value)\""
                            + "ondblclick=\"setOnDblClick" + path + "(this.value)\">" + buttonText + "</button>"
                return htmlButton
            }
            
            // Button überträgt bei Klick den Wert:
            // Pfad~~~Gerät~Timer-Nummer~Funktion
            function getFakeButtonCode(buttonText){
                var htmlButton;
                htmlButton = "<button style=\""
            		        + "border:none; "
            		        + "background-color:transparent; "
                            + "color:white; "
            		        + "font-size:" + fontSize + "em; "
            		        + "text-align:left\" >" + buttonText + "</button>"
                return htmlButton
            }
            
            
            function jsonToHtml(tabelle, withDevice) {
            	var html = "";
                var astro = "";
                var tmpTage = "";
            
                html = "<table style='font-size:" + fontSize + "em;width:100%;'><thead>\n<tr>\n"
                     + ( withDevice  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Device") + "</th>\n"  : "" ) // Wenn splitHTML true ist, dann keine Spalte "Device"
                     + ( showTimerNr ?  "<th style='text-align:left;'>" + getFakeButtonCode("Nr") + "</th>\n"      : "" )
                     + ( showSymbol  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Aktiv") + "</th>\n"   : "" )
                     + "<th style='text-align:left;'>Bed</th>\n"
                     + ( showGroupNr ?  "<th style='text-align:left;'>Grp</th>\n"                                : "" )
                     + "<th style='text-align:left;'>" + getFakeButtonCode("Zeit") + "</th>\n"
                     + "<th style='text-align:left;'>Wochentag</th>\n"
                     + "<th style='text-align:left;'>Soll</th>\n"
                     + "<th style='text-align:left;'>Astro</th>\n"
                     + "<th style='text-align:left;'>Offset</th>\n"
                     + "<th style='text-align:left;'>Zufall</th>\n"
                     + "</tr></thead><tbody>\n\n"
                
            	for (var i=0; i<tabelle.length; i++){
            
                	html += "<tr>\n"
                          + ( withDevice  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~dev", tabelle[i].Geraet, "white") + "</td>\n" : "" )
                          + ( showTimerNr ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", tabelle[i].Nr, ( tabelle[i].Aktiv ? "#00FF7F"  : "#FF0000" )) + "</td>\n" : "" )
                          + ( showSymbol  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", ( tabelle[i].Aktiv ? symbEnab : symbDisab ), "white") + "</td>\n" : "" )
                          + ( tabelle[i].CondNr > 0 ? "<td style=\"color:" + ( tabelle[i].CondTrue ? "#00FF7F" : "#FF0000" ) + ";\">*" + tabelle[i].CondNr + "</td>\n" : "<td> </td>\n" )
                          + ( showGroupNr ? "<td>" + tabelle[i].Gruppe + "</td>" : "" )
                          + "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~time", tabelle[i].Zeit, "white") + "</td>\n"
                          + "<td>" + tabelle[i].Tage + "</td>\n"
                          + "<td>" + tabelle[i].Sollwert + "</td>\n"
                          + "<td>" + tabelle[i].Astro + "</td>\n"
                          + "<td>" + tabelle[i].offset + "</td>\n"
                          + "<td>" + tabelle[i].rand + "</td>\n"
                          + "</tr>\n\n";
                }
            
                html += "</body></table>\n\n";
            
                // Funktionen für Klick und Doppel-Klick werden direkt im html Code der Buttons hinterlegt
                html += "<script>\n"
                      + "\n"
                      + "function setOnClick" + path + "(val) {\n"
                      + "var objID = \"javascript.0.Timer." + path + ".clickTarget\";\n"
                      + "this.servConn._socket.emit('setState', objID, val);}\n"
                      + "\n"
                      + "function setOnDblClick" + path + "(val) {\n"
                      + "var objID = \"javascript.0.Timer." + path + ".dblClickTarget\";\n"
                      + "this.servConn._socket.emit('setState', objID, val);}\n"
                      + "\n"
                      + "</script>";
            
            	return html;
            }
            

            Es folgt ein Edit von diesem Beitrag... Komme nicht hinterher...

            EDIT:
            Die Funktion jsonToHtml erzeugt den HTML Code.
            Die ganzen Bedingungen sind zunächst irrelevant.
            Wichtig ist, dass für die Buttons eine Funktion hinterlegt wird und diese Funktion dann auch zum Schluss hinterlegt wird.
            Hier erstmal der reine Skript-Code. HTML Ergebnis wird deutlicher. Poste ich dann später.

            ? Offline
            ? Offline
            Ein ehemaliger Benutzer
            schrieb am zuletzt editiert von
            #18

            @GiuseppeS Danke Dir schonmal. Wenn du mal die Zeit hast, musst du mir auch kurz auf die Sprünge helfen, wie ich den anpassen. Ich vermute mal, dass ich den als Javascript-Skript anlege, aber das muss ja sicher konfiguriert werden. Aber alles ohne Stress bitte - ich habe Zeit :)

            1 Antwort Letzte Antwort
            0
            • G GiuseppeS

              @HeinrichB
              @liv-in-sky
              Sitze gerade im Zug und mit Handy bekomme ich mein html Code nicht anständig angezeigt. Aber im Skript wäre dieser Teil relevant:

              // Button-Darstellung 
              var symbDisab = "❌";
              var symbEnab = "️️✅"; 
              
              // Button überträgt bei Klick den Wert:
              // Pfad~~~Gerät~Timer-Nummer~Funktion
              function getButtonCode(buttonVal, buttonText, color){
                  var htmlButton;
                  htmlButton = "<button style=\""
              		        + "border:none; "
              		        + "background-color:transparent; "
              		        + "color:" + color + "; "
              		        + "font-size:" + fontSize + "em; "
              		        + "text-align:left"
              		        + "\" value=\"" + buttonVal + "\""
                              + "onclick=\"setOnClick" + path + "(this.value)\""
                              + "ondblclick=\"setOnDblClick" + path + "(this.value)\">" + buttonText + "</button>"
                  return htmlButton
              }
              
              // Button überträgt bei Klick den Wert:
              // Pfad~~~Gerät~Timer-Nummer~Funktion
              function getFakeButtonCode(buttonText){
                  var htmlButton;
                  htmlButton = "<button style=\""
              		        + "border:none; "
              		        + "background-color:transparent; "
                              + "color:white; "
              		        + "font-size:" + fontSize + "em; "
              		        + "text-align:left\" >" + buttonText + "</button>"
                  return htmlButton
              }
              
              
              function jsonToHtml(tabelle, withDevice) {
              	var html = "";
                  var astro = "";
                  var tmpTage = "";
              
                  html = "<table style='font-size:" + fontSize + "em;width:100%;'><thead>\n<tr>\n"
                       + ( withDevice  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Device") + "</th>\n"  : "" ) // Wenn splitHTML true ist, dann keine Spalte "Device"
                       + ( showTimerNr ?  "<th style='text-align:left;'>" + getFakeButtonCode("Nr") + "</th>\n"      : "" )
                       + ( showSymbol  ?  "<th style='text-align:left;'>" + getFakeButtonCode("Aktiv") + "</th>\n"   : "" )
                       + "<th style='text-align:left;'>Bed</th>\n"
                       + ( showGroupNr ?  "<th style='text-align:left;'>Grp</th>\n"                                : "" )
                       + "<th style='text-align:left;'>" + getFakeButtonCode("Zeit") + "</th>\n"
                       + "<th style='text-align:left;'>Wochentag</th>\n"
                       + "<th style='text-align:left;'>Soll</th>\n"
                       + "<th style='text-align:left;'>Astro</th>\n"
                       + "<th style='text-align:left;'>Offset</th>\n"
                       + "<th style='text-align:left;'>Zufall</th>\n"
                       + "</tr></thead><tbody>\n\n"
                  
              	for (var i=0; i<tabelle.length; i++){
              
                  	html += "<tr>\n"
                            + ( withDevice  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~dev", tabelle[i].Geraet, "white") + "</td>\n" : "" )
                            + ( showTimerNr ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", tabelle[i].Nr, ( tabelle[i].Aktiv ? "#00FF7F"  : "#FF0000" )) + "</td>\n" : "" )
                            + ( showSymbol  ? "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~nr", ( tabelle[i].Aktiv ? symbEnab : symbDisab ), "white") + "</td>\n" : "" )
                            + ( tabelle[i].CondNr > 0 ? "<td style=\"color:" + ( tabelle[i].CondTrue ? "#00FF7F" : "#FF0000" ) + ";\">*" + tabelle[i].CondNr + "</td>\n" : "<td> </td>\n" )
                            + ( showGroupNr ? "<td>" + tabelle[i].Gruppe + "</td>" : "" )
                            + "<td>" + getButtonCode(tabelle[i].Geraet + "~" + tabelle[i].Nr + "~time", tabelle[i].Zeit, "white") + "</td>\n"
                            + "<td>" + tabelle[i].Tage + "</td>\n"
                            + "<td>" + tabelle[i].Sollwert + "</td>\n"
                            + "<td>" + tabelle[i].Astro + "</td>\n"
                            + "<td>" + tabelle[i].offset + "</td>\n"
                            + "<td>" + tabelle[i].rand + "</td>\n"
                            + "</tr>\n\n";
                  }
              
                  html += "</body></table>\n\n";
              
                  // Funktionen für Klick und Doppel-Klick werden direkt im html Code der Buttons hinterlegt
                  html += "<script>\n"
                        + "\n"
                        + "function setOnClick" + path + "(val) {\n"
                        + "var objID = \"javascript.0.Timer." + path + ".clickTarget\";\n"
                        + "this.servConn._socket.emit('setState', objID, val);}\n"
                        + "\n"
                        + "function setOnDblClick" + path + "(val) {\n"
                        + "var objID = \"javascript.0.Timer." + path + ".dblClickTarget\";\n"
                        + "this.servConn._socket.emit('setState', objID, val);}\n"
                        + "\n"
                        + "</script>";
              
              	return html;
              }
              

              Es folgt ein Edit von diesem Beitrag... Komme nicht hinterher...

              EDIT:
              Die Funktion jsonToHtml erzeugt den HTML Code.
              Die ganzen Bedingungen sind zunächst irrelevant.
              Wichtig ist, dass für die Buttons eine Funktion hinterlegt wird und diese Funktion dann auch zum Schluss hinterlegt wird.
              Hier erstmal der reine Skript-Code. HTML Ergebnis wird deutlicher. Poste ich dann später.

              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #19

              @GiuseppeS macht dir keinen stress - ich werde mir das morgen in aller ruhe ansehen

              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

              1 Antwort Letzte Antwort
              0
              • G Offline
                G Offline
                GiuseppeS
                schrieb am zuletzt editiert von GiuseppeS
                #20

                Anbei der resultierende HTML Code aus den Funktionen.

                Jeder Button spricht die selbe Funktion an, übermittelt aber einen individuellen Wert an die Funktion. Anhand des Wertes kann ich dann später im Objekt, z.B. javascript.0.Timer.AtHomeSimul.clickTarget, erkennen, welcher Button geklickt wurde und kann entsprechende Funktionen ausführen.

                Übertragene Werte wären hier u.a.:
                Schlafz.~1~nr
                Schlafz.~1~time
                Balkon_Li~2~dev
                Balkon_Li~2~nr

                In meinem Hauptskript reagiere ich auf eine Aktualisierung des Objekts (oben fett). Durch Split des übertragenen Strings, kann ich die Zeile meiner Tabelle (Schlafz., Timernummer 1) und die für mich definierte Spalte (hier nr, time, oder dev) erkennen.

                <table style='font-size:1em;width:100%;'>
                	<tbody>
                		<tr>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Schlafz.</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Schlafz.~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">1</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                			</td>
                			<td></td>
                			<td>B</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">10:00</button>
                			</td>
                			<td>täglich</td>
                			<td>100</td>
                			<td>10:00</td>
                			<td></td>
                			<td></td>
                		</tr>
                		<tr>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Schlafz.</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Schlafz.~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">2</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                			</td>
                			<td></td>
                			<td>B</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">19:00</button>
                			</td>
                			<td>täglich</td>
                			<td>0</td>
                			<td>19:00</td>
                			<td></td>
                			<td></td>
                		</tr>
                		<tr>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Balkon_Li</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Balkon_Li~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">1</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                			</td>
                			<td></td>
                			<td>C</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">11:00</button>
                			</td>
                			<td>So</td>
                			<td>100</td>
                			<td>11:00</td>
                			<td></td>
                			<td></td>
                		</tr>
                		<tr>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Balkon_Li</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Balkon_Li~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">2</button>
                			</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                			</td>
                			<td></td>
                			<td>B</td>
                			<td>
                				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">19:00</button>
                			</td>
                			<td>täglich</td>
                			<td>0</td>
                			<td>19:00</td>
                			<td></td>
                			<td></td>
                		</tr>
                	</body>
                </table>
                <script>
                function setOnClickAtHomeSimul(val) {
                var objID = "javascript.0.Timer.AtHomeSimul.clickTarget";this.servConn._socket.emit('setState', objID, val);
                }
                function setOnDblClickAtHomeSimul(val) {
                var objID = "javascript.0.Timer.AtHomeSimul.dblClickTarget";this.servConn._socket.emit('setState', objID, val);
                }
                </script>
                

                So schaut dann übrigens die Tabelle dazu aus:
                ecc56e3c-09d8-4fa4-b8ad-9d3c240a3a72-image.png

                ? 1 Antwort Letzte Antwort
                0
                • G GiuseppeS

                  Anbei der resultierende HTML Code aus den Funktionen.

                  Jeder Button spricht die selbe Funktion an, übermittelt aber einen individuellen Wert an die Funktion. Anhand des Wertes kann ich dann später im Objekt, z.B. javascript.0.Timer.AtHomeSimul.clickTarget, erkennen, welcher Button geklickt wurde und kann entsprechende Funktionen ausführen.

                  Übertragene Werte wären hier u.a.:
                  Schlafz.~1~nr
                  Schlafz.~1~time
                  Balkon_Li~2~dev
                  Balkon_Li~2~nr

                  In meinem Hauptskript reagiere ich auf eine Aktualisierung des Objekts (oben fett). Durch Split des übertragenen Strings, kann ich die Zeile meiner Tabelle (Schlafz., Timernummer 1) und die für mich definierte Spalte (hier nr, time, oder dev) erkennen.

                  <table style='font-size:1em;width:100%;'>
                  	<tbody>
                  		<tr>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Schlafz.</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Schlafz.~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">1</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                  			</td>
                  			<td></td>
                  			<td>B</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~1~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">10:00</button>
                  			</td>
                  			<td>täglich</td>
                  			<td>100</td>
                  			<td>10:00</td>
                  			<td></td>
                  			<td></td>
                  		</tr>
                  		<tr>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Schlafz.</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Schlafz.~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">2</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                  			</td>
                  			<td></td>
                  			<td>B</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Schlafz.~2~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">19:00</button>
                  			</td>
                  			<td>täglich</td>
                  			<td>0</td>
                  			<td>19:00</td>
                  			<td></td>
                  			<td></td>
                  		</tr>
                  		<tr>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Balkon_Li</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Balkon_Li~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">1</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                  			</td>
                  			<td></td>
                  			<td>C</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~1~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">11:00</button>
                  			</td>
                  			<td>So</td>
                  			<td>100</td>
                  			<td>11:00</td>
                  			<td></td>
                  			<td></td>
                  		</tr>
                  		<tr>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~dev"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">Balkon_Li</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:#FF0000; font-size:1em; text-align:left" value="Balkon_Li~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">2</button>
                  			</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~nr"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">❌</button>
                  			</td>
                  			<td></td>
                  			<td>B</td>
                  			<td>
                  				<button style="border:none; background-color:transparent; color:white; font-size:1em; text-align:left" value="Balkon_Li~2~time"onclick="setOnClickAtHomeSimul(this.value)"ondblclick="setOnDblClickAtHomeSimul(this.value)">19:00</button>
                  			</td>
                  			<td>täglich</td>
                  			<td>0</td>
                  			<td>19:00</td>
                  			<td></td>
                  			<td></td>
                  		</tr>
                  	</body>
                  </table>
                  <script>
                  function setOnClickAtHomeSimul(val) {
                  var objID = "javascript.0.Timer.AtHomeSimul.clickTarget";this.servConn._socket.emit('setState', objID, val);
                  }
                  function setOnDblClickAtHomeSimul(val) {
                  var objID = "javascript.0.Timer.AtHomeSimul.dblClickTarget";this.servConn._socket.emit('setState', objID, val);
                  }
                  </script>
                  

                  So schaut dann übrigens die Tabelle dazu aus:
                  ecc56e3c-09d8-4fa4-b8ad-9d3c240a3a72-image.png

                  ? Offline
                  ? Offline
                  Ein ehemaliger Benutzer
                  schrieb am zuletzt editiert von
                  #21

                  @GiuseppeS Und wie konfiguriere ich das ? Bzw. was muss ich machen, wenn ich eine Aktion beim Klick auf das Symbol ausführen mag? Danke

                  G 2 Antworten Letzte Antwort
                  0
                  • ? Ein ehemaliger Benutzer

                    @GiuseppeS Und wie konfiguriere ich das ? Bzw. was muss ich machen, wenn ich eine Aktion beim Klick auf das Symbol ausführen mag? Danke

                    G Offline
                    G Offline
                    GiuseppeS
                    schrieb am zuletzt editiert von
                    #22

                    @HeinrichB
                    Ich erweitere mal deine Tabelle und lade eure wieder hoch. Bin Zug-Pendler und dank des optional gültigen Fahrplans der DB habe ich auch die Zeit...

                    1 Antwort Letzte Antwort
                    0
                    • ? Ein ehemaliger Benutzer

                      @GiuseppeS Und wie konfiguriere ich das ? Bzw. was muss ich machen, wenn ich eine Aktion beim Klick auf das Symbol ausführen mag? Danke

                      G Offline
                      G Offline
                      GiuseppeS
                      schrieb am zuletzt editiert von GiuseppeS
                      #23

                      @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

                      ? 1 Antwort Letzte Antwort
                      0
                      • G GiuseppeS

                        @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

                        ? Offline
                        ? Offline
                        Ein ehemaliger Benutzer
                        schrieb am zuletzt editiert von Ein ehemaliger Benutzer
                        #24

                        @GiuseppeS

                        Hallo

                        danke Dir. Ich habe mich mal dran probiert und den folgenden DP als Zeichenkette angelegt:

                        0_userdata.0.TestDP
                        

                        Im 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 :)

                        Bildschirmfoto 2020-02-06 um 08.27.37.JPG

                        G 1 Antwort Letzte Antwort
                        0
                        • ? Ein ehemaliger Benutzer

                          @GiuseppeS

                          Hallo

                          danke Dir. Ich habe mich mal dran probiert und den folgenden DP als Zeichenkette angelegt:

                          0_userdata.0.TestDP
                          

                          Im 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 :)

                          Bildschirmfoto 2020-02-06 um 08.27.37.JPG

                          G Offline
                          G Offline
                          GiuseppeS
                          schrieb am zuletzt editiert von
                          #25

                          @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

                          ? 1 Antwort Letzte Antwort
                          0
                          • G GiuseppeS

                            @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

                            ? Offline
                            ? Offline
                            Ein ehemaliger Benutzer
                            schrieb am zuletzt editiert von Ein ehemaliger Benutzer
                            #26

                            @GiuseppeS

                            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 :)

                            G 1 Antwort Letzte Antwort
                            0
                            • ? Ein ehemaliger Benutzer

                              @GiuseppeS

                              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 :)

                              G Offline
                              G Offline
                              GiuseppeS
                              schrieb am zuletzt editiert von
                              #27

                              @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 ;-)

                              ? liv-in-skyL 2 Antworten Letzte Antwort
                              0
                              • G GiuseppeS

                                @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 ;-)

                                ? Offline
                                ? Offline
                                Ein ehemaliger Benutzer
                                schrieb am zuletzt editiert von
                                #28

                                @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 :)

                                1 Antwort Letzte Antwort
                                0
                                • G GiuseppeS

                                  @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 ;-)

                                  liv-in-skyL Offline
                                  liv-in-skyL Offline
                                  liv-in-sky
                                  schrieb am zuletzt editiert von
                                  #29

                                  @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

                                  nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                  G 1 Antwort Letzte Antwort
                                  0
                                  • liv-in-skyL liv-in-sky

                                    @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

                                    G Offline
                                    G Offline
                                    GiuseppeS
                                    schrieb am zuletzt editiert von GiuseppeS
                                    #30

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

                                    liv-in-skyL 1 Antwort Letzte Antwort
                                    0
                                    • G GiuseppeS

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

                                      liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      schrieb am zuletzt editiert von
                                      #31

                                      @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

                                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                      1 Antwort Letzte Antwort
                                      0
                                      • G Offline
                                        G Offline
                                        GiuseppeS
                                        schrieb am zuletzt editiert von
                                        #32

                                        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.

                                        ? 1 Antwort Letzte Antwort
                                        0
                                        • G GiuseppeS

                                          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.

                                          ? Offline
                                          ? Offline
                                          Ein ehemaliger Benutzer
                                          schrieb am zuletzt editiert von
                                          #33

                                          @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 :)

                                          GlasfaserG 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          764

                                          Online

                                          32.5k

                                          Benutzer

                                          81.6k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe