Betatest NSPanel-lovelace-ui v0.7.x

ticaki

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

Bildschirmfoto 2025-10-08 um 15.44.38.png

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:

Bildschirmfoto 2025-10-08 um 19.50.21.png

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:

Benachrichtung erscheint du klickst drauf und sie ist weg - bis der state das nächste mal wieder true wird
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
        },
    }

Bildschirmfoto 2025-10-10 um 16.57.02.png

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

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

TT-Tom

@ilovegym

zeige mir mal die Ordnerstrucktur von '0_userdata.0.vis.Abfallkalender'

ilovegym

@tt-tom

Screenshot 2025-10-13 at 07.42.08.png

ticaki

Achtung! - BREAKING change in der Tasmota Firmware

Tasmota 15.1.0 hat ungenannte Änderungen, die das flashen der TFT Firmware unmöglich machen

nicht updaten auf die neuste Tasmota Version

Wir sind dran.

ilovegym

@ticaki

feature-request: halte die Update-Meldung im Adapter zurueck, bis es getestet wurde.. hab heute morgen schon eins gemacht..

Armilar

@ilovegym

Sind 2 Dinge die aktuell bei der Tasmota 15.1.0 zur Spaßbremse werden:

FlashNextion kommt mit Fehler zurück oder zeigt falsches Model. Zumindest führt kein Flash mehr zum Erfolg!
Nur die tasmota (release-nspanel) nutzt aktuell den PSRAM (4MB) vom ESP32

NEWS