Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. JavaScript
  5. [gelöst] Per js generierte Ausgabe mit Button

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    246

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.6k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

[gelöst] Per js generierte Ausgabe mit Button

Scheduled Pinned Locked Moved JavaScript
17 Posts 3 Posters 1.6k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • OliverIOO OliverIO

    @dkerkow
    Am einfachsten wäre es einen vorhandenes Knopf-Widget zu verwenden und dies per css-Anweisungen umzugestalten.

    D Offline
    D Offline
    dkerkow
    wrote on last edited by
    #5

    @OliverIO
    Genau das wollte ich nicht, sonst habe ich in der View wieder eine Kombination aus Buttons und Skripten. Wollte alles aus einer Hand.

    1 Reply Last reply
    0
    • liv-in-skyL liv-in-sky

      @dkerkow

      in diesem script https://forum.iobroker.net/topic/28953/sonoff-geräte-als-html-tabelle-vis-iqontrol wird ein eigener button (emoji) erzeugt

      an das html file wird am ende ein javascript angehängt - in diesem wird ein datenpunkt des iobroker geschalten (rechte spalte)

      such im script nach "button" und "script" - falls du es nicht findest, könnte ich morgen mehr dazu schreiben

      funktioniert nur in der vis - da die existierende socket verbindung genutzt wird

      in diesem script wird einfach mit einem trigger gearbeitet um auf änderungen zu reagieren

      drückt man im script auf den button, wird dieser ausgeführt und schaltet einen datenpunkt - daraufhin wird die tabelle neu aufgebaut und die änderung wird in der vis sichtbar

      scrennmovie.gif

      D Offline
      D Offline
      dkerkow
      wrote on last edited by
      #6

      @liv-in-sky
      Habe es versucht, aber es ist zu spät, oder ich bin zu blöd, oder beides ...
      Wenn jemand einem Blinden helfen mag, dann bitte gerne.

      function testOneState() {
          
          var ausgabeTestOneButton = '<button onclick="changeValueTrue(true)">Button true</button>' +
          '<script>function changeValueTrue(myvalue) {var objID = myvalue; setState(\'javascript.0.TEST.ONE_STATE\', objID);}</script>';
          
          setState('javascript.0.TEST.ONE_OUTPUT', ausgabeTestOneButton);
      }
      
      schedule("*/3 * * * * *", testOneState);
      
      OliverIOO liv-in-skyL 2 Replies Last reply
      0
      • D dkerkow

        @liv-in-sky
        Habe es versucht, aber es ist zu spät, oder ich bin zu blöd, oder beides ...
        Wenn jemand einem Blinden helfen mag, dann bitte gerne.

        function testOneState() {
            
            var ausgabeTestOneButton = '<button onclick="changeValueTrue(true)">Button true</button>' +
            '<script>function changeValueTrue(myvalue) {var objID = myvalue; setState(\'javascript.0.TEST.ONE_STATE\', objID);}</script>';
            
            setState('javascript.0.TEST.ONE_OUTPUT', ausgabeTestOneButton);
        }
        
        schedule("*/3 * * * * *", testOneState);
        
        OliverIOO Offline
        OliverIOO Offline
        OliverIO
        wrote on last edited by
        #7

        @dkerkow
        Der code läuft ja im Browser.
        Da gibt es setState nicht.
        Dort heißt der Befehl

        vis.setValue(state, value);
        

        Meine Adapter und Widgets
        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
        Links im Profil

        liv-in-skyL D 2 Replies Last reply
        0
        • D dkerkow

          @liv-in-sky
          Habe es versucht, aber es ist zu spät, oder ich bin zu blöd, oder beides ...
          Wenn jemand einem Blinden helfen mag, dann bitte gerne.

          function testOneState() {
              
              var ausgabeTestOneButton = '<button onclick="changeValueTrue(true)">Button true</button>' +
              '<script>function changeValueTrue(myvalue) {var objID = myvalue; setState(\'javascript.0.TEST.ONE_STATE\', objID);}</script>';
              
              setState('javascript.0.TEST.ONE_OUTPUT', ausgabeTestOneButton);
          }
          
          schedule("*/3 * * * * *", testOneState);
          
          liv-in-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          wrote on last edited by liv-in-sky
          #8

          @dkerkow

          diese constante wird am ende des html codes angehängt (hier ist es eine toggle function, hat nix mit doppelclick zu tun - der name blieb durch copy und paste, console.log erscheint im browser log unter entwicklertools - gut für debuggen):

          const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, !states[objID].val); }); } </script>'
          
          

          in der html tabelle ist der button hier definiert (darin wid function aufgerufen, wichtig ist der valButton wert - das ist der datenpunkt, die button def musst du definieren - hier ist ein emoji (symbolSwitch), val6 ist der eintrag in der tabelle (letzte spalte) :

           val6="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+symbolSwitch+"</button> <font color=\""+farbeSchalterOFF+"\"> "+"OFF";
          

          aus einem anderen script - kein toggle sondern setze "true"

          'function setOnSort( myvalue ) {	var Self = this;  Self.servConn.setState(\''+dpSort+'\', myvalue); Self.servConn.setState(\''+dpRefresh+'\', true) }'
          

          hier wird eine zahl gesetzt (am ende der function)(auch hier ist der function name schlecht gewählt)(am ende wird dpRefresh gesetzt - auf diesen dp wird auch im script getriggert und die tabelle neu aufgebaut - da die tabelle durch diese function anders sortiert werden soll und daher neu aufgebaut werden muss, hier ist es kein button sondern input-feld):

           function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, !states[objID].val); }); Self.servConn.setState(\''+dpRefresh+'\', '+sortNumber+'); } '
          

          dein beispiel - du brauchst einen zweiten dp (zeichenkette)

          in der vis wird der ONE_TABLE dp als binding im html widget angegeben

          Image 2.png

          sieht dann so aus in der vis-runtime:

          anim-gif4.gif

          let valButton="javascript.0.TEST.ONE_OUTPUT"
          let symbolSwitch="🔄"
          let farbeSchalterOFF="lightblue"
          function testOneState() {
              
              let ausgabeTestOneButton = '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, !states[objID].val); }); } </script>';
              
             let  val6="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+symbolSwitch+"</button> <font color=\""+farbeSchalterOFF+"\"> "+"SCHALTE HIER";
            log(val6.concat(ausgabeTestOneButton))
              setState('javascript.0.TEST.ONE_TABLE', val6.concat(ausgabeTestOneButton));
          }
           
          schedule("*/10 * * * * *", testOneState);
          

          Image 3.png

          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 Reply Last reply
          0
          • OliverIOO OliverIO

            @dkerkow
            Der code läuft ja im Browser.
            Da gibt es setState nicht.
            Dort heißt der Befehl

            vis.setValue(state, value);
            
            liv-in-skyL Offline
            liv-in-skyL Offline
            liv-in-sky
            wrote on last edited by
            #9

            @OliverIO

            wegen dem vis.setState....

            kann ich diesen befehl z.b in einem binding verwenden ?

            hst du ein beispiel dafür

            habe mal in der vis getestet:

            ein html widget mit diesem inhalt:

            
            <style>
            
            
            /* Style the button */
            button {
              isplay: inline-block;
              padding: 15px 25px;
              font-size: 18px;
              cursor: pointer;
              text-align: center;
              text-decoration: none;
              outline: none;
              color: #0efbf6;
              background-color: black;
              border: none;
              border-radius: 5px;
              /*box-shadow: 0 2px #0efbf6;*/
            }
            </style>
            
            
            
            
            <button onclick="mytest();">CLICK</button>
            
            
            

            und unter dem scripte tab in der vis:

            function mytest() {console.log("bin da");
                vis.setState("javascript.0.TEST.ONE_OUTPUT",true)}
            

            der output im browser:

            Image 4.png

            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

            OliverIOO 1 Reply Last reply
            0
            • liv-in-skyL liv-in-sky

              @OliverIO

              wegen dem vis.setState....

              kann ich diesen befehl z.b in einem binding verwenden ?

              hst du ein beispiel dafür

              habe mal in der vis getestet:

              ein html widget mit diesem inhalt:

              
              <style>
              
              
              /* Style the button */
              button {
                isplay: inline-block;
                padding: 15px 25px;
                font-size: 18px;
                cursor: pointer;
                text-align: center;
                text-decoration: none;
                outline: none;
                color: #0efbf6;
                background-color: black;
                border: none;
                border-radius: 5px;
                /*box-shadow: 0 2px #0efbf6;*/
              }
              </style>
              
              
              
              
              <button onclick="mytest();">CLICK</button>
              
              
              

              und unter dem scripte tab in der vis:

              function mytest() {console.log("bin da");
                  vis.setState("javascript.0.TEST.ONE_OUTPUT",true)}
              

              der output im browser:

              Image 4.png

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              wrote on last edited by
              #10

              @liv-in-sky

              Weiß, das ist etwas blöd gelöst.
              Auf dem Server in der JavaScript Engine = setState
              Auf dem. Client I’m Browser = vis.setValue

              Schön wäre, wenn man auf dem Server und dem. Client die selben Befehle zur Verfügung hat

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              liv-in-skyL 1 Reply Last reply
              0
              • OliverIOO OliverIO

                @liv-in-sky

                Weiß, das ist etwas blöd gelöst.
                Auf dem Server in der JavaScript Engine = setState
                Auf dem. Client I’m Browser = vis.setValue

                Schön wäre, wenn man auf dem Server und dem. Client die selben Befehle zur Verfügung hat

                liv-in-skyL Offline
                liv-in-skyL Offline
                liv-in-sky
                wrote on last edited by
                #11

                @OliverIO mit client meinst du den" scripte tab

                "Image 1.png

                in der vis - da kommt der fehler

                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

                OliverIOO 1 Reply Last reply
                0
                • liv-in-skyL liv-in-sky

                  @OliverIO mit client meinst du den" scripte tab

                  "Image 1.png

                  in der vis - da kommt der fehler

                  OliverIOO Offline
                  OliverIOO Offline
                  OliverIO
                  wrote on last edited by
                  #12

                  @liv-in-sky
                  You didn’t get it
                  Du hast da den falschen Befehl.
                  Tausche vis.setState gegen vis.setValue aus

                  Meine Adapter und Widgets
                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                  Links im Profil

                  liv-in-skyL 2 Replies Last reply
                  0
                  • OliverIOO OliverIO

                    @liv-in-sky
                    You didn’t get it
                    Du hast da den falschen Befehl.
                    Tausche vis.setState gegen vis.setValue aus

                    liv-in-skyL Offline
                    liv-in-skyL Offline
                    liv-in-sky
                    wrote on last edited by liv-in-sky
                    #13

                    @OliverIO sorry - oh mann bin ich ...

                    ich teste mal

                    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 Reply Last reply
                    0
                    • OliverIOO OliverIO

                      @liv-in-sky
                      You didn’t get it
                      Du hast da den falschen Befehl.
                      Tausche vis.setState gegen vis.setValue aus

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      wrote on last edited by
                      #14

                      @OliverIO

                      danke - alles gut funktioniert - gibt es auch vis.getValue ?

                      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

                      OliverIOO 1 Reply Last reply
                      0
                      • liv-in-skyL liv-in-sky

                        @OliverIO

                        danke - alles gut funktioniert - gibt es auch vis.getValue ?

                        OliverIOO Offline
                        OliverIOO Offline
                        OliverIO
                        wrote on last edited by OliverIO
                        #15

                        @liv-in-sky das kommt darauf an ob der datenpunkt im Browser bereits abonniert ist.
                        Abonniert heißt, das der datenpunkt in einem anderen Widget schon mal bekannt gemacht worden ist.

                        Wenn ja, dann kann der Wert wie folgt abgerufen werden

                        vis.states.attr(datenpunkt.val');

                        Anstatt .val kannst du auch .ts angeben um bspw die letzte Änderung auszulesen. Es gibt noch weitere extensions. Da musst du in die Iobroker Doku mal schauen.

                        Über die chromed developer tools kannst du mal vis.states in watch Eingeben und schauen, da müsste ein Array mit allen abonnierten datenpunkten sein.

                        Wenn der datenpunkt noch nicht abonniert wurde wird es etwas komplexer, insbesondere, wenn du per callback informiert werden wills, wenn sich ein Wert ändert.

                        Dazu kannst du mal in meine Adapter widgets rssfeed oder openligadb schauen. Allerdings ist vis keine einfache Kost. Ich habe viel Zeit im debugger verbracht um ein paar Funktionsweisen nachzuvollziehen.

                        Meine Adapter und Widgets
                        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                        Links im Profil

                        liv-in-skyL 1 Reply Last reply
                        0
                        • OliverIOO OliverIO

                          @liv-in-sky das kommt darauf an ob der datenpunkt im Browser bereits abonniert ist.
                          Abonniert heißt, das der datenpunkt in einem anderen Widget schon mal bekannt gemacht worden ist.

                          Wenn ja, dann kann der Wert wie folgt abgerufen werden

                          vis.states.attr(datenpunkt.val');

                          Anstatt .val kannst du auch .ts angeben um bspw die letzte Änderung auszulesen. Es gibt noch weitere extensions. Da musst du in die Iobroker Doku mal schauen.

                          Über die chromed developer tools kannst du mal vis.states in watch Eingeben und schauen, da müsste ein Array mit allen abonnierten datenpunkten sein.

                          Wenn der datenpunkt noch nicht abonniert wurde wird es etwas komplexer, insbesondere, wenn du per callback informiert werden wills, wenn sich ein Wert ändert.

                          Dazu kannst du mal in meine Adapter widgets rssfeed oder openligadb schauen. Allerdings ist vis keine einfache Kost. Ich habe viel Zeit im debugger verbracht um ein paar Funktionsweisen nachzuvollziehen.

                          liv-in-skyL Offline
                          liv-in-skyL Offline
                          liv-in-sky
                          wrote on last edited by
                          #16

                          @OliverIO

                          ja hört sich strange an - aber tausend dank für die erläuterung

                          muss da morgen mal in ruhe noch mal "spielen"

                          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 Reply Last reply
                          0
                          • OliverIOO OliverIO

                            @dkerkow
                            Der code läuft ja im Browser.
                            Da gibt es setState nicht.
                            Dort heißt der Befehl

                            vis.setValue(state, value);
                            
                            D Offline
                            D Offline
                            dkerkow
                            wrote on last edited by
                            #17

                            @OliverIO sagte in Per js generierte Ausgabe mit funktionsfähigem Button:

                            vis.setValue(state, value);

                            Spitze! Genau das war die fehlende Antwort bei mir.
                            Funktioniert.

                            1 Reply Last reply
                            0
                            Reply
                            • Reply as topic
                            Log in to reply
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            375

                            Online

                            32.7k

                            Users

                            82.5k

                            Topics

                            1.3m

                            Posts
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                            ioBroker Community 2014-2025
                            logo
                            • Login

                            • Don't have an account? Register

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Home
                            • Recent
                            • Tags
                            • Unread 0
                            • Categories
                            • Unreplied
                            • Popular
                            • GitHub
                            • Docu
                            • Hilfe