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. Über HTML Widget mit Toggle Button Datenpunkt Wert ändern

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

Über HTML Widget mit Toggle Button Datenpunkt Wert ändern

Geplant Angeheftet Gesperrt Verschoben Visualisierung
7 Beiträge 3 Kommentatoren 735 Aufrufe 3 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.
  • A Offline
    A Offline
    alexmi
    schrieb am zuletzt editiert von
    #1

    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-skyL 1 Antwort Letzte Antwort
    0
    • A 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-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #2

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

      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
      • A Offline
        A Offline
        alexmi
        schrieb am zuletzt editiert von
        #3

        @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-skyL E 2 Antworten Letzte Antwort
        0
        • A 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-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          schrieb am zuletzt editiert von
          #4

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

          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
          • A 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.

            E Offline
            E Offline
            ExMatador
            schrieb am zuletzt editiert von
            #5

            @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

            Intel(R) Core(TM) i7 | 32GB | 1TB SSD
            Virtualization: wsl2 | Ubuntu 22.04 | Docker
            ESPeasy | ESP8266 | ESP32 | ESP32CAM
            Zigbee | Coral | Lupus XT2 | Ender 3 S1 Pro
            Frigate | Influx | Grafana | GPX-Tracking | usw.

            liv-in-skyL 1 Antwort Letzte Antwort
            0
            • E 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-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #6

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

              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

              E 1 Antwort Letzte Antwort
              0
              • liv-in-skyL 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 )
                });	  ```
                E Offline
                E Offline
                ExMatador
                schrieb am zuletzt editiert von
                #7

                @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

                Intel(R) Core(TM) i7 | 32GB | 1TB SSD
                Virtualization: wsl2 | Ubuntu 22.04 | Docker
                ESPeasy | ESP8266 | ESP32 | ESP32CAM
                Zigbee | Coral | Lupus XT2 | Ender 3 S1 Pro
                Frigate | Influx | Grafana | GPX-Tracking | usw.

                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

                793

                Online

                32.4k

                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