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. Skripten / Logik
  4. JavaScript
  5. [gelöst] Per js generierte Ausgabe mit Button

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    11
    1
    343

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.6k

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

[gelöst] Per js generierte Ausgabe mit Button

Geplant Angeheftet Gesperrt Verschoben JavaScript
17 Beiträge 3 Kommentatoren 1.4k 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.
  • 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
    schrieb am zuletzt editiert von
    #4

    @liv-in-sky
    Danke, das versuche ich gleich morgen!

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

                          @OliverIO

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

                          OliverIOO Offline
                          OliverIOO Offline
                          OliverIO
                          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #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 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

                              732

                              Online

                              32.5k

                              Benutzer

                              81.7k

                              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