SONOFF NSPanel mit Lovelace UI

Armilar

wäre das etwas für dich?

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

drakal

Panel: v4.3.3.5
Nodejs 18.18.2
JS 7.1.4

hatte JS und nodejs aber gerade erst geupdatet. Außerdem habe ich die US-Version des NSPanels. Keine Ahnung woran das liegt. Ich habe alle JS-Adapter-Einstellungen richtig gemacht... Geht leider trotzdem nicht. Any ideas?

Armilar

@drakal

Hatte den Post oben noch erweitert:

Dürfte mit der US-Version nichts zu tun haben...

drakal

@armilar oh Mann... Du bist meine Rettung... Das war es (löschen und neu erstellen lassen)!!! Danke!!!!!!

Armilar

@drakal

manche Probleme lassen sich schnell und radikal lösen

Stephan L

Also, ich versuche gerade meine AppDaemon configuration nach ioBroker zu bringen.
AppDaemon ist super lahm und was ich hier bisher sehe gefaellt mir.

Leider stehe ich etwas auf dem Schlauch.... Zum einen, der Mix aus Deutsch und Englisch in der TS Datei macht es nicht wirklich einfacher. Zum Glueck behersche ich noch etwas Deutsch haha.

Egal, mein erstes Problem ist, Ich will auf dem ScreenSaver das grosse Datum in der Mitte umformatieren.

In der AppDaemon config geht das ganz einfach:
dateFormat: "%A - %m/%d/%Y"
Und fertig.

Ich sehe hier in den 'Settings' zwar 2 Schalter, aber das ist nicht genug! Ich will das Datum mit / als Trenner.

In der Wiki steht was von 'ScreensaverEntityDateFormat' aber leider ohne Beispiel wo genau das hin soll.
Ein Beispiel hat es unter 'bottomScreensaverEntity : ' aber das ist ja nicht der Teil den ich anpassen will.

Ich denke es sollte nicht so schwer sein und ich bin wohl einfach nur Blind.
Will nicht zurueck zu AppDaemon denn damit ist das Panel echt traege!

Vielen Dank!

Stephan L

@stephan-l

Habe die Stelle im Code gefunden und das geht heute wirklich nicht
Arbeite zwar mit ioBroker erst seit paar Stunden aber ich denke das sollte so gehen.
Wenn ich ein neues Objekt 'Config.Dateformat.options' erstelle dann kann ich dort z.B.
{ weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric' }
eintragen und bekomme dann das Datum passend formatiert. Wenn das Objekt fehlt dann laueft der alte Code.

function SendDate(): void {
    try {
        if (existsObject(NSPanel_Path + 'Config.locale')) {
            let dpWeekday = existsObject(NSPanel_Path + 'Config.Dateformat.weekday') ? getState(NSPanel_Path + 'Config.Dateformat.weekday').val : 'short';
            let dpMonth = existsObject(NSPanel_Path + 'Config.Dateformat.month') ? getState(NSPanel_Path + 'Config.Dateformat.month').val : 'short';

            const date = new Date();
-->         let fullOptions = existsObject(NSPanel_Path + 'Config.Dateformat.options') ? getState(NSPanel_Path + 'Config.Dateformat.options').val : { weekday: dpWeekday, year: 'numeric', month: dpMonth, day: 'numeric' };
-->         const _SendDate = date.toLocaleDateString(getState(NSPanel_Path + 'Config.locale').val, fullOptions);

            SendToPanel(<Payload>{ payload: 'date~' + _SendDate });
        }

2 Fragen:

Wo kann ich das als Feature Request einstellen? Ist ja recht einfach
Hat jemand eine Idee warum mein Beispiel Format keine Wochentag mehr anzeigt?

Ich denke es fehlt evtl. noch etwas code der ein Update triggert wenn das Objekt geandert wird. Dafuer kenne ich mich noch nicht gut genug aus

SirMiker

Moin Moin,

so ich hoffe ich werde für so eine anfängerfrage nicht verflucht...

habe den Panel zum laufen gebracht...Screensaver läuft...Skript ist da...habe die Wiki gelesen und versuche eine eigene Page zu erstellen...

hier fangen die Probleme an...WO und Wie muss ich das in ein Skript ablegen damit ich diese auch sehe...versuche nun seit 2 Tagen irgendwie eine Anleitung dafür zu finden

Gruß Mike

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

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...

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

SirMiker

@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

@sirmiker

im Original-Script ab Zeile 759 .:

Bei mir ab Zeile ca. 3500

SirMiker

@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

@sirmiker

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

Was hast du denn eingefügt???

lesiflo

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

@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

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

@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...

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...

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

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

Hier mal die wichtigsten Seiten:

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:

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...

Stephan L

@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.

NEWS

SONOFF NSPanel mit Lovelace UI

v4.3.3.5 - Update NSPanelTs.ts

Durchführung des Updates:

Support us

300

32.4k

81.4k

1.3m