Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Die Wort-Uhr

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Die Wort-Uhr

    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      Langer @liv-in-sky last edited by

      @liv-in-sky

      Trotz Wiederstand meiner besseren Hälfte konnte ich mich durch setzten und Deine Wünsche zu mindestens in der Runden-Uhr erfüllen.
      Alles was an der Uhr auch nur nach Farbe aussieht ist jetzt im Script einstellbar, sogar beim Rand kann die Farbe geändert werden.

      Hier Bilder:
      Uhr 1.png
      Uhr 2.png

      hier die geänderten Scripte: als Text

      Anlegen der Datenpunkte:
      DP_Uhr.txt

      Die Uhr
      Die_Uhr.txt

      Die View
      Uhr_Rund.txt

      Hoffe ich habe nichts vergessen.

      Mfg
      Wastl

      L liv-in-sky 2 Replies Last reply Reply Quote 2
      • L
        Langer @Langer last edited by

        Hallo zusammen

        auf Wunsch wurde der Beitrag von "Eine besondere Uhr" in "Die Wort-Uhr" umbenannt!!

        MfG
        Wastl

        1 Reply Last reply Reply Quote 0
        • liv-in-sky
          liv-in-sky @Langer last edited by

          @langer erstmal danke läuft schon:-)

          Image 1.png

          könnte es sein, dass das rote "VOR" und die wort-zahlen nicht über die variablen änderbar ist -?

          müßte doch das sein ?

          Image 2.png

          hast du eine idee, wie man die uhr etwas kleiner bekommen könnte - habe es mit gruppieren und scale versucht - das funktioniert leider nicht

          L 1 Reply Last reply Reply Quote 0
          • L
            Langer @liv-in-sky last edited by

            @liv-in-sky

            kein Problem.

            Zu "könnte es sein, dass das rote "VOR" und die wort-zahlen nicht über die variablen änderbar ist -?"

            Erschieß mich nicht, habe ein kleines Problem übersehen. Wird nach dem Mittag geändert, SORRY!!!

            Zu "hast du eine idee, wie man die uhr etwas kleiner bekommen könnte - habe es mit gruppieren und scale versucht - das funktioniert leider nicht"

            Wie schon mal geschrieben, bin absoluter Neuling in JavaScript und VIS. Habe eine Idee wie man das lösen kann, aber dafür muß ich erst eine Frage formulieren und hier im Forum nach Hilfe suchen. Sobald dies geklärt ist melde ich mich.

            MfG
            Wastl

            liv-in-sky 1 Reply Last reply Reply Quote 1
            • liv-in-sky
              liv-in-sky @Langer last edited by

              @langer

              ein SORRY ist nicht nötig

              wenn zeit ist ist zeit - stress dich nicht 🙂

              L 1 Reply Last reply Reply Quote 1
              • L
                Langer @liv-in-sky last edited by

                @liv-in-sky

                Hallo, hier nochmal das Script:

                let cronSekunde     = '* * * * * *';                                                    // Wird jede Sekunde ausgeführt
                let cronMinute      = "*/1 * * * *";                                                    // Wird jede Minute ausgeführt       
                let cronText        = "*/5 * * * *";                                                    // Wird alle 5 Minuten ausgeführt                                  
                
                let farbeSekunde    = 'white';                                                     //Farbe LED-Sekunde außer 5 und 10
                let farbe5Sekunde   = 'blue';                                                        //Farbe LED-Sekunde alle 5 Sekunden
                let farbe10Sekunde  = 'green';                                                       //Farbe LED-Sekunde alle 10 Sekunden
                let farbeSekundeAus = 'black';  	                                                //Farbe LED-Sekunde inaktiv
                
                let farbeMinuteAus  = '2e2e2e';                                                     //Farbe LED-Minuten inaktive
                let farbeMinuteAn   = 'white';                                                     //Farbe LED-Minuten aktive
                
                let farbeStundeAus = '#2e2e2e';                                                     //Farbe Stunde Text inaktiv zb NEUN, Zehn
                let farbeStundeAn  = 'blue';                                                       //Farbe Stunde Text aktiv
                
                let farbeTextAus   = '#2e2e2e';                                                       //Farbe Text inaktiv zb. NACH, VOR 
                let farbeTextAn    = 'cyan';                                                          //Farbe Text aktiv
                
                let farbeEsIstAn   = 'cyan';                                                         //Farbe Text aktiv
                
                let farbeFuellText = '#2e2e2e';                                                        //Farbe Fülltext
                
                let farbeDatum = 'red';                                                              //Farbe Datum
                
                let farbeLaufschrift = 'cyan';                                                        //Farbe Laufschrift
                
                let farbeRand = 'cyan';                                                               //Farbe Border
                
                let farbe = 'black';
                
                let dp = "0_userdata.0.vis.Uhr.";                                                   //Erster Teil des Datenpunktes
                
                initUhr();
                
                showSekunden();
                showMinute();
                showText();
                
                async function initUhr() {
                    clearSekunden();
                    clearMinuten();
                    clearUhrText();
                    setState(dp + 'Farbe.stundeAus' , farbeStundeAus, true); 
                    setState(dp + 'Farbe.stundeAn' , farbeStundeAn, true); 
                    setState(dp + 'Farbe.textAus' , farbeTextAus, true); 
                    setState(dp + 'Farbe.textAn' , farbeTextAn, true); 
                    setState(dp + 'Farbe.esIstAn' , farbeEsIstAn, true); 
                    setState(dp + 'Farbe.fuelltext' , farbeFuellText, true); 
                    setState(dp + 'Datum.Farbe' , farbeDatum, true); 
                    setState(dp + 'Laufschrift.Farbe' , farbeLaufschrift, true); 
                    setState(dp + 'Rand.Farbe' , farbeRand, true); 
                };
                
                async function showSekunden() {                                                     //LED Sekunden anzeigen  
                
                    let sekunde = new Date().getSeconds();                                          //Aktuelle Sekunde holen
                  
                    let dp_Sekunde = '';
                
                    dp_Sekunde = dp + 'Sekunden.s' + sekunde.toString();    	                            //Datenpunkt festlegen
                    
                    if (sekunde > 0) {  	                                                                //Ist die Sekunde > 1 wird die 
                        setState(dp + 'Sekunden.s' + (sekunde - 1).toString(), farbeSekundeAus, true);      //LED Sekunde - 1 ausgeblendet
                    } else {
                        setState(dp + 'Sekunden.s59' , farbeSekundeAus, true);                              //Ist die Sekunde < 1 wird die 
                    };                                                                              //LED 59 Sekunde ausgeblendet
                    
                    if (sekunde % 10 == 0) {farbe = farbe10Sekunde} 
                    else if (sekunde % 5 == 0) {farbe = farbe5Sekunde} 
                    else {farbe = farbeSekunde};
                
                    setState(dp_Sekunde, farbe, true);                                       //LED Sekunde wird angezeigt
                };
                
                async function showMinute() {                                                       //LED Minuten anzeigen
                
                    let minute = new Date().getMinutes();                                           //Aktuelle Minute holen
                    let rest = minute % 5;                                                          //Minute durch 5 teilen und den Rest speichern
                   
                    if (rest == 0) {                                                                //Ist der rest 0 alle DP auf false setzten
                        clearMinuten();
                    } else if (rest == 1) {                                                         //Minute = 6 oder 11 oder 16 usw. aktiv
                        setState(dp + 'Minuten.Minute_1', farbeMinuteAn, true);                     
                    } else if (rest == 2) {                                                         //Minute = 7 oder 12 oder 17 usw. aktiv
                        setState(dp + 'Minuten.Minute_2', farbeMinuteAn, true);                     //usw.
                    } else if (rest == 3) {                                                         
                        setState(dp + 'Minuten.Minute_3', farbeMinuteAn, true);
                    } else if (rest == 4) {
                        setState(dp + 'Minuten.Minute_4', farbeMinuteAn, true);
                    };
                };
                
                async function showText() {                                                         //Zeit als Text wird angezeigt
                
                    let minute = new Date().getMinutes();                                           //Aktuelle Minute holen
                    let stunde = new Date().getHours();                                             //Aktuelle Stunde holen
                   
                    clearUhrText();                                                                     //alle dp in text auf false setzten
                
                    setState(dp + 'Text.Es_Ist', true, true);
                
                    if (minute >= 5 && minute <= 9) {                                               //Uhr Texte Minuten erstellen Start
                        setState(dp + 'Text.fuenf_Minuten', true, true);
                        setState(dp + 'Text.nach', true, true);
                    } else if (minute >= 10 && minute <= 14) {
                        setState(dp + 'Text.zehn_Minuten', true, true);
                        setState(dp + 'Text.nach', true, true);
                    } else if (minute >= 15 && minute <= 19) {
                        setState(dp + 'Text.viertel', true, true);
                        setState(dp + 'Text.nach', true, true);
                    } else if (minute >= 20 && minute <= 24) {
                        setState(dp + 'Text.zwanzig', true, true);
                        setState(dp + 'Text.nach', true, true);
                    } else if (minute >= 25 && minute <= 29) {
                        setState(dp + 'Text.fuenf_Minuten', true, true);
                        setState(dp + 'Text.vor', true, true);
                        setState(dp + 'Text.halb', true, true);
                    } else if (minute >= 30 && minute <= 34) {
                        setState(dp + 'Text.halb', true, true);
                    } else if (minute >= 35 && minute <= 39) {
                        setState(dp + 'Text.fuenf_Minuten', true, true);
                        setState(dp + 'Text.nach', true, true);
                        setState(dp + 'Text.halb', true, true);
                    } else if (minute >= 40 && minute <= 44) {
                        setState(dp + 'Text.zwanzig', true, true);
                        setState(dp + 'Text.vor', true, true);
                    } else if (minute >= 45 && minute <= 49) {
                        setState(dp + 'Text.viertel', true, true);
                        setState(dp + 'Text.vor', true, true);
                    } else if (minute >= 50 && minute <= 54) {
                        setState(dp + 'Text.zehn_Minuten', true, true);
                        setState(dp + 'Text.vor', true, true);
                    } else if (minute >= 55 && minute <= 59) {
                        setState(dp + 'Text.fuenf_Minuten', true, true);
                        setState(dp + 'Text.vor', true, true);                                      //Uhr Texte Minuten erstellen Ende
                    };
                
                    if (stunde > 12 && stunde < 24) {                                               //Wenn Stunde > 12 und kleiner 24 ist
                        stunde -= 12;                                                               //12 abziehen. Nur 12 Stunden anzeige
                    };
                
                    if (minute > 24) {                                                              //Von 0 - 24 Text nach stunde
                        stunde += 1;                                                                //Von 25 - 59 Text vor stunde
                    };
                    
                    if (minute >= 0 && minute <= 4) {                                               //Ist Minute 0 - 4 dann stunde + uhr
                        setState(dp + 'Text.uhr', true, true);        
                    };
                
                    if ((stunde == 1 || stunde == 13) && minute == 0) {                                               //Uhr Texte Stunde erstellen Start
                        setState(dp + 'Text.ein', true, true);
                    } else if ((stunde == 1 || stunde == 13) && minute > 0) {
                        setState(dp + 'Text.ein', true, true);
                        setState(dp + 'Text.s', true, true);
                    } else if (stunde == 2) {
                        setState(dp + 'Text.zwei', true, true);
                    } else if (stunde == 3) {
                        setState(dp + 'Text.drei', true, true);
                    } else if (stunde == 4) {
                        setState(dp + 'Text.vier', true, true);
                    } else if (stunde == 5) {
                        setState(dp + 'Text.f', true, true);
                        setState(dp + 'Text.fuenf_Stunde', true, true);
                    } else if (stunde == 6) {
                        setState(dp + 'Text.sechs', true, true);
                    } else if (stunde == 7) {
                        setState(dp + 'Text.sieben', true, true);
                    } else if (stunde == 8) {
                        setState(dp + 'Text.acht', true, true);
                    } else if (stunde == 9) {
                        setState(dp + 'Text.n', true, true);
                        setState(dp + 'Text.neun', true, true);
                    } else if (stunde == 10) {
                        setState(dp + 'Text.zehn_Stunde', true, true);
                        setState(dp + 'Text.n', true, true);
                    } else if (stunde == 11) {
                        setState(dp + 'Text.f', true, true);
                        setState(dp + 'Text.elf', true, true);
                    } else if (stunde == 12 || stunde == 0) {
                        setState(dp + 'Text.zwoelf', true, true);                                   //Uhr Texte Stunde erstellen Ende
                    };
                };
                
                function clearSekunden() {                                                          //LED Sekunden werden ausgeblendet   
                    let sekundenSelector = $(dp + "Sekunden.*");
                    sekundenSelector.each(function(id, i) {
                        setState(id, farbeSekundeAus, true);
                    });
                };
                
                function clearMinuten() {                                                          //LED Sekunden werden ausgeblendet   
                    let minutenSelector = $(dp + "Minuten.*");
                    minutenSelector.each(function(id, i) {
                        setState(id, farbeMinuteAus, true);
                    });
                };
                
                function clearUhrText() {                                                               //Text zurücksetzten   
                    let textSelector = $(dp + "Text.*");
                    textSelector.each(function(id, i) {
                        setState(id, false, true);
                    });
                };
                
                schedule(cronSekunde, function () {showSekunden();});                               //Funktion Sekunden anzeigen aufrufen, jede Sekunde
                
                schedule(cronMinute, function () {showMinute();});                                  //Funktion Minute anzeigen aufrufen, jede Minute
                
                schedule(cronText, function () {showText();});                                      //Funktion Text anzeigen aufrufen, alle 5 Minuten
                
                

                Änderung in Zeile 43 - 51.

                MfG
                Wastl

                liv-in-sky 1 Reply Last reply Reply Quote 1
                • liv-in-sky
                  liv-in-sky @Langer last edited by

                  @langer vielen dank - funktioniert

                  1 Reply Last reply Reply Quote 0
                  • sigi234
                    sigi234 Forum Testing Most Active @Langer last edited by sigi234

                    @langer

                    Wo ist mein Fehler?

                    Screenshot (4022).png

                    erledigt.

                    L 1 Reply Last reply Reply Quote 0
                    • L
                      Langer @sigi234 last edited by

                      Hallo zusammen,

                      auf Grund einer Frage, ob man die Uhr in der Größe verändern kann habe ich selbst folgende Frage:

                      Die Uhr bestehend aus folgenden Widget's:

                      110 x Bool HTML, timeandweather - SimpleDate, 60 x Border (LED's - Sekunden) und noch ein paar.

                      Alle Positionen der Widget's sind für diese Anzeigengröße (610px x 610px) berechnet worden.

                      Nun möchte ich folgendes machen:

                      Über ein "jqui Input" wird eine Zahl (Durchmesser der Uhr) eingegeben und ein Script wird gestartet.
                      In diesem Script möchte ich die größe, position und Textgröße aller Widget's der Uhr dem neuen Durchmesser der Uhr anpassen.

                      Könnte man das in VIS mit einem Script überhaupt lösen?

                      Oder

                      Könnte man aus der Uhr ein Widget machen um dies zu lösen?

                      Für Antworten würde ich mich freuen.

                      Sollte es noch andere Möglichkeiten geben, bitte um Mitteilung, ist noch alles Neuland für mich!

                      Ich hoffe das die Frage einigermaßen Verständlich dargestellt wurde.

                      MfG
                      Wastl

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

                        @langer sagte in Die Wort-Uhr:

                        Könnte man aus der Uhr ein Widget machen um dies zu lösen?

                        ich hab nie probiert wie gut das klappt, aber man kann alle widgets markieren un zu einer Gruppe zusammenfassen.

                        dann kann man die Gruppe in der Größe anpassen, dabei "sollten alle" Elemte skaliert werden.

                        Anschließend kann man die Gruppe wieder auflösen um einzelne Elemente alleine zu bearbeiten.

                        liv-in-sky 1 Reply Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @Homoran last edited by liv-in-sky

                          @homoran hatte ich getestest - aber es verschiebt sich beim gruppieren - vielleicht könnte das noch jmd anders testen

                          beispiel nach gruppieren:

                          AApossis (82).gif

                          L 1 Reply Last reply Reply Quote 0
                          • L
                            Langer @liv-in-sky last edited by

                            @liv-in-sky
                            @Homoran

                            Habe es auch gerade probiert, Horror!!

                            MfG
                            Wastl

                            liv-in-sky 1 Reply Last reply Reply Quote 0
                            • liv-in-sky
                              liv-in-sky @Langer last edited by

                              @langer

                              habe mal auf die sekunden verzichtet ( die springen leider nicht sekündlich bei meinen "alten" tablets

                              gruppiert und "gescaled"

                              AApossis (83).gif

                              L 1 Reply Last reply Reply Quote 0
                              • L
                                Langer @liv-in-sky last edited by

                                @liv-in-sky

                                Hallo,

                                habe gerade etwas getestet, aber bevor ich mir das antue meine Frage an die Runde:

                                Ich habe 40 Border Widget genommen, ein jqui-Input und ein Color Slider.

                                Über das jqui-Input gebe ich die Größe der Border ein, über Color-Slider den Background. Beides über Datenpunkte.

                                Das View gestartet und live Größe und Farbe der Border_Widget's verändert. Dies funktionierte ohne merkbarer Verzögerung.

                                Nun meine Frage:
                                Es werden ca. 700 Datenpunkte für eine Uhr benötigt um diese in beliebiger Größe und Farbe dar zustellen. Die Datenpunkte werden left, top, width, height, backcolor des Border-Widget zugeordnet.
                                Wie sieht es da mit der Performens aus???

                                Bilder:
                                test2.png
                                test1.png

                                MfG
                                Wastl

                                liv-in-sky 1 Reply Last reply Reply Quote 0
                                • liv-in-sky
                                  liv-in-sky @Langer last edited by

                                  @langer

                                  700 datenpunkte ist echt viel - ich kann die performance leider nicht einschätzen - hört sich nach arbeit an 😞

                                  ich teste gerade für die sekunden folgende ansicht (rechts)- dann kann ich das ganze besser verkleinern

                                  AApossis (84).gif

                                  Homoran 1 Reply Last reply Reply Quote 0
                                  • Homoran
                                    Homoran Global Moderator Administrators @liv-in-sky last edited by

                                    @liv-in-sky sagte in Die Wort-Uhr:

                                    ich teste gerade für die sekunden folgende ansicht (rechts)

                                    [OT]
                                    so was wie links suche ich noch für mein go-e widget.
                                    Screenshot_20210731-170913_Polaris Office.jpg
                                    https://go-e.co/bedienungsanleitung-handbuch-de-go-echarger-home-11_22-kw/

                                    müsste dann da hinein
                                    Screenshot_20210731-171308_Firefox.jpg

                                    gerne in anderem Thread

                                    liv-in-sky 1 Reply Last reply Reply Quote 0
                                    • liv-in-sky
                                      liv-in-sky @Homoran last edited by

                                      @homoran

                                      theoretisch möglich einen "led kreis" zu erschaffen, der so aufgebaut ist, wie @langer das aufgebaut hat. anstatt sekunden muss halt eine andere logic die punkte ansteuern

                                      bei dir wären es ung. 32 punkte. das nervige ist halt das anordnen der einzelnen punkte in der vis und dann wieder das problem mit der größenänderung

                                      genial wäre da ein html teil mit script, der das kann, so was wie das hier: https://aurelio.me/radial/ oder :

                                      http://jsfiddle.net/vr60dLth/ - hier kann man direkt im javascriptteil z.b die var N= ... setzen (anschliessend "run" drücken) und die anzahl ändert sich - wenn man da noch die farbe der einzelnen punkte definieren könnte, wäre das so eine lösung

                                      leider überfordert mich das - da müßte ein richtiger profi her - wäre wohl was für einen "widget" programmierer

                                      ansonsten müßte man ein teilscript schreiben, was die einzelnen punkte steuern kann (farbe) - als js-function. die ansteuerung der punkte könnte dann über blockly gemacht werden und das erstellen der vis muss jeder selber machen - je nach anzahl , die benötigt wird - evtl kann man die einzelne punkte mit einem html widget machen und dann funktioniert das gruppieren wieder

                                      Homoran 1 Reply Last reply Reply Quote 2
                                      • Homoran
                                        Homoran Global Moderator Administrators @liv-in-sky last edited by

                                        @liv-in-sky
                                        Danke!

                                        @liv-in-sky sagte in Die Wort-Uhr:

                                        da müßte ein richtiger profi her - wäre wohl was für einen "widget" programmierer

                                        und das dann direkt im go-e Adapter integrieren.
                                        Dann haben wir keine Arbeit mehr

                                        nochmals Danke und [/OT]

                                        liv-in-sky 1 Reply Last reply Reply Quote 0
                                        • liv-in-sky
                                          liv-in-sky @Homoran last edited by

                                          @homoran nicht nur für diesen adapter - einen led kreis, mit verschiedenen farben, kann man für vieles brauchen

                                          OliverIO 1 Reply Last reply Reply Quote 0
                                          • OliverIO
                                            OliverIO @liv-in-sky last edited by OliverIO

                                            @liv-in-sky @Homoran

                                            ich habe da mal was probiert.
                                            Das ist dann halt erstmal nur ein Schmalspur widget, für das ich nicht einen eigenen adapter machen wollte, sondern einer meiner vorhandenen wiederverwenden wollte.

                                            e70de685-6576-4090-b359-9846f8dc4c8f-image.png
                                            als grundvoraussetzung muss man dafür den adapter
                                            iobroker.rssfeed von latest in version 0.9 installieren.
                                            In diesem habe ich bereits seit längerem ein, meiner Meinung nach sehr flexibles widget mit drin. Details können hier nachgelesen werden:
                                            https://forum.iobroker.net/topic/31521/test-widget-json-template?_=1627822900277
                                            Dieses widget bietet ein template system an, mit dem diverse daten in html/javascript und css integriert und oder transformiert werden kann.

                                            Nach Installation muss man in vis das widget JSON Template2 hinzufügen.
                                            Danach müssen die folgenden 2 Attribute des widgets gefüllt werden:

                                            json_template

                                            <style> 
                                            .ledback {
                                               background-color: green;
                                               border-radius: 50%;
                                               position: relative;
                                            }
                                            .ledfront {
                                               position: absolute;
                                               border-radius: 50%;
                                               background-color: red;
                                            }
                                            .ledfront.active {
                                               background-color: blue;
                                            }
                                               
                                            </style>
                                            <%
                                            //debugger;
                                            var iobLed = {
                                               widgetID:   "w00014",
                                               count:      16,
                                               frontR:     5,
                                               position:     1,
                                               pi:         Math.PI,
                                               active:     Object.values(dp)[0]||"",
                                               start: function() {
                                                   var $back = $('#' + iobLed.widgetID + " .ledback");
                                                   if (!$back.length) {
                                                       return setTimeout(function () {
                                                           this.start();
                                                       }.bind(this), 100);
                                                   }
                                                   var $widget = $('#' + this.widgetID);
                                                   $back.empty();
                                                   var backR = Math.min($widget.height(),$widget.width())/2;
                                                   $back.width(backR*2).height(backR*2);
                                                   var cnt=0;
                                                   radius = backR*this.position-this.frontR;
                                                   //debugger;
                                                   var active = this.parse(this.active);
                                                   for(var angle = 0; angle < 2 * this.pi; angle += 2 * this.pi / this.count) {
                                                       $back.append(
                                                           $('<div class="ledfront'+(active.includes(cnt)?" active":"")+'">').css({
                                                            left: backR - this.frontR + radius * Math.cos(angle-this.pi/2) + 'px',
                                                            top:  backR - this.frontR + radius * Math.sin(angle-this.pi/2) + 'px',
                                                            width:  this.frontR * 2 + 'px',
                                                            height: this.frontR * 2 + 'px'
                                                           })
                                                       );
                                                       cnt++;
                                                   }
                                               },
                                               parse: function(string) {
                                                   const numbers = [];
                                                   for (const [, beginStr, endStr] of string.matchAll(/(\d+)(?:-(\d+))?/g)) {
                                                       const [begin, end] = [beginStr, endStr].map(Number);
                                                       numbers.push(begin);
                                                       if (endStr !== undefined) {
                                                           for (let num = begin + 1; num <= end; num++) {
                                                             numbers.push(num);
                                                         }
                                                       }
                                                   }
                                                   return numbers;
                                               }
                                            }
                                            //debugger;
                                            $('#' + iobLed.widgetID + " .ledback").remove();
                                            iobLed.start();
                                            %>
                                            <div class="ledback"></div>
                                            
                                            

                                            und

                                            rss_dp[1] mit einem beliebigen datenpunkt mit typ Text

                                            Die Farben und Anzahl der LEDs können im Template gepflegt werden:

                                            widgetID:     "w00001",
                                            count:        16,
                                            frontR:       5,
                                            position:     1,
                                            

                                            widgetID: aktuell kann das template sich in vis noch nicht selbst finden. daher muss die widgetID des widgets hier eingegeben werden
                                            count: Die Anzahl der LEDs
                                            frontR: der Radius einer LED
                                            position: Die Position der LEDs. 1=ganz außen, .5 die hälfte des Radius des widgets, 0 ganz innen, macht aber kein Sinn.

                                            Das Layout kann per css ebenfalls im Template angepasst werden:

                                            <style> 
                                            .ledback {
                                                background-color: green;
                                                border-radius: 50%;
                                                position: relative;
                                            }
                                            .ledfront {
                                                position: absolute;
                                                border-radius: 50%;
                                                background-color: red;
                                            }
                                            .ledfront.active {
                                                background-color: blue;
                                            }
                                                
                                            </style>
                                            

                                            ledback ist der runde Hintergrund
                                            ledfront ist das design einer einzelnen led
                                            ledfront.active ist das design einer aktiven led

                                            die postion argumente müssen so bleiben, der Rest kann angepasst werden.

                                            Im Standard sind alle LEDs aus. Also das Design von ledfront wird angezeigt.
                                            Zum Einschalten ein oder mehrerer LEDs kann der verknüpfte Datenpunkt verwendet werden. Die folgende Auflistung hat die Basis 0, also die erste LED hat die Nummer 0
                                            Zum aktivieren von LED 0, LED2 und LED 5-8 kann in den Datenpunkt folgendes eingetragen werden:

                                            0,2,5-8
                                            
                                            sigi234 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            570
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            9
                                            53
                                            4456
                                            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