Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. SONOFF NSPanel mit Lovelace UI

NEWS

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    11
    2
    199

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    7.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.7k

SONOFF NSPanel mit Lovelace UI

SONOFF NSPanel mit Lovelace UI

Scheduled Pinned Locked Moved Hardware
lovelace uinspanelsonoff
7.7k Posts 271 Posters 6.7m Views 253 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ArmilarA Armilar

    SONOFF NSPanel Touch Display Switch

    mit Lovelace UI und TASMOTA Firmware

    60848839-53b0-4e2b-a370-28e02960bfcd-image.png

    Das Thema https://forum.iobroker.net/topic/50888/sonoff-nspanel/1542 wird hier jetzt fortgesetzt...

    An alle begeisterten NSPanel'er

    Dieser Thread soll sich jetzt ausschließlich mit den Fragen und Themen rund um das SONOFF NSPanel mit Lovelace UI beschäftigen.

    Wie alles begann:

    • 22.10.2021
      Blakadder's Dokumentation der Dekodierung des NSPanel-Kommunikationsprotokolls und Einrichtung der Steuerung des Nextion-Bildschirms mit benutzerdefinierter Firmware.
      https://blakadder.com/nspanel-hacking/
    • 01.01.2022
      Erste Gehversuche mit Blockly-Scripts auf der Original-Firmware nach einer ersten coolen Anleitung für den ioBroker von @haus-automatisierung.
    • ...
      Funkstille auf allen Kanälen, da das Panel in der Originalsoftware einfach zu wenig Funktionalität hat. Ein Vergleich mit "Jugend forscht" wäre maßlos übertrieben...
    • 15.01.2022
      @jobr99 Erstes POC von Lovelace Konzept mit ESPhome Komponente, da Nextion Upload Protcol unter tasmota nicht umsetzbar ist (berry tcpclient crashed ESP, HTTP Libary ist auf viel zu kleine Dateien limitiert)
    • 17.01.2022
      peepshow-21 Erste implementierung von Nextion Upload Protocol 1.1 mit Workaround für HTTP Libary über Java Converter um tft files für tasmota vorzubereiten
    • 20.01.2022
      s-hadinger fixt bug in berry tcpclient
    • 31.01.2022
      Erste Version für HomeAssistant mit Nodered und Tasmota
    • 08.02.2022
      @joBr99 Erste Implementierung von Nextion Upload Protokoll 1.2 in Berry basiertend auf HTTP Range Header Requests und lokalem Buffer (funktioniert nur mit -nspanel tasmota build uns PSRAM Support)
    • 12.02.2022
      peepshow-21 Implementierung von Nextion Upload Protocol 1.2 mit vollständigem Download und "streaming" zum Nextion Screen während dem Download
    • 05.03.2022
      @joBr99 Portierung von Node-Red Flow zu AppDaemon, da AppDaemon sich besser eignet zur Implementierung vom Backend
    • 13.03.2022
      @joBr99 Erste Version von Lovelace Berry Driver basierend auf Upload Protocol Implementierung von peepshow-21, da diese etwas stabiler läuft mit zusätzlichem Error Handling
    • 30.03.2022
      @joBr99 kommt mit der Info um die Ecke, dass es ein erstes Script v1.9.0 für den ioBroker von @Britzelpuf gibt. Zu diesem Zeitpunkt gab es bereits den Screensaver die Seitennavigation und die Möglichkeit eine Lampe, einen Dimmer eine Taste und eine Info, sowie die popUps für Licht (Brightness) und Shutter (Position) und einen Thermostaten zur Steuerung einzubinden.
    • 10.04.2022
      @joBr99 Firmware got bigger and bigger with >15 Minutes Flashing Time for the tft file
      Increased Flashing Speed of Berry Driver from 115200 to 921600 and added skipping to the End with HTTP Range Headers, resulted in faster display flashing
    • 11.04.2022
      @Armilar macht seine ersten Änderungen auf github und hört seit dem nicht mehr auf, weitere Funktionen in das TSScript hinzuzufügen... 😉
      @joBr99 entwickelt die HMI und neue Funktionen für Home Assistant schneller als der Wind - und macht das Panel zur echten Bereicherung für jedes Smart Home 😊 👏

    heute

    • Eine der besten Community's die ich jemals erlebt habe. Hilfsbereit und kompetent wird jeder mit Hilfestellungen und Problemlösungen in kürzester Zeit versorgt.

    Es macht großen Spaß zusammen mit euch...

    VG
    Armilar


    Beispiele:

    09ae2c13-c606-4ef5-88dc-26fccd14dd85-image.png

    cf500331-70d8-4150-ac59-aabff1a27f7f-image.png

    a5dbb6f4-403b-4081-b2e9-a17cbc3af26c-image.png

    b41e2fed-abaa-4993-ae6f-2344f4e3afc8-image.png

    048fc1af-d72e-45fe-9102-688d40b2df18-image.png

    08edcab4-03b7-4c0f-923e-0f5b1c639cca-image.png

    ad94cddf-a0d0-40a7-971c-16504e8949fd-image.png

    263b23cc-d003-4af6-98b6-ed994c244890-image.png

    07373515-a92e-4cc9-b717-716e4fd4413f-image.png

    7c4a1f2f-26d7-4aeb-987d-3e30a671378d-image.png


    Features:

    • cardEntities für die Unterstützung diverser Steuerelemente (siehe Beispiele)
    • cardGrid (3x2-Raster) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
    • cardGrid2 (4x2) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
    • cardGrid3 (2x2) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
    • cardPower zur Visualisierung der Energieverteilung
    • cardAlarm als Seite für Alarmanlagen
    • cardMedia - der Media-Player (Diverse Adapter)
    • cardThermo - Seite für Thermostat oder Klimaanlage
    • cardQR - Seite mit QRCode zur Anzeige von WLAN-Informationen
    • cardChart - Balkendiagramme
    • Detailseiten für Leuchtmittel (Helligkeit, Temperatur und Farbe)
    • Detailseite für Jalousien/Rollos (Position und Tilt)
    • Detailseite für Ventilatoren
    • Detailseite für Timer
    • Auswahl Detailseite für Werteliste
    • Bildschirmschonerseite mit Uhrzeit, Datum und Wetterinformationen oder/und Infos
    • Multilingual (unterstützt über 40 Sprachen)
    • Unbegrenzte Anzahl an Seiten und Unterseiten
    • Abfallkalender
    • Favoritenseiten
    • etc.

      ich glaube da ist eine verbesserte "cardMedia" in der Entwicklung - sieht cool aus...
      72571469-4a78-4caf-ba0e-7a67865bb13c-image.png

    NsPanel Lovelace UI ist eine Firmware für den Nextion-Bildschirm innerhalb des NSPanel.

    Die allgemeine Idee ist, dass das Nextion-Display einen Seitenzähler durchläuft und der ESP32 dem Display sagt, was zu tun ist. Alles ist dynamisch durch Alias-Erstellung konfigurierbar, es ist nicht erforderlich, Nextion Editor zu programmieren. Neben der Seiten-Definition sind im ioBroker keine Programmierkenntnisse erforderlich. Es ist im ioBroker ebenfalls kein Lovelace-Adapter erforderlich.

    Das Panel arbeitet mit Tasmota und MQTT. Um das Panel zu steuern und mit Inhalten von ioBroker zu aktualisieren, gibt es ein vordefiniertes TypeScript (TS) für den JavaScript-Adapter.


    Aktuelle Wiki (Anleitung) für den ioBroker

    https://github.com/joBr99/nspanel-lovelace-ui/wiki by @Kuckuckmann

    NsPanelTs.ts (TypeScript) für ioBroker v4.9.3.X

    zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar und @TT-Tom
    https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker
    abgestimmt auf:

    • TFT 58 / v4.9.3 ( by @joBr99 / Armilar > 4.4.0)
    • BerryDriver 9 ( by peepshow-21 (based on code by blakadder and s-hadinger))
    • Tasmota 15.1.0 ( by Theo Arends ) --> Theo-Arends-Sonoff-MQTT-OTA

    Projekt:

    by @joBr99

    • main (Home Assistant - Version und Nextion HMI): https://github.com/joBr99/nspanel-lovelace-ui by @joBr99
    • ioBroker: https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker by @Armilar (HA - Adaption)

    Icon-Mapper:

    • icon_mapping.ts:
      https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts
      (TypeScript muss in global liegen)

    Icons:

    unter: https://docs.nspanel.pky.eu/icon-cheatsheet.html

    Video-Tutorial:

    https://www.youtube.com/watch?v=ZPLJk2ZLo_8 by @haus-automatisierung

    gelberlemmyG Offline
    gelberlemmyG Offline
    gelberlemmy
    wrote on last edited by
    #550

    @armilar sagt einmal, ich habe folgendes Warnmeldung und habe da nichts gefunden zum Thema Wetter in dem Skript, wo irgendetwas mit "undefined" steht.
    Folgende Meldung spamt mein Protokokoll voll.
    Da sehe ich den Wald vor lauetr Bäumen nicht. Kann mir einmal einen Tipp geben ?

    Gruß André

    
    javascript.0
    2022-11-03 09:48:36.948	warn	script.js.NSPanels.NSPanel_Flur: error with reading senor-data: Cannot read properties of undefined (reading 'Temperature')
    
    ArmilarA 1 Reply Last reply
    0
    • gelberlemmyG gelberlemmy

      @armilar sagt einmal, ich habe folgendes Warnmeldung und habe da nichts gefunden zum Thema Wetter in dem Skript, wo irgendetwas mit "undefined" steht.
      Folgende Meldung spamt mein Protokokoll voll.
      Da sehe ich den Wald vor lauetr Bäumen nicht. Kann mir einmal einen Tipp geben ?

      Gruß André

      
      javascript.0
      2022-11-03 09:48:36.948	warn	script.js.NSPanels.NSPanel_Flur: error with reading senor-data: Cannot read properties of undefined (reading 'Temperature')
      
      ArmilarA Offline
      ArmilarA Offline
      Armilar
      Most Active Forum Testing
      wrote on last edited by Armilar
      #551

      @gelberlemmy

      SetOption146 1
      

      in die Tasmota Console eingeben. Dann sollte auch die ESP-Temperatur wieder im Hauptmenü zu sehen sein.

      Ist eine Änderung in Tasmota. Die ESP-Temperatur ist seit der 12.2.0 per Default abgeschaltet.

      Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
      https://github.com/joBr99/nspanel-lovelace-ui/wiki

      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      gelberlemmyG 2 Replies Last reply
      0
      • ArmilarA Armilar

        @gelberlemmy

        SetOption146 1
        

        in die Tasmota Console eingeben. Dann sollte auch die ESP-Temperatur wieder im Hauptmenü zu sehen sein.

        Ist eine Änderung in Tasmota. Die ESP-Temperatur ist seit der 12.2.0 per Default abgeschaltet.

        gelberlemmyG Offline
        gelberlemmyG Offline
        gelberlemmy
        wrote on last edited by
        #552

        @armilar sagte in SONOFF NSPanel mit Lovelace UI:

        SetOption146 1

        Guten Morgen, danke das werde ich gleich einmal ausprobieren

        1 Reply Last reply
        0
        • VumerV Offline
          VumerV Offline
          Vumer
          wrote on last edited by Vumer
          #553

          Hallo,
          viel Neuland für mich 😉 .

          export const config: Config = {
              ...
              mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1', ScreensaverEntityIcon: 'light-switch', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off  },
              mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off  },
          

          Mit den Icon Austausch ist klar und funktioniert aber mit der Farbe nicht wirklich. Ist das möglich z.B. bei An der Icon grün leuchtet und bei Aus blau?

          1 Reply Last reply
          0
          • ArmilarA Offline
            ArmilarA Offline
            Armilar
            Most Active Forum Testing
            wrote on last edited by
            #554

            @vumer

            Aber natürlich 😉 - Du solltest dann auch die Farben ändern...

            mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1', ScreensaverEntityIcon: 'light-switch', ScreensaverEntityOnColor: Green, ScreensaverEntityOffColor: HMIOff  },
            mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: Green, ScreensaverEntityOffColor: HMIOff  },
            

            Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
            https://github.com/joBr99/nspanel-lovelace-ui/wiki

            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

            VumerV 1 Reply Last reply
            1
            • ArmilarA Armilar

              @vumer

              Aber natürlich 😉 - Du solltest dann auch die Farben ändern...

              mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1', ScreensaverEntityIcon: 'light-switch', ScreensaverEntityOnColor: Green, ScreensaverEntityOffColor: HMIOff  },
              mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: Green, ScreensaverEntityOffColor: HMIOff  },
              
              VumerV Offline
              VumerV Offline
              Vumer
              wrote on last edited by
              #555

              @armilar sagte in SONOFF NSPanel mit Lovelace UI:

              HMIOff

              Funktioniert, Danke 👍
              aber was bedeutet " HMIOff " ?

              1 Reply Last reply
              0
              • ArmilarA Offline
                ArmilarA Offline
                Armilar
                Most Active Forum Testing
                wrote on last edited by Armilar
                #556

                @vumer

                Du sieht im oberen Teil des TS-Scriptes eine Menge Farb-Konstanten:

                const HMIOff:           RGB = { red:  68, green: 115, blue: 158 };     // Blau-Off - Original Entity Off
                const HMIDark:          RGB = { red:  29, green:  29, blue:  29 };     // Original Background Color
                const Off:              RGB = { red: 253, green: 128, blue:   0 };     // Orange-Off - schönere Farbübergänge
                const On:               RGB = { red: 253, green: 216, blue:  53 };
                

                Das sind alles RGB-Farbdefinitionen

                Du kannst dir natürlich auch eigene anlegen... oder vorhandene anpassen

                und herzlich willkommen... 😊

                Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                https://github.com/joBr99/nspanel-lovelace-ui/wiki

                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                VumerV 1 Reply Last reply
                1
                • ArmilarA Armilar

                  @vumer

                  Du sieht im oberen Teil des TS-Scriptes eine Menge Farb-Konstanten:

                  const HMIOff:           RGB = { red:  68, green: 115, blue: 158 };     // Blau-Off - Original Entity Off
                  const HMIDark:          RGB = { red:  29, green:  29, blue:  29 };     // Original Background Color
                  const Off:              RGB = { red: 253, green: 128, blue:   0 };     // Orange-Off - schönere Farbübergänge
                  const On:               RGB = { red: 253, green: 216, blue:  53 };
                  

                  Das sind alles RGB-Farbdefinitionen

                  Du kannst dir natürlich auch eigene anlegen... oder vorhandene anpassen

                  und herzlich willkommen... 😊

                  VumerV Offline
                  VumerV Offline
                  Vumer
                  wrote on last edited by
                  #557

                  @armilar sagte in SONOFF NSPanel mit Lovelace UI:

                  Das sind alles RGB-Farbdefinitionen

                  jetzt wird vieles klar. Danke.

                  Und was ist wenn ich das Icon verschieben möchte?

                  ArmilarA 1 Reply Last reply
                  0
                  • VumerV Vumer

                    @armilar sagte in SONOFF NSPanel mit Lovelace UI:

                    Das sind alles RGB-Farbdefinitionen

                    jetzt wird vieles klar. Danke.

                    Und was ist wenn ich das Icon verschieben möchte?

                    ArmilarA Offline
                    ArmilarA Offline
                    Armilar
                    Most Active Forum Testing
                    wrote on last edited by
                    #558

                    @vumer verschieben?

                    Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                    https://github.com/joBr99/nspanel-lovelace-ui/wiki

                    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                    VumerV 1 Reply Last reply
                    0
                    • ArmilarA Armilar

                      @vumer verschieben?

                      VumerV Offline
                      VumerV Offline
                      Vumer
                      wrote on last edited by
                      #559

                      @armilar
                      Ja, z.B. nicht links oben sondern unten mittig von dem Taster

                      ArmilarA 2 Replies Last reply
                      0
                      • VumerV Vumer

                        @armilar
                        Ja, z.B. nicht links oben sondern unten mittig von dem Taster

                        ArmilarA Offline
                        ArmilarA Offline
                        Armilar
                        Most Active Forum Testing
                        wrote on last edited by
                        #560

                        @vumer so flexibel sind wir auch wieder nicht 😉

                        Du kannst zwar zwischen 2 Screensaver Designs wählen, jedoch die Position der Steuerelemente nicht verschieben.

                        Das wären Änderungen der HMI (Nextion-Design) und die werden höchstens per Issue in github bearbeitet.

                        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                        VumerV 1 Reply Last reply
                        0
                        • ArmilarA Armilar

                          @vumer so flexibel sind wir auch wieder nicht 😉

                          Du kannst zwar zwischen 2 Screensaver Designs wählen, jedoch die Position der Steuerelemente nicht verschieben.

                          Das wären Änderungen der HMI (Nextion-Design) und die werden höchstens per Issue in github bearbeitet.

                          VumerV Offline
                          VumerV Offline
                          Vumer
                          wrote on last edited by
                          #561

                          @armilar sagte in SONOFF NSPanel mit Lovelace UI:

                          so flexibel sind wir auch wieder nicht

                          alles klar 🙂
                          die idee war, später, einen blinkenden Punkt. Rot bei Warnungen, gelb bei ...

                          ArmilarA 1 Reply Last reply
                          0
                          • VumerV Vumer

                            @armilar
                            Ja, z.B. nicht links oben sondern unten mittig von dem Taster

                            ArmilarA Offline
                            ArmilarA Offline
                            Armilar
                            Most Active Forum Testing
                            wrote on last edited by
                            #562

                            @vumer

                            Ich frage mich aber auch, wo denn noch Platz für die Icons im unteren Bereich wäre? 🙄

                            2a8c6242-a56a-4016-95d3-e54f96e5af52-image.png

                            Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                            https://github.com/joBr99/nspanel-lovelace-ui/wiki

                            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                            1 Reply Last reply
                            0
                            • VumerV Vumer

                              @armilar sagte in SONOFF NSPanel mit Lovelace UI:

                              so flexibel sind wir auch wieder nicht

                              alles klar 🙂
                              die idee war, später, einen blinkenden Punkt. Rot bei Warnungen, gelb bei ...

                              ArmilarA Offline
                              ArmilarA Offline
                              Armilar
                              Most Active Forum Testing
                              wrote on last edited by Armilar
                              #563

                              @vumer sagte in SONOFF NSPanel mit Lovelace UI:

                              bei Warnungen

                              Lasse dir doch die Warnungen (Überschrift und Text) direkt auf dem Screensaver anzeigen. Dafür gibt es die Screensaver-Notification-Datenpunkte unter ScreensaverInfo in 0_userdata.

                              97be278f-10b2-4c29-a662-41be2cde0f74-image.png

                              Einfach reinschreiben. Mit klick auf den Screensaver werden die Datenpunkte wieder gelöscht.

                              Würde dann so aussehen
                              0a95a55b-b0a3-4755-a6cc-81c645ffe44a-image.png

                              Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                              https://github.com/joBr99/nspanel-lovelace-ui/wiki

                              Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                              1 Reply Last reply
                              1
                              • ArmilarA Armilar

                                @gelberlemmy

                                SetOption146 1
                                

                                in die Tasmota Console eingeben. Dann sollte auch die ESP-Temperatur wieder im Hauptmenü zu sehen sein.

                                Ist eine Änderung in Tasmota. Die ESP-Temperatur ist seit der 12.2.0 per Default abgeschaltet.

                                gelberlemmyG Offline
                                gelberlemmyG Offline
                                gelberlemmy
                                wrote on last edited by
                                #564

                                @armilar sagte in SONOFF NSPanel mit Lovelace UI:

                                @gelberlemmy

                                SetOption146 1
                                

                                in die Tasmota Console eingeben. Dann sollte auch die ESP-Temperatur wieder im Hauptmenü zu sehen sein.

                                Ist eine Änderung in Tasmota. Die ESP-Temperatur ist seit der 12.2.0 per Default abgeschaltet.

                                Super hat geklappt, danke

                                1 Reply Last reply
                                0
                                • ArmilarA Armilar

                                  SONOFF NSPanel Touch Display Switch

                                  mit Lovelace UI und TASMOTA Firmware

                                  60848839-53b0-4e2b-a370-28e02960bfcd-image.png

                                  Das Thema https://forum.iobroker.net/topic/50888/sonoff-nspanel/1542 wird hier jetzt fortgesetzt...

                                  An alle begeisterten NSPanel'er

                                  Dieser Thread soll sich jetzt ausschließlich mit den Fragen und Themen rund um das SONOFF NSPanel mit Lovelace UI beschäftigen.

                                  Wie alles begann:

                                  • 22.10.2021
                                    Blakadder's Dokumentation der Dekodierung des NSPanel-Kommunikationsprotokolls und Einrichtung der Steuerung des Nextion-Bildschirms mit benutzerdefinierter Firmware.
                                    https://blakadder.com/nspanel-hacking/
                                  • 01.01.2022
                                    Erste Gehversuche mit Blockly-Scripts auf der Original-Firmware nach einer ersten coolen Anleitung für den ioBroker von @haus-automatisierung.
                                  • ...
                                    Funkstille auf allen Kanälen, da das Panel in der Originalsoftware einfach zu wenig Funktionalität hat. Ein Vergleich mit "Jugend forscht" wäre maßlos übertrieben...
                                  • 15.01.2022
                                    @jobr99 Erstes POC von Lovelace Konzept mit ESPhome Komponente, da Nextion Upload Protcol unter tasmota nicht umsetzbar ist (berry tcpclient crashed ESP, HTTP Libary ist auf viel zu kleine Dateien limitiert)
                                  • 17.01.2022
                                    peepshow-21 Erste implementierung von Nextion Upload Protocol 1.1 mit Workaround für HTTP Libary über Java Converter um tft files für tasmota vorzubereiten
                                  • 20.01.2022
                                    s-hadinger fixt bug in berry tcpclient
                                  • 31.01.2022
                                    Erste Version für HomeAssistant mit Nodered und Tasmota
                                  • 08.02.2022
                                    @joBr99 Erste Implementierung von Nextion Upload Protokoll 1.2 in Berry basiertend auf HTTP Range Header Requests und lokalem Buffer (funktioniert nur mit -nspanel tasmota build uns PSRAM Support)
                                  • 12.02.2022
                                    peepshow-21 Implementierung von Nextion Upload Protocol 1.2 mit vollständigem Download und "streaming" zum Nextion Screen während dem Download
                                  • 05.03.2022
                                    @joBr99 Portierung von Node-Red Flow zu AppDaemon, da AppDaemon sich besser eignet zur Implementierung vom Backend
                                  • 13.03.2022
                                    @joBr99 Erste Version von Lovelace Berry Driver basierend auf Upload Protocol Implementierung von peepshow-21, da diese etwas stabiler läuft mit zusätzlichem Error Handling
                                  • 30.03.2022
                                    @joBr99 kommt mit der Info um die Ecke, dass es ein erstes Script v1.9.0 für den ioBroker von @Britzelpuf gibt. Zu diesem Zeitpunkt gab es bereits den Screensaver die Seitennavigation und die Möglichkeit eine Lampe, einen Dimmer eine Taste und eine Info, sowie die popUps für Licht (Brightness) und Shutter (Position) und einen Thermostaten zur Steuerung einzubinden.
                                  • 10.04.2022
                                    @joBr99 Firmware got bigger and bigger with >15 Minutes Flashing Time for the tft file
                                    Increased Flashing Speed of Berry Driver from 115200 to 921600 and added skipping to the End with HTTP Range Headers, resulted in faster display flashing
                                  • 11.04.2022
                                    @Armilar macht seine ersten Änderungen auf github und hört seit dem nicht mehr auf, weitere Funktionen in das TSScript hinzuzufügen... 😉
                                    @joBr99 entwickelt die HMI und neue Funktionen für Home Assistant schneller als der Wind - und macht das Panel zur echten Bereicherung für jedes Smart Home 😊 👏

                                  heute

                                  • Eine der besten Community's die ich jemals erlebt habe. Hilfsbereit und kompetent wird jeder mit Hilfestellungen und Problemlösungen in kürzester Zeit versorgt.

                                  Es macht großen Spaß zusammen mit euch...

                                  VG
                                  Armilar


                                  Beispiele:

                                  09ae2c13-c606-4ef5-88dc-26fccd14dd85-image.png

                                  cf500331-70d8-4150-ac59-aabff1a27f7f-image.png

                                  a5dbb6f4-403b-4081-b2e9-a17cbc3af26c-image.png

                                  b41e2fed-abaa-4993-ae6f-2344f4e3afc8-image.png

                                  048fc1af-d72e-45fe-9102-688d40b2df18-image.png

                                  08edcab4-03b7-4c0f-923e-0f5b1c639cca-image.png

                                  ad94cddf-a0d0-40a7-971c-16504e8949fd-image.png

                                  263b23cc-d003-4af6-98b6-ed994c244890-image.png

                                  07373515-a92e-4cc9-b717-716e4fd4413f-image.png

                                  7c4a1f2f-26d7-4aeb-987d-3e30a671378d-image.png


                                  Features:

                                  • cardEntities für die Unterstützung diverser Steuerelemente (siehe Beispiele)
                                  • cardGrid (3x2-Raster) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
                                  • cardGrid2 (4x2) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
                                  • cardGrid3 (2x2) für die Unterstützung diverser Steuerelemente (siehe Beispiele)
                                  • cardPower zur Visualisierung der Energieverteilung
                                  • cardAlarm als Seite für Alarmanlagen
                                  • cardMedia - der Media-Player (Diverse Adapter)
                                  • cardThermo - Seite für Thermostat oder Klimaanlage
                                  • cardQR - Seite mit QRCode zur Anzeige von WLAN-Informationen
                                  • cardChart - Balkendiagramme
                                  • Detailseiten für Leuchtmittel (Helligkeit, Temperatur und Farbe)
                                  • Detailseite für Jalousien/Rollos (Position und Tilt)
                                  • Detailseite für Ventilatoren
                                  • Detailseite für Timer
                                  • Auswahl Detailseite für Werteliste
                                  • Bildschirmschonerseite mit Uhrzeit, Datum und Wetterinformationen oder/und Infos
                                  • Multilingual (unterstützt über 40 Sprachen)
                                  • Unbegrenzte Anzahl an Seiten und Unterseiten
                                  • Abfallkalender
                                  • Favoritenseiten
                                  • etc.

                                    ich glaube da ist eine verbesserte "cardMedia" in der Entwicklung - sieht cool aus...
                                    72571469-4a78-4caf-ba0e-7a67865bb13c-image.png

                                  NsPanel Lovelace UI ist eine Firmware für den Nextion-Bildschirm innerhalb des NSPanel.

                                  Die allgemeine Idee ist, dass das Nextion-Display einen Seitenzähler durchläuft und der ESP32 dem Display sagt, was zu tun ist. Alles ist dynamisch durch Alias-Erstellung konfigurierbar, es ist nicht erforderlich, Nextion Editor zu programmieren. Neben der Seiten-Definition sind im ioBroker keine Programmierkenntnisse erforderlich. Es ist im ioBroker ebenfalls kein Lovelace-Adapter erforderlich.

                                  Das Panel arbeitet mit Tasmota und MQTT. Um das Panel zu steuern und mit Inhalten von ioBroker zu aktualisieren, gibt es ein vordefiniertes TypeScript (TS) für den JavaScript-Adapter.


                                  Aktuelle Wiki (Anleitung) für den ioBroker

                                  https://github.com/joBr99/nspanel-lovelace-ui/wiki by @Kuckuckmann

                                  NsPanelTs.ts (TypeScript) für ioBroker v4.9.3.X

                                  zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar und @TT-Tom
                                  https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker
                                  abgestimmt auf:

                                  • TFT 58 / v4.9.3 ( by @joBr99 / Armilar > 4.4.0)
                                  • BerryDriver 9 ( by peepshow-21 (based on code by blakadder and s-hadinger))
                                  • Tasmota 15.1.0 ( by Theo Arends ) --> Theo-Arends-Sonoff-MQTT-OTA

                                  Projekt:

                                  by @joBr99

                                  • main (Home Assistant - Version und Nextion HMI): https://github.com/joBr99/nspanel-lovelace-ui by @joBr99
                                  • ioBroker: https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker by @Armilar (HA - Adaption)

                                  Icon-Mapper:

                                  • icon_mapping.ts:
                                    https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts
                                    (TypeScript muss in global liegen)

                                  Icons:

                                  unter: https://docs.nspanel.pky.eu/icon-cheatsheet.html

                                  Video-Tutorial:

                                  https://www.youtube.com/watch?v=ZPLJk2ZLo_8 by @haus-automatisierung

                                  gelberlemmyG Offline
                                  gelberlemmyG Offline
                                  gelberlemmy
                                  wrote on last edited by gelberlemmy
                                  #565

                                  @armilar guten Morgen, ich habe ein komische Phänomen. Mir fehlt bei der Alarmcard die Tastatur. Warum auch immer. Mit einem mal war Sie weg. Ich habe einmal mein Panel neu in in IOBroker intrigiert, aber immer noch weg. Hat jemand einen Tipp für mich ? habe auch keine Fehlermeldung im LOG.

                                  Schönen Sonntag

                                  Gruß André

                                  IMG_20221106_094319.jpg

                                  ArmilarA 1 Reply Last reply
                                  0
                                  • gelberlemmyG gelberlemmy

                                    @armilar guten Morgen, ich habe ein komische Phänomen. Mir fehlt bei der Alarmcard die Tastatur. Warum auch immer. Mit einem mal war Sie weg. Ich habe einmal mein Panel neu in in IOBroker intrigiert, aber immer noch weg. Hat jemand einen Tipp für mich ? habe auch keine Fehlermeldung im LOG.

                                    Schönen Sonntag

                                    Gruß André

                                    IMG_20221106_094319.jpg

                                    ArmilarA Offline
                                    ArmilarA Offline
                                    Armilar
                                    Most Active Forum Testing
                                    wrote on last edited by
                                    #566

                                    @gelberlemmy

                                    kann es sein, dass der Alias fehlt?

                                    Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                    https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                    gelberlemmyG 1 Reply Last reply
                                    0
                                    • VumerV Offline
                                      VumerV Offline
                                      Vumer
                                      wrote on last edited by Vumer
                                      #567

                                      @armilar
                                      ich hab alternativeScreensaverLayout auf false geändert und jetzt funktioniert es mit dem ScreensaverEntityOnColor nicht.

                                      ArmilarA 1 Reply Last reply
                                      0
                                      • VumerV Vumer

                                        @armilar
                                        ich hab alternativeScreensaverLayout auf false geändert und jetzt funktioniert es mit dem ScreensaverEntityOnColor nicht.

                                        ArmilarA Offline
                                        ArmilarA Offline
                                        Armilar
                                        Most Active Forum Testing
                                        wrote on last edited by
                                        #568

                                        @vumer

                                        ist doch die Default-Einstellung und hat gestern auch funktioniert. Wie sieht denn die Config dazu aus? Ggfs. Farben verändert?

                                        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                        1 Reply Last reply
                                        0
                                        • VumerV Offline
                                          VumerV Offline
                                          Vumer
                                          wrote on last edited by
                                          #569

                                          @armilar

                                          export const config: Config = {
                                              panelRecvTopic: 'mqtt.0.SmartHome.NSPanel-1.tele.RESULT',       // anpassen
                                              panelSendTopic: 'mqtt.0.SmartHome.NSPanel-1.cmnd.CustomSend',   // anpassen
                                              firstScreensaverEntity: { ScreensaverEntity: 'accuweather.0.Hourly.h0.PrecipitationProbability', ScreensaverEntityIcon: 'weather-pouring', ScreensaverEntityText: 'Regen', ScreensaverEntityUnitText: '%', ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100} },
                                              secondScreensaverEntity: { ScreensaverEntity: 'accuweather.0.Current.WindSpeed', ScreensaverEntityIcon: 'weather-windy', ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: 'km/h', ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 120} },
                                              thirdScreensaverEntity: { ScreensaverEntity: 'accuweather.0.Current.UVIndex', ScreensaverEntityIcon: 'solar-power', ScreensaverEntityText: 'UV', ScreensaverEntityUnitText: '', ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 9} },
                                              fourthScreensaverEntity: { ScreensaverEntity: 'accuweather.0.Current.RelativeHumidity', ScreensaverEntityIcon: 'water-percent', ScreensaverEntityText: 'Luft', ScreensaverEntityUnitText: '%', ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65} },
                                              alternativeScreensaverLayout: false,
                                              autoWeatherColorScreensaverLayout: true,
                                              mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel-1.stat.POWER1', ScreensaverEntityIcon: 'gesture-tap-button', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off  },
                                              mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel-1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off  },
                                              timeoutScreensaver: 20,
                                              dimmode: 20,
                                              active: 100, //Standard-Brightness TFT
                                              screenSaverDoubleClick: true,
                                              locale: 'de-DE',                    // en-US, de-DE, nl-NL, da-DK, es-ES, fr-FR, it-IT, ru-RU, etc.
                                              timeFormat: '%H:%M',                // currently not used
                                              dateFormat: '%A, %d. %B %Y',        // currently not used
                                              weatherEntity: 'alias.0.Wetter',    // Dieser Alias muss erstellt werden, damit die 4 kleineren Icons (Wetter oder DP) angezeigt werden können
                                              defaultOffColor: Off,
                                              defaultOnColor: On,
                                              defaultColor: Off,
                                              defaultBackgroundColor: Black,    //New Parameter
                                              temperatureUnit: '°C',
                                              pages: [
                                                      //SqueezeboxRPC,      //Beispiel-Seite
                                                      SpotifyPremium,     //Beispiel-Seite
                                                      Buero_Seite_1,      //Beispiel-Seite
                                                      CardPowerExample,   //Beispiel-Seite
                                                      //Alexa,              //Beispiel-Seite
                                                      Buero_Seite_2,      //Beispiel-Seite
                                                      //Buero_Klimaanlage,  //Beispiel-Seite
                                                      Button_1,           //Beispiel-Seite
                                                      Test_Licht1,        //Beispiel-Seite
                                                      Test_Licht2,        //Beispiel-Seite
                                                      Test_Funktionen,    //Beispiel-Seite
                                                      Fenster_1,          //Beispiel-Seite
                                                      Subpages_1,         //Beispiel-Seite
                                                      //Buero_Themostat,    //Beispiel-Seite
                                                      //Buero_Alarm,        //Beispiel-Seite
                                                      Service             //Beispiel-Seite
                                              ],
                                              subPages: [
                                                          Abfall,                     //Beispiel-Unterseite
                                                          WLAN,                       //Beispiel-Unterseite
                                                          NSPanel_Infos,              //Beispiel-Unterseite
                                                          NSPanel_Einstellungen,      //Beispiel-Unterseite
                                                          NSPanel_Firmware_Updates,   //Beispiel-Unterseite
                                                          Subpage2_Level_2
                                              ],
                                              button1Page: button1Page,   //Beispiel-Seite auf Button 1, wenn Rule2 definiert - Wenn nicht definiert --> button1Page: null,
                                              button2Page: button2Page    //Beispiel-Seite auf Button 2, wenn Rule2 definiert - Wenn nicht definiert --> button1Page: null,
                                          };
                                          
                                          const HMIOff:           RGB = { red:  68, green: 115, blue: 158 };     // Blau-Off - Original Entity Off
                                          const HMIDark:          RGB = { red:  29, green:  29, blue:  29 };     // Original Background Color
                                          const Off:              RGB = { red: 136, green: 136, blue: 136 };     // Orange-Off - schönere Farbübergänge
                                          const On:               RGB = { red:   0, green: 255, blue:   0 };
                                          const MSRed:            RGB = { red: 251, green: 105, blue:  98 };
                                          const MSYellow:         RGB = { red: 255, green: 235, blue: 156 };
                                          

                                          ich hatte gestern

                                          alternativeScreensaverLayout: true,
                                          
                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          160

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe