Betatest NSPanel-lovelace-ui v0.2.x

ticaki

@teletapi
wiki macht @TT-Tom - aber du kannst auch einfach Fragen was du machen willst dann versuche ich es hier zu erklären.

teletapi

@ticaki Naja ich versuche jetzt mal als erstes die programmseite zu erstellen da hatten wir hier im Thread Seite 110 schonmal begonnen aber ich komm damit nicht weiter hab da dann immer im script Compiled fehler

ticaki

@teletapi

Zeig mir den Fehler und die Page

TT-Tom

@teletapi

hier eine Seite im Wiki wo das Script beschrieben ist, noch etwas grob aber das wichtige ist drin.
https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki/ScriptConfig#seiten-konfiguration

hier ein Beispiel meiner Main Seite, die musst du einrichten, sonst geht nix. Also eine Seite, die als uniqueName = main hat. Sie muss auch unter pages stehen und darf keine subpage sein.

const main: ScriptConfig.PageGrid = {
        type: 'cardGrid',
        uniqueName: 'main',
        heading: 'Übersicht',
        useColor: true,
        items: [
            {
                navigate: true,
                id: 'alias.0.NSPanel.allgemein.Status_offene_Fenster',
                targetPage: 'fenster1',
                onColor: Red,
                offColor: Green,
                icon2: 'window-closed-variant',
                icon: 'window-open-variant'
            },
            { navigate: true, id: 'alias.0.NSPanel.allgemein.Status_offene_Tuer', targetPage: 'tuer', onColor: Red, offColor: Green, name: 'Türen', icon2: 'door-closed', icon: 'door-open' },
            { navigate: true, id: 'alias.0.NSPanel.allgemein.Status_Licht_An', targetPage: 'licht1', onColor: Yellow, offColor: Green, name: 'Licht', icon: 'lightbulb', icon2: 'lightbulb-outline' },
            //{ navigate: true, id: 'alias.0.NSPanel.allgemein.Status_Licht_An', targetPage:'Licht_Test', onColor: Yellow, offColor: Green, name: 'Licht Test'},
            { id: 'alias.0.Türschloss', name: 'Türschloss' },
        ],
    };

patricknitsch

Hallo @ticaki,

ich habe mal eine Frage zum Screensaver. Wann wird dieser ausgelöst? Ich habe das Problem, dass der Screensaver bei mir gar nicht ausgelöst wird. Der Adapter ist auf grün, Kommunikation zum Panel besteht, das Script geladen, Fehlermeldungen gibt es keine.

Nach Neustart des Adapters wird auch immer die letzte Seite geladen und nicht die Mainpage.

Hast du hierzu eine Idee?

Armilar

@patricknitsch

auf welchem Wert steht denn das Screensaver-Timeout?

patricknitsch

@armilar Aktuell waren 5 Sekunden eingestellt. Habs jetzt mal, wie bei dir auf 15 Sekunden erhöht. Ändert sich aber trotzdem nicht.

Edit: Ich habe den Stammbaum des Panels nochmal komplett gelöscht und neu anlegen lassen. Jetzt funktioniert es. Danke

patricknitsch

@armilar schaut ja echt nice aus. Kann man die Shutter Page schon im Adapter testen? Gibt’s dazu eine Beispiel Config? Auf die Thermo2 bin ich auch gespannt, wenn diese soweit ist

Armilar

@patricknitsch

ja der Shutter funktioniert im Adapter schon ein paar Wochen. Bei mir sieht die Config gar nicht so viel anders als im Skript aus:

{ id: 'alias.0.Haus.Erdgeschoss.Buero.Aktoren.Fyrtur', minValueLevel: 99, maxValueLevel: 21, icon: "blinds-horizontal", offColor: HMIOff, onColor: HMIOn, name: 'IKEA Fyrtur' , secondRow: 'Büro Fenster' },

Die cardThermo2 ist jetzt bei mir im "kurz vor Produktiv-Test". Letzte finale Änderungen und Absicherungschecks fließen im Moment noch ein... Ich denke die cardThermo2 wird morgen für das Skript released... Beim Adapter kann es dann noch ein paar Tage länger dauern.

Die cardThermo2 ist eine Kombination aus einer cardGrid mit 9 separaten Entitäten und einer Temperatursteuerung (Circular Slider und Short-/Longpress Buttons). Darüber Hinaus verfügt sie über drei weitere Entitäten, die ebenfalls sehr flexibel im Bereich Icon, Color und Unit sind (z.B. aktuelle Temperatur/aktuelle Luftfeuchte, Statuszeile)

Daher wird sich der Aufbau der Card-Definition auch grundlegend ändern... Ich werde zunächst die Doku fertigstellen, da es jetzt eine der komplexesten Cards (nach aktueller Architektur) im NSPanel ist...

Kleines Beispiel für die 9 Entitäten (Eine ist derzeit ausgeblendet)

Ist für Testzwecke eine Lampe, ein Fenster, eine Mute-Steuerung mit Volume-Popup, ein Slider mit Popup, ein Ventilator mit Popup, ein Radiosender, eine Tür und ein Popup-Shutter drin

Also man sieht schon, auch wenn viele Dinge später in meiner persönlichen cardThermo2-Definition nicht enthalten sein werden, wie mächtig diese Card ist...

patricknitsch

@armilar Ihr seid wahnsinnig Gibt ja mittlerweile keine Grenzen mehr bei euch. Danke dafür

Kann man das Shutter Popup auch schon testen?

Armilar

@patricknitsch

Kann man das Shutter Popup auch schon testen?

Ja, einfach in einer cardGrid oder cardEntities platzieren...

teletapi

@tt-tom @ticaki, hab jetzt z
zwar einige Zeit gebraucht aber habe erste Erfolge erzielt hab jetzt die Main Seite als Übersichtsseite angelegt und hier die Abfall und Gästewlan CardQR hinterlegt und auch die subpages laufen dazu. Hat mich jetzt wirklich eion paar Stunden gekostet. Was ich aber nicht hinbekommmen habe sind die Farben der Mülltonnen wie gelb,schwarz Braun oder Grün für Grünschnitt. Vielleicht könntet ihr mir da wieder behilflich sein.

Edit:
Was ich auch nicht hinbekomme sind die beiden Hardware Buttons zu konfigurieren da würde ich gerne 2 Hue Deckenleuchten mit steuern. Hab die Rule 2 per Konsole reingeschrieben und durch Rule2 on bzw 1 aktiviert und nach der Anleitung konfiguriert aber es tut sich nichts.

const main: ScriptConfig.PageGrid = {
        type: 'cardGrid',   
        uniqueName: 'main',
        subPage: true,
        heading: 'Übersicht',
        useColor: true,
        items: [
            { navigate: true, id: null, targetPage: 'Gaeste_Wlan', onColor: MSGreen, name: 'wlandaten'},
            { navigate: true, id: null, targetPage: 'Abfall', icon: 'trash-can', name: 'Abfall' },
        ],
     };

      const Abfall: ScriptConfig.PageEntities = {
        type: 'cardEntities',
        uniqueName: 'Abfall', 
        heading: 'Abfallkalender',
        prev: 'main',
        subPage: true,
        useColor: true,
        items: [
            { id: 'alias.0.NSPanel.allgemein.Abfall.event1', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' },
            { id: 'alias.0.NSPanel.allgemein.Abfall.event2', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' },
            { id: 'alias.0.NSPanel.allgemein.Abfall.event3', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' },
            { id: 'alias.0.NSPanel.allgemein.Abfall.event4', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' },
            { id: 'alias.0.NSPanel.allgemein.Abfall.event5', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' },
            { id: 'alias.0.NSPanel.allgemein.Abfall.event6', icon: 'trash-can', targetPage: 'Abfall', name: 'Abfall' }, 
         ],
     };

     const wlandaten: ScriptConfig.PageQR = {
        prev: 'main',
        home: 'main',
        uniqueName: 'Gaeste_Wlan', // muss mit dem Namen im Admin übereinstimmen
        type: 'cardQR'
     };

      const config: ScriptConfig.Config = {
        panelTopic: 'SmartHome/NSPanel_Weiss',
        weatherEntity: 'openweathermap.0.',
        defaultOffColor: Off,
        defaultOnColor: On,
        defaultBackgroundColor: HMIDark,
        weatherAddDefaultItems: false,

        // Als Gedankenstütze, die Hauptseite muß main heißen!
        //panelName: 'NSPanel', //unique name for the panel

        // Seiteneinteilung / Page division
        // Hauptseiten / Mainpages
        pages: [
            //Programmseite,
            main,
            //grid1,
            //qrCode,
            //wlandaten,
            //chartHeizung,
        ],
        // Unterseiten / Subpages
        subPages: [
            //fahrplan,
            wlandaten,
            Abfall,
        ],

ticaki

@teletapi
Entferne die rules die du geschrieben hast und setze in States unter cmd relay1/relay2 auf detach. Kann auch bitton1/2 sein bin nicht vor dem pc

TT-Tom

@ticaki @teletapi
Funktioniert einfach in der servicepage unter Relais.

TT-Tom

@teletapi

für den Abfallkalender gibt es ein so genantes Template. Davon gibt es schon einige, aber sie fehlen noch im Wiki.

nutze mal diesen Code, dann sollte es funktionieren.

    const Abfall: any = {
        heading: 'Abfall Termine',
        prev: 'main',
        subPage: true,
        native: {
            card: 'cardEntities',
            dpInit: '0_userdata.0.Abfallkalender',
            uniqueID: 'abfall',
            template: 'entities.waste-calendar',
        },
    };

teletapi

@tt-tom Ich hatte zwar schon von den templates gelesen wusste das aber auch nicht umzusetzen aber wie geil ist das denn bitteschön..... Danke Ihr seid spitze.

patricknitsch

@armilar Shutter Popup funktioniert fantastisch.

Mit deiner Aussage zur Thermo Card heizt du natürlich die Neugier an...

teletapi

@patricknitsch Könntest du mir zu der Shutterpages ein paar mehr Infos zukommen lassen den Code vielleicht und das ein oder andere Bild
Das wäre nett.
Gruß

patricknitsch

@teletapi Wie armilar schon sagte, kein großer Aufwand. Ich habe in meiner Mainpage einfach den alias aufgerufen. Dieser ist als Blind hinterlegt.

const p_Main: PageType = {
        uniqueName: 'main', // keine Navigation, am besten uniqueName von config.ts übernehmen
        heading: 'Übersicht',
        items: [
            { id: 'alias.0.Other.Shutter_Büro', minValueLevel: 0, maxValueLevel: 100, 
            icon: "blinds-horizontal", offColor: MSRed, onColor: MSGreen, name: 'Büro Fenster' },
        ],
        type: 'cardGrid',
        useColor: true
    };

teletapi

@patricknitsch Danke Funktioniert perfekt.
@ticaki @TT-Tom

Ich hab da aber noch einen anderen Fehler in meinen Hueleuchten.
Bei den Hue Deckenleuchten die sind nur weiß bzw in Helligkeit und Warm-Kaltweiß einstellbar und der Hue Adapter in Iobroker stellt bei den Leuchten dann keinen "Hue" Datenpunkt zur verfügung und so bekomme ich dann immer wieder diese Fehler im Log.

nspanel-lovelace-ui.0
	2025-08-12 11:35:20.851	error	[StatesDB.Kueche.8?0.hue.data] Error 1001: Error: State id invalid alias.0.Kueche.Deckenlicht_Kueche.HUE no data!
nspanel-lovelace-ui.0
	2025-08-12 11:34:46.009	error	[StatesDB.FlurHue.7?3.hue.data] Error 1001: Error: State id invalid alias.0.Treppenhaus.Flur_Mitte.HUE no data!
nspanel-lovelace-ui.0
	2025-08-12 11:34:45.950	error	[StatesDB.FlurHue.7?2.hue.data] Error 1001: Error: State id invalid alias.0.Treppenhaus.Kleiner_Flur_Mitte.HUE no data!
nspanel-lovelace-ui.0
	2025-08-12 11:34:45.898	error	[StatesDB.FlurHue.7?1.hue.data] Error 1001: Error: State id invalid alias.0.Treppenhaus.Flur_unten_Haustuer.HUE no data!
nspanel-lovelace-ui.0
	2025-08-12 11:34:45.847	error	[StatesDB.FlurHue.7?0.hue.data] Error 1001: Error: State id invalid alias.0.Treppenhaus.Flur_unten.HUE no data!

Hier meine config zu den Deckenleuchten:

const Licht1: ScriptConfig.PageGrid2 = {    
        type: 'cardGrid2',
        uniqueName: 'Licht1',
        heading: 'Beleuchtung 1',
        useColor: true,
        items: [
        { navigate: true, id: 'alias.0.Treppenhaus.Flur_unten_Haustuer', targetPage: 'FlurHue', name: 'Hue Flur'},
        { navigate: true, id: 'alias.0.NSPanel.Badezimmer.Badezimmer_Licht', targetPage: 'Bad', offColor: MSGreen, onColor: MSYellow, name: 'Bad unten'},
        { navigate: true, id: 'alias.0.NSPanel.Hue_Flur_Mitte.Treppenlicht', targetPage: 'Treppenlicht', offColor: MSRed, onColor: MSGreen, name: 'Treppe'},
        { navigate: true, id: 'alias.0.NSPanel.Ankleidezimmer.Steckdose_Fenster', targetPage: 'Ankleidezimmer', offColor: MSGreen, onColor: MSYellow, name: 'Ankleide'},
        { navigate: true, id: 'alias.0.Kueche.Spüle1', targetPage: 'Kueche', offColor: MSGreen, onColor: MSYellow, name: 'Küche'},
        { navigate: true, id: 'alias.0.NSPanel.Schlafzimmer.Bett1', targetPage: 'Schlafzimmer', name: 'Schlafen'},
        { navigate: true, id: 'alias.0.NSPanel.Waschkueche.Deckenlicht', targetPage: 'Waschkueche', name: 'Waschen'},
    ],
};

     const FlurHue: ScriptConfig.PageEntities = {
            uniqueName: 'FlurHue',
            type: 'cardEntities',
            heading: 'Hue Flur',
            useColor: true,
            subPage: true,
            parent: 'Licht1',
              items: [
            { id: 'alias.0.Treppenhaus.Flur_unten',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2},
            { id: 'alias.0.Treppenhaus.Flur_unten_Haustuer',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2},
            { id: 'alias.0.Treppenhaus.Kleiner_Flur_Mitte',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2},
            { id: 'alias.0.Treppenhaus.Flur_Mitte',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2
                 }
        ],
};

         const Kueche: ScriptConfig.PageGrid = {
            uniqueName: 'Kueche',
            type: 'cardGrid',
            heading: 'Küche',
            useColor: true,
            subPage: true,
            parent: 'Licht1',
            items: [
            { id: 'alias.0.Kueche.Deckenlicht_Kueche',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 offColor: Off,
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2
                 },
            { id: 'alias.0.Kueche.abzugshaube',
                 icon: 'power-socket-de',
                 icon2: 'power-plug-off-outline',
                 onColor: MSYellow,
                 offColor: MSGreen,
                 },
            { id: 'alias.0.Kueche.Spüle1',
                icon: 'lightbulb-on',
                icon2: 'lightbulb-outline',
                offColor: Off,
                minValueColorTemp: 2700,
                maxValueColorTemp: 6500,
                interpolateColor: true,
                modeList: ["Color", "Nachtlicht"], inSel_ChoiceState: true,
                popupVersion: 2
                },
            {id: 'alias.0.Kueche.Spüle2',
                icon: 'lightbulb-on',
                icon2: 'lightbulb-outline',
                offColor: Off,
                minValueColorTemp: 2700,
                maxValueColorTemp: 6500,
                interpolateColor: true,
                modeList: ["Color", "Nachtlicht"], inSel_ChoiceState: true,
                popupVersion: 2
                },
            {id: 'alias.0.Kueche.Spüle3',
                icon: 'lightbulb-on',
                icon2: 'lightbulb-outline',
                offColor: Off,
                minValueColorTemp: 2700,
                maxValueColorTemp: 6500,
                interpolateColor: true,
                modeList: ["Color", "Nachtlicht"], inSel_ChoiceState: true,
                popupVersion: 2
                } 
        ],
};

     const Waschkueche: ScriptConfig.PageEntities =  {
            type: 'cardEntities',
            uniqueName: 'Waschkueche',            
            heading: 'Wasckueche',
            useColor: true,
            subPage: true,
            parent: 'Licht1',
            home: 'main',
            items: [
            { id: 'alias.0.NSPanel.Waschkueche.Deckenlicht',
                 icon: 'lightbulb-on',
                 icon2: 'lightbulb-outline',
                 minValueColorTemp: 2203,
                 maxValueColorTemp: 6500,
                 popupVersion: 2
                 }
        ],
};

NEWS

Betatest NSPanel-lovelace-ui v0.2.x

Support us

896
Online

32.0k
Users

80.4k
Topics

1.3m
Posts

NEWS

Betatest NSPanel-lovelace-ui v0.2.x

Support us

896Online

32.0kUsers

80.4kTopics

1.3mPosts

896
Online

32.0k
Users

80.4k
Topics

1.3m
Posts