Betatest NSPanel-lovelace-ui v0.2.x

[ticaki]

@asgothian

Wann gerade? @Armilar hatte ein Problem mit seinem Provider mein Update um 17:30 ging. Der File liegt auf einem Server von @Armilar. Die Versionnummer kommt vom github repo.

FlashNextionAdv0 http://nspanel.de/nspanel-${model}v${version}.tft

https://raw.githubusercontent.com/ticaki/ioBroker.nspanel-lovelace-ui/main/json/version.json

"tft-beta": "4.9.6",

heißt

FlashNextionAdv0 http://nspanel.de/nspanel-v4.9.6.tft

Das kannst du so in die Console vom Tasmota schreiben/kopieren.

[Asgothian]

@ticaki Ich glaub ich hab schlecht gefragt:

@asgothian sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Ich hab da gerade versucht ein Firmware-Update zu machen - woher wird die Firmware-URL genommen ? Ich kriege als Ergebnis 'update failed' - was auch logisch ist, da die Update URL ins leere geht.

Damit war das Tasmota-Update gemeint - das versucht eine version zu installieren die es nicht gibt.

@asgothian sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Zusätzlich hab ich keine Angabe zur TFT Version (???). Ist das Work in Progress oder ein mögliches Problem ?

Hier bin ich eher vorsichtig - ich hab za. 4 Stunden gebraucht bis ich die TFT Firmware sauber geflasht hatte - mit häufigen Fehlermeldungen und seltsamen Effekten. Warum es am ende funktioniert hat weis sich nicht - deswegen die Frage nach der unbekannten TFT version.

@ticaki sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Wann gerade?

Das war so gegen 16:30.

A.

[ticaki]

@asgothian

Wenn der Serverprobleme hat, was jetzt das erstmal war das ich es mit bekommen habe ist das natürlich doof - ich flash die firmware ein paar mal die woche und das geht i.d.R. ohne probleme.

[ticaki]

Hab mal all die Änderungen mit einer v0.3.0 gewürdigt

Noch nicht genannte Verbesserung

• Code in manchen Funktionen neu geschrieben - kommt mir jetzt flüssig vor

Bitte oben im Forum schauen was sich sonst so alles geändert und verbessert hat.

EDIT

• Alexa fertig drin - nach dem release von 0.3.0
  • Icons unten umsortiert und repeat hinzugefügt, da ist aber noch ein Bug im alexa2

EDIT2
mediaPlayer unterstützt auch nutzer erstellte Icons, wie bei den anderen cards hinzufügen im Skript.

[TT-Tom]

Update Wiki

die PageThermo2 ist jetzt im Wiki hinterlegt. bitte lesen und Feedback geben.
es wird noch ein Bild eingestellt, wo die Felder/Items auf der Page zu finden sind. muss aber erstmal die Buntstifte finden

[ticaki]

Zwischenstand

TFT: Version 5.0.0

• verschiede Anzeigeprobleme behoben
• popupSlider hinzugefügt
• rest wird @Armilar hinzufügen müssen

Adapter

• Farbthemen hingefügt - werden immer weiter auf die Items verteilt - findet man im Admin 2. Seite unter der Tabelle
• Scrollarten auswählbar gemacht im Skript scrollPresentation: 'classic' das ist default, das scrollen greift auf die Navigationsicons zu. scrollPresentation: 'arrow' das fügt ein pageitem mit der Pfeiloptik hinzu und man kann im Kreis blättern. Ist eine Eigenschaft von Page.
• spotify wird jetzt unterstützt. incl. Playlist, Speakerlist, Tracklist, repeat, shuffle
• alexa bugfix
• allgemeine Fehler behoben

so sieht ein Alexa Mediaplayer aus:

const alexa: PageType ={
        type: 'cardMedia',
        heading: 'Alexa Wohnzimmer',
        alwaysOnDisplay: true,
        media: {
            id: 'alexa2.0.Echo-Devices.G0922J0633450KSK',
            speakerList:[],// leer heißt alle, sobald etwas drin steht, wird nur das angezeigt
            playList:['Apple-Music-Playlist.Rock'] // das vor dem . ist das Datenpunkt ende und das nach dem . was reingeschrieben werden soll
        },
        uniqueName:'alexa',
        parent:'main',
        items:[],
        scrollPresentation: 'classic'
    };

Für spotify bei der id spotify-premium.0 oder so ähnlich eintragen. Bei Spotify ist playlist wie speakerlist - leer heißt alles, was drin -> nur das

[ticaki]

Benutzt jemand der Tester den MPD Adapter wenn ja bitte das hier mal testen und ne kurze rückmeldung obs mit dem Adapter funktioniert.

https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/tree/copilot/fix-238

[ticaki]

Hab gerade gesehen das ich das Script vor 4 Tagen kaputt gemacht habe - ist jetzt wieder ganz - falls jemand neu installiert/neu aufgesetzt hat wird das für Fehler gesorgt haben

Ansonsten gibt das hier neu:

• (ticaki) Media logo field now supports Alexa play/pause toggle and Spotify seek position popup
• (ticaki) Added new channel role "media" with status display and pageMedia fallback; for this role only, added asControl as PageItem property
• (ticaki) Fixed state evaluation: getState() === null no longer interpreted as missing state; boolean states now return false instead of null if the state exists but has no value.
• (copilot) Added support for ioBroker MPD-Adapter in cardMedia - play/pause/stop, volume, title/artist/album, shuffle, repeat controls

Nur angemerkt - hat der copilot nur zu 70% gelöst - rest mußten @Armilar und ich beheben - aber will mal nicht so sein, bot soll auch was haben.

[teletapi]

@ticaki
Ich bin gerade die Page Thermo2 am testen wie bekommt ihr das Batterie symbol da rein ich nutze Hmip Thermostate von Homematic wenn ich den Alias erstelle und Low Bat als datenpunkt erzeuge kommt ein kleines thermostat als Icon.

     const Alle_Heizkoerper: ScriptConfig.PageGrid2 = {    
        type: 'cardGrid2',
        uniqueName: 'Alle_Heizkoerper',
        heading: 'Alle_Heizkoerper',
        useColor: true,
        items: [
        { navigate: true, id: 'alias.0.Heizungsthermostate.Buero', targetPage: 'Buero_Heizung', name: 'Buero'},
        { navigate: true, id: 'alias.0.Heizungsthermostate.Bad_unten', targetPage: 'Bad_Heizung', name: 'Bad unten'},
        { navigate: true, id: 'alias.0.Heizungsthermostate.Wohnzimmer', targetPage: 'Wohnzimmer_Heizung', name: 'Wohnen'},
        { navigate: true, id: 'alias.0.Heizungsthermostate.Schlafzimmer', targetPage: 'Schlafzimmer_Heizung', name: 'Schlafen'},
        { navigate: true, id: 'alias.0.Heizungsthermostate.Kueche', targetPage: 'Kueche_Heizung', name: 'Kueche'},
        { navigate: true, id: 'alias.0.Heizungsthermostate.Gaeste_WC', targetPage: 'Gaeste_WC_Heizung', name: 'Gaeste WC'},
    ],
};

const Heizthermostat_Buero: PageType = {
        type: 'cardThermo2',
        uniqueName:'Buero_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Buero_Heizung', 
            id:'alias.0.Heizungsthermostate.Buero', 
            modeId:'alias.0.Heizungsthermostate.Buero.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Buero.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Buero.SET', 
            thermoId2:'alias.0.Heizungsthermostate.Buero.HUMIDITY'
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0}
        ],
};

const Heizthermostat_Gaeste_WC: PageType = {
        type: 'cardThermo2',
        uniqueName:'Gaeste_WC_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Gaeste_WC_Heizung', 
            id:'alias.0.Heizungsthermostate.Gaeste_WC', 
            modeId:'alias.0.Heizungsthermostate.Gaeste_WC.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Gaeste_WC.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Gaeste_WC.SET',
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0},
            {id: 'alias.0.Fensterkontakte.Gaeste_WC', filter: 0}
        ],
};

const Heizthermostat_Bad: PageType = {
        type: 'cardThermo2',
        uniqueName:'Bad_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Bad_Heizung', 
            id:'alias.0.Heizungsthermostate.Bad_unten',
            modeId:'alias.0.Heizungsthermostate.Bad_unten.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Bad_unten.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Bad_unten.SET', 
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0},
            {id: 'alias.0.Fensterkontakte.Bad_unten_Rechts', filter: 0},
            {id: 'alias.0.Fensterkontakte.Bad_unten_links', filter: 0},
            {id: 'alias.0.Heizungsthermostate.Bad_unten' , filter: 0}
        ],
};

const Heizthermostat_Wohnen: PageType = {
        type: 'cardThermo2',
        uniqueName:'Wohnzimmer_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Wohnzimmer_Heizung', 
            id:'alias.0.Heizungsthermostate.Wohnzimmer', 
            modeId:'alias.0.Heizungsthermostate.Wohnzimmer.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Wohnzimmer.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Wohnzimmer.SET', 
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0},
            {id: 'alias.0.Fensterkontakte.Wohnzimmer_rechts', filter: 0},
            {id: 'alias.0.Fensterkontakte.Wohnzimmer_links', filter: 0}
        ],
};

const Heizthermostat_Schlafzimmer: PageType = {
        type: 'cardThermo2',
        uniqueName:'Schlafzimmer_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Schlafzimmer_Heizung', 
            id:'alias.0.Heizungsthermostate.Schlafzimmer', 
            modeId:'alias.0.Heizungsthermostate.Schlafzimmer.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Schlafzimmer.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Schlafzimmer.SET', 
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0},
            {id: 'alias.0.Fensterkontakte.Schlafzimmer_rechts', filter: 0},
            {id: 'alias.0.Fensterkontakte.Schlafzimmer_links', filter: 0}
        ],
};

const Heizthermostat_Kueche: PageType = {
        type: 'cardThermo2',
        uniqueName:'Kueche_Heizung',
        heading: 'egal wird eh nicht angezeigt',
        subPage: true,
        home: 'Alle_Heizkoerper',
        thermoItems:[
            {name: 'Kueche_Heizung', 
            id:'alias.0.Heizungsthermostate.Kueche',
            modeId:'alias.0.Heizungsthermostate.Kueche.MODE',
            iconHeatCycle:'home', 
            iconHeatCycleOffColor:Red, 
            thermoId1:'alias.0.Heizungsthermostate.Kueche.ACTUAL', 
            set:'alias.0.Heizungsthermostate.Kueche.SET', 
            }
        ],

        items:[
            {id: 'alias.0.Steckdosen.Steckdose_ueber_Schreibtisch', filter: 0},
            {id: 'alias.0.Flur.Treppenlicht', filter: 0},
            {id: 'alias.0.Fensterkontakte.Küche_rechts', filter: 0},
            {id: 'alias.0.Fensterkontakte.Kueche_links', filter: 0}
        ],
};

Der Datenpunkt kann natürlich keine % angaben, es gibt aber auch keinen weiteren Datenpunkt ausser Low Bat Alarm

[ticaki]

@teletapi

mit einer Vorlage - ich muß laufend gucken wie das nochmal geht - ich bau ja nur ein - Aber das hab ich für eine Uhr anzuzeigen eingebaut.

Das Pageitems muß in das Array das zu items: gehört

{native: {template: 'text.clock',dpInit: '',},}, // Digitale Uhr, für das hab ich die Möglichkeit eingebaut

So zu deinem: Das sollte ein State mit der Role - indicator.lowbat sein. In dpInit muß dann z.B. das stehen: hm-rpc.1.0000DYXSDSDEF71111B7.0.LOW_BAT. kannst auch nur das Gerät angeben, wichtig ist das es die role nur einmal in den States unterhalb der id gibt.

{native: {template: 'text.battery.low',dpInit: '',},},

Das ist bewusst für Batterien von hm-rpc.

Gibt dann noch die:

Sind alle mal getestet gewesen aber keine ahnung

EDIT:
Wichtig
Vorlagen unterstützen vielleicht navigate und targetpage - bin mir da nicht sicher - mehr anpassen bedeutet selber bauen.

EDIT: Nachgeguckt - alle Vorlagen unterstützen navigate & targetpage - sonst nix wobei kann sein das die dafür den falschen Type haben - dann hinter dpinit:'', type:'button' schreiben, hoffen und berichten

{navigate: true, targetpage:'blabla', native: {template: 'text.battery.low',dpInit: '', type: 'button'},},

[arteck]

@asgothian sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Hier bin ich eher vorsichtig - ich hab za. 4 Stunden gebraucht bis ich die TFT Firmware sauber geflasht hatte - mit häufigen Fehlermeldungen und seltsamen Effekten. Warum es am ende funktioniert hat weis sich nicht - deswegen die Frage nach der unbekannten TFT version.

Axel, und ich dachte bin da alleine mit...

[teletapi]

@ticaki Tut mir ja leid das ich das sagen muss aber hab nix kapiert davon . Hab verschiedenes probiert aber bisher keinerlei Erfolg gehabt.
Den vorhandenen Datenpunkt "Lowbat" hab ich auf die Role indicator.lowbat geändert . Aber vielmehr geht dann nicht.

[ilovegym]

@arteck sagte in Betatest NSPanel-lovelace-ui v0.2.x:

@asgothian sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Hier bin ich eher vorsichtig - ich hab za. 4 Stunden gebraucht bis ich die TFT Firmware sauber geflasht hatte - mit häufigen Fehlermeldungen und seltsamen Effekten. Warum es am ende funktioniert hat weis sich nicht - deswegen die Frage nach der unbekannten TFT version.

Axel, und ich dachte bin da alleine mit...

Willkommen im Club
was soll ich mit meinen 13 Stueck da sagen.. das komische ist, bei manchen lief das in Nullkommanix durch, da dachte ich, er haette garnicht angefangen, dabei war er schon fertig, und andere haben mich viel Snickers gekostet..

Die Dinger sind jetzt wieder gesperrt und mit Tasmota 15.01 und TFT 5 am nspanel-Adapter soweit so gut, die Grundfunktionen laufen ohne Probleme, habe aber noch nicht viel Menus, meist nur eins, muss bei Gelegenheit dann alles weitere migrieren vom Script..

[ticaki]

@teletapi
Da sollte aber ne Fehlermeldung im Skript gewesen sein - hab was falsch geprüft - bzw. KI hat mir ne überprüfungsroutine geschrieben die gleichlautend mit einer anderne war und wie es dann so geht. Behebe das.

[ticaki]

@teletapi

Ist gefixt - habs auf einer cardGrid getestet

so benutzen:

    const subgrid1: PageType = {
        uniqueName: 'media2', 
        heading: 'Grid 1',
        items: [
            {native: {template: 'text.battery.low',dpInit: '0_userdata.0',},},
            {id: 'alias.0.Licht.lights.Gerät_1'},
            {id: 'alias.0.Licht.lights.Gerät_2'},
            {id: '0_userdata.0.Einzelne_Geräte.dimmer'},
            {id: 'alias.0.NSPanel.allgemein.hue', },
            {navigate: true, targetPage: 'fahrplanrouten'},
            {id: 'alias.0.NSPanel.allgemein.shutter'},
            {id: '0_userdata.0.Einzelne_Geräte.volume', name: 'Volume', onColor: HMIOn, offColor: HMIOff, minValue: 0, maxValue: 100, navigate: true, targetPage:'hidden'}

        ],
        type: 'cardGrid',
        home:'hidden',
        parent: 'cardGrid1',
        hiddenByTrigger: false,
    }

Wichtig geht nicht auf einer cardMedia - da gehen keine Templates, da die cardMedia die Menge an Datenpunkte auf die begrenzt, die unterhalb des Mediadevices liegen. Das gilt aber nur für templates - normale Sachen gehen da.

EDIT: grubbel und ich habs 30 Minuten auf der cardMedia probiert und den fehler nicht gefunden

EDIT2:
Wenn ich dir eine role sage - dann mußt die genauso in der role stehen

EDIT3:
Und frage einfach, wenn ich etwas unverständlich erklärt habe - ich stecke da einfach zu tief drin um es zu bemerken.

[ticaki]

@ilovegym
@arteck

Hab schon länger keines mehr neu eingerichtet - aber seit Berry 10 kommt es bei mir kaum noch vor das ich Probleme habe.

[ticaki]

Nach längerer Diskussion mit skynet kam das hier bei raus - recht bunt find ich.

Mediaplayer (cardMedia)

Stand: 11.06.2025
Unterstützte Adapter: spotify-premium, alexa2, mpd, sonos

