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

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    SONOFF NSPanel mit Lovelace UI

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

      @armilar said in SONOFF NSPanel mit Lovelace UI:
      Erstma vielen Dank für die ausführliche Analyse und Hilfe!!!

      @danny_v1

      b5a0fc46-45c0-4a20-b7ab-74358856563d-Nextion_Editor_12mOYErUCZ.gif

      Falls ich etwas abweichend, zu deiner Klick-Vorgehensweise gemacht haben sollte, dann bitte kurze zusätzliche Info

      Ja wenn man es so schaltet funktioniert es problemlos. Der Effekt tritt auf wenn ich direkt hier schalte:
      Lampe.png

      EDIT: Ich kann allerdings auch nicht nachvollziehen, was diese nachfolgenden beiden Aliase bewirken sollen:

      • alias.0.Wohnzimmer.Deckenlampe.Alle.Info.INFO --> denke es ist ein Info-Alias, der true/false zurück gibt und damit entsprechend die Farbe des Icons steuert, ob noch eine Lampe an ist oder alles aus

      Ja genau dafür ist das gedacht.

      • alias.0.Wohnzimmer.HeizungWZ.SET --> den kann aktuell ich gar nicht nachvollziehen

      Das war noch ein Test ich wollte je nach Temperatur das Icon einfärben, weiß das ist so falsch, hatte ich vergessen anzupassen, bzw übersehen es wieder zu entfernten.

      • alias.0.Status.Test.ACTUAL --> der dürfte Fehler werfen, es sei denn du hast den wieder ACTUAL.ACTUAL genannt 😉

      Ja bei dem ist es das gleiche, der ist noch nicht angepasst. 😱

      Armilar 1 Reply Last reply Reply Quote 1
      • D
        danny_v1 @Kuckuckmann last edited by

        @kuckuckmann said in SONOFF NSPanel mit Lovelace UI:

        @danny_v1

        Hi @danny_v1 ,

        was ich nicht verstehe ist, warum Du bei vielen Punkten ein navigate: true da drin hast. Die meisten der PageItems sind doch zum schalten und nicht noch um auf weitere Unterseiten zu navigieren, oder?

        Vlt. hilft Dir das ja.

        Hab noch mal drüber geschaut, das passt schon so, sind alles Punkt zum navigieren.

        D 1 Reply Last reply Reply Quote 0
        • D
          DaPeace @danny_v1 last edited by

          Hier nochmal ein kurzer Abriss wie ich mit NodeRed den normalen Balken-Chart befülle.
          Benötigt wird in Nodered die Anbindung an die MySQL-DB (node-red-node-mysql), die Anbindung an ioBroker, wobei ich nodered aus dem iobroker raus installiert habe und die Nodes dann vorhanden waren und 2 Funktionsnodes.
          nodered_nspanel_chart.jpg

          Meine Tabelle in Mysql ist sehr simple. Sie besteht aus der ID, dem Wert (Stromverbrauch) und dem Datum. Geschrieben werden die Daten auch direkt aus NodeRed. In diesem Fall mit dem Query:

          INSERT INTO `Stromverbrauch` (`stromverbrauch`,`date`) VALUES ({{payload}},NOW()) 
          

          Um es dann aufs Display zu zaubern benötigt man im ersten Funktionsnode den korrekten Query:

          var A = "SELECT * FROM Stromverbrauch ORDER BY id DESC LIMIT 8";
          msg.topic = A ;
          return msg;
          

          Ich nehme hier einfach die letzten 8 Werte die geschrieben wurden.
          Dieser Node wird mit mit dem DB-Node verknüpft. Der Ausgang vom DB-Node geht dann auf den nächsten Funktionsnode mit folgendem Code und aus dem Funktionsnode geht es dann direkt in ioBroker:

          var resultArray = [];
          var currentDate = "";
          
          for (var i = 0; i < msg.payload.length; i++) {
              var date = new Date(msg.payload[i].date);
              var day = date.getDate();
              var month = date.getMonth() + 1;
              var floatvalue = msg.payload[i].stromverbrauch;
              var intvalue = Math.round(floatvalue);
          
              if (i % 4 === 0) {
                  if (currentDate !== "") {
                      resultArray.push("^"); 
                  }
                  currentDate = intvalue + "^" + (day < 10 ? "0" + day : day) + ":" + (month < 10 ? "0" + month : month); 
                  resultArray.push(currentDate);
              } else {
                  resultArray.push(intvalue); 
              }
          }
          msg.payload = resultArray.join("~"); 
          msg.payload = msg.payload.replace(/~\^~/g, "~");
          return msg; 
          

          Hier wird die Ausgabe zerlegt, 1 Wert wird mit Datum versehen und 3 Werte sind ohne Datum und es wird entsprechend mit den Tilden aufgefüllt.
          Wenn man mehr Werte benötigt, dann einfach das Limit beim Mysql-Query erhöhen.
          Das Panel formatiert sich das ja dann zurecht. Das Datum wird aus dem Timestamp extrahiert, sonst steht auf dem Panel ein ganzer Roman.
          Die Uhrzeit brauche ich bei meinem Tagesverbrauch vom Haus nicht. Es ist aber ziemlich einfach jetzt aus dem Timestamp anstelle Monat und Tag einfach Stunde und Minute zu ziehen und an der richtigen Stelle einzubinden. Wie bereits von @Armilar bestätigt, kann das Panel momentan nur Werte von 0-5 anzeigen. Mein Hausverbrauch liegt je nach Jahreszeit zwischen 4kwh - 30kwh und entsprechend passt das noch nicht in die Skalierung. Ich hoffe das wird sich noch ändern. Bis jetzt nehm ich den Wert einfach / 10 das er im Panel ordentlich dargestellt wird.

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

            @dapeace

            Ja cool 😊

            Das Thema cardChart und cardLChart nimmt wieder Fahrt auf. Aktuell gibt es ja noch folgende Fehler/Features:

            cardChart

            • Wenn ein Wert > 196 ist (entspricht 19,6), dann wird dieser negativ dargestellt
            • Y-Achse zur Darstellung größerer Werte zu schmal

            cardLChart

            • Keine negativen Werte möglich

            Fumanchi, der Entwickler der HMI-Charts bittet aus zeitlichen Gründen noch um etwas Geduld. Die Cards werden jedoch gefixt. Sollte jemand bereits einen Fix haben, so kann er den gerne auch bereitstellen.

            Parallel dazu werden die cardChart und die cardLChart jetzt auch in Home Assistant (ioBroker ja bereits seit v3.9.0) mit aufgenommen.

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

              @danny_v1 sagte in SONOFF NSPanel mit Lovelace UI:

              Ja wenn man es so schaltet funktioniert es problemlos. Der Effekt tritt auf wenn ich direkt hier schalte:

              Jedes mal oder nur sporadisch? Sind die betroffenen Lampen beim Schalten alle vom Typ "RGB" mit colormode: "xy"?

              Betrachten wir mal diesesPageItem:

              <PageItem>{ id: "alias.0.Wohnzimmer.Deckenlampe.SofaRGB.Gruppe", 
                                    name: "Sofa RGB", 
                                    icon: "ceiling-light-multiple", 
                                    minValueBrightness: 0, 
                                    maxValueBrightness: 100, 
                                    minValueColorTemp: 150, 
                                    maxValueColorTemp: 500, 
                                    interpolateColor: true, 
                                    colormode: "xy"},
              

              die

                                    minValueBrightness: 0, 
                                    maxValueBrightness: 100,
              

              kannst du schon mal entfernen, die der Standard-Slider sowieso von 0-100% arbeitet.

              Dann bitte noch einmal den Alias für den kompletten RGB senden.

              Es gibt auch den Geräte-Typen CIE-Farblicht:
              9baa0817-88ff-4f73-9a9d-77508f805701-image.png

              Könntest du mal diesen Alias-Typen testen? CIE wäre der XY-Wert der Lampe.

              Außerdem bitte noch mal einen Blick in den xy-Datenpunkt der Lampe(n-Gruppe)

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

                @armilar Es ist jedes mal und es sind alle Lampen betroffen, also nicht nur farbige.
                Datenpunkte der Aliasse schick ich heute abend.

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

                  @armilar
                  Kannst du mir das mit dem LChart etwas genauer erklären? Bei dem folgenden String von dir ist quasi die 0 der Beginn des Charts, 16 wie gehabt die Uhrzeit. Was ist dann die +60+120+180+240? Die Position in X?
                  Und wie ist das mit der Y-Achse? Was ist das z.B. als erster Wert für die Konstruktion "~58:212~"?

                  0^16:00+60+120+180+240^20:00+300+360+420+480^00:00+540+600+660+720^04:00+780+840+900+960^08:00+1020+1080+1140+1200^12:00+1260+1320+1380~58:212~118:211~178:212~238:212~298:213~358:211~418:209~478:209~538:209~598:208~658:202~718:201~778:199~838:198~898:197~958:196~1018:198~1078:200~1138:201~1198:203~1258:208~1318:209~1378:208~1438:209
                  
                  T Armilar 2 Replies Last reply Reply Quote 0
                  • T
                    TT-Tom @DaPeace last edited by

                    @dapeace

                    Das ist x:y , also die Koordinaten im Chart

                    Link Text

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

                      @dapeace sagte in SONOFF NSPanel mit Lovelace UI:

                      Ah okay, die cardLChart

                      0^16:00+60+120+180+240^20:00+300+360+420+480^00:00+540+600+660+720^04:00+780+840+900+960^08:00+1020+1080+1140+1200^12:00+1260+1320+1380~58:212~118:211~178:212~238:212~298:213~358:211~418:209~478:209~538:209~598:208~658:202~718:201~778:199~838:198~898:197~958:196~1018:198~1078:200~1138:201~1198:203~1258:208~1318:209~1378:208~1438:209
                      

                      Kurz zerlegt:

                      In diesem Teil wird die X-Achse konstruiert ("+" getrennt):

                      0^16:00+60+120+180+240^20:00+300+360+420+480^00:00+540+600+660+720^04:00+780+840+900+960^08:00+1020+1080+1140+1200^12:00+1260+1320+1380
                      

                      fängt bei 0 an und geht in diesem Beispiel in 60er Schritten bis 1380 (wäre der letzte Strich an der X-Achse). Alle 240 wird dort eine Uhrzeit an die X-Achse gesetzt.
                      Die max. X-Position "in diesem Beispiel" wäre also 24h x 60 Min = max_x = 1440

                      Du kannst natürlich auch eine andere Basis abbilden (Woche, Monat, What ever)

                      wie hier:
                      bei 0 die ^16:00
                      bei 240 die ^20:00
                      bei 480 die ^0:00
                      etc.

                      Im Anschluss kommen die Koordinaten des Graphen (wie @TT-Tom schon korrekt geschrieben hat --> X:Y - Koordinaten).

                      ~58:212~118:211~178:212~238:212~298:213~358:211~418:209~478:209~538:209~598:208~658:202~718:201~778:199~838:198~898:197~958:196~1018:198~1078:200~1138:201~1198:203~1258:208~1318:209~1378:208~1438:209
                      

                      Erste Koordinate
                      ~58:212

                      X=58 (könntest also auch 58 Minute der letzten 24 Stunden sagen)
                      Y=212 = z.B. 21,2°C

                      EDIT: Habe gestern für die HA's erst eine Anleitung gebastelt (am Ende):
                      https://github.com/joBr99/nspanel-lovelace-ui/issues/794

                      Mein Hotel (Bin mal wieder unterwegs) hat Github geblockt 😖

                      EDIT: Im Zweifel einfach unsere JavaScripte aus der Wiki nutzen

                      tt-tom17 created this issue in joBr99/nspanel-lovelace-ui

                      open [BUG]Keine minus Werte an der Y Achse in der cardLChart #794

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

                        @danny_v1

                        Dachte es wäre evtl. auf einen speziellen Alias Geräte-Typen zurückzuführen... brauchste daher nicht zu senden...

                        Die Frage die mich da ein wenig quält ist: "Was ist bei dir anders als bei allen anderen?"

                        Gibt es Warnungen im Log, wenn das passiert?

                        Könntest du mal das NSPanel-Verzeichnis in 0_userdate löschen und neu anlegen lassen?

                        Bei welcher Version des Scriptes bist du nun? Und mit welcher TFT?

                        D 1 Reply Last reply Reply Quote 0
                        • K
                          Kuckuckmann @Kuckuckmann last edited by

                          @all

                          @kuckuckmann sagte in SONOFF NSPanel mit Lovelace UI:

                          Hallo Community,

                          wir haben viel zeit und Getippsel investiert und unserer Wiki ein bissel Glanz und Struktur gegönnt.
                          Ja, wir wissen wir sind am Anfang und eine Wiki ist ja bekanntlich nie zu Ende, bzw. lebt von dem was wir alle noch hinzufügen werden.

                          --> ZUR WIKI <--

                          Neben dem alten klassischen Menü, welches man noch aufklappen kann, gibt es jetzt links ein neues hübsches Menü, welches Euch mit einem kurzen Blick&Klick in den richtigen Bereich führt.
                          Am unteren Ende einer Seite gibt es einen "nach oben Scroll Button".

                          Wir hoffen, die neue Struktur hilft Euch in der Zukunft euch noch besser zurecht zu finden.

                          Viel Spaß 🙂

                          Euer NSPanel LUI Team 🙂

                          1 Reply Last reply Reply Quote 3
                          • D
                            danny_v1 @Armilar last edited by

                            @armilar Ich versteh gerade die Welt nicht mehr, gestern Abend lief es auf einmal so wie es soll, ohne das ich noch was geändert habe.

                            Sobald es wieder auftreten sollte werde ich mal ins Log schauen (iobroker Log und Javaskript Log?)

                            1 Reply Last reply Reply Quote 1
                            • J
                              JackONell last edited by

                              Hallo Community,

                              ich habe eine "cardUnlock" Page erstellt und schaffe es einfach nicht, nach Pin Eingabe weitergeleitet zu werden auf die entsprechende "NSPanel_Service" Page.
                              Mach ich irgendetwas falsch oder hab ich etwas übersehen/vergessen ?

                              Wenn ich am Panel den Code eingebe, sehe ich auch bei den Objekten das sich nichts tut.

                              let Alarm_Seite = <PageUnlock>
                              {
                                  'type': 'cardUnlock',
                                  'heading': 'Alarmanlage',
                                  'useColor': true,
                                  'items': [<PageItem>{ id: 'alias.0.Unlock', targetPage: 'NSPanel_Service' }]
                              };
                              
                              let NSPanel_Service = <PageEntities>
                              {
                                  'type': 'cardEntities',
                                  'heading': 'NSPanel Service',
                                  'useColor': true,
                                  'items': [
                                      <PageItem>{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: 'Infos', buttonText: 'mehr...'},
                                      <PageItem>{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: 'Einstellungen', buttonText: 'mehr...'},
                                      <PageItem>{ navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: 'Firmware', buttonText: 'mehr...'},
                                      <PageItem>{ id: AliasPath + 'Config.rebootNSPanel', name: 'Reboot NSPanel' ,icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: 'Start'},
                                  ]
                              

                              Unbenannt.JPG

                              Kann mir bitte jemand weiterhelfen ?
                              Bin in der Sache leider kein Profi 🙂
                              Vielen Dank im voraus.

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

                                @jackonell

                                Hast du Service Page zur Subpages verschoben?

                                pages:[ 
                                                   NSPanel_Service    //Auto-Alias Service Page
                                ],
                                                    subPages: [
                                

                                Muss bei pages raus und bei subPages rein.

                                In der config der Service Page muss der Parameter

                                'subPage': true,
                                

                                hinzugefügt werden.

                                J 1 Reply Last reply Reply Quote 1
                                • André Koschnik
                                  André Koschnik last edited by

                                  Moin,

                                  ich habe mein NSP Panel geupdatet und das neues Script eingespielt. Leide bekomme ich das Script nicht zum laufen und das Panel nicht mehr auf die alte FW. Ich weiß der Fehler sitzt meinesten vor dem Bildschirm aber könnt ihr mir einen Tipp geben.

                                  Script Version TypeScript v4.3.2.2

                                  17:10:32.978	info	javascript.0 (2342) Stop script script.js.house.panel.test
                                  17:12:04.746	info	javascript.0 (26578) script.js.house.panel.test: compiling TypeScript source...
                                  17:12:16.071	info	javascript.0 (26578) script.js.house.panel.test: TypeScript compilation successful
                                  17:12:16.170	error	javascript.0 (26578) script.js.house.panel.test: Error: Cannot find module 'moment-parseformat'
                                  17:12:16.171	error	javascript.0 (26578) at script.js.house.panel.test:1137:19
                                  17:12:16.203	info	javascript.0 (26578) script.js.house.panel.test: setObjects enabled - create Alias Channels possible
                                  17:12:16.213	info	javascript.0 (26578) script.js.house.panel.test: weather alias for accuweather.0. already exists
                                  17:12:16.270	info	javascript.0 (26578) script.js.house.panel.test: registered 29 subscriptions, 7 schedules, 0 messages, 0 logs and 0 file subscriptions
                                  17:12:17.209	info	javascript.0 (26578) script.js.house.panel.test: Debugmodus deaktiviert
                                  17:12:17.212	info	javascript.0 (26578) script.js.house.panel.test: Desired TFT Firmware: 53 / v4.3.2
                                  17:12:17.214	info	javascript.0 (26578) script.js.house.panel.test: Installed TFT Firmware: 50 / v4.0.5
                                  17:12:17.536	info	javascript.0 (26578) script.js.house.panel.test: Debugmodus deaktiviert
                                  17:12:21.423	info	javascript.0 (26578) script.js.house.panel.test: Start MQTT-Port-Check -------------------------------------
                                  17:12:21.424	info	javascript.0 (26578) script.js.house.panel.test: -- admin.0 - 8081
                                  17:12:21.424	info	javascript.0 (26578) script.js.house.panel.test: -- lovelace.0 - 8091
                                  17:12:21.424	info	javascript.0 (26578) script.js.house.panel.test: -- mqtt.0 - 1883
                                  17:12:21.424	info	javascript.0 (26578) script.js.house.panel.test: -- node-red.0 - 1880
                                  17:12:21.425	info	javascript.0 (26578) script.js.house.panel.test: -- sql.0 - 5432
                                  17:12:21.425	info	javascript.0 (26578) script.js.house.panel.test: -- terminal.0 - 8088
                                  17:12:21.425	info	javascript.0 (26578) script.js.house.panel.test: -- zigbee.0 - /dev
                                  17:12:21.425	info	javascript.0 (26578) script.js.house.panel.test: - MQTT-Port-Check OK: Instance of Adapter: mqtt.0 is running on Port:1883
                                  17:12:21.425	info	javascript.0 (26578) script.js.house.panel.test: End MQTT-Port-Check ---------------------------------------
                                  17:12:52.926	info	javascript.0 (26578) script.js.house.panel.test: Tasmota upgrade complete. New Version: 13.2.0(tasmota32)
                                  17:19:07.004	info	javascript.0 (26578) Stop script script.js.house.panel.test
                                  17:28:38.971	info	javascript.0 (26578) Stop script script.js.house.panel.test
                                  
                                  
                                  1 Reply Last reply Reply Quote 0
                                  • T
                                    TT-Tom last edited by

                                    @andré-koschnik

                                    Du hast die npm Module 'moment' , 'moment-parseformat' vergessen, bitte diesen Post genau lesen.

                                    1 Reply Last reply Reply Quote 1
                                    • André Koschnik
                                      André Koschnik last edited by

                                      das hab ich schon gesehen aber ich weiß nicht wie ich das impotieren kann.

                                      Armilar 1 Reply Last reply Reply Quote 0
                                      • Armilar
                                        Armilar Most Active Forum Testing @André Koschnik last edited by

                                        @andré-koschnik

                                        steht doch da:
                                        https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#8--einstellungen-in-js-adapter-instanz

                                        In der Zeile der JS-Adapter-Instanz (siehe Bild im Link) die Modulnamen eintragen...

                                        1 Reply Last reply Reply Quote 1
                                        • André Koschnik
                                          André Koschnik last edited by

                                          Danke machmal sieht man den wald vor Bäumen nicht

                                          1 Reply Last reply Reply Quote 1
                                          • M
                                            Mucky 0 last edited by

                                            Hallo,
                                            Ich bräuchte mal eure Hilfe da ich komplette Newbie in Sachen NSPanel+Lovelace bin.
                                            Ich möchte das NSPanel nur für die Anzeige der PV-Werte mit Hilfe der cardPower verwenden. Ich habe nun den Beispielcode in das Javascript bei "Anfang der Beispiele für Seitengetaltung" eingefügt und den "Demomodus" aktiviert.... aber auf dem Display tut sich nichts. Es werden nur NSPanelService Seiten und der Screensaver angezeigt.
                                            Wie muss ich weiter vorgehen um die Werte bzw. die Darstellung vom Beispiel auf mein Display zu bekommen? Gibt es irgendwo eine genauere Anleitung da ich aus den gefundenen bzw. Code-Schnipseln nicht schlau werde.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            879
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

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