Betatest NSPanel-lovelace-ui v0.2.x

[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

[ticaki]

Wichtig

Gestern abend gab es für ein paar Stunden eine "kaputte" Version des Adapters auf Github -> Panel reagiert merkwürdig und zeigt nix oder nur teile an. Falls ihr also gestern abend installiert habt, noch mal neu installieren bitte.

[holgerwolf]

Wo kommt denn dieses "Schraubenschlüssel/Uhrzeit" Symbol zwischen Uhrzeit und Datum her?

[ticaki]

@holgerwolf
Ja da will ich jetzt schon seit 3 Tagen nachgucken und habs bis jetzt immer wieder vergessen - dann mache ich das mal Da sollte eigentlich nur ein Symbol erscheinen wenn man nicht up to date ist, mit dem tft.

[Armilar]

@holgerwolf

Immer dann wenn es etwas zum Aktualisieren gibt, erscheint das Symbol...

Kann im Adapter-Admin dann eine neue Scriptversion oder ein TFT Update, etc. sein

[ticaki]

@holgerwolf
Deine Frage hat Armilar beantwortet - jedoch gibt es in dem Bezug auch einen Fehler durch Multitasking den ich hoffe ich jetzt behoben habe.

EDIT - jetzt hab ich ihn gefunden und behoben

[ticaki]

Benutzt eigentlich schon jemand den Adapter zur Mediensteuerung?

[holgerwolf]

Ich habe jetzt meine Panels auch vom Script auf den Adpater umgestellt. Durch den Wechsel von accuweather zu pirate Weather machte das Sinn.
Ging eigentlich recht schnell und problemlos nur bei den Icons Farben passt was nicht. Ich habe die entities aus dem Script übernommen, aber die Farbwerte werden nicht angepasst:

{
                type: 'script',
                ScreensaverEntity: 'pirate-weather.0.weather.daily.00.precipProbability',
                ScreensaverEntityFactor: 1,                                 //New
                ScreensaverEntityDecimalPlaces: 0,                          //New 
                ScreensaverEntityIconOn: 'weather-pouring', 
                ScreensaverEntityText: 'Regen', 
                ScreensaverEntityUnitText: '%', 
                ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100} 
            },
            // bottomScreensaverEntity 2
            
            {
                type: 'script',
                ScreensaverEntity: 'mqtt.0.openWB.LegacySmartHome.Devices.4.TemperatureSensor2',
                ScreensaverEntityFactor: 1,                                 //New
                ScreensaverEntityDecimalPlaces: 0,                          //New 
                ScreensaverEntityIconOn: 'water-boiler', 
                ScreensaverEntityText: 'WP', 
                ScreensaverEntityUnitText: '°C', 
                ScreensaverEntityIconColor: {'val_min': 65, 'val_max': 10} 
            },
            // bottomScreensaverEntity 3
            {
                type: 'script',
                ScreensaverEntity: 'alias.0.smart.chargelevel.chargeLevel',
                ScreensaverEntityFactor: 1,                                 //New
                ScreensaverEntityDecimalPlaces: 0,                          //New  
                ScreensaverEntityIconOn: 'car-electric', 
                ScreensaverEntityText: 'SoC', 
                ScreensaverEntityUnitText: '%', 
                ScreensaverEntityIconColor: {'val_min': 100, 'val_max': 30} 
            },
            // bottomScreensaverEntity 4
            {
                type: 'script',
                ScreensaverEntity: 'javascript.0.Photovoltaik.Leistung_DC_komplett', 
                ScreensaverEntityFactor: 1,                                 //New
                ScreensaverEntityDecimalPlaces: 0,                          //New 
                ScreensaverEntityIconOn: 'solar-panel', 
                ScreensaverEntityText: 'PV', 
                ScreensaverEntityUnitText: 'W', 
                ScreensaverEntityIconColor: {'val_min': 5000, 'val_max': 0} 
            },

Hier das Bild dazu:

Jemand ne Idee?

[Armilar]

@holgerwolf

Versuche mal die erwarteten Farben zu definieren:

                ScreensaverEntityOnColor: MSGreen,
                ScreensaverEntityOffColor: MSRed,

[holgerwolf]

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

ScreensaverEntityOnColor: MSGreen,
ScreensaverEntityOffColor: MSRed,

Schon besser. Aber jetzt wechselt er die Farben wohl nur zwischen grün und rot mit unterschiedlichen Helligkeiten. Ich glaube beim Script war dann 50% gelb oder so. Werde ich jetzt mal beobachten.

[ticaki]

@holgerwolf
Es gibt Möglichkeiten ohne Ende - mehr als irgendwer braucht Sag was du erreichen willst und ich gucke nach.

EDIT:
du könntest mal

//rot - gelb - grün / Übergang
ScreensaverEntityIconColor: {val_min:123, val_max:234, mode: 'triGrad'},

oder

//rot - gelb - grün - blau / Übergang
ScreensaverEntityIconColor: {val_min:123, val_max:234, mode: 'quadriGrad'},

• Zahlen müssen durch was sinnvolles ersetzt werden

ausprobieren, da gehen aber keine benutzerdefinierten Farben.

[Armilar]

@ticaki

denke der (in der Mitte ist gelb) ist der "triGrad":

                {   type: 'script',
                    ScreensaverEntity: 'pirate-weather.0.weather.currently.windSpeed',
                    ScreensaverEntityFactor: 3.6,
                    ScreensaverEntityDecimalPlaces: 0,
                    ScreensaverEntityIconOn: 'weather-windy',
                    ScreensaverEntityIconOff: null,
                    ScreensaverEntityText: "Wind",
                    ScreensaverEntityUnitText: 'km/h',
                    ScreensaverEntityOnColor: MSGreen,
                    ScreensaverEntityOffColor: MSRed,
                    ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120, 'val_best': 0, mode: 'triGrad'}
                },

[ticaki]

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

@ticaki

denke der (in der Mitte ist gelb) ist der "triGrad":

Ja und mit val_best verankert man die mitte da wo man will.

[TT-Tom]

@ticaki

Val_best sagt doch aus wo Grün ist, Beispiel Luftfeuchte 0-100% val_best = 55% bedeutet 55% grün nach 100% und 0% gehts nach rot über gelb

[holgerwolf]

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

ScreensaverEntityIconColor: {val_min:123, val_max:234, mode: 'triGrad'},

Super

[ticaki]

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

@ticaki

Val_best sagt doch aus wo Grün ist, Beispiel Luftfeuchte 0-100% val_best = 55% bedeutet 55% grün nach 100% und 0% gehts nach rot über gelb

Ja hast recht

Das hier geht alles bei ScreensaverEntityIconColor:

{
        val_min: number;
        val_max: number;
        val_best?: number;
        /**
         * The 3. color for color best. Only with val_best.
         */
        color_best?: RGB;/**
    /**
     * The color mix mode. Default is 'mixed'.
     * ‘mixed’: the target colour is achieved by scaling between the two RGB colours. 2 colours are required.
     * 'cie': the target colour is achieved by mixing according to the CIE colour table. 2 colours are required.
     * 'hue': the target colour is calculated by scaling via colour, saturation and brightness. 2 colours are required.
     * 'triGrad': the target colour is interpolated in a three-color gradient from red to green. Colours are ignored
     * 'triGradAnchor': the target colour is interpolated in a three-color gradient from red to green, Yellow is anchored to val_best. Colours are ignored
     * 'quadriGrad': the target colour is interpolated in a four-color gradient from red to yellow, green and blue. Colours are ignored.
     * 'quadriGradAnchor': the target colour is interpolated in a four-color gradient from red to yellow, green and blue. green is anchored to val_best. Colours are ignored.
     */
        mode?: 'mixed' | 'hue' | 'cie' | 'triGrad' | 'triGradAnchor' | 'quadriGrad' | 'quadriGradAnchor';
        /**
         * The logarithm scaling to max, min or leave undefined for linear scaling.
         */
        log10?: 'max' | 'min';
        valIcon_min?: number;
        valIcon_max?: number
    };

Bei Fragen - fragt unseren Community-Supportmanager @TT-Tom der weiß auch was es bewirkt