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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    SONOFF NSPanel mit Lovelace UI

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

      @sirmiker

      Guten Morgen

      Diesen Abschnitt hast du bestimmt schon gelesen.

      Hier zwischen kommen deine Seiten.

      //-- Anfang der Beispiele für Seitengestaltung -- Selbstdefinierte Aliase erforderlich -----------------------
        //-- siehe https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele
      
      //-- ENDE der Beispiele für Seitengestaltung -- Selbstdefinierte Aliase erforderlich -------------------------
      

      Zum Schluss musst du sie hier noch eintragen. Hinter Pages:[ mit Komma getrennt. Siehe subPages.

         pages: [
      
                  NSPanel_Service         	//Auto-Alias Service Page
      	    //Unlock_Service            //Auto-Alias Service Page (Service Pages used with cardUnlock)
          ],
          subPages: [
      	    
      

      Ps: @Kuckuckmann könntest du im Wiki nochmal die Beschreibung anpassen. Danke

      S 1 Reply Last reply Reply Quote 1
      • Armilar
        Armilar Most Active Forum Testing @Stephan L last edited by Armilar

        @stephan-l

        Im ioBroker ist vieles einfacher. Kein AppDaemon und kein Yaml.

        Das Script muss nicht angepasst werden, denn es lässt sich alles über die Datenpunkte steuern. Hierfür haben wir auch ein Service-Menü bereitgestellt:

        4659acb5-1295-4668-abaf-0f3d6b84b923-Nextion_Editor_LWEKmyMQ1h.gif

        Solltest du dann doch ein Feature Request benötigen, so kannst du es wie gewohnt im Github mit dem "Tag" ioBroker machen...

        6cebf463-dab2-4115-97a9-c2796c4cbec7-image.png

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

        Stephan L 1 Reply Last reply Reply Quote 1
        • S
          SirMiker @TT-Tom last edited by

          @tt-tom
          Also erstmal vielen dank!!

          tut mir leid das ich das nochmal so schreibe, aber das:

          pages: [

                  NSPanel_Service         	//Auto-Alias Service Page
              //Unlock_Service            //Auto-Alias Service Page (Service Pages used with cardUnlock)
          ],
          subPages: [
          

          Finde ich einfach nicht in dem Skript....man das ist aber auch riesig 😉

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

            @sirmiker

            im Original-Script ab Zeile 759 .:

            71060bbe-d5c7-42ac-a5b7-ac077c63b6fd-image.png

            Bei mir ab Zeile ca. 3500 😉

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

              @armilar

              Gerade auch gefunden....vielen dank!

              nun habe ich versucht das hier dort einzutragen...bei beidem

              nun bekomme ich diese Fehlermeldung,

              javascript.0 (23087) script.js.NSPANEL: TypeScript compilation failed: let name = <PageGrid>{ ^ ERROR: Conversion of type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' to type 'PageGrid' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' is missing the following properties from type 'PageGrid': subPage, parent, parentIcon, parentIconColor, and 9 more. let, name = <PageGrid>{ ^ ERROR: Identifier expected. 'let' is a reserved word in strict mode. Modules are automatically in strict mode. let, name = <PageGrid>{ ^ ERROR: No value exists in scope for the shorthand property 'let'. Either declare one or provide an initializer. let, name = <PageGrid>{ ^ ERROR: Did you mean to use a ':'? An '=' can only follow a property name when the containing object literal is part of a destructuring pattern. let, name = <PageGrid>{ ^ ERROR: Conversion of type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' to type 'PageGrid' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' is missing the following properties from type 'PageGrid': subPage, parent, parentIcon, parentIconColor, and 9 more.

              Armilar S 2 Replies Last reply Reply Quote 0
              • Armilar
                Armilar Most Active Forum Testing @SirMiker last edited by

                @sirmiker

                Bitte alles in Code Tags setzen... das kann so keiner lesen:

                f61b2662-d40c-48f7-ac4d-ed18984d46c5-code-tags.gif

                Was hast du denn eingefügt???

                1 Reply Last reply Reply Quote 0
                • L
                  lesiflo Most Active last edited by

                  Hi, gibt es eine Möglichkeit den Wert für "name:" variabel zu gestalten? Ich möchte je nachdem ob der Akku geladen oder entladen wird sich der Text in "Laden" oder "Entladen" ändert. Das spart mir wieder ein Feld

                  let Akku =  <PageGrid>
                  {
                      "type": "cardGrid",
                      "heading": "SolarFlow",
                      "useColor": true,
                      "items": [
                          <PageItem>{ id: "alias.0.Solarflow.PV", name: 'PV [W]', offColor: Gray, onColor: MSGreen, useValue: true},
                          <PageItem>{ id: 'alias.0.Solarflow.SOC', name: 'SOC [%]', offColor: Gray, onColor: MSGreen , useValue: true},
                          <PageItem>{ id: 'alias.0.Solarflow.Akkutemperatur', name: 'Temp. [°C]', offColor: Gray, onColor: MSGreen,useValue: true},
                          <PageItem>{ id: 'alias.0.Solarflow.Laden', name: 'Laden [W]', offColor: Gray, onColor: MSGreen, useValue: true},
                          <PageItem>{ id: "alias.0.Solarflow.Entladen", name: 'Entladen [W]', offColor: Gray, onColor: MSGreen, useValue: true},
                          <PageItem>{ id: "alias.0.Solarflow.Hausabgabe", name: 'Haus [W]', offColor: Gray, onColor: MSGreen, useValue: true }
                  };
                  
                  
                  Armilar 1 Reply Last reply Reply Quote 0
                  • Armilar
                    Armilar Most Active Forum Testing @lesiflo last edited by Armilar

                    @lesiflo

                    ja, allerdings müsste der Text für "name: <Dein_individueller_Text>" dann bereits in einem Datenpunkt sein:

                    Beispiel:

                    <PageItem>{ id: "alias.0.NSPanel_1.TestWert", prefixName: 'Büro: ', name: "getState('0_userdata.0.Test.Testname').val", suffixName: '%', Weitere Parameter...},
                    

                    Ebenfalls ist ein Prefix und ein Suffix möglich...

                    EDIT:

                    Ein anderer Ansatz wäre, wie beim Beispiel Abfall, den Alias "warning" einzusetzen und die Farbe des Icons, den Namen und den Wert entsprechend zu formatieren

                    L 1 Reply Last reply Reply Quote 0
                    • S
                      SirMiker @SirMiker last edited by SirMiker

                      javascript.0 (23087) script.js.NSPANEL: TypeScript compilation failed: let name = <PageGrid>{ ^ ERROR: Conversion of type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' to type 'PageGrid' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' is missing the following properties from type 'PageGrid': subPage, parent, parentIcon, parentIconColor, and 9 more. let, name = <PageGrid>{ ^ ERROR: Identifier expected. 'let' is a reserved word in strict mode. Modules are automatically in strict mode. let, name = <PageGrid>{ ^ ERROR: No value exists in scope for the shorthand property 'let'. Either declare one or provide an initializer. let, name = <PageGrid>{ ^ ERROR: Did you mean to use a ':'? An '=' can only follow a property name when the containing object literal is part of a destructuring pattern. let, name = <PageGrid>{ ^ ERROR: Conversion of type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' to type 'PageGrid' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ type: "cardType"; heading: string; useColor: true; items: undefined[]; }' is missing the following properties from type 'PageGrid': subPage, parent, parentIcon, parentIconColor, and 9 more.
                      

                      das habe ich eingefügt

                                 NSPanel_Service         	//Auto-Alias Service Page
                      	    //Unlock_Service            //Auto-Alias Service Page (Service Pages used with cardUnlock)
                          ],
                          
                          let name = <PageGrid>
                      {
                          'type': 'cardType',
                          'heading': 'Eckstein',
                          'useColor': true,
                          'items': []
                      };  ,
                          subPages: [
                      	    
                      
                      Armilar 2 Replies Last reply Reply Quote 0
                      • Armilar
                        Armilar Most Active Forum Testing @SirMiker last edited by Armilar

                        @sirmiker

                        viel wichtiger ist es jetzt zu zeigen, was du überhaupt in das Script eingefügt hast. Das der Fehler kommt, hat sicherlich etwas mit den folgenden Punkten zu tun.

                        • Variablendefinition falsch
                        • PageItem falsch
                        • Komma in der Auflistung vergessen
                        • Alias nicht über Geräte-Manager erstellt

                        Also mehr Input zu deinen Aktionen als zum Fehler...

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

                          @sirmiker sagte in SONOFF NSPanel mit Lovelace UI:

                          let name = <PageGrid>
                          {
                              'type': 'cardType',
                              'heading': 'Eckstein',
                              'useColor': true,
                              'items': []
                          };  ,
                              subPages: [
                          

                          Das ist völlig falsch...

                          Die Variablendefinition einer Seite befindet sich immer im oberen Teil des Scriptes...

                          Die Seite selbst wird später nur in das page-Array in der Config eingetragen...

                          Sieh dir mal das Service-Menü an... Das ist im Prinzip schon eine gute Anleitung...

                          Hier nochmal ein Beispiel wie es korrekt wäre:

                          Im oberen Teil wird eine Seite definiert...
                          6045809b-1c3d-4d1c-bec4-1c2fa1df5a64-image.png

                          im pages-Array rufe ich die Seite an der richtigen Position auf...

                          ccfa6262-08ec-493c-8b6f-491db16f6ab0-image.png

                          Alles andere steht auch in einer richtig umfänglichen Wiki... die muss man aber lesen...

                          Hier mal die wichtigsten Seiten:

                          • https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)
                          • https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-‐-Typen_How-2_Beispiele#how-2-page

                          Und ganz viele Beispiele:
                          https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen

                          Der Rest ist auch nicht uninteressant...

                          Jetzt noch ein kleines Beispiel für eine cardGrid:

                          let Radiosender = <PageGrid>
                          {
                              'type': 'cardGrid',
                              'heading': 'Büro 2',
                              'useColor': true,
                              'items': [
                                  <PageItem>{ id: 'alias.0.NSPanel_1.Radio.Bob', icon: 'radio', name: 'Radio BOB', onColor: colorRadio},
                                  <PageItem>{ id: 'alias.0.NSPanel_1.Countdown', icon: 'timer-outline', name: 'Timer', onColor: White}
                              ]
                          };
                          

                          Das ist bei mir die "Test"-Seite Radiosender. Jedes PageItem ist ein Steuerelement und muss mit einem "nicht selbstgebauten" Alias (https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen) erstellt werden und unter "id:" im PageItem eingetragen werden. Das Script sucht sich über den Alias-Channel dann den richtigen Typen zur Darstellung raus...

                          Das Ergebnis in diesem Beispiel:
                          1d6b765e-c7c9-41c7-b163-e6096a6d5c9b-image.png
                          Eine cardGrid mit einem Button um einen Radiosender zu starten und ein popupTimer

                          Noch detaillierte für z.B. den Radiosender ist es hier beschrieben:

                          https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#9-alias-taste-für-auswahl-eines-radiosenders

                          Wenn man das Erstellen erst einmal verstanden hat, dann geht es sehr schnell...

                          S 1 Reply Last reply Reply Quote 1
                          • Stephan L
                            Stephan L @Armilar last edited by

                            @armilar said in SONOFF NSPanel mit Lovelace UI:

                            Das Script muss nicht angepasst werden,

                            Ich will folgendes Format: "%A - %m/%d/%Y"
                            Im Klartext (fuer USA): Saturday - 11/18/2023

                            Leider finde ich keine Schalter die mir das erlauben.

                            Aber: meine kleine Aenderung fuegt einen Datenpunkt hinzu der mir die Kontrolle gibt. Keine TS leider nicht genug um zu wissen ob man absolute Freiheit wie in anderen Sprachen. Daher ist mein aktuelles Format: 'Saturday, 11/1/2023'.
                            FAST richtig.

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

                              @armilar
                              wirklich vielen dank für die ausführliche Erklärung!

                              das mit der Pages klappt null bei mir....und ich verstehe auch mit durchlesen gar nicht was ich da machen muss...sorry...denke da habe ich mir diesmal eindeutig Zuviel vor genommen 😞

                               pages: [
                                      
                              
                                          NSPanel_Service         	//Auto-Alias Service Page
                              	    //Unlock_Service            //Auto-Alias Service Page (Service Pages used with cardUnlock)
                                  ],
                                  
                              

                              Dort muss ich nach Pages den Namen einfügen den ich vergeben habe oder?

                              Armilar 1 Reply Last reply Reply Quote 0
                              • Stephan L
                                Stephan L last edited by

                                Ich verwende das 'alternative' screensaver Layout.
                                Leider scheint das ein paar Problemchen zu haben.

                                Links sind 2 Eintraege uebereinander, daneben sind 3 weitere nebeneinander.

                                Problem: Der OBERE auf der linken Seite ist bei ioBroker IMMER das Wetter!
                                Im Script zu finden beim Komentar (//Create Weather MainIcon)

                                Mein Panel mit AppDaemon:
                                d4b300a4-32ba-4a70-9a65-6c213ff5569f-image.png

                                Hier im Bild von AppDaemon sieht man dass ich dort was anderes hingelegt habe. Habe das aktuelle Wetter als erstes in der 3er Reihe (geht aber auch ganz ohne Wetter, meine Wahl)

                                Ich ja bereits alle Werte und Infos in HA, daher verwende ich den ioBroker HA Adapter. Genial...
                                Von dort kommt auch mein momentaner Stromverbrauch. Den konnte ich auch mit ioBroker anzeigen lassen. Aber warum auch immer wurde der Wert als 'String' erkannt. Und im Code gibt es dubiose logik die dann den Wert, z.B. "793" als DATUM umformatiert.
                                Dafuer konnte ich einen einfachen Fix machen.

                                Ein String x, der folgendes erfuellt ist KEIN Datum:

                                if (parseFloat(val+"") == val)      // I have number that would fit this
                                     val = parseFloat(val)
                                

                                Dann habe ich den State von 2 Lichtern (die letzten beiden in der Reihe unter dem Datum)

                                Ich haette gerne wie mit AppDaemon das Icon in WEISS wenn das Licht aus ist und in Gelb wenn es an ist. Hab ich bisher nicht geschafft.
                                Und zuletzt habe ich den State unter dem Icon. Auch hier konnte ich das in AppDaemon etwas schoener machen und den 1. Buchstaben mit 'capitalize' auf gross umstellen.
                                Beides scheint es hier nicht zu geben?

                                Armilar 2 Replies Last reply Reply Quote 0
                                • Armilar
                                  Armilar Most Active Forum Testing @Stephan L last edited by Armilar

                                  @stephan-l

                                  Okay - ich denke du meinst dann wohl das

                                  d4a27af6-7e45-4bc8-b0a3-97b6f43bb4e5-image.png

                                  Wir sind im ioBroker noch nicht ganz so International unterwegs... Ich werde mir für die Zukunft mal etwas überlegen.

                                  Damit sollte es aber funktionieren:

                                  const event = new Date();
                                  
                                  
                                  let weekday = event.toLocaleString('en-US', { weekday: 'long' });
                                  let day = event.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit'});
                                  
                                  console.log(weekday + ' - ' + day)
                                  
                                  Stephan L 1 Reply Last reply Reply Quote 0
                                  • Armilar
                                    Armilar Most Active Forum Testing @Stephan L last edited by Armilar

                                    @stephan-l sagte in SONOFF NSPanel mit Lovelace UI:
                                    1)

                                    Dann habe ich den State von 2 Lichtern (die letzten beiden in der Reihe unter dem Datum)
                                    Ich haette gerne wie mit AppDaemon das Icon in WEISS wenn das Licht aus ist und in Gelb wenn es an ist. Hab ich bisher nicht geschafft.

                                    Und zuletzt habe ich den State unter dem Icon. Auch hier konnte ich das in AppDaemon etwas schoener machen und den 1. Buchstaben mit 'capitalize' auf gross umstellen.

                                    Beides scheint es hier nicht zu geben?

                                    Zu 1)
                                    Stimmt - mache bitte einen Feature Request:

                                    wir implementieren dann noch:

                                    ScreensaverEntityOnColor: Yellow, 
                                    ScreensaverEntityOffColor: White
                                    

                                    Zu 2)
                                    Kannst du über den Alias verändern:

                                    Habe hier mal einen Datenpunkt, der "on"/"off" (klein) enthält
                                    84a604a7-f68e-4eb6-b2bf-bfa2669bd445-image.png

                                    Device-Manager
                                    7c5f6c0f-99f0-4e49-93fa-ec913a3ce8be-image.png

                                    efadd0f8-f5fe-40a5-b767-893243912413-image.png

                                    unter fx:
                                    7930201d-fda9-4f17-920e-7737e5f1b0a0-image.png

                                    val.charAt(0).toUpperCase() + val.slice(1);
                                    

                                    Ergebnis:
                                    1b2786f8-2d0b-421a-975a-de060adda865-image.png

                                    Stephan L 2 Replies Last reply Reply Quote 0
                                    • Armilar
                                      Armilar Most Active Forum Testing @Stephan L last edited by

                                      @stephan-l sagte in SONOFF NSPanel mit Lovelace UI:

                                      Ich ja bereits alle Werte und Infos in HA, daher verwende ich den ioBroker HA Adapter. Genial...
                                      Von dort kommt auch mein momentaner Stromverbrauch. Den konnte ich auch mit ioBroker anzeigen lassen. Aber warum auch immer wurde der Wert als 'String' erkannt. Und im Code gibt es dubiose logik die dann den Wert, z.B. "793" als DATUM umformatiert.
                                      Dafuer konnte ich einen einfachen Fix machen.
                                      Ein String x, der folgendes erfuellt ist KEIN Datum:

                                      if (parseFloat(val+"") == val)      // I have number that would fit this                                                                                                             val = parseFloat(val)
                                      

                                      ... sehen wir uns an und machen einen Fix

                                      Stephan L 1 Reply Last reply Reply Quote 1
                                      • Stephan L
                                        Stephan L @Armilar last edited by

                                        @armilar said in SONOFF NSPanel mit Lovelace UI:

                                        Ich werde mir für die Zukunft mal etwas überlegen.

                                        const dayjs = require('dayjs');
                                        console.error(dayjs().format('dddd - DD/MM/YYYY'));
                                        

                                        Bingo... der format-string kann dann ein Datenobjekt sein. Damit kann ich wie in anderen Sprachen das ganze komplett formatieren!

                                        Siehe auch: https://day.js.org/docs/en/display/format

                                        Ich bin kein Experte, habe aber wo gelesen dass 'moment' nicht mehr aktualisiert wird? Egal... DayJS kann alles was du brauchst mit minimalem Aufwand und 100% flexibel!

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

                                          @stephan-l

                                          sieht wirklich nach einer guten Lösung aus

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

                                            @armilar said in SONOFF NSPanel mit Lovelace UI:

                                            Zu 2)
                                            Kannst du über den Alias verändern:
                                            Habe hier mal einen Datenpunkt, der "on"/"off" (klein) enthält

                                            Naja, dann muss ich also alles doppelt machen? Wenn ich im Panel ein anderes Licht anzeigen will, dann muss ich einen neuen Alias machen UND dann noch im TS skript das andere Licht anwaehlen. Also dopplete Arbeit? Oder hab ich was falsch verstanden?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            402
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

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