Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Frage] Widget-Inhalte im zeitlichen Wechsel anzeigen

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    [Frage] Widget-Inhalte im zeitlichen Wechsel anzeigen

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dtp last edited by

      Super. Danke. Werde ich mal ausprobieren.

      Gruß,

      Thorsten

      1 Reply Last reply Reply Quote 0
      • Dutchman
        Dutchman Developer Most Active Administrators last edited by

        Die Lösung von Pix ist sogar viel besser als direkte Antwort auf deine Frage 😉

        Sent from my iPhone using Tapatalk

        1 Reply Last reply Reply Quote 0
        • P
          pix last edited by

          Schön, dass es gefällt. 🙂 Ich habe das Skrip noch mal angepasst. Stichwort toFixed().

          Pix

          1 Reply Last reply Reply Quote 0
          • Alex1808
            Alex1808 last edited by

            Habe es zum "testen" laufen lassen, zeitliche Wechsel vom anzeige funktioniert ganz gut, aber werte vom Temperatur und Feuchte werden nur bei Start vom skript übermittelt und weiter ändern sich nicht.

            1 Reply Last reply Reply Quote 0
            • P
              pix last edited by

              Das ist natürlich richtig erkannt und mein Fehler :oops: . Ich nutze so eine Konstruktion zur Dastellung von Webcam-Bildern. Da ändert sich nix an der URL, deshalb läuft es. Hier muss dann noch nachgebessert werden, damit entweder

                1. bei jedem Interval (also hier alle zehn Sekunden) die Wetterdaten neu eingelesen werden:
              >! ````
              createState('Wetter', {
                  type: 'string',
                  name: 'Wetteranzeige (rotierend)',
                  def: 'leer'
              });
              >! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen';
              var idWindspeed = 'hier den HM-Datenpunkt eintragen';
              >! var wetter = [];
              function leseWetter() {
                  wetter[0] = 'Wetter: ' + getState(idLuftfeuchte).val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle
                  wetter[1] = 'Wetter: ' + getState(idWindspeed).val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen
              // weitere Zeilen nach diesem Muster einfügen 
              
              }
              >! var x=0; // Zähler auf 0
              >! setInterval(function () {
                  leseWetter();
                  setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben
                  x++; // hochzählen
                  if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen.
              }, 10 * 1000); // alle zehn Sekunden
              >! ````
              
              oder
              
                1. bei jeder Änderung der Wetterwerte, die Variable mit den Wetterdaten neu beschrieben wird:

                ! createState('Wetter', { type: 'string', name: 'Wetteranzeige (rotierend)', def: 'leer' }); ! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen'; var idWindspeed = 'hier den HM-Datenpunkt eintragen'; ! var wetter = []; ! on(idLuftfeuchte, function(data) { wetter[0] = 'Wetter: ' + data.state.val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle }); ! on(idWindspeed, function(data) { wetter[1] = 'Wetter: ' + data.state.val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen }); ! var x=0; // Zähler auf 0 ! setInterval(function () { setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben x++; // hochzählen if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen. }, 10 * 1000); // alle zehn Sekunden !

              Kann man sich aussuchen. Version 1 braucht weniger Code, Version 2 macht vielleicht deutlich, dass man nur neue Werte braucht, wenn sie sich verändert haben.

              Gruß

              Pix

              1 Reply Last reply Reply Quote 0
              • D
                dtp last edited by

                Hi Pix,

                nochmals Danke. Bin noch gar nicht zum Ausprobieren gekommen. Muss ich heute Abend mal machen.

                Kurz noch eine Frage (kenne mich mit Javascript leider nicht aus). Du schreibst "toFixed(0)" heißt zwei Dezimalstellen und toFixed(1) eine Dezimalstelle. Was muss ich denn eingeben, wenn ich gar keine Dezimalstelle haben möchte? Für die Luftfeuchte genügt mir die Angabe als ganze Zahl vollkommen aus.

                Und noch eine kleine Frage. Wenn mir der reine Zahlenwert genügt, geht das doch mit

                wetter[0] = getState(idLuftfeuchte).val.toFixed(1);
                

                oder?

                Gruß,

                Thorsten

                1 Reply Last reply Reply Quote 0
                • Homoran
                  Homoran Global Moderator Administrators last edited by

                  @dtp:

                  Was muss ich denn eingeben, wenn ich gar keine Dezimalstelle haben möchte `
                  @dtp:

                  toFixed(0) `
                  :!:

                  1 Reply Last reply Reply Quote 0
                  • P
                    pix last edited by

                    Richtig Homoran und dtp, habe den Skriptkommentar oben editiert, danke für den Hinweis.

                    http://www.w3schools.com/jsref/jsref_tofixed.asp

                    Gruß

                    Pix

                    1 Reply Last reply Reply Quote 0
                    • D
                      dtp last edited by

                      Öh, bin ich jetzt plemplem? Stand da nicht vorhin noch was von zwei Dezimalstellen? :roll: :?

                      Egal, nun macht's Sinn.

                      EDIT: Puh, doch nicht plemplem. :ugeek:

                      1 Reply Last reply Reply Quote 0
                      • Alex1808
                        Alex1808 last edited by

                        @pix:

                          1. bei jeder Änderung der Wetterwerte, die Variable mit den Wetterdaten neu beschrieben wird:

                          ! createState('Wetter', { type: 'string', name: 'Wetteranzeige (rotierend)', def: 'leer' }); ! var idLuftfeuchte = 'hier den HM-Datenpunkt eintragen'; var idWindspeed = 'hier den HM-Datenpunkt eintragen'; ! var wetter = []; ! on(idLuftfeuchte, function(data) { wetter[0] = 'Wetter: ' + data.state.val.toFixed(1) + '% Luftfeuchte'; // eine Dezimalstelle }); ! on(idWindspeed, function(data) { wetter[1] = 'Wetter: ' + data.state.val.toFixed(0) + 'km/h Geschwindigkeit'; // keine Dezimalstellen }); ! var x=0; // Zähler auf 0 ! setInterval(function () { setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben x++; // hochzählen if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen. }, 10 * 1000); // alle zehn Sekunden ! `

                        Bei der zweite Variante bekomme ich folgendes:

                        ! ````
                        javascript-0 2016-06-27 15:18:05.716 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
                        javascript-0 2016-06-27 15:17:55.689 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
                        javascript-0 2016-06-27 15:17:45.662 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
                        javascript-0 2016-06-27 15:17:35.644 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
                        javascript-0 2016-06-27 15:17:25.618 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions.
                        javascript-0 2016-06-27 15:17:15.593 warn Wrong type of javascript.0.Wetter: "undefined". Please fix, while deprecated and will not work in next versions

                        
                        Mein angepasste script:
                        
                        >! ````
                        createState('Wetter', {
                            type: 'string',
                            name: 'Wetteranzeige (rotierend)',
                            def: 'leer'
                        });
                        >! var idLuftfeuchte = 'hm-rpc.0.HEQMEINEHM.1.HUMIDITY';
                        var idTemperatur = 'hm-rpc.0.HEQMEINEHM.1.TEMPERATURE';
                        >! var wetter = [];
                        >! on(idLuftfeuchte, function(data) {
                            wetter[0] = 'Wetter: ' + data.state.val.toFixed(0) + '% Luftfeuchte';
                        });
                        >! on(idTemperatur, function(data) {
                            wetter[1] = 'Wetter: ' + data.state.val.toFixed(1) + '°C Lufttemperatur';
                        });
                        >! var x=0; // Zähler auf 0
                        >! setInterval(function () {
                            setState("javascript."+ instance + ".Wetter", wetter[x]); // rotierende Anzeige in Variable schreiben
                            x++; // hochzählen
                            if (x == wetter.length) x = 0; // wenn zahl der verschiedenen Anzeigen erreicht, wieder nullen.
                        }, 10 * 1000); // alle zehn Sekunden
                        

                        MfG

                        Alex

                        1 Reply Last reply Reply Quote 0
                        • D
                          dtp last edited by

                          Dummerweise bin ich noch nicht wieder zum Testen des Skripts gekommen. War die letzten Tage mit dem Einrichten meines neuen Surface 3 beschäftigt, das mein iPad Air 2 ablösen soll. Melde mich, sobald ich neue Erkenntnisse gewonnen habe.

                          Gruß,

                          Thorsten

                          1 Reply Last reply Reply Quote 0
                          • D
                            dtp last edited by

                            So, funktioniert super.

                            Hier mal ein kleines animiertes GIF (einfach drauf klicken, um die Animation zu sehen):

                            filename="2016-06-29 20h42_56.gif" index="0">~~

                            Danke,

                            Thorsten

                            1 Reply Last reply Reply Quote 0
                            • Alex1808
                              Alex1808 last edited by

                              @dtp:

                              So, funktioniert super. `

                              Welche Variante hast du jetzt benutzt, bei jedem Interval oder bei jeder Änderung der Werte?

                              1 Reply Last reply Reply Quote 0
                              • D
                                dtp last edited by

                                Die mit dem Intervall. Allerdings habe ich 3 Sekunden verwendet.

                                1 Reply Last reply Reply Quote 0
                                • Alex1808
                                  Alex1808 last edited by

                                  @dtp:

                                  Die mit dem Intervall. Allerdings habe ich 3 Sekunden verwendet. `

                                  Alles klar!

                                  Danke für die info.

                                  1 Reply Last reply Reply Quote 0
                                  • D
                                    dtp last edited by

                                    Hi,

                                    ich bin's noch mal. Das obige Skript von @Pix funktioniert bei mir absolut ohne Probleme. Nochmals vielen Dank dafür.

                                    Jetzt habe ich aber eine Situation, wo ich doch eher den periodischen Wechsel zweier übereinander gelegter Widgets benötige. Es geht um folgendes:

                                    Ich lasse mir mit einem Widget den Zustand des Haustürschlosses (verriegelt -> grün, entriegelt -> rot) anzeigen. Nun habe ich das noch um die Zustandsanzeige des Tagesriegels (siehe https://homematic-forum.de/forum/viewtopic.php?f=19&t=36961) erweitert. Aus Platzgründen möchte ich beides an derselben Stelle im View anzeigen. Und zwar derart, dass bei entriegeltem Tagesriegel dessen Widget mit rotem Hintergrund im sekündlichen Wechsel mit dem Haustürschloss-Widget angezeigt wird. Ist der Tagesriegel dagegen verriegelt, soll nur das Haustürschloss-Widget angezeigt werden.

                                    Gibt es eine Möglichkeit, per Javaskript direkt auf die Sichtbarkeit eines Widgets Einfluss zu nehmen?

                                    Gruß,

                                    Thorsten

                                    1 Reply Last reply Reply Quote 0
                                    • D
                                      dtp last edited by

                                      So,

                                      hab eine Lösung gefunden:

                                      // Wechselnde Widget-Anzeige für Tagesriegel und Haustürschloss
                                      
                                      createState('vis.HaustuerSwitch', {
                                        read: true,
                                        write: true,
                                        desc: 'vis.HaustuerSwitch',
                                        type: 'number',
                                        name: 'rotierende Haustüranzeige',
                                        min: 0,
                                        max: 1,
                                        def: 0,
                                      });
                                      
                                      var count = 0; // Zähler auf 0
                                      var IntervalId;
                                      
                                      on("hm-rega.0.4038", function(obj){ // HomeMatic Systemvariable "EG Haustür SV Tagesriegel"
                                        if(obj.state.val === 0){
                                          clearInterval(IntervalId);
                                          setState("javascript."+ instance + ".vis.HaustuerSwitch", 0);
                                        }
                                        else if(obj.state.val === 1){
                                          IntervalId = setInterval(function(){
                                            setState("javascript."+ instance + ".vis.HaustuerSwitch", count); // rotierende Anzeige in Variable schreiben
                                            count++; // hoch zählen
                                            if(count == 2) count = 0; // wenn Zahl der verschiedenen Anzeigen erreicht, wieder nullen.
                                          }, 2 * 1000); // alle zwei Sekunden
                                        }
                                      });
                                      

                                      Das obige Skript macht nichts anderes, als bei Änderung der HomeMatic-Systemvariablen "EG Haustür SV Tagesriegel" die Variable "javascript.0.vis.HaustuerSwitch" im zweisekündigen Wechsel von 0 auf 1 zu schalten, sofern "EG Haustür SV Tagesriegel" den Wert 1 (entriegelt) angenommen hat, und dauerhaft auf 0 zu schalten, sofern "EG Haustür SV Tagesriegel" den Wert 0 (verriegelt) angenommen hat. In den entsprechenden Widgets wird dann die Sichtbarkeit in Abhängigkeit von "javascript.0.vis.HaustuerSwitch" gesetzt, und zwar derart, dass das eine Widget sichtbar ist, wenn "javascript.0.vis.HaustuerSwitch" den Wert 0 angenommen hat, und dass das andere Widget sichtbar ist, wenn "javascript.0.vis.HaustuerSwitch" den Wert 1 angenommen hat. That's it.

                                      So sieht das Ganze dann in vis aus (rechts oben befinden sich die fraglichen Widgets).

                                      996_tagesriegel.gif

                                      Mit dem obigen Skript kann man übrigens im zeitlichen Wechsel beliebig viele übereinander liegende Widgets anzeigen. Nehmen wir an, wir wollen auf diese Weise "n" Widgets behandelt, dann müssen lediglich "if(count == n+1)…" und "max: n," im Skript gesetzt werden.

                                      Gruß,

                                      Thorsten

                                      PS.: Ein wenig Bauchschmerzen bereitete mir die lokale Variable "IntervalId", die notwendig ist, um den zeitlichen Werte-Wechsel für "javascript.0.vis.HaustuerSwitch" zu stoppen, da diese Variable erst gesetzt wird, wenn "EG Haustür SV Tagesriegel" auf 1 gesetzt wurde. Allerdings habe ich im Log bisher keine Fehler oder Warnungen diesbezüglich angezeigt bekommen.

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      850
                                      Online

                                      32.1k
                                      Users

                                      80.6k
                                      Topics

                                      1.3m
                                      Posts

                                      5
                                      21
                                      3457
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo