SONOFF NSPanel mit Lovelace UI

theknut

Wie genau funktioniert denn die LChart Karte? Ich habe ein Thermostat und möchte dafür verschiedene Diagramme erstellen, bspw. Temperatur und Luftfeuchte. Das Problem ist schon erstmal, dass er den Alias immer nach .ACTUAL abfragt, also kann ich schon mal nicht HUMIDITY anzeigen, sondern müsste es noch mal in einen separaten Alias packen, wo ich es dann auf ACTUAL legen muss.
Sei's drum. Ich habe jetzt erstmal mit der Temperatur gestartet und erhalte aber kein Diagramm, was genau mach ich falsch? Ich logge alle Änderungen in meine InfluxDB Instanz, aber ich sehe auch nirgendwo wo das abgefragt wird.

let diagrammeGaesteZimmerTemperatur : PageType =
{
    'type': 'cardLChart',
    'heading': 'Gästezimmer',
    'subPage': true,
    'parent': diagramme,
    'home': Object.keys({diagramme})[0], 
    'items': [{ 
        id: 'alias.0.Rooms.Gästezimmer.Heizung',
        yAxis: 'Temperatur [°C]',
        yAxisTicks: [-250, -200, -150, -100,-50, 0, 50, 100, 150, 200, 250, 300],
        onColor: Yellow
     }]
};

Leider konnte ich auch nirgendwo eine Dokumentation dazu finden. Kann mir das jemand erklären? Ich könnte dann die Doku dazu schreiben.

Marko1974

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

const jsonEventName1: string = 'USB Abfuhr Grau - Restmüll'; // Vergleichstring für Schwarze Tonne
const customEventName1: string = 'Restmüll'; // benutzerdefinierter Text für schwarze Tonne
const jsonEventName2: string = 'USB Abfuhr Gelb - kombinierte Wertstofftonne'; // Vergleichstring für Gelbe Tonne / Sack
const customEventName2: string = 'Gelbe Tonne'; // benutzerdefinierter Text für gelbe Tonne
const jsonEventName3: string = 'USB Abfuhr Blau - Altpapier'; // Vergleichstring für Blaue Tonne
const customEventName3: string = 'Papiertonne'; // benutzerdefinierter Text für blaue Tonne
const jsonEventName4: string = 'Biomüll'; // Vergleichstring für Braune Tonne
const customEventName4: string = ''; // benutzerdefinierter Text für braune Tonne

Du bist ein Goldstück!!! Vielen Dank!

TT-Tom

@marko1974 na dann weiter viel Spass mit dem Panel

TT-Tom

@theknut

hier ist eine Beschreibung inkl. Script für Influx2

Marko1974

@tt-tom Im Moment ist es kaputt Meine Mutter hat sich gefönt und die Sicherung ist rausgeflogen. Warum auch immer. Nach dem Einschalten war es tot.

In 2. Instanz muss ich mal den Page Aufbau hinbekommen. Habe da im Moment nur Heizungen und Fenster drin.

Hätte gern ein grid mit 6 Buttons überschrift Heizungen -> / Wohnzimmer / bad / flur ..... etc als Button und dann soll der auf die Unterpages Thermostate.
Da bin ich dann irgendwie gescheitert.

Ihr habt das hier immer so schön als Video mit dem Mauszeiger auf dem Panel. Kann man das emulieren, wenn es physisch nicht vorhanden ist?

theknut

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

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!

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.

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

1.6k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

1.6kOnline

30.4kUsers

76.6kTopics

1.2mPosts

1.6k
Online

30.4k
Users

76.6k
Topics

1.2m
Posts