Betatest NSPanel-lovelace-ui v0.7.x

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

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.
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 :rolling_on_the_floor_laughing:

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 :D 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 :laughing:

ticaki

Aus gegebenem Anlass hab @Armilar @TT-Tom und ich uns mit Copilot zusammengesetzt und eine umfangreich Dokumentation zum Thema Screensaver und wie konfigurieren verfasst. Das benötigt zwar noch einer weiteren Review über die nächsten Wochen aber wir möchtet euch dies nicht vorenthalten:

Screensaver - HowTo

holgerwolf

@ticaki 5 Tage zu spät ;-)

Aber super Sache....

Community Forum

NEWS