Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Hardware
    4. SONOFF NSPanel mit Lovelace UI

    NEWS

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

    SONOFF NSPanel mit Lovelace UI

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      TT-Tom @eierfeile last edited by TT-Tom

      @eierfeile okay mit diesen SetOption kenn ich mich nicht aus.
      Du kannst aber auch den mqtt Pfad eintragen, dann sollten sich die Farben ändern. ungefähr so mqtt.0.SmartHome.NSPanelBüro.stat.POWER1
      Das Panel Script triggert und reagiert auf ON/OFF und setzt dann aber auch die Datenpunkte unter 0_userdata...Relay.1 und alias.0....Relay.1.ACTUAL

      eierfeile 1 Reply Last reply Reply Quote 0
      • eierfeile
        eierfeile @TT-Tom last edited by

        @tt-tom ja über mqtt hat es funktioniert. danke nochmal 🙂

        T 1 Reply Last reply Reply Quote 0
        • T
          TT-Tom @eierfeile last edited by

          @eierfeile
          mit der Powerpage sehe ich mir morgen mal das Blockly an. Aber eventuell hat hier jemand schon ein fertiges Script.

          1 Reply Last reply Reply Quote 1
          • Armilar
            Armilar Most Active Forum Testing @eierfeile last edited by

            @eierfeile

            ich glaub ich hab es mit "SetOption73 1" in der Tasmota Console gemacht.

            versuch es ansonsten mal mit SetOption114

            Detach Switches with...~
            SetOption114~
            When SetOption114 1 all switches are detached from their respective relays and will send MQTT messages instead in the form of {"Switch<x>":{"Action":"<state>"}}.

            eierfeile 1 Reply Last reply Reply Quote 1
            • L
              L4rs @eierfeile last edited by L4rs

              Moin @eierfeile,

              ich habe die PowerCard hier erstmal nur testweise eingebunden und verwende nur drei der möglichen sechs "Kanäle": IMG_3128.jpg

              Die Daten für die Anzeige (=JSON) generiere ich mit diesem kleinen Javascript, vielleicht hilft Dir das nach entsprechender Anpassung weiter:

              /**
              * generate an JSON for display Power-Card on NSPanel
              * Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
              * Version: 0.1 - L4rs
              */
              schedule("* * * * *", function () {
               
               // Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
               var powerCardJson = "0_userdata.0.NSPanel.Energie.PowerCard",
                 pwr1 = Math.round(
                   getState("mqtt.0.SmartHome.Energie.PV.openDTU.114180710360.0.power").val
                 ),
                 pwr2 = "",
                 pwr3 = "",
                 pwr4 = Math.round(getState("hm-rpc.0.MEQ0706303.1.POWER").val),
                 pwr5 = "",
                 pwr6 = 0,
                 pwrHome = Math.round(pwr4 - pwr1);    // Berechnung des Energiefluss anstelle eines Datenpunktes
              
               // Definition der Keys im JSON
               var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
              
               // Definition der "Kacheln"
               var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0];
               var item1 = [
                 1,
                 pwr1,
                 "W",
                 "solar-power-variant-outline",
                 3,
                 pwr1 > 0 ? -2 : 0,
               ];
               var item2 = [2, pwr2, "", "", 0, ""];
               var item3 = [3, pwr3, "", "", 0, ""];
               var item4 = [4, pwr4, "W", "transmission-tower", 10, 10];
               var item5 = [5, pwr5, "", "", 0, ""];
               var item6 = [6, pwr6, "kW", "car-electric-outline", 5, 0];
              
               /**
                * JSON generieren und in den Datenpunkt schreiben,
                *
                *  --- ab hier keine Änderungen mehr ---
                */
               function func(tags, values) {
                 return Object.assign(
                   ...tags.map((element, index) => ({ [element]: values[index] }))
                 );
               }
              
               setState(
                 powerCardJson,
                 JSON.stringify([
                   func(keys, home),
                   func(keys, item1),
                   func(keys, item2),
                   func(keys, item3),
                   func(keys, item4),
                   func(keys, item5),
                   func(keys, item6),
                 ])
               );
              });
              
              

              @TT-Tom Ich hatte beim experimentieren mit der PowerCard einen ähnlichen (0 anstelle ""; Fehler (#801)) reported, evtl. ist das hier auch die Ursache (Fix ab TypeScript v4.0.4.3) - mit meinem Script oben funktioniert es hier auch in der aktuellen Version.

              Viele Grüße, Lars

              T eierfeile 2 Replies Last reply Reply Quote 1
              • T
                TT-Tom @L4rs last edited by

                @l4rs

                ja den Fix kenne ich. Panel wollte LeerString und Script wollte 0.
                Problem bei @eierfeile ist, dass er keine LeerStrings hat sonder "NaN" als Wert. Das kommt von dem Blockly aus dem Wiki. Dieses kann nur alle Kacheln anzeigen, da des keine LeerStrings generieren kann.

                Dein Script würde ich gerne mit ins Wiki mit aufnehmen, wenn es dir recht ist?

                L eierfeile 2 Replies Last reply Reply Quote 1
                • L
                  L4rs @TT-Tom last edited by

                  @tt-tom
                  Kannst Du gern machen - schau aber vielleicht noch mal kritisch drüber ob es auch verständlich ist, die Kommentare hab ich heute morgen zwischen Tür und Angel drangeschrieben... 😇

                  eierfeile 1 Reply Last reply Reply Quote 1
                  • eierfeile
                    eierfeile @TT-Tom last edited by

                    @tt-tom ah ok, danke! Das werde ich mal probieren 🙂

                    1 Reply Last reply Reply Quote 0
                    • eierfeile
                      eierfeile @Armilar last edited by

                      @armilar ja danke, probier ich mal. Aber von der Erklärung her, macht es das gleiche wie SetOption73. Aktuell funktioniert es auch genauso wie es soll :-).
                      Wirklich echt tolle und schnelle Hilfe hier. Bin beeindruckt 🙂

                      1 Reply Last reply Reply Quote 0
                      • O
                        osieben last edited by

                        Gibt es hier eigentlich die Möglichkeit Hintergrundgrafiken in den Screens oder Karten anzuzeigen, um das Design was stylisher zu machen?

                        Armilar 1 Reply Last reply Reply Quote 0
                        • eierfeile
                          eierfeile @L4rs last edited by

                          @l4rs erst mal dank für das Skript. Sieht auf jeden Fall deutlich einfacher aus. Ich hab es mal für meine NSPanel angepasst. Leider bekomme ich trotzdem noch Fehlermeldungen sobald ich versuche die Karte im nspanel aufzurufen. Die KArte wird dann auch nicht angezeigt. Hast du ne Idee wo der Fehler sein könnte?

                          /**
                          * generate an JSON for display Power-Card on NSPanel
                          * Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
                          * Version: 0.1 - L4rs
                          */
                          schedule("* * * * *", function () {
                           
                           // Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
                           var powerCardJson = "0_userdata.0.NSPanel_CardPower",
                             pwr1 = "",
                             pwr2 = Math.round(
                               getState("mqtt.0.hoymiles1500.Hoymiles1500.ch0.P_AC").val
                             ),
                             pwr3 = "",
                             pwr4 = "",
                             pwr5 = Math.round(getState("shelly.0.SHEM-3#485519D6B774#1.Total.InstantPower").val),
                             pwr6 = "",
                             pwrHome = Math.round(pwr5 - pwr2);    // Berechnung des Energiefluss anstelle eines Datenpunktes
                           
                           // Definition der Keys im JSON
                           var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
                           
                           // Definition der "Kacheln"
                           var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0];
                           var item1 = [1, pwr1, "", "", 0, ""];
                           var item2 = [
                             2,
                             pwr2,
                             "W",
                             "solar-power-variant-outline",
                             3,
                             pwr2 > 0 ? -2 : 0,
                          ];
                           var item3 = [3, pwr3, "", "", 0, ""];
                           var item4 = [4, pwr4, "", "", 0, ""];
                           var item5 = [5, pwr5, "W", "transmission-tower", 10, 10];
                           var item6 = [6, pwr6, "", "", 0, ""];
                           
                           /**
                            * JSON generieren und in den Datenpunkt schreiben,
                            *
                            *  --- ab hier keine Änderungen mehr ---
                            */
                           function func(tags, values) {
                             return Object.assign(
                               ...tags.map((element, index) => ({ [element]: values[index] }))
                             );
                           }
                           
                           setState(
                             powerCardJson,
                             JSON.stringify([
                               func(keys, home),
                               func(keys, item1),
                               func(keys, item2),
                               func(keys, item3),
                               func(keys, item4),
                               func(keys, item5),
                               func(keys, item6),
                             ])
                           );
                          });
                           
                          
                          

                          dbe8e84d-8554-443d-b72a-ed744634133a-image.png

                          T 1 Reply Last reply Reply Quote 0
                          • Armilar
                            Armilar Most Active Forum Testing @osieben last edited by Armilar

                            @osieben

                            soweit ich weiß nicht, würde auch mit einigen Steuerelementen nicht wirklich schön aussehen. Genau kann dir das aber @joBr99 erklären.

                            1 Reply Last reply Reply Quote 1
                            • T
                              TT-Tom @eierfeile last edited by TT-Tom

                              @eierfeile zeige mal bitte den Inhalt von dem Datenpunkt
                              "0_userdata.0.NSPanel_CardPower"

                              Hast du mal den Demomodus versucht?

                              Kannst du mal den Debug im Script aktivieren und die Ausgabe vom öffnen der Page hier posten.

                              eierfeile 1 Reply Last reply Reply Quote 0
                              • eierfeile
                                eierfeile @TT-Tom last edited by

                                @tt-tom
                                ne hab ich noch nicht probiert

                                [{"id":0,"value":367,"unit":"W","icon":"home-lightning-bolt-outline","iconColor":0},{"id":1,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":2,"value":0,"unit":"W","icon":"solar-power-variant-outline","iconColor":3,"speed":0},{"id":3,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":4,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":5,"value":367,"unit":"W","icon":"transmission-tower","iconColor":10,"speed":10},{"id":6,"value":"","unit":"","icon":"","iconColor":0,"speed":""}]
                                

                                meinst du das?
                                a6eee147-7405-4a01-ad6b-8c85911504b0-image.png

                                T 1 Reply Last reply Reply Quote 0
                                • T
                                  TT-Tom @eierfeile last edited by TT-Tom

                                  @eierfeile sagte in SONOFF NSPanel mit Lovelace UI:

                                  [{"id":0,"value":367,"unit":"W","icon":"home-lightning-bolt-outline","iconColor":0},{"id":1,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":2,"value":0,"unit":"W","icon":"solar-power-variant-outline","iconColor":3,"speed":0},{"id":3,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":4,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":5,"value":367,"unit":"W","icon":"transmission-tower","iconColor":10,"speed":10},{"id":6,"value":"","unit":"","icon":"","iconColor":0,"speed":""}]
                                  

                                  Der Inhalt funktioniert.

                                  ist das immer noch deine Config der Seite? wenn ja, dann muss das ACTUAL weg. Also nur alias.0.NSPanels.Strom

                                  let CardPowerExample = <PagePower>
                                  {
                                      'type': 'cardPower',
                                      'heading': 'Strom',
                                      'useColor': true,
                                      'items': [
                                          <PageItem>{ id: 'alias.0.NSPanels.Strom.ACTUAL' }
                                  //        <PageItem>{ }       // aktivieren für Demomodus der PowerCard, dafür ersten PageItem auskommentieren  
                                  ]
                                  };
                                  

                                  den DEBUG vom Script schaltet man hier im Script ein und setzt ihn auf "true".

                                  // Ab hier Anpassungen vornehmen
                                  
                                  const Debug = false;
                                  
                                  
                                  Armilar eierfeile 2 Replies Last reply Reply Quote 1
                                  • Armilar
                                    Armilar Most Active Forum Testing @TT-Tom last edited by

                                    @tt-tom sagte in SONOFF NSPanel mit Lovelace UI:

                                    [{"id":0,"value":367,"unit":"W","icon":"home-lightning-bolt-outline","iconColor":0},{"id":1,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":2,"value":0,"unit":"W","icon":"solar-power-variant-outline","iconColor":3,"speed":0},{"id":3,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":4,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":5,"value":367,"unit":"W","icon":"transmission-tower","iconColor":10,"speed":10},{"id":6,"value":"","unit":"","icon":"","iconColor":0,"speed":""}]

                                    @eierfeile

                                    a516b1e1-03ba-4005-b474-f990c326ebf6-image.png

                                    Sollte mit dem Entfernen des .ACTUAL so aussehen. Ansonsten werden keine Daten gefunden...

                                    T 1 Reply Last reply Reply Quote 2
                                    • eierfeile
                                      eierfeile @TT-Tom last edited by

                                      @tt-tom ok, dann hatte ich dich gestern bei dem Post um 19:00 missverstanden. Dachte beim Alias mit Actual richtig wäre. Daher hatte ich es wieder eingefügt.
                                      Aber jetzt hab ich es natürlich wieder rausgenommen und jetzt funktioniert es endlich 🙂 Danke Euch!!

                                      1 Reply Last reply Reply Quote 0
                                      • eierfeile
                                        eierfeile @L4rs last edited by

                                        @l4rs Hi, wollte kurz Feedback geben. Also soweit sieht alles gut :-). Die Berechnung von pwrHome, hab ich nur minimal geändert, weil ich dort den aktuellen Verbrauch vom Haus angezeigt haben wollte.

                                        pwrHome = Math.round(pwr5 + pwr2);  
                                        

                                        Was mir jetzt aber aufgefallen ist, wenn man Stom einspeist, berechnet dein Skript alles korrekt (Watt ist negativ, speed ist positiv)...trotzdem fliesst in der Grafik der Strom zum Haus hin statt weg.

                                        Kann sich das jmd erklären? Mit meiner Änderung kann das ja nicht zu tun haben, da ja alles korrekt berechnet wird oder?

                                        Hier nochmal meine Werte, die meiner Meinung eigentlich korrekt sind:

                                        [{"id":0,"value":428,"unit":"W","icon":"home-lightning-bolt-outline","iconColor":0},{"id":1,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":2,"value":612,"unit":"W","icon":"solar-power-variant-outline","iconColor":3,"speed":-2},{"id":3,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":4,"value":"","unit":"","icon":"","iconColor":0,"speed":""},{"id":5,"value":-184,"unit":"W","icon":"transmission-tower","iconColor":10,"speed":10},{"id":6,"value":"","unit":"","icon":"","iconColor":0,"speed":""}]
                                        
                                        T 1 Reply Last reply Reply Quote 0
                                        • T
                                          TT-Tom @eierfeile last edited by TT-Tom

                                          @eierfeile das Script ändert die Richtung von speed nicht. Es ist ein minimal Beispiel von @L4rs. Wenn du das Vorzeichen von speed änderst, dann läuft es in die andere Richtung. Was für einen Wert bekommst du von deinem Zähler, wenn du ins Netz speist? Ändert sich dann das Vorzeichen auf minus???

                                          eierfeile 1 Reply Last reply Reply Quote 0
                                          • eierfeile
                                            eierfeile @TT-Tom last edited by eierfeile

                                            @tt-tom Hi Tom, danke für dein Feedback.
                                            Ah ok ich glaub ich die missverstanden! Positive Werte bezieht nicht auf dem Stromverbrauch sondern auf die postive Werte von Speed. Dann muss ich mal schauen ob ich das im Skript angepasst bekommen!

                                            a572354e-4125-4622-b33c-ac4582fd5db2-image.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            794
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            lovelace ui nspanel sonoff
                                            260
                                            7128
                                            4311862
                                            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