Die Karte cardMedia zeigt einen Mediaplayer mit Titel/Artist, Play/Pause, Lautstärke u.v.m. an. Je nach Adapter werden unterschiedliche Funktionen automatisch erkannt (z. B. Playlisten, Shuffle, Seek).

---

Minimal-Setup

const pageMediaTest1: PageType = {
  type: 'cardMedia',
  heading: 'main',
  uniqueName: 'main',
  media: {
    id: 'sonos.0.root.192_168_178_209', // Dein Player
  },
  items: [],
};

media.id – Beispiele

• alexa2: alexa2.0.Echo-Devices.<DEINE_ID>
• spotify: spotify-premium.0
• mpd: mpd.0
• sonos: sonos.0.root.192_168_178_209

Hinweis: Gibst du nur den Adapternamen ohne Instanznummer an (z. B. spotify ), wird automatisch die kleinste vorhandene Instanz verwendet.

---

Eigene PageItems

items verhält sich wie bei cardGrid/cardEntities. Du kannst eigene PageItems hinzufügen. Adapter‑interne Templates sind auf cardMedia nicht anwendbar.

---

Wichtige media‑Optionen (Kurzüberblick)

Option	Bedeutung	Hinweise/Beispiele
id	Quelle/Player (Ordner/Device/Channel, kein State)	Siehe Beispiele oben
name	Anzeigename	Leer lassen → Name wird automatisch ermittelt
colorMediaIcon	Farbe für das Media‑Icon	Verwende Farbnamen (z. B. Blue, MSRed)
colorMediaArtist	Farbe für die Artist‑Zeile	s. Farbe
colorMediaTitle	Farbe für die Titel‑Zeile	s. Farbe
speakerList	Liste erlaubter/angezeigter Lautsprecher	Sonos/Spotify: Auswahl ohne Liste → keine Speaker. Andere: Whitelist (leer = alle)
favoriteList	Whitelist für Favoriten‑Playlists	Leer oder nicht gesetzt = zeige alle
playList	Liste verfügbarer Playlists	Alexa/Spotify: aus Adapter. Sonos: nutzergeneriert (Adapter kann sie nicht einlesen)
minValue	Minimale Lautstärke (Panel)	Mapping auf Geräte‑Skala
maxValue	Maximale Lautstärke (Panel)	Mapping auf Geräte‑Skala
itemsColorOn	On‑Farbe für einzelne Standard‑PageItems	pro Item überschreibbar (s. unten)
itemsColorOff	Off‑Farbe für einzelne Standard‑PageItems	s. unten
deactivateDefaultItems	Standard‑PageItems gezielt ausblenden	s. unten + Beispiel

Standard‑PageItems (für Farben/Deaktivieren)

• trackList, speakerList, repeat, equalizer, playList, online, reminder, clock, favoriteList, crossfade

Farben verwenden: An dieser Stelle bitte Farbnamen wie Blue, MSRed, HMIOn, HMIOff etc. benutzen – es ist auch möglich eigene zu verwenden {red:…, green:…, blue:…}‑JSON.
(Nur in Beispielen unten werden Farbnamen gezeigt – es gibt keine separate Farbtabelle in dieser Doku.)

---

Beispiele

1) Farben pro Item überschreiben

media: {
  id: 'spotify-premium.0',
  itemsColorOn: {
    playList: Blue,
    speakerList: MSRed,
  },
  itemsColorOff: {
    playList: Gray,
  },
}

2) Standard‑Items ausblenden

media: {
  id: 'alexa2.0.Echo-Devices.DEINE_ID',
  deactivateDefaultItems: {
    trackList: true,
    equalizer: true,
    crossfade: true,
  },
}

3) Whitelist für Favoriten / eigene Playlists

media: {
  id: 'sonos.0.root.192_168_178_209',
  favoriteList: ['Best of 90s', 'Morning Vibes'], // Whitelist – nur diese anzeigen
  playList: ['Living Room Mix', 'Party'],        // Sonos: nutzergeneriert
}

4) Lautstärke‑Range am Panel begrenzen

media: {
  id: 'mpd.0',
  minValue: 5,   // Panel lässt nicht unter 5
  maxValue: 80,  // und nicht über 80
}

---

Hinweise & Verhalten

• Der Adapter sammelt je nach Quelle automatisch passende States (Titel, Artist, isPlaying, Shuffle, Volume …) und erzeugt passende PageItems. Nicht jeder Adapter kann alles (z. B. Playlists).
• Seek/Repeat/Crossfade/Shuffle/Speaker: Wenn die Quelle es anbietet, werden die Controls eingeblendet.
• Logo‑Feld: Je nach Quelle kann das Logo z. B. Play/Pause toggeln oder ein Seek‑Popup öffnen.

---

Typescript Typen

// Nur als Referenz – die Erklärung steht oben.
// Farben bitte als Symbolnamen (z. B. Blue, MSRed) nutzen.

type RGB = { r: number; g: number; b: number };

type MediaOptions = {
  id: string;
  name?: string;
  colorMediaIcon?: RGB;
  colorMediaArtist?: RGB;
  colorMediaTitle?: RGB;
  speakerList?: string[];
  /** Whitelist von Favoriten; leer/fehlend → zeige alle */
  favoriteList?: string[];
  /** Playlisten: Alexa/Spotify aus Adapter; Sonos nutzergeneriert */
  playList?: string[];
  /** Lautstärke-Grenzen (Panel-Seite) */
  minValue?: number;
  maxValue?: number;

  /** On-/Off-Farben pro Default-Item */
  itemsColorOn?: Partial<Record<
    'trackList' | 'speakerList' | 'repeat' | 'equalizer' | 'playList' | 'online' | 'reminder' | 'crossfade' | 'favoriteList',
    RGB
  >>;
  itemsColorOff?: Partial<Record<
    'trackList' | 'speakerList' | 'repeat' | 'equalizer' | 'playList' | 'online' | 'reminder' | 'crossfade' | 'favoriteList',
    RGB
  >>;

  /** Default-Items ausblenden */
  deactivateDefaultItems?: Partial<Record<
    'trackList' | 'speakerList' | 'repeat' | 'equalizer' | 'playList' | 'online' | 'reminder' | 'clock' | 'favoriteList' | 'crossfade',
    boolean
  >>;
};

@TT-Tom @Armilar

[arteck]

@ticaki sagte in Betatest NSPanel-lovelace-ui v0.2.x:

Hab schon länger keines mehr neu eingerichtet - aber seit Berry 10 kommt es bei mir kaum noch vor das ich Probleme habe.

na ich guck mal

ahhh das sieht doch besser aus... ohne probleme geklappt..

saubere arbeit

[ticaki]

@TT-Tom @Armilar

Anleitung: Verwendung von Templates in NSPanel PageItems

Einleitung

Templates bieten eine einfache Möglichkeit, häufig verwendete Anzeige- und Steuerungselemente in PageItems zu integrieren.
Ein Template wird als Objekt im items-Array einer Seite eingebunden und stellt automatisch die passende Visualisierung und Logik bereit.

Verwendung

Ein Template wird über das Attribut native.template definiert.
Über dpInit wird die Datenpunkt-ID angegeben, an die das Template gebunden ist.

Beispiel für eine Uhr (digitale Anzeige):

{ native: { template: 'text.clock', dpInit: '' } },

Beispiel für Batterieanzeige (niedriger Batteriestand, mit indicator.lowbat-Role):

{ native: { template: 'text.battery.low', dpInit: 'hm-rpc.1.0000DYXSDSDEF71111B7.0.LOW_BAT' } },

Navigationserweiterung

Alle Templates unterstützen zusätzlich die Attribute navigate und targetpage. Damit kann beim Auslösen eine andere Seite geöffnet werden.
Falls notwendig, muss type: 'button' ergänzt werden.

{
  navigate: true,
  targetpage: 'zielseite',
  native: { template: 'text.battery.low', dpInit: '', type: 'button' },
},

Beispiele

Grid mit Template

Templates können in cardGrid-Seiten genutzt werden:

const subgrid1: PageType = {
  uniqueName: 'media2',
  heading: 'Grid 1',
  items: [
    { native: { template: 'text.battery.low', dpInit: '0_userdata.0' } },
  ],
  type: 'cardGrid',
  home: 'hidden',
  parent: 'cardGrid1',
  hiddenByTrigger: false,
};

Einschränkungen

• Templates stehen in cardMedia-Seiten nicht zur Verfügung.
  Benutzerdefinierte PageItems können jedoch weiterhin genutzt werden.
  Bei cardMedia ist der Suchpfad für Datenpunkte fest vorgegeben und nicht veränderbar.

• Bei Rollen muss die Schreibweise exakt stimmen (z. B. indicator.lowbat).

Verfügbare Templates

Die folgende Übersicht zeigt gängige Templates und ihre Einsatzbereiche:

Template	Beschreibung
text.clock	Digitale Uhr
text.battery.low	Batterieanzeige (niedrig)
text.battery	Batterieanzeige allgemein
text.window.isOpen	Fenster offen
text.window.isClose	Fenster geschlossen
text.temperature	Temperaturanzeige
text.door.isOpen	Tür offen
text.gate.isOpen	Tor offen
text.motion	Bewegungserkennung
text.info	Infotext
text.warning	Warnanzeige
text.wlan	WLAN-Status
text.shutter.navigation	Rollladensteuerung (Navigation)
text.lock	Schlosszustand
text.isOnline	Online-/Offline-Status

Zusätzlich existieren Templates für spezielle Anwendungsfälle (z. B. text.sainlogic.windarrow, text.custom.windarrow, text.hmip.windcombo).

Es gibt noch weitere Templates, die je nach Anwendungsfall genutzt werden können.
Die Benennung orientiert sich am vorgesehenen Einsatzgebiet (z. B. button, light, shutter).

Eine vollständige Übersicht kann bei Bedarf bereitgestellt werden.

Erweiterte Anpassungen (für Experten)

Templates können vollständig angepasst werden – etwa Farbe, Icon oder auch die zugehörigen Datenpunkte.
Dies sollte jedoch nur von erfahrenen Anwendern und nach Rücksprache erfolgen, da solche Änderungen leicht zu Fehlern führen können.

Ein Beispiel: Änderung der Farbe der Uhr (text.clock) :

// Beispiel 1: Feste Farbe (const)
native: {
    template: 'text.clock',
    dpInit: '',
    data: {
        icon: {
            true: {
                color: { type: 'const', constVal: Red },
            },
        },
    },
},

// Beispiel 2: Dynamische Farbe aus einem State (RGB JSON-String)
native: {
    template: 'text.battery.low',
    dpInit: 'hm-rpc.1.Battery-Device.0.LOW_BAT',
    data: {
        icon: {
            true: {
                color: { type: 'state', dp: '0_userdata.0.visuals.batteryColorRGB' },
            },
        },
    },
},

// Beispiel 3: Dynamische Farbe per Trigger (RGB JSON-String)
native: {
    template: 'text.battery.low',
    dpInit: 'hm-rpc.1.Battery-Device.0.LOW_BAT',
    data: {
        icon: {
            true: {
                color: { type: 'triggered', dp: '0_userdata.0.visuals.triggeredBatteryColor' },
            },
        },
    },
},

Wichtige Hinweise zum Schluss

1. Für den Block native existieren keine Typdefinitionen im Konfigurationsskript.
   Der Grund: Hier wird direkt die adapterinterne Konfiguration berührt, die aufwendig ist und sich teilweise noch ändern kann.

2. Alle beschriebenen Möglichkeiten funktionieren grundsätzlich.
   Es kann jedoch vorkommen, dass bestimmte Optionen noch nicht im Konfigurationsskript eingebaut sind.
   Das Hinzufügen ist meist in wenigen Minuten erledigt – bitte einfach Bescheid sagen, wenn etwas fehlt oder nicht wie erwartet funktioniert.

[ticaki]

Noch kurze dazu:
Ich hab die überwiegend für mich gemacht - und halt ein paar abwandlungen wie isOpen oder isClose - was hilft ein template für offene Fenster wenn es nur einen Datenpunkt gibt der true wird wenn es zu ist

Da kann man für shelly, zigbee, zigbee2mqtt usw. weitere templates hinzufügen, so das man nur noch das gerät angibt und dann wird daraus ne steckdose, ein rolladen, ne lampe usw ohne Aliase anlegen zu müssen.

Das mache ich aber nur auf Anfrage - keine Lust 100 Templates zu schreiben, die keiner braucht