Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. Sonoff NSPanel

NEWS

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

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

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.2k

Sonoff NSPanel

Geplant Angeheftet Gesperrt Verschoben Hardware
1.5k Beiträge 78 Kommentatoren 637.1k Aufrufe 80 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • M Mayan

    Die cardQR funktioniert super.
    Habe aber noch 5 Probleme

    1. Wenn ich die Card QR als “subPage“:true einstelle, bekomme ich weiterhin Navigation vor und zurück (kein direktes zurück zur Startseite)
    2. Wenn ich auf einer subPage bin und dort z.B. eine Lampe schalte, springt das Display sofort nach dem Schalten auf die Hauptseite zurück. Es wäre schön wenn es auf der subPage bleibt, damit ich dort noch andere Schalter betätigen kann
    3. Meldungen (popupNotify) im Screensaver werden nach Aktualisierungen der Wetterdaten überschrieben (bleiben im Hintergrund und die Wettersymbole legen sich drüber. Sieht seltsam aus)image.jpg
      Wäre ein Datenpunkt true/false möglich, der bei true den popupNotify anzeigt und bei false wieder das Wetter?
    4. Auf der button1Page fehlen die Navigationspfeile
      (auf der button2Page sind sie vorhanden)
      Kann ich das irgendwo einstellen?
    5. Seiten vom Typ cardGrid funktionieren nur noch als Taster (nur Alias Typ Taster, Alias vom Typ Licht verursachen Fehlermeldungen)
      Ich hatte schon die Vorgängerversionen am Laufen. Dort ging es mal. (Version ohne PopupNotify-Pages)

    Sonst läuft alles Perfekt!

    ArmilarA Offline
    ArmilarA Offline
    Armilar
    Most Active Forum Testing
    schrieb am zuletzt editiert von Armilar
    #624

    @mayan sagte in Sonoff NSPanel:

    Wenn ich auf einer subPage bin und dort z.B. eine Lampe schalte, springt das Display sofort nach dem Schalten auf die Hauptseite zurück. Es wäre schön wenn es auf der subPage bleibt, damit ich dort noch andere Schalter betätigen kann

    Zu 1) Habe die cardQR noch nie als subPage genutzt --> sehe ich mir an --> vermute, das die nur die Standard 1/1 Navigation benutzt --> Bugfix folgt...
    Zu 2) Habe aktuell das gleiche Verhalten in der subPage und bin am suchen 😉 --> Bugfix folgt...
    Zu 3) Habe ich auch schon gehabt (eher selten), jedoch wäre das ein Thema für @joBr99 --> Beim ersten Mal sieht es gut aus. Wenn eine weitere Nachricht (Notify) an den geöffneten Screensaver übertragen wird, dann passiert genau das.
    Zu 4) Die button1Page und button2Page sind keine Pages, die im regulären Menü sind, sondern wie im Skript Header beschrieben über die zwei Hardware-Buttons unten am Panel als zum Beispiel "Favoriten"-Seiten arbeiten. Wenn die button2Page Menüpfeile hat, dann wäre das ein Bug 😉 . Die beiden Tasten liefern nämlich keine Page-Id und somit können die als Menüseite nicht gesteuert werden. Wir emulieren die Page-ID in dem ein negativer Wert angenommen wird, der mit verlassen über den Screensaver wieder 0 wird.

    Die Hardware-Buttons steuern regulär die Relais (als Lichtschalter), können aber alternativ auch als "Sonderseiten ohne Menü" fungieren. Dazu müsste die o.a. Rule2 aus dem Skript im Tasmota definiert und aktiviert werden. Oder etwas abgewandelt würde auch eine Favoritenpage und ein Schalter funktionieren.

    Die button1Page oder button2Page würde ich aber auch nicht in das Menü unter pages aufnehmen, sondern dann eine neue cardGrid oder cardEntities bauen, die einen abweichenden Variablennamen hat (z.B. Seite_9 😉 , aber sonst die gleichen <pageItem> wie z. B. in der button1Page aufruft)

    Zu 5) Sehe ich mir ebenfalls an. Kann nichts weltbewegendes sein --> Bugfix folgt

    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.

    J 1 Antwort Letzte Antwort
    0
    • M Offline
      M Offline
      Mayan
      schrieb am zuletzt editiert von
      #625

      Nochmal zu 4.

      Wenn du im Skript unter
      funktion HandleaHardwareButton
      config.button1Page pageId von -1 auf -2 stellst, sind die Navigationspfeile vorhanden.
      Wenn ich die button1Page als subPage: true stelle, habe ich einen zurück Pfeil.

      Ich benötige eine Navigation um aus den beiden Button Seiten wieder raus zu kommen. Sonst muss ich immer warten bis der Screensaver kommt. Ich nutze die beiden Buttons als Favoriten Seiten, da ich die Relais nicht benötige.

      ArmilarA 1 Antwort Letzte Antwort
      0
      • M Mayan

        Nochmal zu 4.

        Wenn du im Skript unter
        funktion HandleaHardwareButton
        config.button1Page pageId von -1 auf -2 stellst, sind die Navigationspfeile vorhanden.
        Wenn ich die button1Page als subPage: true stelle, habe ich einen zurück Pfeil.

        Ich benötige eine Navigation um aus den beiden Button Seiten wieder raus zu kommen. Sonst muss ich immer warten bis der Screensaver kommt. Ich nutze die beiden Buttons als Favoriten Seiten, da ich die Relais nicht benötige.

        ArmilarA Offline
        ArmilarA Offline
        Armilar
        Most Active Forum Testing
        schrieb am zuletzt editiert von Armilar
        #626

        @mayan sagte in Sonoff NSPanel:

        Nochmal zu 4.

        Wenn du im Skript unter
        funktion HandleaHardwareButton
        config.button1Page pageId von -1 auf -2 stellst, sind die Navigationspfeile vorhanden.
        Wenn ich die button1Page als subPage: true stelle, habe ich einen zurück Pfeil.

        Ich benötige eine Navigation um aus den beiden Button Seiten wieder raus zu kommen. Sonst muss ich immer warten bis der Screensaver kommt. Ich nutze die beiden Buttons als Favoriten Seiten, da ich die Relais nicht benötige.

        Ich sehe mal was sich da machen lässt. Da die cardEntities und die cardGrid nicht über ein "x" zum verlassen der Dialoge (analog popUp) verfügen, könnte der Pfeil den Screensaver früher holen oder einen Seitenaufbau Seite "0" initiieren. Mal sehen was da geht.

        Werde aber in dieser Woche wenig bis keine Zeit dazu haben. Wird also eher Wochenende oder Anfang nächster Woche...

        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 Antwort Letzte Antwort
        0
        • M Offline
          M Offline
          Mayan
          schrieb am zuletzt editiert von
          #627

          Ok, danke schon mal im Voraus!

          1 Antwort Letzte Antwort
          0
          • ArmilarA Armilar

            @mayan sagte in Sonoff NSPanel:

            Wenn ich auf einer subPage bin und dort z.B. eine Lampe schalte, springt das Display sofort nach dem Schalten auf die Hauptseite zurück. Es wäre schön wenn es auf der subPage bleibt, damit ich dort noch andere Schalter betätigen kann

            Zu 1) Habe die cardQR noch nie als subPage genutzt --> sehe ich mir an --> vermute, das die nur die Standard 1/1 Navigation benutzt --> Bugfix folgt...
            Zu 2) Habe aktuell das gleiche Verhalten in der subPage und bin am suchen 😉 --> Bugfix folgt...
            Zu 3) Habe ich auch schon gehabt (eher selten), jedoch wäre das ein Thema für @joBr99 --> Beim ersten Mal sieht es gut aus. Wenn eine weitere Nachricht (Notify) an den geöffneten Screensaver übertragen wird, dann passiert genau das.
            Zu 4) Die button1Page und button2Page sind keine Pages, die im regulären Menü sind, sondern wie im Skript Header beschrieben über die zwei Hardware-Buttons unten am Panel als zum Beispiel "Favoriten"-Seiten arbeiten. Wenn die button2Page Menüpfeile hat, dann wäre das ein Bug 😉 . Die beiden Tasten liefern nämlich keine Page-Id und somit können die als Menüseite nicht gesteuert werden. Wir emulieren die Page-ID in dem ein negativer Wert angenommen wird, der mit verlassen über den Screensaver wieder 0 wird.

            Die Hardware-Buttons steuern regulär die Relais (als Lichtschalter), können aber alternativ auch als "Sonderseiten ohne Menü" fungieren. Dazu müsste die o.a. Rule2 aus dem Skript im Tasmota definiert und aktiviert werden. Oder etwas abgewandelt würde auch eine Favoritenpage und ein Schalter funktionieren.

            Die button1Page oder button2Page würde ich aber auch nicht in das Menü unter pages aufnehmen, sondern dann eine neue cardGrid oder cardEntities bauen, die einen abweichenden Variablennamen hat (z.B. Seite_9 😉 , aber sonst die gleichen <pageItem> wie z. B. in der button1Page aufruft)

            Zu 5) Sehe ich mir ebenfalls an. Kann nichts weltbewegendes sein --> Bugfix folgt

            J Offline
            J Offline
            joBr99
            schrieb am zuletzt editiert von
            #628

            @armilar said in Sonoff NSPanel:

            Zu 3) Habe ich auch schon gehabt (eher selten), jedoch wäre das ein Thema für @joBr99 --> Beim ersten Mal sieht es gut aus. Wenn eine weitere Nachricht (Notify) an den geöffneten Screensaver übertragen wird, dann passiert genau das.

            Die screensaver notifications verwende ich nirgends in meinem backend, aber ich gehe davon aus, das ich bei mir das selbe verhalten hätte. Ich schaue mal ob ich die notification nach dem wetter update neu rendern kann.

            J 1 Antwort Letzte Antwort
            0
            • J joBr99

              @armilar said in Sonoff NSPanel:

              Zu 3) Habe ich auch schon gehabt (eher selten), jedoch wäre das ein Thema für @joBr99 --> Beim ersten Mal sieht es gut aus. Wenn eine weitere Nachricht (Notify) an den geöffneten Screensaver übertragen wird, dann passiert genau das.

              Die screensaver notifications verwende ich nirgends in meinem backend, aber ich gehe davon aus, das ich bei mir das selbe verhalten hätte. Ich schaue mal ob ich die notification nach dem wetter update neu rendern kann.

              J Offline
              J Offline
              joBr99
              schrieb am zuletzt editiert von
              #629

              Notification Elemente werden jetzt neu gezeichnet, wenn sie Text enthalten.

              FlashNextion http://nspanel.pky.eu/lui.tft

              https://github.com/joBr99/nspanel-lovelace-ui/commit/5de1f2a883ef7afdbfce2750330f24a97fb358ba

              M 1 Antwort Letzte Antwort
              0
              • ArmilarA Armilar

                Neues Video Tutorial von haus-automatisierung.com
                https://www.youtube.com/watch?v=ZPLJk2ZLo_8 - NSPanel mit Lovelace UI - so habe ich mir das vorgestellt!

                Ansonsten weiterhin gültig:
                Ich habe hier mal eine aktuelle Anleitung für euch erstellt. Leider kann ich nicht auf jedes Detail beim Alias eingehen, da das bereits den Rahmen sprengen würde, jedoch soll es ein Leitfaden sein, wie man etwas schneller zum Ziel kommt.

                Step für Step - Anleitung zur Einrichtung eines Sonoff NSPanel mit Lovelace UI unter ioBroker

                219c8bad-2af0-42e6-a041-b4ba319ca96d-image.png
                1. Voraussetzungen für den ioBroker

                Für den Betrieb benötigst du „keinen“ ioBroker-lovelace-Adapter. Die komplette lovelace-Integration erfolgt über die TFT-Firmware und die nachfolgenden ioBroker-Adapter.

                • MQTT-Adapter
                  3ccd8404-afe3-4182-953c-2172ca1f0a09-image.png
                  Die Kommunikation zwischen dem NSPanel und ioBroker erfolgt mittels MQTT über Tasmota. Da der Datenpunkt „CustomSend“ erforderlich ist und dieser nicht im Sonoff-Adapter vorhanden ist und auch nicht durch das Skript angelegt werden kann, erfolgt die Kommunikation „nicht“ über den Sonoff-Adapter --> später mehr …
                • Javascript-Adapter
                  Es werden zwei Type-Skripte (TS = das etwas mächtigere Javascript) benötigt. Zum Einen ein Icon-Skript, da alle verwendeten Icons nicht als „echte Grafiken“ im Panel hinterlegt sind, sondern als Schriftzeichen-Symbole. Des Weiteren ein TS-Skript mit dem eigentlichen Laufzeit-Code, welches für jedes eingesetzte NSPanel vorhanden und konfiguriert sein sollte --> später mehr …
                • Geräte verwalten“-Adapter
                  bae0913f-fb3f-4856-90d1-eebb70b5a89a-image.png
                  Über diesen Adapter sollten die Aliase später (mit Ausnahme des Media-Alias für Alexa & Co.) erstellt werden --> später mehr …
                • Accu-Weather-Adapter
                  1f0dbb8b-a057-4237-a5c7-df7728a255c6-image.png
                  Spielt in erster Linie eine Rolle beim Screensaver-Wetter, da zum Ersten die Icons und die Temperatur-Informationen für den Forecast ausgelesen werden (falls genutzt) und zum Zweiten das aktuelle Wettericon für den Screensaver benötigt wird. Wer keine Wetterstation oder Außentemperatursensor hat, kann auch die Temperatur aus Accu-Weather importieren --> später mehr …
                • Alexa2-Adapter
                  Zur Visualisierung des Media-Player‘s sollte der Alexa2-Adapter installiert sein. Wenn du statt Alexa-Devices andere Hersteller wie z.B. Google-Home-Geräte oder in erster Linie der Spotify-Premium-Adapter im Einsatz hast, so ist es auch möglich mit einem entsprechend, alternativen Media-Adapter den Media-Player zu betreiben --> später mehr …

                2. Panel mit Tasmota flashen.
                Hierzu eignet sich für den "Hardwareteil" die Anleitung von haus-automatisierung.com

                (https://www.youtube.com/watch?v=uqPz08ZpFW8). Video bis 11 Minuten und 30 Sekunden befolgen!

                Die Beschreibung, wie man das Panel mit Tasmota flashen kann, ohne einen Kurzschluss zu erzeugen, ist schon sehr gut erklärt.
                Du installierst gleich einen „abweichenden“ Berry-Treiber (autoexec.be) als in der Video-Beschreibung genannt. Wenn du Tasmota und „noch nicht der Berry-Treiber“ installiert hast, bitte mit der Youtube-Video-Anleitung von Matthias ab Zeit=11:30 aufhören. Ich verwende in meinen Panels die Version „tasmota32-DE.bin“. Du kannst aber auch die „tasmota32-nspanel.bin“ verwenden.
                Zur MQTT-Konfiguration kommen wir im Punkt 4
                An dieser Stelle solltest du aber bereits die grundsätzliche Tasmota Konfiguration vornehmen:

                a) Unter „Sonstige Einstellungen“ trägst du im Feld Vorlage

                {"NAME":"NSPanel","GPIO":[0,0,0,0,3872,0,0,0,0,0,32,0,0,0,0,225,0,480,224,1,0,0,0,33,0,0,0,0,0,0,0,0,0,0,4736,0],"FLAG":0,"BASE":1}
                

                ein, hakst Aktivieren "an" und klickst auf Speichern. Du kannst natürlich auch noch Device und Friendly Name vergeben
                3ca891dc-0892-4ed4-8c44-384899cbb460-image.png
                b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern.
                c) Unter Konsolen/Konsole kannst du natürlich auch noch weitere Einstellungen vornehmen (ipaddress1 192.168.X.X für statische IP’s, setOption’s, etc.)

                3. Berry-Treiber installieren
                Im Tasmota findest du unter „Konsolen“ den Button „Verwalte Dateisystem“. Wenn du diesen anklickst, siehst du einen weiteren Button „Datei erstellen und bearbeiten“. Du änderst den Dateinamen „neue-datei.txt“ in „autoexec.be“ und fügst den Inhalt aus dem folgenden Link ein:

                https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be

                bbf8f99d-8f37-4903-9aa8-3b7decab2577-image.png
                Danach klickst du auf „Speichern“ und dann solltest du Tasmota rebooten.

                Wenn das Panel bereits unter einer anderen Variante (z.B. haus-automatisierung.com) installiert war, dann bitte alle Dateien (insbesondere autoexec.be und autoexec.bec) vorher über das Flammensymbol hinter dem Dateinamen löschen. Und von vorne mit dem Punkt 3 beginnen
                e0c99373-2e72-4f18-827d-5050f8d41962-image.png

                4. MQTT im Tasmota konfigurieren

                Im Tasmota unter „Einstellungen/MQTT konfigurieren“:
                a) Host deines ioBrokers vergeben
                b) Den Port deiner ioBroker-MQTT-Adapter-Instanz eingeben (für mqtt.0.). Wenn du noch keinen MQTT-Adapter installiert hast, dann verwende bitte nicht unbedingt den Standard-Port 1883. Dieser Port wird auch von anderen Pseudo-MQTT-Adaptern (Sonoff/Shelly/etc.) ebenfalls verwendet und führt im parallelen Betrieb mit anderen MQTT-Devices später unweigerlich zu Komplikationen. Ich verwende für die MQTT-Instanzen gerne einen Port ab 1886 oder 1887 oder 1888 oder höher. Das Problem zeigt sich in der Regel ab dem Zeitpunkt, an dem der „CustomSend“ nicht von deiner mqtt.0.-Instanz abonniert wird.
                c) Benutzer und Passwort aus der ioBroker-MQTT-Instanz eintragen
                d) Bei Client und topic trage ich in der Regel „NSPanel_X“ ein. (X = 1, 2, 3 oder WZ für Wohnzimmer, etc.)
                e) Für den full topic verwende ich in der Regel „SmartHome/%topic%/%prefix%/“.
                f) Speichern klicken und Einstellungen verlassen

                76749e7d-c630-406c-9d2b-a2424521fa96-image.png

                5. TFT-Firmware auf das Panel flashen
                Tasmota „Konsolen/Konsole“ öffnen und in die Kommandozeile

                FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.1.0.tft
                

                Achtung !!! Die aktuellsten Versionen (3.1.0 könnte nicht mehr aktuell sein) befinden sich "immer" im ioBroker TypeScript Header (TS-Skript) unter:
                https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

                eingeben, mit Enter bestätigen. Das Panel installiert jetzt die TFT-Firmware (Kann beim ersten Mal ein paar Minuten dauern – Fortschritt beobachten – am Ende erfolgt ein Reboot und das Panel wechselt in einen Screen – „Waiting for Content“
                4f4f6005-7cfd-444d-9b9a-14703194781d-image.png

                Das Panel wartet jetzt auf den Input von deinem ioBroker-Skript (Installierst du in einem der nächsten Punkte …)

                6. MQTT im ioBroker installieren und konfigurieren
                Wenn du bereits eine Instanz des MQTT-Adapters (z.B. mqtt.0.) nutzt, dann bitte den Port der MQTT-Adapter-Instanz auch im Tasmota-MQTT verwenden. Bitte auch hier den Hinweis aus Punkt 4b beachten und ggf. einen anderen Port für die Kommunikation eintragen.
                Ansonsten wählst du im ioBroker-Menü unter „Adapter“ den mqtt-Adapter aus und erstellst wie gewohnt eine Instanz des Adapters. Du kannst dir natürlich auch eine zusätzliche Instanz (z.B. mqtt.1. oder mqtt.2. etc.) erstellen.

                Meine Einstellungen im Reiter Verbindung sind z.B.:
                a) IP = Server/Broker
                b) WebSockets benutzen (angehakt)
                c) IP Adresse des ioBrokers (wahrscheinlich eth0 oder eth1) auswählen
                d) Port 1886 (analog Port aus Tasmota/MQTT)
                e) Benutzer (analog Benutzer aus Tasmota/MQTT)
                f) Kennwort + Kennwort wiederholen (analog Passwort aus Tasmota/MQTT)

                8182d534-bbe0-42a3-89b6-864bc30f9a17-image.png

                Meine Einstellungen im Reiter MQTT-Einstellungen sind:
                a) Maske zum Bekanntgeben eigener States: mqtt.0.* (Bei zusätzlicher Instanz entsprechend höher (mqtt.1.* etc.)
                b) Eigene States beim Verbinden publizieren (angehakt)
                c) States bei subscribe publizieren (angehakt)
                d) Leere Session erzwingen: Client-Einstellungen verwenden

                f184fc26-229d-4a75-84cc-74fda631c527-image.png

                7. CustomSend anlegen
                Der MQTT Datenpunkt wird benötigt und muss vom MQTT-Adapter angelegt werden. Ein manuelles Anlegen unter „Objekte“ oder „createState“ ist im ioBroker „nicht mehr“ möglich. Um den Datenpunkt zu erzeugen, öffnest du im Tasmota die Konsole und gibst ohne die Anführungszeichen

                „CustomSend time~12:00“
                

                ein.

                Alternativ kann auch der MQTT-Explorer (http://mqtt-explorer.com/) genutzt werden und ein payload unter .../cmnd abgesendet werden.
                7f77699c-98fd-4efa-bb72-ef74c731c411-image.png
                Danach sollte im MQTT-Adapter unter Objekte ein Datenpunkt: „SmartHome/NSPanel_X/cmnd/CustomSend“ erscheinen. Falls nicht, solange wiederholen bis dieser Datenpunkt abonniert wurde, oder ggfs. Nochmals die MQTT-Einstellungen überprüfen. In den Vergangenen Fragen dieses Topics ging es häufiger um diesen Punkt.

                8. Icon „TypeScript“ unter „Skripte“ im Verzeichnis „global“ anlegen
                Wie bereits in der Einleitung erwähnt, werden zwei TypeScripts (TS) benötigt. Das erste ist das Icon-Skript. Das Icon-Skript dient zur Übersetzung von Schriftzeichensymbolen zwischen dem Skript und der TFT-Firmware.
                Unter dem grünen Vezeichnisbaum „global“ im ioBroker-Menüpunkt Skripte erzeugst du ein Skript mit dem Namen „IconsSelector“ vom Typ: TypeScript (TS). Dort fügst du den Inhalt der Datei:

                https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts

                ein und startest das Skript.

                Nur zur Info: Du kannst die einzelnen Icon-Symbolnamen (aktuell 6896 unterschiedliche Icon-Symbole) auf

                https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html

                einsehen und später (kommen wir bei der Alias-Erstellung noch zu) auch jedes Icon in deinem Panel an entsprechender Stelle verwenden. Für die Einbindung sind die „Namen“ der Icons wichtig.

                9. TypeScript „NSPanelTs.ts“ anlegen
                Unter dem regulären Vezeichnisbaum „common“ im ioBroker-Menüpunkt Skripte erzeugst du (gerne auch in weiteren Unterverzeichnissen) ein weiteres Skript (Aktuell in für die TFT-Version 3.1.0) mit dem Inhalt:

                https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

                Für jedes einzelne NSPanel das du konfigurieren möchtest, musst du dieses Skript anlegen und speziell für dieses jeweilige NSPanel entsprechende Einstellungen vornehmen. Für den Skriptnamen verwende ich in der Regel eine Kombination aus Panel und Skriptversion, wie z.B.: NSPANEL_1_3.1.0

                (Es kommen in regelmäßigen Abständen weitere NSPanel-Features und Bug-Fixes in das GitHub-Skript in denen dann nur noch der untere Teil (--- ab hier keine Konfiguration mehr ---) ausgetauscht werden muss und die NSPanel-Parameter erhalten bleiben)

                Die aktuelle Änderung von 2.8.0 auf 2.9.0 ist z.B.:

                • Steuerung von Klimageräten/Klimaanlagen
                  0735190e-11c3-4bc2-bfd1-5899b8ee0eed-image.png

                • QR-Code für z.B. Gäste WLAN
                  a43e9656-891a-42ef-90cc-f9ed61850d4b-image.png

                • Neues Design für Thermostate
                  abd817a4-db10-45dc-9d5c-9adf6151dac5-image.png

                • etc.

                Im oberen Teil des Skripts sind die grundsätzlichen Teile der zu erstellenden Aliase, Konstanten und Variablen (auch Seiten) enthalten. An dieser Stelle ist zunächst wichtig, die Kommunikationsparameter für die MQTT-Kommunikation zu parametrieren (ab ca. Zeile 400) beginnend mit

                „export const config: Config = {
                

                Hier musst du die beiden nachfolgenden Kommunikations-Datenpunkte aus dem MQTT-Adapter eintragen:

                panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //bitte anpassen
                panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //bitte anpassen
                

                Falls abweichend, dann am besten direkt unter Objekte herauskopieren

                Bitte starte das Skript. Alle weiteren Parameter stellen wir später ein. Ab jetzt sollte der Startup-Screen „Waiting for Connection“ in den Sreensaver wechseln und minütlich die Uhrzeit an den Screensaver übertragen und das Datum aktualisiert werden.

                10. TypeScript konfigurieren
                Im Punkt 9 haben wir zunächst die nur Kommunikation zwischen Panel und Skript über MQTT hergestellt. Jetzt kommen wir zum Inhalt des Panels:

                Der untere Bereich vom Screensaver:

                a) Die 4 kleineren Icons
                Hier kannst du dich entscheiden, ob du die Wettervorhersage oder eigene Werte visualisieren möchtest. Wenn du dich für den Forecast entscheidest, dann muss die Variable

                var weatherForecast
                

                auf „true“ stehen. Ebenfalls sollte die Adapter-Instanz von Accu-Weather funktionsfähig eingerichtet sein. Für diese Werte ist kein Alias notwendig, da diese zur Laufzeit direkt aus dem Adapter ausgelesen werden.
                Möchtest du an dieser Stelle eigene Werte visualisieren, dann muss die Variable

                var weatherForecast
                

                auf „false“ stehen. Jetzt kannst du im Block beginnend mit

                export const config: Config = {
                

                die Datenpunkte firstScreensaverEntity bis fourthScreensaverEntity mit eigenen Datenpunkten füllen.
                Eine Ausnahme stellt das große Wetter-Icon und der Wert für die aktuelle Temperatur im Screensaver dar. Hierfür benötigen wir einen Alias (im nächsten Punkt)

                b) Diverse Datenpunkte
                Beim ersten Start des Scripts erzeugt das Skript unter 0_userdata diverse Datenpunkte für Screensaver Dimmode, interne Sensoren, Tasmota-Statuswerte, etc.
                Der Pfad kann im Skript unter „NSPanel_Path“ angepasst werden.

                c) Alexa
                Wenn du Alexa-Devices mit dem Media-Player nutzen möchtest, dann stelle noch das Standard-Alexa-Device (Seriennummer unter „var alexaDevice“) ein.
                Ebenso kannst du unter alexaSpeakerList eine Liste mit vorhandenen Alexa-Devices (und/oder Gruppen) anlegen, die von diesem NSPanel-MediaPlayer aus bedient werden sollen. Bleibt diese Liste leer, werden automatisch alle Devices aus dem Alexa2-Adapter importiert.

                11. Aliase Anlegen
                Jetzt kommt der eigentliche Teil der Seitengestaltung. Es werden keine Datenpunkte benötigt, sondern Aliase.
                Ein Alias ist „kein“ Datenpunkt, sondern ein Objekt mit mehreren Datenpunkten.
                Das Skript setzt entsprechende Trigger auf die Alias-Datenpunkte .SET, .GET, .ACTUAL usw. Deshalb werden deine Steuerelemente im Panel nicht greifen, wenn du mit einzelnen Datenpunkten aus den verschiedenen Adaptern arbeitest.
                Ich habe im Verlauf diverse Aliase erzeugt und auch in den ChangeLogs der jeweiligen Skript-Version sind die möglichen Aliase aufgeführt, daher gehe ich hier nicht (würde die Anleitung auch sprengen) im Detail auf die Aliase ein.
                Was brauche ich für einen Alias:
                a) Zunächst installierst du dir eine Instanz des Adapters „Geräte verwalten“
                b) Dann erstellst du dir einen Alias (Beispiel Wetter-Icon und aktueller Wert der Außentemperatur) Dieser Alias muss nur einmalig angelegt werden und funktioniert somit auch in jedem weiteren Panel.
                56982014-6811-49cc-9be3-bed78436ef57-image.png
                und etwas tiefer:
                a9814dc5-887b-4f8b-bb5b-742e104897b3-image.png
                c) Wenn du einen Alias für den Media-Player benötigst, dann erstelle die diesen Alias besser über den Adapter „Alias-Manager“,
                07fe0047-d38f-45c9-92f9-3811c80be0e8-image.png
                da der Adapter „Geräte verwalten“ bei diesem Alias nicht ordentlich arbeitet. Jedoch ist der auch so Komplex, das es für Alias-Anfänger schwer ist, einen Alias mit den korrekten Datenpunkten zu füllen.

                12. Seitengestaltung

                Am Besten benutzt ihr die Beispiele im Skript und legt entsprechende Aliase hierzu an, die auch in diesem ioBroker-Community-Topic innerhalb der letzten Wochen beschrieben wurden.

                Und noch ein paar Bilderchen:

                cardEntities mit Alias Lampe/Dimmer/Switch
                d8fcfee4-3137-4bae-85ba-6b70106c77c1-image.png

                cardEntities mit RGB und HUE Aliasen (Color)
                7f1f6db2-1d67-4b59-86c6-c06d4e8f4c2a-image.png

                popupLight mit Farbtemperatur und Brightness
                da3057b5-db2c-4b61-8716-8b2114e09aee-image.png

                popupLight mit ColorWheel
                1ba6c1ff-d682-4368-b36a-4952aed4bcbe-image.png

                cardGrid mit Radiosendern/Playlists (Alias Taste)
                6b8c8b7a-331e-4fc1-867b-4ce69705fd0a-image.png

                cardEntities mit Aliasen Lautstärke und Info
                9c36cfd7-b586-41db-8b4a-d68734dbbaae-image.png

                cardEntities mit Fenster, Tür, Jalousie und Verschluss
                d874876a-a190-4fab-b2a2-5a0f0bb0f62a-image.png

                cardEntities mit Abfallkalender
                098059be-4996-403b-a7a7-653915f10204-image.png

                cardMedia
                9e702c46-e5d1-452b-a60b-e5068cb64750-image.png

                cardAlarm
                8f8e9ecc-a4b2-48f1-b9b1-4fe68b4b2574-image.png

                cardGrid
                8a0ce26c-c49c-4bc3-b2ca-bc4897febd09-image.png

                cardEntities
                7b7c21e6-02aa-4a3e-bb25-c8127689d801-image.png

                cardEntities als Subpage unter cardEntities (verschachtelt)
                bd7783f7-9365-4333-b5bc-872ca92fd4b7-image.png

                cardNotify
                2dca9c22-df47-4c29-8e16-bc0323101cb1-image.png

                K Offline
                K Offline
                Kuckuckmann
                schrieb am zuletzt editiert von
                #630

                @armilar
                Vielen Dank 🙂

                ✌

                NSPanel Dokumentation im GitHub Wiki:

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

                1 Antwort Letzte Antwort
                0
                • J joBr99

                  Notification Elemente werden jetzt neu gezeichnet, wenn sie Text enthalten.

                  FlashNextion http://nspanel.pky.eu/lui.tft

                  https://github.com/joBr99/nspanel-lovelace-ui/commit/5de1f2a883ef7afdbfce2750330f24a97fb358ba

                  M Offline
                  M Offline
                  mameier1234
                  schrieb am zuletzt editiert von
                  #631

                  @jobr99 ich habe die neue Version geflasht.. .Dann wird mir aber nur noch der Screensaver angezeigt...

                  Wenn ich den Screen berühre wird das Panel dunkel.. ich kann aber (blind) bedienen...

                  Nach einiger Zeit kommt der Screensaver wieder ...

                  Wenn ich die 2.9 wieder einspiele, geht es wieder wie vorher..

                  Grüße,

                  Martin

                  J 1 Antwort Letzte Antwort
                  0
                  • M mameier1234

                    @jobr99 ich habe die neue Version geflasht.. .Dann wird mir aber nur noch der Screensaver angezeigt...

                    Wenn ich den Screen berühre wird das Panel dunkel.. ich kann aber (blind) bedienen...

                    Nach einiger Zeit kommt der Screensaver wieder ...

                    Wenn ich die 2.9 wieder einspiele, geht es wieder wie vorher..

                    J Offline
                    J Offline
                    joBr99
                    schrieb am zuletzt editiert von
                    #632

                    @mameier1234

                    das liegt an einem neuen feature in der Firmware, wenn der Parameter nicht dabei ist, macht nextion wohl ne 0 draus ...

                    Die Änderungen hier sollten es fixen (ungetestet, hab kein IoBroker) :

                    https://github.com/joBr99/nspanel-lovelace-ui/commit/9a7f1a169adf9471f4ecb37282ad1b59431edcd1

                    M 1 Antwort Letzte Antwort
                    0
                    • J joBr99

                      @mameier1234

                      das liegt an einem neuen feature in der Firmware, wenn der Parameter nicht dabei ist, macht nextion wohl ne 0 draus ...

                      Die Änderungen hier sollten es fixen (ungetestet, hab kein IoBroker) :

                      https://github.com/joBr99/nspanel-lovelace-ui/commit/9a7f1a169adf9471f4ecb37282ad1b59431edcd1

                      M Online
                      M Online
                      mrjeschke
                      schrieb am zuletzt editiert von
                      #633

                      @jobr99

                      Dumme Frage, müsste da nicht unter

                      type Config = {
                      

                      noch ein

                      active: number,
                      

                      hin.

                      J 1 Antwort Letzte Antwort
                      0
                      • M mrjeschke

                        @jobr99

                        Dumme Frage, müsste da nicht unter

                        type Config = {
                        

                        noch ein

                        active: number,
                        

                        hin.

                        J Offline
                        J Offline
                        joBr99
                        schrieb am zuletzt editiert von
                        #634

                        @maik-0 said in Sonoff NSPanel:

                        active: number,
                        

                        hab bei dem commit active: 100, zur config hinzugefügt

                        1 Antwort Letzte Antwort
                        0
                        • S Offline
                          S Offline
                          sfaerber
                          schrieb am zuletzt editiert von
                          #635

                          Hallo, ich komme im Moment nicht weiter. Vielleicht kann mir jemand helfen.
                          Ich habe jetzt schon verschiedene Seiten eingerichtet und möchte wegen der
                          Übersicht auch mit Unterseiten arbeiten. Da habe ich das Problem, das wenn ich
                          auf einer Unterseite irgendetwas drücke/schalte das Display immer wieder auf die
                          Grundseite zurück springt. Das ist so sehr schlecht zu bedienen auch wenn man
                          mehrere Unterseiten machen will. Gibt es da eine Einstellmöglichkeit das zu ändern
                          oder ein Bug in der Software und muss noch angepasst werden.
                          Gruß Sascha

                          ArmilarA 1 Antwort Letzte Antwort
                          0
                          • S sfaerber

                            Hallo, ich komme im Moment nicht weiter. Vielleicht kann mir jemand helfen.
                            Ich habe jetzt schon verschiedene Seiten eingerichtet und möchte wegen der
                            Übersicht auch mit Unterseiten arbeiten. Da habe ich das Problem, das wenn ich
                            auf einer Unterseite irgendetwas drücke/schalte das Display immer wieder auf die
                            Grundseite zurück springt. Das ist so sehr schlecht zu bedienen auch wenn man
                            mehrere Unterseiten machen will. Gibt es da eine Einstellmöglichkeit das zu ändern
                            oder ein Bug in der Software und muss noch angepasst werden.
                            Gruß Sascha

                            ArmilarA Offline
                            ArmilarA Offline
                            Armilar
                            Most Active Forum Testing
                            schrieb am zuletzt editiert von
                            #636

                            @sfaerber sagte in Sonoff NSPanel:

                            Hallo, ich komme im Moment nicht weiter. Vielleicht kann mir jemand helfen.
                            Ich habe jetzt schon verschiedene Seiten eingerichtet und möchte wegen der
                            Übersicht auch mit Unterseiten arbeiten. Da habe ich das Problem, das wenn ich
                            auf einer Unterseite irgendetwas drücke/schalte das Display immer wieder auf die
                            Grundseite zurück springt. Das ist so sehr schlecht zu bedienen auch wenn man
                            mehrere Unterseiten machen will. Gibt es da eine Einstellmöglichkeit das zu ändern
                            oder ein Bug in der Software und muss noch angepasst werden.
                            Gruß Sascha

                            Ist ein Bug im TS-Script - Bugfix folgt

                            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.

                            S 1 Antwort Letzte Antwort
                            0
                            • ArmilarA Armilar

                              @sfaerber sagte in Sonoff NSPanel:

                              Hallo, ich komme im Moment nicht weiter. Vielleicht kann mir jemand helfen.
                              Ich habe jetzt schon verschiedene Seiten eingerichtet und möchte wegen der
                              Übersicht auch mit Unterseiten arbeiten. Da habe ich das Problem, das wenn ich
                              auf einer Unterseite irgendetwas drücke/schalte das Display immer wieder auf die
                              Grundseite zurück springt. Das ist so sehr schlecht zu bedienen auch wenn man
                              mehrere Unterseiten machen will. Gibt es da eine Einstellmöglichkeit das zu ändern
                              oder ein Bug in der Software und muss noch angepasst werden.
                              Gruß Sascha

                              Ist ein Bug im TS-Script - Bugfix folgt

                              S Offline
                              S Offline
                              sfaerber
                              schrieb am zuletzt editiert von
                              #637

                              @armilar
                              OK. Danke. Da hätte ich gerade noch eine Sache.
                              Wenn ich cardGrid Page mit 6 Elementen benutze kann ich über
                              den Alias "Licht" die Funktion (z.B. eine Lampe) nicht direkt
                              über den Button steuern, sondern muss lange drücken und im
                              Untermenü kann ich dann erst steuern. Wenn ich den Alias "Taste"
                              benutze kann ich direkt steuern aber ich bekomme den Schaltungszustand
                              nicht angezeigt. Ist das auch noch in der Änderung oder kann ich da was einstellen?
                              Vielen Dank

                              ArmilarA 1 Antwort Letzte Antwort
                              0
                              • S sfaerber

                                @armilar
                                OK. Danke. Da hätte ich gerade noch eine Sache.
                                Wenn ich cardGrid Page mit 6 Elementen benutze kann ich über
                                den Alias "Licht" die Funktion (z.B. eine Lampe) nicht direkt
                                über den Button steuern, sondern muss lange drücken und im
                                Untermenü kann ich dann erst steuern. Wenn ich den Alias "Taste"
                                benutze kann ich direkt steuern aber ich bekomme den Schaltungszustand
                                nicht angezeigt. Ist das auch noch in der Änderung oder kann ich da was einstellen?
                                Vielen Dank

                                ArmilarA Offline
                                ArmilarA Offline
                                Armilar
                                Most Active Forum Testing
                                schrieb am zuletzt editiert von
                                #638

                                @sfaerber sagte in Sonoff NSPanel:

                                @armilar
                                OK. Danke. Da hätte ich gerade noch eine Sache.
                                Wenn ich cardGrid Page mit 6 Elementen benutze kann ich über
                                den Alias "Licht" die Funktion (z.B. eine Lampe) nicht direkt
                                über den Button steuern, sondern muss lange drücken und im
                                Untermenü kann ich dann erst steuern. Wenn ich den Alias "Taste"
                                benutze kann ich direkt steuern aber ich bekomme den Schaltungszustand
                                nicht angezeigt. Ist das auch noch in der Änderung oder kann ich da was einstellen?
                                Vielen Dank

                                Aktuelle Fehler siehe Post vom 31.05.

                                https://forum.iobroker.net/post/808422

                                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.

                                ArmilarA 1 Antwort Letzte Antwort
                                0
                                • ArmilarA Armilar

                                  @sfaerber sagte in Sonoff NSPanel:

                                  @armilar
                                  OK. Danke. Da hätte ich gerade noch eine Sache.
                                  Wenn ich cardGrid Page mit 6 Elementen benutze kann ich über
                                  den Alias "Licht" die Funktion (z.B. eine Lampe) nicht direkt
                                  über den Button steuern, sondern muss lange drücken und im
                                  Untermenü kann ich dann erst steuern. Wenn ich den Alias "Taste"
                                  benutze kann ich direkt steuern aber ich bekomme den Schaltungszustand
                                  nicht angezeigt. Ist das auch noch in der Änderung oder kann ich da was einstellen?
                                  Vielen Dank

                                  Aktuelle Fehler siehe Post vom 31.05.

                                  https://forum.iobroker.net/post/808422

                                  ArmilarA Offline
                                  ArmilarA Offline
                                  Armilar
                                  Most Active Forum Testing
                                  schrieb am zuletzt editiert von
                                  #639

                                  @Mayan , @sfaerber

                                  folgende Bug's sind gefixt:

                                  • Menüpfeile bei Hardware-Button-Pages (button1Page; button2Page wenn Rule2 = On) navigieren jetzt auf Page 0
                                  • Schalter (Licht, Dimmer, Hue, etc) in cardGrid lassen sich wieder schalten

                                  Änderungen für Standard- TFT-Brightness von @joBr99 übernommen.

                                  • Standard-Brightness über neuen Parameter "active" in "Config-Block" einstellbar (Test mit 2.9.3)

                                  Known-Bugs --> !!!!Bugfix benötigt etwas länger!!!!:

                                  • Aktion in Subpages schaltet unmittelbar auf vorheriges Mainmenu
                                  • Menü-Pfeile in Subpages (z.B. cardQR, cardMedia, etc.)

                                  TS-Script mit Änderungen:
                                  https://github.com/Armilar/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

                                  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 Antwort Letzte Antwort
                                  0
                                  • ArmilarA Armilar

                                    Neues Video Tutorial von haus-automatisierung.com
                                    https://www.youtube.com/watch?v=ZPLJk2ZLo_8 - NSPanel mit Lovelace UI - so habe ich mir das vorgestellt!

                                    Ansonsten weiterhin gültig:
                                    Ich habe hier mal eine aktuelle Anleitung für euch erstellt. Leider kann ich nicht auf jedes Detail beim Alias eingehen, da das bereits den Rahmen sprengen würde, jedoch soll es ein Leitfaden sein, wie man etwas schneller zum Ziel kommt.

                                    Step für Step - Anleitung zur Einrichtung eines Sonoff NSPanel mit Lovelace UI unter ioBroker

                                    219c8bad-2af0-42e6-a041-b4ba319ca96d-image.png
                                    1. Voraussetzungen für den ioBroker

                                    Für den Betrieb benötigst du „keinen“ ioBroker-lovelace-Adapter. Die komplette lovelace-Integration erfolgt über die TFT-Firmware und die nachfolgenden ioBroker-Adapter.

                                    • MQTT-Adapter
                                      3ccd8404-afe3-4182-953c-2172ca1f0a09-image.png
                                      Die Kommunikation zwischen dem NSPanel und ioBroker erfolgt mittels MQTT über Tasmota. Da der Datenpunkt „CustomSend“ erforderlich ist und dieser nicht im Sonoff-Adapter vorhanden ist und auch nicht durch das Skript angelegt werden kann, erfolgt die Kommunikation „nicht“ über den Sonoff-Adapter --> später mehr …
                                    • Javascript-Adapter
                                      Es werden zwei Type-Skripte (TS = das etwas mächtigere Javascript) benötigt. Zum Einen ein Icon-Skript, da alle verwendeten Icons nicht als „echte Grafiken“ im Panel hinterlegt sind, sondern als Schriftzeichen-Symbole. Des Weiteren ein TS-Skript mit dem eigentlichen Laufzeit-Code, welches für jedes eingesetzte NSPanel vorhanden und konfiguriert sein sollte --> später mehr …
                                    • Geräte verwalten“-Adapter
                                      bae0913f-fb3f-4856-90d1-eebb70b5a89a-image.png
                                      Über diesen Adapter sollten die Aliase später (mit Ausnahme des Media-Alias für Alexa & Co.) erstellt werden --> später mehr …
                                    • Accu-Weather-Adapter
                                      1f0dbb8b-a057-4237-a5c7-df7728a255c6-image.png
                                      Spielt in erster Linie eine Rolle beim Screensaver-Wetter, da zum Ersten die Icons und die Temperatur-Informationen für den Forecast ausgelesen werden (falls genutzt) und zum Zweiten das aktuelle Wettericon für den Screensaver benötigt wird. Wer keine Wetterstation oder Außentemperatursensor hat, kann auch die Temperatur aus Accu-Weather importieren --> später mehr …
                                    • Alexa2-Adapter
                                      Zur Visualisierung des Media-Player‘s sollte der Alexa2-Adapter installiert sein. Wenn du statt Alexa-Devices andere Hersteller wie z.B. Google-Home-Geräte oder in erster Linie der Spotify-Premium-Adapter im Einsatz hast, so ist es auch möglich mit einem entsprechend, alternativen Media-Adapter den Media-Player zu betreiben --> später mehr …

                                    2. Panel mit Tasmota flashen.
                                    Hierzu eignet sich für den "Hardwareteil" die Anleitung von haus-automatisierung.com

                                    (https://www.youtube.com/watch?v=uqPz08ZpFW8). Video bis 11 Minuten und 30 Sekunden befolgen!

                                    Die Beschreibung, wie man das Panel mit Tasmota flashen kann, ohne einen Kurzschluss zu erzeugen, ist schon sehr gut erklärt.
                                    Du installierst gleich einen „abweichenden“ Berry-Treiber (autoexec.be) als in der Video-Beschreibung genannt. Wenn du Tasmota und „noch nicht der Berry-Treiber“ installiert hast, bitte mit der Youtube-Video-Anleitung von Matthias ab Zeit=11:30 aufhören. Ich verwende in meinen Panels die Version „tasmota32-DE.bin“. Du kannst aber auch die „tasmota32-nspanel.bin“ verwenden.
                                    Zur MQTT-Konfiguration kommen wir im Punkt 4
                                    An dieser Stelle solltest du aber bereits die grundsätzliche Tasmota Konfiguration vornehmen:

                                    a) Unter „Sonstige Einstellungen“ trägst du im Feld Vorlage

                                    {"NAME":"NSPanel","GPIO":[0,0,0,0,3872,0,0,0,0,0,32,0,0,0,0,225,0,480,224,1,0,0,0,33,0,0,0,0,0,0,0,0,0,0,4736,0],"FLAG":0,"BASE":1}
                                    

                                    ein, hakst Aktivieren "an" und klickst auf Speichern. Du kannst natürlich auch noch Device und Friendly Name vergeben
                                    3ca891dc-0892-4ed4-8c44-384899cbb460-image.png
                                    b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern.
                                    c) Unter Konsolen/Konsole kannst du natürlich auch noch weitere Einstellungen vornehmen (ipaddress1 192.168.X.X für statische IP’s, setOption’s, etc.)

                                    3. Berry-Treiber installieren
                                    Im Tasmota findest du unter „Konsolen“ den Button „Verwalte Dateisystem“. Wenn du diesen anklickst, siehst du einen weiteren Button „Datei erstellen und bearbeiten“. Du änderst den Dateinamen „neue-datei.txt“ in „autoexec.be“ und fügst den Inhalt aus dem folgenden Link ein:

                                    https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be

                                    bbf8f99d-8f37-4903-9aa8-3b7decab2577-image.png
                                    Danach klickst du auf „Speichern“ und dann solltest du Tasmota rebooten.

                                    Wenn das Panel bereits unter einer anderen Variante (z.B. haus-automatisierung.com) installiert war, dann bitte alle Dateien (insbesondere autoexec.be und autoexec.bec) vorher über das Flammensymbol hinter dem Dateinamen löschen. Und von vorne mit dem Punkt 3 beginnen
                                    e0c99373-2e72-4f18-827d-5050f8d41962-image.png

                                    4. MQTT im Tasmota konfigurieren

                                    Im Tasmota unter „Einstellungen/MQTT konfigurieren“:
                                    a) Host deines ioBrokers vergeben
                                    b) Den Port deiner ioBroker-MQTT-Adapter-Instanz eingeben (für mqtt.0.). Wenn du noch keinen MQTT-Adapter installiert hast, dann verwende bitte nicht unbedingt den Standard-Port 1883. Dieser Port wird auch von anderen Pseudo-MQTT-Adaptern (Sonoff/Shelly/etc.) ebenfalls verwendet und führt im parallelen Betrieb mit anderen MQTT-Devices später unweigerlich zu Komplikationen. Ich verwende für die MQTT-Instanzen gerne einen Port ab 1886 oder 1887 oder 1888 oder höher. Das Problem zeigt sich in der Regel ab dem Zeitpunkt, an dem der „CustomSend“ nicht von deiner mqtt.0.-Instanz abonniert wird.
                                    c) Benutzer und Passwort aus der ioBroker-MQTT-Instanz eintragen
                                    d) Bei Client und topic trage ich in der Regel „NSPanel_X“ ein. (X = 1, 2, 3 oder WZ für Wohnzimmer, etc.)
                                    e) Für den full topic verwende ich in der Regel „SmartHome/%topic%/%prefix%/“.
                                    f) Speichern klicken und Einstellungen verlassen

                                    76749e7d-c630-406c-9d2b-a2424521fa96-image.png

                                    5. TFT-Firmware auf das Panel flashen
                                    Tasmota „Konsolen/Konsole“ öffnen und in die Kommandozeile

                                    FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.1.0.tft
                                    

                                    Achtung !!! Die aktuellsten Versionen (3.1.0 könnte nicht mehr aktuell sein) befinden sich "immer" im ioBroker TypeScript Header (TS-Skript) unter:
                                    https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

                                    eingeben, mit Enter bestätigen. Das Panel installiert jetzt die TFT-Firmware (Kann beim ersten Mal ein paar Minuten dauern – Fortschritt beobachten – am Ende erfolgt ein Reboot und das Panel wechselt in einen Screen – „Waiting for Content“
                                    4f4f6005-7cfd-444d-9b9a-14703194781d-image.png

                                    Das Panel wartet jetzt auf den Input von deinem ioBroker-Skript (Installierst du in einem der nächsten Punkte …)

                                    6. MQTT im ioBroker installieren und konfigurieren
                                    Wenn du bereits eine Instanz des MQTT-Adapters (z.B. mqtt.0.) nutzt, dann bitte den Port der MQTT-Adapter-Instanz auch im Tasmota-MQTT verwenden. Bitte auch hier den Hinweis aus Punkt 4b beachten und ggf. einen anderen Port für die Kommunikation eintragen.
                                    Ansonsten wählst du im ioBroker-Menü unter „Adapter“ den mqtt-Adapter aus und erstellst wie gewohnt eine Instanz des Adapters. Du kannst dir natürlich auch eine zusätzliche Instanz (z.B. mqtt.1. oder mqtt.2. etc.) erstellen.

                                    Meine Einstellungen im Reiter Verbindung sind z.B.:
                                    a) IP = Server/Broker
                                    b) WebSockets benutzen (angehakt)
                                    c) IP Adresse des ioBrokers (wahrscheinlich eth0 oder eth1) auswählen
                                    d) Port 1886 (analog Port aus Tasmota/MQTT)
                                    e) Benutzer (analog Benutzer aus Tasmota/MQTT)
                                    f) Kennwort + Kennwort wiederholen (analog Passwort aus Tasmota/MQTT)

                                    8182d534-bbe0-42a3-89b6-864bc30f9a17-image.png

                                    Meine Einstellungen im Reiter MQTT-Einstellungen sind:
                                    a) Maske zum Bekanntgeben eigener States: mqtt.0.* (Bei zusätzlicher Instanz entsprechend höher (mqtt.1.* etc.)
                                    b) Eigene States beim Verbinden publizieren (angehakt)
                                    c) States bei subscribe publizieren (angehakt)
                                    d) Leere Session erzwingen: Client-Einstellungen verwenden

                                    f184fc26-229d-4a75-84cc-74fda631c527-image.png

                                    7. CustomSend anlegen
                                    Der MQTT Datenpunkt wird benötigt und muss vom MQTT-Adapter angelegt werden. Ein manuelles Anlegen unter „Objekte“ oder „createState“ ist im ioBroker „nicht mehr“ möglich. Um den Datenpunkt zu erzeugen, öffnest du im Tasmota die Konsole und gibst ohne die Anführungszeichen

                                    „CustomSend time~12:00“
                                    

                                    ein.

                                    Alternativ kann auch der MQTT-Explorer (http://mqtt-explorer.com/) genutzt werden und ein payload unter .../cmnd abgesendet werden.
                                    7f77699c-98fd-4efa-bb72-ef74c731c411-image.png
                                    Danach sollte im MQTT-Adapter unter Objekte ein Datenpunkt: „SmartHome/NSPanel_X/cmnd/CustomSend“ erscheinen. Falls nicht, solange wiederholen bis dieser Datenpunkt abonniert wurde, oder ggfs. Nochmals die MQTT-Einstellungen überprüfen. In den Vergangenen Fragen dieses Topics ging es häufiger um diesen Punkt.

                                    8. Icon „TypeScript“ unter „Skripte“ im Verzeichnis „global“ anlegen
                                    Wie bereits in der Einleitung erwähnt, werden zwei TypeScripts (TS) benötigt. Das erste ist das Icon-Skript. Das Icon-Skript dient zur Übersetzung von Schriftzeichensymbolen zwischen dem Skript und der TFT-Firmware.
                                    Unter dem grünen Vezeichnisbaum „global“ im ioBroker-Menüpunkt Skripte erzeugst du ein Skript mit dem Namen „IconsSelector“ vom Typ: TypeScript (TS). Dort fügst du den Inhalt der Datei:

                                    https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts

                                    ein und startest das Skript.

                                    Nur zur Info: Du kannst die einzelnen Icon-Symbolnamen (aktuell 6896 unterschiedliche Icon-Symbole) auf

                                    https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html

                                    einsehen und später (kommen wir bei der Alias-Erstellung noch zu) auch jedes Icon in deinem Panel an entsprechender Stelle verwenden. Für die Einbindung sind die „Namen“ der Icons wichtig.

                                    9. TypeScript „NSPanelTs.ts“ anlegen
                                    Unter dem regulären Vezeichnisbaum „common“ im ioBroker-Menüpunkt Skripte erzeugst du (gerne auch in weiteren Unterverzeichnissen) ein weiteres Skript (Aktuell in für die TFT-Version 3.1.0) mit dem Inhalt:

                                    https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

                                    Für jedes einzelne NSPanel das du konfigurieren möchtest, musst du dieses Skript anlegen und speziell für dieses jeweilige NSPanel entsprechende Einstellungen vornehmen. Für den Skriptnamen verwende ich in der Regel eine Kombination aus Panel und Skriptversion, wie z.B.: NSPANEL_1_3.1.0

                                    (Es kommen in regelmäßigen Abständen weitere NSPanel-Features und Bug-Fixes in das GitHub-Skript in denen dann nur noch der untere Teil (--- ab hier keine Konfiguration mehr ---) ausgetauscht werden muss und die NSPanel-Parameter erhalten bleiben)

                                    Die aktuelle Änderung von 2.8.0 auf 2.9.0 ist z.B.:

                                    • Steuerung von Klimageräten/Klimaanlagen
                                      0735190e-11c3-4bc2-bfd1-5899b8ee0eed-image.png

                                    • QR-Code für z.B. Gäste WLAN
                                      a43e9656-891a-42ef-90cc-f9ed61850d4b-image.png

                                    • Neues Design für Thermostate
                                      abd817a4-db10-45dc-9d5c-9adf6151dac5-image.png

                                    • etc.

                                    Im oberen Teil des Skripts sind die grundsätzlichen Teile der zu erstellenden Aliase, Konstanten und Variablen (auch Seiten) enthalten. An dieser Stelle ist zunächst wichtig, die Kommunikationsparameter für die MQTT-Kommunikation zu parametrieren (ab ca. Zeile 400) beginnend mit

                                    „export const config: Config = {
                                    

                                    Hier musst du die beiden nachfolgenden Kommunikations-Datenpunkte aus dem MQTT-Adapter eintragen:

                                    panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //bitte anpassen
                                    panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //bitte anpassen
                                    

                                    Falls abweichend, dann am besten direkt unter Objekte herauskopieren

                                    Bitte starte das Skript. Alle weiteren Parameter stellen wir später ein. Ab jetzt sollte der Startup-Screen „Waiting for Connection“ in den Sreensaver wechseln und minütlich die Uhrzeit an den Screensaver übertragen und das Datum aktualisiert werden.

                                    10. TypeScript konfigurieren
                                    Im Punkt 9 haben wir zunächst die nur Kommunikation zwischen Panel und Skript über MQTT hergestellt. Jetzt kommen wir zum Inhalt des Panels:

                                    Der untere Bereich vom Screensaver:

                                    a) Die 4 kleineren Icons
                                    Hier kannst du dich entscheiden, ob du die Wettervorhersage oder eigene Werte visualisieren möchtest. Wenn du dich für den Forecast entscheidest, dann muss die Variable

                                    var weatherForecast
                                    

                                    auf „true“ stehen. Ebenfalls sollte die Adapter-Instanz von Accu-Weather funktionsfähig eingerichtet sein. Für diese Werte ist kein Alias notwendig, da diese zur Laufzeit direkt aus dem Adapter ausgelesen werden.
                                    Möchtest du an dieser Stelle eigene Werte visualisieren, dann muss die Variable

                                    var weatherForecast
                                    

                                    auf „false“ stehen. Jetzt kannst du im Block beginnend mit

                                    export const config: Config = {
                                    

                                    die Datenpunkte firstScreensaverEntity bis fourthScreensaverEntity mit eigenen Datenpunkten füllen.
                                    Eine Ausnahme stellt das große Wetter-Icon und der Wert für die aktuelle Temperatur im Screensaver dar. Hierfür benötigen wir einen Alias (im nächsten Punkt)

                                    b) Diverse Datenpunkte
                                    Beim ersten Start des Scripts erzeugt das Skript unter 0_userdata diverse Datenpunkte für Screensaver Dimmode, interne Sensoren, Tasmota-Statuswerte, etc.
                                    Der Pfad kann im Skript unter „NSPanel_Path“ angepasst werden.

                                    c) Alexa
                                    Wenn du Alexa-Devices mit dem Media-Player nutzen möchtest, dann stelle noch das Standard-Alexa-Device (Seriennummer unter „var alexaDevice“) ein.
                                    Ebenso kannst du unter alexaSpeakerList eine Liste mit vorhandenen Alexa-Devices (und/oder Gruppen) anlegen, die von diesem NSPanel-MediaPlayer aus bedient werden sollen. Bleibt diese Liste leer, werden automatisch alle Devices aus dem Alexa2-Adapter importiert.

                                    11. Aliase Anlegen
                                    Jetzt kommt der eigentliche Teil der Seitengestaltung. Es werden keine Datenpunkte benötigt, sondern Aliase.
                                    Ein Alias ist „kein“ Datenpunkt, sondern ein Objekt mit mehreren Datenpunkten.
                                    Das Skript setzt entsprechende Trigger auf die Alias-Datenpunkte .SET, .GET, .ACTUAL usw. Deshalb werden deine Steuerelemente im Panel nicht greifen, wenn du mit einzelnen Datenpunkten aus den verschiedenen Adaptern arbeitest.
                                    Ich habe im Verlauf diverse Aliase erzeugt und auch in den ChangeLogs der jeweiligen Skript-Version sind die möglichen Aliase aufgeführt, daher gehe ich hier nicht (würde die Anleitung auch sprengen) im Detail auf die Aliase ein.
                                    Was brauche ich für einen Alias:
                                    a) Zunächst installierst du dir eine Instanz des Adapters „Geräte verwalten“
                                    b) Dann erstellst du dir einen Alias (Beispiel Wetter-Icon und aktueller Wert der Außentemperatur) Dieser Alias muss nur einmalig angelegt werden und funktioniert somit auch in jedem weiteren Panel.
                                    56982014-6811-49cc-9be3-bed78436ef57-image.png
                                    und etwas tiefer:
                                    a9814dc5-887b-4f8b-bb5b-742e104897b3-image.png
                                    c) Wenn du einen Alias für den Media-Player benötigst, dann erstelle die diesen Alias besser über den Adapter „Alias-Manager“,
                                    07fe0047-d38f-45c9-92f9-3811c80be0e8-image.png
                                    da der Adapter „Geräte verwalten“ bei diesem Alias nicht ordentlich arbeitet. Jedoch ist der auch so Komplex, das es für Alias-Anfänger schwer ist, einen Alias mit den korrekten Datenpunkten zu füllen.

                                    12. Seitengestaltung

                                    Am Besten benutzt ihr die Beispiele im Skript und legt entsprechende Aliase hierzu an, die auch in diesem ioBroker-Community-Topic innerhalb der letzten Wochen beschrieben wurden.

                                    Und noch ein paar Bilderchen:

                                    cardEntities mit Alias Lampe/Dimmer/Switch
                                    d8fcfee4-3137-4bae-85ba-6b70106c77c1-image.png

                                    cardEntities mit RGB und HUE Aliasen (Color)
                                    7f1f6db2-1d67-4b59-86c6-c06d4e8f4c2a-image.png

                                    popupLight mit Farbtemperatur und Brightness
                                    da3057b5-db2c-4b61-8716-8b2114e09aee-image.png

                                    popupLight mit ColorWheel
                                    1ba6c1ff-d682-4368-b36a-4952aed4bcbe-image.png

                                    cardGrid mit Radiosendern/Playlists (Alias Taste)
                                    6b8c8b7a-331e-4fc1-867b-4ce69705fd0a-image.png

                                    cardEntities mit Aliasen Lautstärke und Info
                                    9c36cfd7-b586-41db-8b4a-d68734dbbaae-image.png

                                    cardEntities mit Fenster, Tür, Jalousie und Verschluss
                                    d874876a-a190-4fab-b2a2-5a0f0bb0f62a-image.png

                                    cardEntities mit Abfallkalender
                                    098059be-4996-403b-a7a7-653915f10204-image.png

                                    cardMedia
                                    9e702c46-e5d1-452b-a60b-e5068cb64750-image.png

                                    cardAlarm
                                    8f8e9ecc-a4b2-48f1-b9b1-4fe68b4b2574-image.png

                                    cardGrid
                                    8a0ce26c-c49c-4bc3-b2ca-bc4897febd09-image.png

                                    cardEntities
                                    7b7c21e6-02aa-4a3e-bb25-c8127689d801-image.png

                                    cardEntities als Subpage unter cardEntities (verschachtelt)
                                    bd7783f7-9365-4333-b5bc-872ca92fd4b7-image.png

                                    cardNotify
                                    2dca9c22-df47-4c29-8e16-bc0323101cb1-image.png

                                    H Offline
                                    H Offline
                                    Herbiek
                                    schrieb am zuletzt editiert von
                                    #640

                                    @armilar Großartige Dokumentation. Ich danke Ihnen dafür. Allerdings habe ich mein NS-Panel auf Englisch und ich habe Schwierigkeiten, den Teil in Ihrer Beschreibung unter 2a zu finden, wo Sie "Unter "Sonstige Einstellungen" erwähnen. Können Sie einen Screenshot davon machen, wie das aussieht? Kann das nicht finden?

                                    M 1 Antwort Letzte Antwort
                                    0
                                    • H Herbiek

                                      @armilar Großartige Dokumentation. Ich danke Ihnen dafür. Allerdings habe ich mein NS-Panel auf Englisch und ich habe Schwierigkeiten, den Teil in Ihrer Beschreibung unter 2a zu finden, wo Sie "Unter "Sonstige Einstellungen" erwähnen. Können Sie einen Screenshot davon machen, wie das aussieht? Kann das nicht finden?

                                      M Online
                                      M Online
                                      mrjeschke
                                      schrieb am zuletzt editiert von
                                      #641

                                      @herbiek

                                      Ist unter Configuration/Configure other.

                                      H 1 Antwort Letzte Antwort
                                      0
                                      • M mrjeschke

                                        @herbiek

                                        Ist unter Configuration/Configure other.

                                        H Offline
                                        H Offline
                                        Herbiek
                                        schrieb am zuletzt editiert von
                                        #642

                                        @maik-0 Danke! Ich sehe, dass das Feld in meinem NSPanel "Template" heißt.

                                        H 1 Antwort Letzte Antwort
                                        0
                                        • H Herbiek

                                          @maik-0 Danke! Ich sehe, dass das Feld in meinem NSPanel "Template" heißt.

                                          H Offline
                                          H Offline
                                          Herbiek
                                          schrieb am zuletzt editiert von Herbiek
                                          #643

                                          @herbiek Ich bin mit einem Bildschirm hängen geblieben, der "Benötigt Berry 1.1.3" und eine OK-Taste anzeigt. Ich höre auch ein Klickgeräusch. Wenn ich auf die Schaltfläche "OK" drücke, hört das Klickgeräusch auf ?....Edit: Bereits gefunden, vergessen, Punkt 5 auszuführen (FlashNextion ).

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          775

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe