Betatest NSPanel-lovelace-ui v0.6.x

[ticaki]

Zu der Doku da oben - da ist ein gravierender Fehler drin gewesen:

2. Local Scripts aktualisieren: Nach Änderungen im Global Script müssen die Local Scripts neu ausgeführt werden

[TT-Tom]

@sufra
@ticaki

Wie kann ich mrIcon2ScreensaverEntity ausblenden?

einfach auf null setzen

mrIcon1ScreensaverEntity: null,
mrIcon2ScreensaverEntity: null

[SuFra]

@tt-tom Perfekt, funktioniert
Könnte man noch ins Wiki aufnehmen.

[TT-Tom]

@sufra

jo mach ich

[ticaki]

Im aktuellen Github Repo ist eine nette Spielerei im Admin hinzugekommen (da könnte auch noch mehr kommen mal sehen)

Auf der Seite geht Windows (strg-f) Mac (cmd-f) und dann sieht das so aus:

und wenn man auf ein Icon klick passiert was im tooltip angedroht.

Ich find das cool

[ticaki]

Und gleich auch noch eine weitere - aber das ist nur "weil ich es jetzt kann" wie nützlich das ist wird sich zeigen:

Muss Expert für an sein, das funktioniert zwar - aber ist halt irgendwie nicht so super nützlich und schon garnicht für Einsteiger/Umsteiger

[ilovegym]

@ticaki

du machst mich fertich.. soviele neue gute Funktionen..

Mit den Icons super hilfreich, und der Flow - und wenns nur zum sehen ist, wie das aufgebaut ist, ist doch super.

[ticaki]

Und noch ne Kleinigkeit in der PagePower Config:

[ticaki]

Hier noch ne Doku zu einem neuen ScreensaverNotify-Feature

https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/blob/main/doc/de/screensaver.md#isdismissibleperevent

Kurz zusammengefasst:

1. Benachrichtung erscheint du klickst drauf und sie ist weg - bis der state das nächste mal wieder true wird
2. Benachrichtung erscheint du klickst drauf und sie überall im Haus weg - bis der state das nächste mal wieder true wird

[ticaki]

Ab sofort gibt es regelmässige Release und damit entfällt die Githubinstallation (geht zwar noch immer, aber wir können dann auch mal ne kaputte version online haben, ohne gleich in Stress auszubrechen )

Installation daher am besten über benutzerdefiniert und dort:

iobroker.nspanel-lovelace-ui@latest

eintragen - dann wird das paket von npm genommen und die installation geht sehr zügig

0.6.0 (2025-10-09)

• (tt-tom17) Color theme keys documented (doc/de/colorTheme.md, English version doc/en/colorTheme.md)
• (ticaki) Admin: Added Unlock/Alarm editor to admin UI (headline, PIN, buttons, setNavi, duplicate-name check) - first admin only config for a page
• (ticaki) Admin: Added navigation flow editor to admin UI (expert mode must be enabled)
• (tt-tom17) Chart scale: rounded to nearest tens
• (tt-tom17) PagePower: improved icon selection in admin
• (ticaki) German documentation for screensaver notification features isDismissiblePerEvent and dismissibleIDGlobal added to doc/de/screensaver.md

Doku zu PageUnlock wird demnächst geschrieben - noch ist da ein Platzhalterlink im Admin

[ilovegym]

@TT-Tom

wie binde ich denn den Abfallkalender vom Script ein?
Das hier zeigt die Tonnen an, aber alle in einer Farbe (rot), anstatt blau,gelb, gruen, weiss..

const abfallk: ScriptConfig.PageEntities = {
        type: 'cardEntities',
        uniqueName: 'abfall',
        heading: 'Abfallkalender',
        useColor: true,
        items: [
        { id: 'alias.0.Haus.Abfall.event1',icon: 'trash-can'},
        { id: 'alias.0.Haus.Abfall.event2',icon: 'trash-can'},
        { id: 'alias.0.Haus.Abfall.event3',icon: 'trash-can'},
        { id: 'alias.0.Haus.Abfall.event4',icon: 'trash-can'}
    ]
}; 

[teletapi]

@ilovegym
Sieht bei mir so aus: Dann passen auch wieder die farben.

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



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

[TT-Tom]

@ilovegym

für den Abfallkalender gibt es ein Template, wenn die die standard 0_userdata states hast, sollte das Template funktionieren.

    const abfallseite: any = {
        heading: 'Müllkalender',
        native: {
            card: 'cardEntities', //bleibt so
            dpInit: '0_userdata.0.Abfallkalender', // der Pfad bis zur "1" ggf. anpassen
            uniqueID: 'abfallseite', 
            template: 'entities.waste-calendar', // bleibt so
        },
    }

[ilovegym]

@teletapi

Super, danke, das funktioniert!

[ilovegym]

@tt-tom

Das funktioniert aber wie bei mir vorher alle Tonnen in rot, was nüscht nutzt..
Das von @teletapi geht da sind die Tonnen Icon in Farbe

[ticaki]

0.6.2 (2025-10-10)

• (ticaki) PageUnlock: Config updated — fixed issue where some settings were not applied correctly.
• (ticaki) IconSelect showed a too short list. Fixed.
• (ticaki) Admin: Added responsive layout for Admin PageUnlock (mobile devices)

iobroker.nspanel-lovelace-ui@latest

[TT-Tom]

@ilovegym

das von @teletapi ist doch das selbe wie meins, nur das er eine subpage erstellt hat.

[ilovegym]

@tt-tom sagte in Betatest NSPanel-lovelace-ui v0.6.x:

@ilovegym

das von @teletapi ist doch das selbe wie meins, nur das er eine subpage erstellt hat.

ja, aber ... dann ist da irgendwo nochn Kaefer drin, wenns nur mit Subpage geht und ohne nicht..

[TT-Tom]

@ilovegym
Kannst du mal deine komplette Seitenkonfig(alle) posten. Muss das mal bei mir testen, was da die Farben überschreibt.

[ilovegym]

@tt-tom

klar, ist nicht viel drin, da ich jetzt erst anfange, Menus zu erstellen, die Hauptfunktionen liegen auf den Buttons unter den Displays, die Menues sind nur nice-to-have (ausser Alarm und bei einigen eine Seite fuer die Schloesser).
Adapter Version 0.6.2+2715b8f und Script Version 13.3

Spoiler

