Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Betatest NSPanel-lovelace-ui v0.4.x

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Betatest NSPanel-lovelace-ui v0.4.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      ticaki Developer last edited by

      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

      1 Reply Last reply Reply Quote 0
      • T
        ticaki Developer last edited by 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 1 Reply Last reply Reply Quote 1
        • teletapi
          teletapi @ticaki last edited by

          @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}
                  ],
          };
          

          Screenshot_2.jpg

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

          T 1 Reply Last reply Reply Quote 0
          • T
            ticaki Developer @teletapi last edited by 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:
            Bildschirmfoto 2025-09-10 um 18.39.46.png

            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'},},
            
            teletapi 1 Reply Last reply Reply Quote 0
            • arteck
              arteck Developer Most Active @Asgothian last edited by

              @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...

              ilovegym 1 Reply Last reply Reply Quote 0
              • teletapi
                teletapi @ticaki last edited by 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.
                Screenshot_3.jpg

                T 2 Replies Last reply Reply Quote 0
                • ilovegym
                  ilovegym @arteck last edited by

                  @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..

                  T 1 Reply Last reply Reply Quote 0
                  • T
                    ticaki Developer @teletapi last edited by

                    @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.

                    1 Reply Last reply Reply Quote 1
                    • T
                      ticaki Developer @teletapi last edited by 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.

                      1 Reply Last reply Reply Quote 0
                      • T
                        ticaki Developer @ilovegym last edited by

                        @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.

                        arteck 1 Reply Last reply Reply Quote 0
                        • T
                          ticaki Developer last edited by 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: [],
                          };
                          

                          mediaplayer1.png mediaplayer2.png

                          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.

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

                          1 Reply Last reply Reply Quote 3
                          • arteck
                            arteck Developer Most Active @ticaki last edited by 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

                            1 Reply Last reply Reply Quote 1
                            • T
                              ticaki Developer last edited by 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.

                              1 Reply Last reply Reply Quote 5
                              • T
                                ticaki Developer last edited by 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 🤣

                                1 Reply Last reply Reply Quote 5
                                • T
                                  ticaki Developer last edited by 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.

                                  1 Reply Last reply Reply Quote 0
                                  • H
                                    holgerwolf last edited by holgerwolf

                                    Wo kommt denn dieses "Schraubenschlüssel/Uhrzeit" Symbol zwischen Uhrzeit und Datum her?
                                    4b2675bd-8814-4cd0-91dd-084737fead02-grafik.png

                                    T Armilar 3 Replies Last reply Reply Quote 0
                                    • T
                                      ticaki Developer @holgerwolf last edited by

                                      @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.

                                      1 Reply Last reply Reply Quote 0
                                      • Armilar
                                        Armilar Most Active Forum Testing @holgerwolf last edited by

                                        @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

                                        1 Reply Last reply Reply Quote 1
                                        • T
                                          ticaki Developer @holgerwolf last edited by 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 🙂

                                          1 Reply Last reply Reply Quote 1
                                          • T
                                            ticaki Developer last edited by

                                            Benutzt eigentlich schon jemand den Adapter zur Mediensteuerung?

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            899
                                            Online

                                            32.1k
                                            Users

                                            80.7k
                                            Topics

                                            1.3m
                                            Posts

                                            19
                                            488
                                            44194
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo