Betatest NSPanel-lovelace-ui v0.2.x

[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. alexa2), 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/Play/Pause/Shuffle/Volume: 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