async function configuration (): Promise<void> {

   const overrideConfig: Partial<ScriptConfig.Config> = {
       
       weatherEntity: 'brightsky.0.',
       defaultOffColor: Off,
       defaultOnColor: On,

       
       "weatherAddDefaultItems": true

   }

   
   const Hauptseite: ScriptConfig.PageGrid = {
       type: 'cardGrid',
       uniqueName: 'main',
       heading: 'Bueros',
       items: []
   };
       const powerGrid: ScriptConfig.PagePower = {
       uniqueName: 'powereg', // muss mit dem Namen im Admin übereinstimmen
       type: 'cardPower'
   };
   const abfall: any = {
       heading: 'Abfallkalender',
       prev: 'main',
     home: 'main',
      subPage: true,
      native: {
         card: 'cardEntities',
        dpInit: '0_userdata.0.vis.Abfallkalender',
          uniqueID: 'abfall',
          template: 'entities.waste-calendar',
       },
   };
   

   

   const config: ScriptConfig.Config = {
       panelTopic: 'NSPanel2',
       weatherEntity: 'brightsky.0.',
       defaultOffColor: Off,
       defaultOnColor: On,
       defaultBackgroundColor: HMIDark,
       weatherAddDefaultItems: true,

      
       pages: [
           Hauptseite,
           powerGrid,
           abfall,
           //irgendeinName,
           //grid1,
           //qrCode,
           //chartHeizung,
       ],
       // Unterseiten / Subpages
       subPages: [
           //fahrplan
       ],

       /***********************************************************************
        **                                                                   **
        **                    Screensaver Configuration                      **
        **                                                                   **
        ***********************************************************************/


       favoritScreensaverEntity: [
           {
               type: 'template',
               template: 'text.brightsky.favorit',
               dpInit: `/^brightsky\\.0\\.current\\./`,
               modeScr: 'favorit',
           }
       ],
       alternateScreensaverEntity: [
           // only used with alternate Screensaver
       ],

       indicatorScreensaverEntity: [
           // indicatorScreensaverEntity 1 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.NSPanel.allgemein.Status_offene_Fenster.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'window-open-variant',
               ScreensaverEntityIconOff: 'window-closed-variant',
               ScreensaverEntityText: 'Fenster',
               ScreensaverEntityUnitText: '%',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 1},
           },
           // indicatorScreensaverEntity 2 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.NSPanel.allgemein.Status_offene_Tuer.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'door-open',
               ScreensaverEntityIconOff: 'door-closed',
               ScreensaverEntityText: 'Tür',
               ScreensaverEntityUnitText: '',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 1},
           },
           // indicatorScreensaverEntity 3 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.NSPanel.allgemein.Status_Licht_An.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'lightbulb',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Licht',
               ScreensaverEntityUnitText: '',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 1},
           },
           // indicatorScreensaverEntity 4 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.Türschloss.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'lock',
               ScreensaverEntityIconOff: 'lock-open',
               ScreensaverEntityText: 'Türschloss',
               ScreensaverEntityUnitText: '',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 1, val_best: 1},
           },
           // indicatorScreensaverEntity 5 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.NSPanel.allgemein.Auto.Safety.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'car-key',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Auto',
               ScreensaverEntityUnitText: '',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 1, val_best: 1},
           },
       ],

       bottomScreensaverEntity: [
           // bottomScreensaverEntity 1
           {
               type: 'template',
               template: 'text.brightsky.sunriseset',
               dpInit: `/^brightsky\\.0\\.daily\\.00.+/`,
               modeScr: 'bottom',
           },
           // bottomScreensaverEntity 2
           /*{
               type: 'template',
               template: 'text.hmip.windcombo',
               dpInit: 'hmip.0.devices.3014G71HA0001XXXXXXXXXX',
               modeScr: 'bottom',
               //readOptions: {directionOfPanel: 81}
           },*/
           {
               type: 'script',
               ScreensaverEntity: 'brightsky.0.current.wind_speed_10'/*Wind Speed 10 min*/,
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 1,
               ScreensaverEntityIconOn: 'weather-windy',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: "Wind",
               ScreensaverEntityUnitText: 'm/s',
               ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 120}
           },
           // bottomScreensaverEntity 3
           {
               type: 'script',
               ScreensaverEntity: 'brightsky.0.current.wind_gust_speed_10'/*Wind Gust Speed 10 min*/,
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 1,
               ScreensaverEntityIconOn: 'weather-tornado',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Böen',
               ScreensaverEntityUnitText: 'm/s',
               ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 120}
           },
           // bottomScreensaverEntity 4
           {
               type: 'template',
               template: 'text.brightsky.winddirection',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           },
           // bottomScreensaverEntity 5 (Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'brightsky.0.current.relative_humidity'/*Relative Humidity*/,
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityIconOn: 'water-percent',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Feuchte',
               ScreensaverEntityUnitText: '%',
               ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 60}
           },
           // bottomScreensaverEntity 6 (for Advanced Screensaver)
           {
               type: 'template',
               template: 'text.brightsky.uvindex',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           }
           // Examples for Advanced-Screensaver: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#entity-status-icons-ab-v400 

           // Some templates for the screensaver uncomment the lines to use them
           // If u use an other instance for the weather data, change the instance in the following lines
           // If you want to have them all, set weatherAddDefaultItems=true in the config and leave the following lines as they are!

           // zum nutzen der Vorlagen für den Bildschirmschoner die Zeilen auskommentieren, um sie zu verwenden
           // Wenn du eine andere Instanz für die Wetterdaten verwendest, ändere die Instanz in den folgenden Zeilen
           // Wenn du sie alle haben willst, setze weatherAddDefaultItems=true in der Konfiguration ganz oben und lass die folgenden Zeilen so wie sie sind!

           /*

           

            Bright Sky*/,
           {
               type: 'template',
               template: 'text.brightsky.sunriseset',
               dpInit: `/^brightsky\\.0\\.daily\\.00.+/`,
               modeScr: 'bottom',
           },
            //Bottom 2 - brightsky.0. Forecast Day 1
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.01/`,
               modeScr: 'bottom',
           },

           // Bottom 3 - brightsky.0. Forecast Day 2
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.02/`,
               modeScr: 'bottom',
           },

           //Bottom 4 - brightsky.0. Forecast Day 3
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.03/`,
               modeScr: 'bottom',
           },

           // Bottom 5 - brightsky.0. Forecast Day 4
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.04/`,
               modeScr: 'bottom',
           },
           // Bottom 6 - brightsky.0. Forecast Day 5
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.05/`,
               modeScr: 'bottom',
           },
           // Bottom 7 - brightsky.0. Forecast Day 6
           {
               type: 'template',
               template: 'text.brightsky.bot2values',
               dpInit: `/^brightsky\\.0\\.daily\\.06/`,
               modeScr: 'bottom',
           },
           // Bottom 8 - Windgeschwindigkeit
           {
               type: 'template',
               template: 'text.brightsky.windspeed',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           },
           // Bottom 9 - Boen
           {
               type: 'template',
               template: 'text.brightsky.windgust',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           },

           // Bottom 10 - Windrichtung
           {
               type: 'template',
               template: 'text.brightsky.winddirection',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           },
           // Bottom 10 - Solar
           {
               type: 'template',
               template: 'text.brightsky.solar',
               dpInit: `/^brightsky\\.0\\.current./`,
               modeScr: 'bottom',
           },
           
       ],

       leftScreensaverEntity: [
           // leftScreensaverEntity 1 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.NSPanel.Flur.Sensor.ANALOG.Temperature.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 1,
               ScreensaverEntityIconOn: 'thermometer',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Temperatur',
               ScreensaverEntityUnitText: '°C',
               ScreensaverEntityIconColor: {val_min: 0, val_max: 35, val_best: 22},
           },
           // leftScreensaverEntity 2 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.Heizung.WärmeTagesVerbrauch.ACTUAL',
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 1,
               ScreensaverEntityIconOn: 'counter',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Wärme',
               ScreensaverEntityUnitText: ' kWh',
               ScreensaverEntityIconColor: MSYellow, //{'val_min': 0, 'val_max': 5000}
           },
           // leftScreensaverEntity 3 (only Advanced Screensaver)
           {
               type: 'script',
               ScreensaverEntity: 'alias.0.Haus.Abfall.event1.INFO'/*Info*/,
               ScreensaverEntityFactor: 1,
               ScreensaverEntityDecimalPlaces: 0,
               ScreensaverEntityDateFormat: {year: 'numeric', month: '2-digit', day: '2-digit'},
               ScreensaverEntityIconOn: 'trash-can',
               ScreensaverEntityIconOff: null,
               ScreensaverEntityText: 'Abfall',
               ScreensaverEntityUnitText: '',
               ScreensaverEntityIconColor: '0_userdata.0.vis.Abfallkalender.1.color',
           },
       ],

       // Status Icon 
       mrIcon1ScreensaverEntity: {
           type: 'script',
           ScreensaverEntity: 'Relay.1',
           ScreensaverEntityIconOn: 'lightbulb',
           ScreensaverEntityIconOff: null,
           ScreensaverEntityValue: null,
           ScreensaverEntityValueDecimalPlace: 0,
           ScreensaverEntityValueUnit: null,
           ScreensaverEntityOnColor: On,
           ScreensaverEntityOffColor: HMIOff
       },
       mrIcon2ScreensaverEntity: {
           type: 'script',
           ScreensaverEntity: 'Relay.2',
           ScreensaverEntityIconOn: 'lightbulb',
           ScreensaverEntityIconOff: null,
           ScreensaverEntityValue: null,
           ScreensaverEntityValueDecimalPlace: 0,
           ScreensaverEntityValueUnit: null,
           ScreensaverEntityOnColor: On,
           ScreensaverEntityOffColor: HMIOff
       },
       // ------ DE: Ende der Screensaver Einstellungen --------------------
       // ------ EN: End of screensaver settings ---------------------------

       //-------DE: Anfang Einstellungen für Hardware Button, wenn Sie softwareseitig genutzt werden (Rule2) -------------
       //-------EN: Start Settings for Hardware Button, if used in software (Rule2) --------------------------------------
       // DE: Konfiguration des linken Schalters des NSPanels
       // EN: Configuration of the left switch of the NSPanel
       buttonLeft: {
           // DE: Mögliche Werte wenn Rule2 definiert: 'page', 'switch', 'set' - Wenn nicht definiert --> mode: null
           // EN: Possible values if Rule2 defined: 'page', 'switch', 'set' - If not defined --> mode: null
           mode: 'switch',
           // DE: Zielpage - Verwendet wenn mode = page
           // EN: Target page - Used if mode = page
          state: '0_userdata.0.Schalter.AstronautOGB',
       },

       // DE: Konfiguration des rechten Schalters des NSPanels
       // EN: Configuration of the right switch of the NSPanel
       buttonRight: {
           mode: 'switch',
           state:'0_userdata.0.Schalter.Essenfertig'/*Essenfertig*/,
           
       },

       //--------- DE: Ende - Einstellungen für Hardware Button, wenn Sie softwareseitig genutzt werden (Rule2) -------------
       //--------- EN: End - settings for hardware button if they are used in software (Rule2) ------------------------------