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

                                787
                                Online

                                32.1k
                                Users

                                80.6k
                                Topics

                                1.3m
                                Posts

                                5
                                21
                                3459
                                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