SONOFF NSPanel mit Lovelace UI

[theknut]

@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

[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

[TT-Tom]

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

[TT-Tom]

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

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

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

[cdn]

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.

[ticaki]

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

[cdn]

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

EDIT: OK, sind nur Kommentare

[ticaki]

@cdn

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

EDIT: changelog fehlt dann

[cdn]

@ticaki Passt so, danke

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

[cdn]

@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
    },

[ticaki]

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

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

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

[ticaki]

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

[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?

[Armilar]

@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

[cdn]

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

[Armilar]

@cdn

Hab's ja schon gesagt. Das erste Update-Chaos im Code ( @ticaki erinnerte sich heute ja wieder ) passierte nicht wirklich grundlos und ist die Basis für genau diese Neuerungen...

[cdn]

@armilar Ich bin echt gespannt. Das Projekt hat auf jeden Fall noch richtig viel Potential!