Navigation

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

    NEWS

    • [erledigt] 15. 05. Wartungsarbeiten am ioBroker Forum

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    SONOFF NSPanel mit Lovelace UI

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

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

      @theknut

      hier ist eine Beschreibung inkl. Script für Influx2

      Oha, da muss man ja doch noch einiges drum herum machen. Ich bin davon ausgegangen, dass er über den Alias schaut, ob es ein Custom Setting dafür gibt und wenn ja, dann liest er das aus dem Adapter aus (bspw. Influx). Aber gut, dann werd ich mich da morgen mal dran machen. Danke dir!

      1 Reply Last reply Reply Quote 0
      • F
        Frosti last edited by Frosti

        Hey, ich hoffe, ich bin hier richtig - ich habe eine CardUnlock als SubPage (als Schutz vor dem versehentlichen Ausschalten einer Steckdosenleiste). Diese hat bisher immer super funktioniert, nur irgendwann, aus dem Nichts heraus, verschwand der Button "Entriegeln" ca. eine halbe Sekunde nachdem man auf die Unlock-Seite (zum Code eingeben), wechselt.

        Habe nun heute alles geupdatet (System sowie Skript), aber es hat nicht geholfen.

        So sieht es im Skript hinsichtlich der MainPage und der UnlockPage aus.

        let Buero_Seite_1 : PageType =
        {
            'type': 'cardEntities',
            'heading': 'Büro',
            'useColor': true,
            'next': 'Haus_Seite_1',
            'items': [
                //<PageItem>{ id: 'alias.0.NSPanel.Makerspace.Büro.Steckdosenleiste_Schreibtisch', name: 'Schreibtisch', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen},
                { id: 'alias.0.NSPanel.Makerspace.Büro.Schreibtischlampe', name: 'Ultra coole Lampe', interpolateColor: true},
                { id: 'alias.0.NSPanel.Makerspace.Werkstatt.Wall_Light_Werkstatt', name: 'Wall Light', interpolateColor: true},
                { navigate: true, id: 'alias.0.NSPanel.General.Unlock' , targetPage: 'Unlock_Steckdosenleiste_Schreibtisch', name: 'Steckdosenleiste', buttonText: 'weiter...'},
                //<PageItem>{ id: 'alias.0.NSPanel_1.Deckenbeleuchtung', interpolateColor: true},
                //<PageItem>{ id: 'alias.0.NSPanel_1.ShellyDuoTest', name: 'Shelly Duo GU10', minValueBrightness: 0, maxValueBrightness: 100, minValueColorTemp: 6465, maxValueColorTemp: 3000, interpolateColor: true, modeList: ['Color','White'], inSel_ChoiceState: true},
                //<PageItem>{ id: 'alias.0.NSPanel_1.Luftreiniger', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen}
            ]
        };
        
                        //Level 1
                        let Unlock_Steckdosenleiste_Schreibtisch: PageType   =
                        {
                            'type': 'cardUnlock',
                            'heading': 'Steckdosenleiste',
                            'useColor': true,
                            'subPage': true,
                            'parent': Buero_Seite_1,
                            'items': [{ id: 'alias.0.NSPanel.General.Unlock', targetPage: 'Steckdosenleiste_Schreibtisch_Seite',  autoCreateALias: true }
                            ]
                        };
        

        Weiß jemand von euch weiter?

        Liebe Grüße und vielen Dank!

        1 Reply Last reply Reply Quote 0
        • theknut
          theknut @Marko1974 last edited by

          @marko1974
          Emulator: https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Nextion-Editor

          Das mit der Struktur fand ich sehr verwirrend, ich zeig dir mal wie ich es gemacht habe, der Variablenname ist entscheidend, das war mir unklar.

          let menuPage: PageType = 
          {
              'type': 'cardGrid',
              'heading': 'Menü',
              'useColor': false,
              'items': []
          };
          let menuPage2: PageType = 
          {
              'type': 'cardGrid',
              'heading': 'Menü', 
              'useColor': false,   
              'items': []
          };
          
          ...
          
          // das kommt auf die erste Page
          
          // Wohnzimmer
          let wohnzimmerLicht : PageType =
          {
              'type': 'cardGrid',
              'heading': 'Licht',
              'useColor': true,
              'subPage': true,
              'parent': menuPage,
              'home': Object.keys({menuPage})[0], 
              'items': [
                  { id: 'alias.0.Rooms.Wohnzimmer.HueGradientLightStrips', icon: "led-strip-variant", offColor: White, onColor: White, name: 'Lightstrips'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Stehlampe', icon: "lightbulb-outline", offColor: White, onColor: White, name: 'Stehlampe'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Stern', icon: "star-outline", offColor: White, onColor: White, name: 'Stern'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Lichterketten', icon: "lightbulb-outline", offColor: White, onColor: White, name: 'Lichterketten'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Kinomodus', icon: "projector", offColor: White, onColor: White, name: 'Kino'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Lichter_Aus', icon: "lightbulb-group-off-outline", offColor: White, onColor: White, name: 'Alle aus'}
              ]
          };
          
          let wohnzimmerRollo : PageType =
          {
              'type': 'cardEntities',
              'heading': 'Rollo',
              'useColor': true,
              'subPage': true,
              'parent': menuPage,
              'home': Object.keys({menuPage})[0], 
              'items': [
                  { id: 'alias.0.Rooms.Wohnzimmer.Fenster.Wohnen.Rollo', icon: "blinds-horizontal", offColor: White, onColor: White, name: 'Raffstore Wohnen'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Fenster.Arbeiten.Rollo', icon: "blinds-horizontal", offColor: White, onColor: White, name: 'Raffstore Arbeiten'},
                  { id: 'alias.0.Rooms.Wohnzimmer.Leinwand', icon: "blinds-horizontal", offColor: White, onColor: White, name: 'Leinwand'}
              ]
          };
          
          ....
          
          // das kommt auf die zweite Page
          let technikraum : PageType =
          {
              'type': 'cardEntities',
              'heading': 'Technik',
              'useColor': true,
              'subPage': true,
              'parent': menuPage2,
              'home': Object.keys({menuPage2})[0], 
              'items': [
                  ...
              ]
          };
          
          ...
          
          // am Ende die Items hinzufügen
          
          
          menuPage.items = [
              <PageItem> { navigate: true, id: null, targetPage: Object.keys({wohnzimmerLicht})[0], name: 'Lichter', icon: 'lightbulb-outline', onColor: White, offColor: White },
              <PageItem> { navigate: true, id: null, targetPage: Object.keys({wohnzimmerRollo})[0], name: 'Rolläden', icon: 'blinds-horizontal', onColor: White, offColor: White },
          ...
          ]
          menuPage2.items = [
              <PageItem> { navigate: true, id: null, targetPage: Object.keys({technikraum})[0], name: 'Technik', icon: 'meter-electric-outline', onColor: White, offColor: White },
          ...
          ]
          
          // und dann noch in der Struktur hinzufügen
          
          export const config: Config = {
              // Seiteneinteilung / Page division
              // Hauptseiten / Mainpages
              pages: [
                  menuPage,
                  menuPage2
              ],
              // Unterseiten / Subpages
              subPages: [	    
                  wohnzimmerLicht,
                  wohnzimmerRollo,
                  technikraum,
                  ...
          

          Btw, ich hab mich hier auch mit viel Hilfe eingefuchst, die Entwickler sind sehr hilfsbereit. Ich würde empfehlen mal was per Paypal zu schicken *hust

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

            @theknut

            Die vollständige Beschreibung der cardLChart mit Skripten:

            https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardlchart-line-charts-ab-ts-script-v390

            Oh ha - da hing aber mein Browser 😁

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

              @marko1974

              Dafür musst du dir im Wiki das Thema Navigation anschauen. Dort sind Möglichkeiten beschrieben, wie man mit einem Button zur nächsten Seite kommt.

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

                @theknut kann man so machen, ist aber nicht Standard. Siehe Wiki Navigation.

                Warum schreibst du die PageItem separat, welchen Vorteil hat dies?

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

                  @tt-tom das hat den Vorteil, dass ich den String für home nicht mehr händisch tippen muss, sondern 'home': Object.keys({menuPage})[0] machen kann. Heißt, falls ich mal den Variablennamen für menuPage ändere, dann bekomme ich einen Kompilierfehler und merke es sofort. Andernfalls würde er es erstmal schlucken und die Navigation geht dann einfach nicht mehr. Daher muss ich die Deklaration der Variable und das Hinzufügen der Items trennen.
                  Muss man nicht so machen, aber beugt eben Fehler vor, die bisschen hässlich zu finden sind.

                  C 1 Reply Last reply Reply Quote 2
                  • C
                    cdn @theknut last edited by

                    Gibt es eigentlich ein best practice zum Updaten der nspanelts.ts? Stand jetzt kopiere ich per Hand immer alle meine Änderungen herein. Ist bei einigen TSPanels schon echt aufwändig.

                    T Armilar 2 Replies Last reply Reply Quote 0
                    • T
                      ticaki Developer @cdn last edited by

                      @cdn
                      suche im Skript nach no moremarkiere alles ab da, kopieren, im eigenen Skript ebenfalls suchen, markieren und alles ersetzten.

                      C 1 Reply Last reply Reply Quote 0
                      • C
                        cdn @ticaki last edited by cdn

                        @ticaki
                        Hmm aber in dem Bereich bis no more hat sich in den letzten Versionen schon was getan.

                        EDIT: OK, sind nur Kommentare

                        T 1 Reply Last reply Reply Quote 0
                        • T
                          ticaki Developer @cdn last edited by ticaki

                          @cdn

                          Das hatte ich verbrochen und sollte nicht nochmal passieren und es war optional 🙂

                          EDIT: changelog fehlt dann

                          C T 2 Replies Last reply Reply Quote 1
                          • C
                            cdn @ticaki last edited by

                            @ticaki Passt so, danke 🙂

                            1 Reply Last reply Reply Quote 0
                            • T
                              ticaki Developer @ticaki last edited by ticaki

                              @ticaki sagte in SONOFF NSPanel mit Lovelace UI:

                              Das hatte ich verbrochen und sollte nicht nochmal passieren und es war optional 🙂

                              Die Aussage ziehe ich zu 50% wieder zurück, beim kommenden Update werden PageItems gezählt und zuviele oder zuwenige werden angemeckert.

                              Wir ändern nix, aber wenn ihr euch nicht an die überschaubare Wiki gehalten habt, müsst ihr was ändern. 🙂

                              C 1 Reply Last reply Reply Quote 0
                              • C
                                cdn @ticaki last edited by

                                @ticaki Gut, dass ich noch nicht so viele Funktionen nutze bis jetzt 🙂

                                https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/4828?_=1705424364978

                                Nochmal bezogen auf dieses Thema (weswegen ich das Update gemacht habe). Würde gerne manche Buttons entkoppeln die für andere Funktionen genutzt werden. Ich steuere über den Schalter ein Blockly Skript. Brauche also einen Datenpunkt oder sonst irgendetwas was sich verändert.
                                Muss hier dann wirklich ein Gerät anlegen, oder kann ich einfach einen Datenpunkt anlegen, bspw. so:

                                    button1: {
                                        // DE: Mögliche Werte wenn Rule2 definiert: 'page', 'toggle', 'set' - Wenn nicht definiert --> mode: null
                                        // EN: Possible values if Rule2 defined: 'page', 'toggle', 'set' - If not defined --> mode: null
                                        mode: 'toggle',
                                        // DE: Zielpage - Verwendet wenn mode = page
                                        // EN: Target page - Used if mode = page
                                        page: null,
                                        // DE: Zielentity - Verwendet wenn mode = set oder toggle
                                        // EN: Target entity - Used if mode = set or toggle
                                        entity: AliasPath + 'Rollo',
                                        // DE: Zielwert - Verwendet wenn mode = set
                                        // EN: Target value - Used if mode = set
                                        setValue: null
                                    },
                                
                                T 1 Reply Last reply Reply Quote 0
                                • T
                                  ticaki Developer @cdn last edited by

                                  @cdn

                                   button1: {
                                          // DE: Mögliche Werte wenn Rule2 definiert: 'page', 'toggle', 'set' - Wenn nicht definiert --> mode: null
                                          // EN: Possible values if Rule2 defined: 'page', 'toggle', 'set' - If not defined --> mode: null
                                          mode: 'toggle',
                                          // DE: Zielpage - Verwendet wenn mode = page
                                          // EN: Target page - Used if mode = page
                                          page: null,
                                          // DE: Zielentity - Verwendet wenn mode = set oder toggle
                                          // EN: Target entity - Used if mode = set or toggle
                                          entity: 'shelly.0.shellyplus1pm#84cca87727dc#1.Relay0.Switch',
                                          // DE: Zielwert - Verwendet wenn mode = set
                                          // EN: Target value - Used if mode = set
                                          setValue: null
                                      },
                                  
                                  

                                  so siehts bei mir im Flur aus.

                                  C 1 Reply Last reply Reply Quote 0
                                  • C
                                    cdn @ticaki last edited by cdn

                                    @ticaki
                                    Ja geht nicht so ganz. Ist ja ein Rollo. Hier gibt es open, close, stop.
                                    Würde hier dann denke ich einfach einen weiteren DP erstellen für den Trigger, korrekt? AliasPath liegt doch dann unter 0_userdata.0.XXX.Panelname ?

                                    Habs für mich so gelöst. Hoch geht es ja leider nur wenn ich bspw. noch den Doppelklick nutze.

                                    0a0ea5a3-3394-4a88-a177-ddb17ac302b0-grafik.png

                                    EDIT: Sollte mir vielleicht auch mal anschauen was ihr da programmiert habt. NSPanel_Path tut es 🙂

                                    1 Reply Last reply Reply Quote 0
                                    • T
                                      ticaki Developer last edited by

                                      @cdn

                                      Du brauchst einen Datenpunkt den du veränderst fürs Panel, Dann ein Skript das bei jeder Veränderung an diesem Datenpunkt durch auf, stop, zu, stop , auf, stop, zu,.. schaltet.

                                      C 1 Reply Last reply Reply Quote 1
                                      • C
                                        cdn @ticaki last edited by cdn

                                        @ticaki Ja das ist ne Idee. Dann kann ich aber nicht mit toggle arbeiten. Mache ich dann einfach SET und mit nem kleinen Blockly, welches hochzählt bei Zustandänderung?

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

                                          @cdn

                                          Ich kopiere, analog der Ankündigungen in den Updates, ebenfalls nur den unteren Teil + den Header des NSPanelTs.ts in das Script. Update je Panel würde ich mal auf 1 Minute schätzen.

                                          Es müssen faktisch nicht alle Updates gemacht werden. Nur wenn sie für euch einen Mehrwert bringen oder ein paar elementare Bugs behoben werden, die euch stören.

                                          Wir arbeiten aber an einer Lösung, die ein manuelles Update künftig nicht mehr erforderlich macht. Bitte etwas geduld 😊

                                          1 Reply Last reply Reply Quote 3
                                          • C
                                            cdn last edited by

                                            @armilar Wow. Das hört sich richtig gut an!

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            464
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            lovelace ui nspanel sonoff
                                            260
                                            7128
                                            4436564
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo