Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[M1R0O]

@wizard2010

Du musst die den Code in Lovelace > oben rechts Benutzeroberfläche konfigurieren > oben rechts RAW-Konfigurationseditor einfügen und anpassen.

[David G.]

@m1r0o
@wizard2010

Ich denke es geht um das Theme.
Das muss in der Konfiguration des Adapters eingefügt werden. Da gibt es einen extra Reiter für.
Einfügen und dann oben links im Dropdown auswählen.
Und natürlich speichern nicht vergessen.

Allerdings hat @M1R0O das Theme nicht mit gepostet.

[wizard2010]

@david-g
@M1R0O

Ja, ich habe über das Theme gesprochen.
Aber soweit ich verstanden habe, dass Sie das Theme nicht geteilt haben, haben Sie die Absicht, es zu tun?

Vielen Dank.

[M1R0O]

@wizard2010
Oh sorry, gar nicht bemerkt: Es sind 2 aus denen du wählen kannst: "dark" und "darkOWN":

dark:
  # Background image
  lovelace-background: 'center / cover no-repeat url("/local/night.jpg") fixed'

  # Colors
  text-color: '#DADADB'
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  text-dark-color: '#6A6B74'
  accent-color: '#008bef'
  accent-medium-color: '#2484C9'
  background-color: '#3b4049'
  background-color-2: '#484E59'
  background-card-color: '#434952'
  border-color: '#383C46'

  # Header
  app-header-background-color: '#363941'

  # Text
  primary-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'

  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'
  sidebar-icon-color: 'var(--text-medium-color)'
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'
  sidebar-selected-text-color: 'var(--text-color)'

  # UI
  paper-card-header-color: 'var(--text-color)'
  primary-background-color: 'var(--background-color)'
  mdc-theme-primary: 'var(--accent-medium-color)'
  card-background-color: 'var(--background-card-color)'

  # Card
  paper-card-background-color: 'var(--background-card-color)'
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'

  # Icons
  paper-item-icon-color: 'var(--text-dark-color)'
  paper-item-icon-active-color: 'var(--accent-color)'

  # Switches
  switch-checked-button-color: 'var(--text-medium-light-color)'
  switch-unchecked-button-color: 'var(--text-medium-light-color)'
  switch-checked-track-color: '#009FFF'
  switch-unchecked-track-color: '#767682'

  # Slider
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-knob-color: 'var(--text-medium-light-color)'
  paper-slider-container-color: 'var(--text-dark-color)'
  paper-slider-knob-start-color: 'var(--text-medium-light-color)'

  # Badges
  label-badge-text-color: 'var(--text-color)'
  label-badge-background-color: 'rgba(54, 57, 65, 0.6)'

  # Shadows
  ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'

  # HACS
  hacs-badge-color: 'var(--accent-color)'
  hacs-status-installed: 'var(--text-color)'
  hacs-status-pending-restart: 'var(--text-dark-color)'
  hacs-status-pending-update: 'var(--accent-color)'
  
darkOWN:
  #Background image
  lovelace-background: center / cover no-repeat url("/cards/background.jpg") fixed
  mdc-theme-surface: var(--primary-background-color) 

  # Colors
  text-color: '#DADADB'
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  text-dark-color: '#6A6B74'
  accent-color: 'rgba(236, 237, 238)'
  accent-medium-color: 'rgba(236, 237, 238)'
  background-color: '#3b4049'
  background-color-2: 'rgba(72, 78, 89, 0.1)'
  background-card-color: 'rgba(67, 73, 82, 0.1)'  
  #border-color: '#383C46'

  # Header
  app-header-background-color: '#363941'

  # Text
  primary-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'

  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'
  sidebar-icon-color: 'var(--text-medium-color)'
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'
  sidebar-selected-text-color: 'var(--text-color)'

  # UI
  paper-card-header-color: 'var(--text-color)'
  primary-background-color: 'var(--background-color)'
  mdc-theme-primary: 'var(--accent-medium-color)'
  card-background-color: 'var(--background-card-color)'

  # Card
  paper-card-background-color: 'var(--background-card-color)'
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'

  # Icons
  paper-item-icon-color: 'var(--text-dark-color)'
  paper-item-icon-active-color: 'var(--accent-color)'

  # Switches
  switch-checked-button-color: 'var(--text-medium-light-color)'
  switch-unchecked-button-color: 'var(--text-medium-light-color)'
  switch-checked-track-color: 'rgba(236, 237, 238)'
  switch-unchecked-track-color: 'rgba(236, 237, 238)'

  # Slider
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-knob-color: 'var(--text-medium-light-color)'
  paper-slider-container-color: 'var(--text-dark-color)'
  paper-slider-knob-start-color: 'var(--text-medium-light-color)'

  # Badges
  label-badge-text-color: 'var(--text-color)'
  label-badge-background-color: 'rgba(54, 57, 65, 0.6)'

  # Shadows
  ha-card-box-shadow: 'inset 1px 1px 1px 2px var(--border-color)'

  # HACS
  hacs-badge-color: 'var(--accent-color)'
  hacs-status-installed: 'var(--text-color)'
  hacs-status-pending-restart: 'var(--text-dark-color)'
  hacs-status-pending-update: 'var(--accent-color)'

[wizard2010]

Hi @m1r0o,

Vielen Dank :)

Ich bin neu bei ioBroker und lovelace. Kann ich Sie fragen, ob Sie eine Anleitung zur Anwendung dieses Themas geben können? Was sind die Schritte, die ich tun muss?
Danke für deine Hilfe.

[David G.]

@wizard2010

Habe ich 2-3 Posts weiter oben geschrieben.
Ist eigentlich ganz leicht.
Wenn es nicht hinhaut, nochmal fragen.

[David G.]

Hallo an alle,

mittlerweile hat sich einiges an meiner oben geposteten Visu geändert.
Einiges ist geblieben, einiges ist neu. Da habe ich gedacht, dass ich es nochmal poste.
Nach wie vor ist die Darstellung fürs Smartphone optimiert.

Garagenöffner
Eigentlich wie gehabt, je nachdem ob das Tor offen ist oder nicht ändert sich das Bild.

Sicherheit

Hier sieht man im oberen Bereich, welche Fenster alle offen sind, man kann aber auch weiter klicken und sieht eine Übersicht aller Sensoren.

Im mittleren Bereich schalte ich die Alarmanlage.
Man sieht, welcher Aktivierungsmodus und welcher Schutzmodus aktiv ist.
Wenn man die PIN eingibt, erscheinen alle nötigen Einstellungen. Nach 5sek schließen sich die Einstellungen automatisch (Da werkelt Blockly im Hintergrund).

Ganz unten noch ein paar Kamerabilder (schaut grad gegen die Decke ^^.)

Temperatur

Hier sollte sich alles selber erklären.

Multimedia

Hier steuere ich meine Bose-Box. Im Hintergrund werkelt einiges mit Blockly.

Lichtsteuerung

Denke so weit selbsterklärend. Oben kann ich meine Einstellungen zur Anwesenheitssimulation steuern.

System (Musste die Screenshots im Querformat machen, hab anders nicht alles in ein Bild bekommen.)

Hier sieht man so ziemlich alles zu meiner Hardware.
Die Charts habe ich mit eCharts erstellt.

Die HmIP und Sonoff Tabellen generiere ich komplett in Blockly.

Kalender

Oben den Bereich habe ich zusammengebastelt. Als Grundlage dient der TrashSchedule Adapter. Bereite den Text aber noch mit Blockly auf.

Den Kalender habe ich so aus dem iCal-Adapter eingebunden.

Verbraucherübersicht

Fernsehprogramm

Die Daten ziehe ich aus dem Tvspielfilm-Adapter. Lasse aber mit Blockly die Tabellen erzeugen.
Im oberen Bereich kann ich die Lautstärke vom TV steuern und mir die gewünschten Uhrzeiten fürs TV-Programm auswählen.

Anwesenheit

Hier gibts eine Karte aller georteten Handys mit Verlauf und Adresse.

Netzwerk

Alles rund ums Netzwerk.

Mein YAML-Code

Spoiler

title: Home
views:
 - title: Garage
   path: garage
   icon: 'mdi:garage'
   panel: false
   badges: []
   cards:
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: picture-entity
               entity: binary_sensor.Sensor_Garage
               show_name: false
               show_state: false
               state_image:
                 'on': /cards/garage_auf.png
                 'off': /cards/garage_zu.png
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
         - type: vertical-stack
           cards:
             - type: entity-button
               entity: switch.Antrieb_Garage
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: false
               show_name: true
               name: Garage betätigen
 - title: Sicherheit
   path: sicherheit
   icon: 'mdi:home-lock-open'
   panel: false
   badges: []
   cards:
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: picture
               image: /cards/security.png
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
               title: Offene Fenster und Türen
         - type: vertical-stack
           cards:
             - type: 'custom:slideshow-card'
               fill: false
               arrow_color: White
               arrow_opacity: 1
               auto_play: false
               auto_delay: 4
               style:
                 border-radius: 25px
               cards:
                 - type: entity-filter
                   entities:
                     - entity: binary_sensor.Sensor_Garage
                       name: Garagentor
                       icon: 'mdi:garage'
                     - entity: binary_sensor.Schloss_Haustuere
                       name: Haustürschloss
                       icon: 'mdi:door'
                     - entity: binary_sensor.Fensterkontakt_Kueche_1
                       name: Küchenfenster
                       icon: 'mdi:window-closed-variant'
                     - entity: binary_sensor.Fensterkontakt_Bad
                       name: Badezimmerfenster
                       icon: 'mdi:window-closed-variant'
                   state_filter:
                     - 'on'
                 - type: entities
                   title: Alles
                   entities:
                     - entity: binary_sensor.Schloss_Haustuere
                       name: Haustürschloss
                       icon: 'mdi:door'
                     - entity: binary_sensor.Sensor_Garage
                       name: Garage
                       icon: 'mdi:garage'
                     - entity: binary_sensor.Fensterkontakt_Kueche_1
                       name: Küchenfesnter
                       icon: 'mdi:window-closed-variant'
                     - entity: binary_sensor.Fensterkontakt_Bad
                       name: Badezimmerfenster
                       icon: 'mdi:window-closed-variant'
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: markdown
           content: '---'
           title: Alarmanlage
         - type: horizontal-stack
           cards:
             - type: markdown
               content: |-
                 **Aktivierungsmodus**
                 {0_userdata.0.Alarmanlage.Aktivierter_Modus} 
             - type: markdown
               content: |-
                 **Schutzmodus**
                 {0_userdata.0.Alarmanlage.Aktivierter_Alarmmodus} 
         - type: entities
           entities:
             - entity: input_text.pin_vis
               name: PIN
               icon: 'mdi:key'
           title: 'Einstellungen bearbeiten '
         - type: conditional
           conditions:
             - entity: input_text.pin_vis
               state: '12345'
           card:
             type: entities
             entities:
               - entity: switch.immer_alarmieren
                 name: Schutzmodus
                 icon: 'mdi:home'
         - type: conditional
           conditions:
             - entity: input_text.pin_vis
               state: '12345'
           card:
             type: entities
             entities:
               - entity: switch.manueller_modus
                 name: Manueller Modus
                 icon: 'mdi:hand'
         - type: conditional
           conditions:
             - entity: input_text.pin_vis
               state: '12345'
           card:
             type: entities
             entities:
               - entity: switch.anlage_scharf
                 name: aktivieren / deaktivieren
                 icon: 'mdi:security'
     - type: picture-entity
       entity: camera.Test
       aspect_ratio: 70%
       show_name: true
       show_state: false
       name: Kinderzimmer Ben-Henri
     - type: picture-entity
       entity: camera.Kamera_Wilke_Eingang
       aspect_ratio: 70%
       show_name: true
       show_state: false
       name: Wilke Eingang
 - title: Heizung
   path: heizung
   icon: 'mdi:thermometer'
   badges: []
   cards:
     - type: 'custom:slideshow-card'
       fill: true
       arrow_color: White
       arrow_opacity: 0.5
       auto_play: false
       auto_delay: 4
       border-radius: 25px
       style: |
         ha-card {
            --secondary-text-color: #f59042 !important;
         }
       cards:
         - type: weather-forecast
           entity: weather.Hilchenbach__Hilchenbach_Deutschland_
           name: Hilchenbach
           show_forecast: true
         - type: weather-forecast
           entity: weather.Haiger__Haiger_Deutschland_
           name: Haiger
           show_forecast: true
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: thermostat
               entity: climate.Thermostat_Wohnbereich
               name: 'Wohnzimmer '
               style: |
                 ha-card {
                    --heat-color: #f59042 !important;
                 }
                 round-slider {
                   --round-slider-bar-color: #f59042 !important;
                 }
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
         - type: horizontal-stack
           cards:
             - type: picture-elements
               image: /cards/bg_thermo_settings.png
               elements:
                 - type: image
                   image: /cards/boost_active.png
                   entity: switch.Heizung_Wohnbereich_boost
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 28%
                     width: 10%
                 - type: image
                   image: /cards/urlaub_active.png
                   entity: switch.Heizung_Wohnbereich_party
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 72%
                     width: 10%
                 - type: image
                   image: /cards/linie_senkrecht.png
                   entity: binary_sensor.Schloss_Haustuere
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 50%
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: 'custom:simple-thermostat'
               entity: climate.Heizung_KZ_2
               step_layout: row
               name: Ben-Henri
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
         - type: horizontal-stack
           cards:
             - type: picture-elements
               image: /cards/bg_thermo_settings.png
               elements:
                 - type: image
                   image: /cards/boost_active.png
                   entity: switch.Heizung_KZ_2_BOOST
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 28%
                     width: 10%
                 - type: image
                   image: /cards/urlaub_active.png
                   entity: switch.Heizung_KZ_2_party
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 72%
                     width: 10%
                 - type: image
                   image: /cards/linie_senkrecht.png
                   entity: binary_sensor.Schloss_Haustuere
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 50%
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: 'custom:simple-thermostat'
               entity: climate.Heizung_Kinderzimmer_1_1
               step_layout: row
               name: Hanna Emilia
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
         - type: horizontal-stack
           cards:
             - type: picture-elements
               image: /cards/bg_thermo_settings.png
               elements:
                 - type: image
                   image: /cards/boost_active.png
                   entity: switch.Heizung_KZ_1_boost
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 28%
                     width: 10%
                 - type: image
                   image: /cards/urlaub_active.png
                   entity: switch.Heizung_KZ_1_party
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 72%
                     width: 10%
                 - type: image
                   image: /cards/linie_senkrecht.png
                   entity: binary_sensor.Schloss_Haustuere
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 50%
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: 'custom:simple-thermostat'
               entity: climate.Heizung_Bad
               step_layout: row
               name: Bad
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
         - type: horizontal-stack
           cards:
             - type: picture-elements
               image: /cards/bg_thermo_settings.png
               elements:
                 - type: image
                   image: /cards/boost_active.png
                   entity: switch.Heizung_Bad_BOOST
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 28%
                     width: 10%
                 - type: image
                   image: /cards/urlaub_active.png
                   entity: switch.Heizung_Bad_party
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 72%
                     width: 10%
                 - type: image
                   image: /cards/linie_senkrecht.png
                   entity: binary_sensor.Schloss_Haustuere
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 20px
                     left: 50%
     - type: 'custom:slideshow-card'
       fill: false
       arrow_color: White
       arrow_opacity: 0.5
       auto_play: false
       auto_delay: 4
       style: null
       border-radius: 25px
       cards:
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Wohnzimmer
           title: Wohnzimmer
         - type: iframe
           title: Ben-Henri
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Ben-Henri
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Hannah%20Emilia
           title: Hannah Emilia
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Bad
           title: Bad
 - title: Multimedia
   path: multimedia
   icon: 'mdi:music'
   badges: []
   cards:
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: vertical-stack
           cards:
             - type: picture-elements
               image: /cards/bg_tr_bose_klein.png
               elements:
                 - type: image
                   image: /cards/1.png
                   entity: switch.BOSE_PRESET_1
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 10%
                     width: 8%
                 - type: image
                   image: /cards/2.png
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   entity: switch.BOSE_PRESET_2
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 26%
                     width: 8%
                 - type: image
                   image: /cards/3.png
                   entity: switch.BOSE_PRESET_3
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 42%
                     width: 8%
                 - type: image
                   image: /cards/4.png
                   entity: switch.BOSE_PRESET_4
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 58%
                     width: 8%
                 - type: image
                   image: /cards/5.png
                   entity: switch.BOSE_PRESET_5
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 74%
                     width: 8%
                 - type: image
                   image: /cards/6.png
                   entity: switch.BOSE_PRESET_6
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 50%
                     left: 90%
                     width: 8%
         - type: horizontal-stack
           cards:
             - type: markdown
               content: >-
                 <img src="{0_userdata.0.Multimedia.Bose_1.Cover}" 
                 width="100%">
             - type: picture-elements
               image: /cards/bg_1px_tr.png
               elements:
                 - style:
                     top: 40%
                     left: 50%
                   type: state-label
                   entity: input_text.Bose_1_Sender
                 - style:
                     top: 50%
                     left: 50%
                   type: state-label
                   entity: input_text.Bose_1_Titel
                 - style:
                     top: 20%
                     left: 50%
                   type: state-label
                   entity: input_text.Bose_1_Source
         - type: vertical-stack
           cards:
             - type: entities
               entities:
                 - type: 'custom:slider-entity-row'
                   entity: input_number.Bose_1_Volume
                   full_row: true
               show_header_toggle: null
         - type: vertical-stack
           cards:
             - type: picture-elements
               image: /cards/bg_tr_bose_klein.png
               elements:
                 - type: image
                   image: /cards/power.png
                   entity: switch.bose_1_an_aus
                   state_filter:
                     'true': brightness(100%) saturate
                     'false': brightness(100%) saturate(0.0)
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 17px
                     left: 10%
                     width: 7%
                 - type: image
                   image: /cards/usb.png
                   entity: switch.Bose_1_Source
                   state_filter:
                     'true': brightness(100%) saturate(0.0)
                     'false': brightness(100%) saturate
                   tap_action:
                     action: toggle
                   hold_action:
                     action: none
                   style:
                     top: 15px
                     left: 90%
                     width: 7%
 - title: Licht
   path: ''
   icon: 'mdi:lightbulb-on-outline'
   badges: []
   cards:
     - type: entities
       entities:
         - entity: light.auto_an
           name: Automatisch einschalten
           icon: 'mdi:clock'
         - entity: light.auto_aus
           name: Automatisch ausschalten
           icon: 'mdi:clock'
       show_header_toggle: false
     - type: entities
       entities:
         - entity: light.steckdose_sofa
           name: Wohnzimmer
         - entity: light.steckdose_esszimmer
           name: Esszimmer
         - entity: light.steckdose_kueche
           name: Küche
         - entity: light.steckdose_var_1
           name: Stern
         - entity: light.steckdose_var_2
           name: Kranz
         - entity: light.steckdose_flur_oben
           name: Flur oben
         - entity: light.steckdose_flur_unten
           name: Flur unten
       title: Lichter
       state_color: false
 - title: System
   path: system
   icon: 'mdi:cpu-32-bit'
   badges: []
   cards:
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: picture
           image: /cards/cpu.png
           tap_action:
             action: none
           hold_action:
             action: ''
         - type: markdown
           content: '---'
           title: System
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: markdown
           content: '---'
           title: Raspberry
         - type: horizontal-stack
           cards:
             - type: gauge
               entity: sensor.CPU_Auslastung
               min: 0
               max: 100
               name: CPU
             - type: gauge
               entity: sensor.CPU_Temp
               min: 0
               max: 100
               name: CPU-Temp.
         - type: horizontal-stack
           cards:
             - type: gauge
               entity: sensor.RAM
               min: 0
               max: 100
             - type: gauge
               entity: sensor.sd_karte_prozent
               min: 0
               max: 100
               name: SD-Karte
               unit: '%'
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.Pi4
           aspect_ratio: 50%
     - type: 'custom:stack-in-card'
       cards:
         - type: markdown
           content: '---'
           title: CCU
         - type: horizontal-stack
           cards:
             - type: picture-entity
               entity: input_number.Servicemeldungen_CCU
               show_name: true
               show_state: false
               state_image:
                 '0': /cards/garage_auf.png
                 '1': /cards/1.png
                 '2': /cards/1.png
                 '3': /cards/1.png
                 '4': /cards/1.png
                 '5': /cards/1.png
                 '6': /cards/1.png
             - type: gauge
               entity: sensor.Duty_Cycle
               min: 0
               max: 100
               name: Duty Cycle
             - type: picture-elements
               elements:
                 - type: state-label
                   entity: input_text.ccu_an_seit_text
                   style:
                     top: 40%
                     left: 50%
                 - type: state-label
                   entity: input_text.ccu_uptime
                   style:
                     top: 70%
                     left: 50%
               image: /cards/bg_tr.png
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.CCU
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: false
         border_radius: true
         outer_padding: true
       cards:
         - type: markdown
           content: '---'
           title: USV
         - type: horizontal-stack
           cards:
             - type: gauge
               entity: sensor.akku_usv
               min: 0
               max: 100
               name: AKKU USV
               unit: '%'
             - type: gauge
               entity: sensor.spannung_usv
               min: 0
               name: Spannung
               max: 15
               unit: V
             - type: picture-elements
               elements:
                 - type: state-label
                   entity: input_text.letzter_stromausfall_text
                   style:
                     top: 40%
                     left: 50%
                 - type: state-label
                   entity: input_text.letzter_stromausfall_zeit
                   style:
                     top: 70%
                     left: 50%
               image: /cards/bg_tr.png
         - type: iframe
           url: >-
             https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.USV
     - type: markdown
       content: '{0_userdata.0.VIS.Akkumeldungen.hmip_akku_tabelle}'
       title: HmIP
     - type: markdown
       content: '{0_userdata.0.VIS.Tabellen.Erreichbarkeit_Sonoff}'
       title: Sonoff
 - title: Termine
   path: termine
   icon: 'mdi:calendar'
   badges: []
   cards:
     - type: horizontal-stack
       cards:
         - type: markdown
           content: >-
             <center><b>Restmüll</b><br><img
             src="/cards/muell_schwarz.png"><br>

             {0_userdata.0.Muell.Texte_fuer_vis.Restmuell}
         - type: markdown
           content: |-
             <center><b>Gelbersack</b><br><img src="/cards/muell_gelb.png"><br>
             {0_userdata.0.Muell.Texte_fuer_vis.Gelber_Sack}
         - type: markdown
           content: |-
             <center><b>Papiermüll</b><br><img src="/cards/muell_blau.png"><br>
             {0_userdata.0.Muell.Texte_fuer_vis.Papiermuell}
         - type: markdown
           content: |-
             <center><b>Biomüll</b><br><img src="/cards/muell_braun.png"><br>
             {0_userdata.0.Muell.Texte_fuer_vis.Biomuell}
     - type: markdown
       content: '{ical.1.data.html}'
       title: Termine
 - title: Energie
   path: energie
   icon: 'mdi:power-socket-jp'
   badges: []
   cards:
     - type: markdown
       content: >-
         <font size="5">Waschmaschine
         {sonoff.0.steckdose_waschmaschine.ENERGY_Power} W </font>

         <table>
          <tr>
           <td></td>
           <td ALIGN="CENTER"><b>2020</b></td>
           <td ALIGN="CENTER"><b>2021</b></td>
          </tr>
          <tr>
           <td><b>Wäschen ges. </b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.gaenge_vorjahr}</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.gaenge}</td>
          </tr>
          <tr>
           <td><b>Ø pro Tag</b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_tag_vorjahr}</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_tag}</td>
          </tr>
         <tr>

         <td><b>Ø pro Monat</b></td>

         <td ALIGN="CENTER">

         {0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_monat_vorjahr}

         </td>

         <td align="Center">

         {0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_monat}

         </td>
          <tr>
           <td width=30%><b>Kosten ges.</b></td>
           <td  ALIGN="CENTER" width=52%>{0_userdata.0.Zaehlen.Waschmaschine.Kosten_ges_Vorjahr} €</td>
           <td  ALIGN="CENTER" width=52%>{sourceanalytix.0.sonoff__0__steckdose_waschmaschine__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
          </tr>
          <tr>
           <td><b>Ø pro Gang</b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.kosten_pro_gang_vorjahr} €</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.kosten_pro_gang} €</td>
          </tr>
         </table>
     - type: markdown
       content: >-
         <font size="5">Trockner {sonoff.0.steckdose_trockner.ENERGY_Power} W
         </font>

         <table>
          <tr>
           <td></td>
           <td ALIGN="CENTER"><b>2020</b></td>
           <td ALIGN="CENTER"><b>2021</b></td>
          </tr>
          <tr>
           <td><b>Wäschen ges. </b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.gaenge_vorjahr}</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.gaenge}</td>
          </tr>
          <tr>
           <td><b>Ø pro Tag</b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.garnge_pro_tag_vorjahr}</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.garnge_pro_tag}</td>
          </tr>
         <tr>

         <td><b>Ø pro Monat</b></td>

         <td ALIGN="CENTER">

         {0_userdata.0.Zaehlen.Trockner.garnge_pro_monat_vorjahr}

         </td>

         <td align="Center">

         {0_userdata.0.Zaehlen.Trockner.garnge_pro_monat}

         </td>
          <tr>
           <td width=30%><b>Kosten ges.</b></td>
           <td  ALIGN="CENTER" width=52%>{0_userdata.0.Zaehlen.Trockner.Kosten_ges_Vorjahr} €</td>
           <td  ALIGN="CENTER" width=52%>{sourceanalytix.0.sonoff__0__steckdose_trockner__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
          </tr>
          <tr>
           <td><b>Ø pro Gang</b></td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.kosten_pro_gang_vorjahr} €</td>
           <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.kosten_pro_gang} €</td>
          </tr>
         </table>
     - type: markdown
       content: |-
         <table>
          <tr>
           <td width=10% align=center>Kosten 2021</td>
           <TD width=10% align=center>Kosten pro Monat (hochgerechnet)</td>
          <td width=10% align=center>Kosten pro Jahr (hochgerechnet)</td>
          </tr>
          <tr>
           <td align=center>{sourceanalytix.0.sonoff__0__steckdose_kuehltruhe__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
           <td align=center>{0_userdata.0.Zaehlen.Gefrierschrank.ca_verbrauch_monat} €</td>
           <td align=center>{0_userdata.0.Zaehlen.Gefrierschrank.ca_verbrauch_jahr} €</td>
          </tr>


         </table>
       title: Gefrierschrank
 - title: TV
   path: tv
   icon: 'hass:television'
   badges: []
   cards:
     - type: 'custom:slider-entity-row'
       entity: input_number.lautstaerke_frrnseher
       full_row: true
     - type: vertical-stack
       cards:
         - type: horizontal-stack
           cards:
             - type: button
               tap_action:
                 action: toggle
               entity: light.schalter_2015
               show_name: true
               show_icon: true
               show_state: false
               name: '20:15'
               icon: 'hass:clock'
             - type: button
               tap_action:
                 action: toggle
               entity: light.schalter_aktuell
               show_name: true
               show_icon: true
               name: aktuell
               icon: 'hass:clock'
         - type: conditional
           conditions:
             - entity: light.schalter_2015
               state: 'on'
           card:
             type: markdown
             content: '{0_userdata.0.VIS.tvprogramm.2015}'
         - type: conditional
           conditions:
             - entity: light.schalter_aktuell
               state: 'on'
           card:
             type: markdown
             content: '{0_userdata.0.VIS.tvprogramm.aktuell}'
 - title: Wir
   path: wir
   icon: 'mdi:face'
   badges: []
   cards:
     - type: map
       entities:
         - entity: geo_location.David_G_
         - entity: geo_location.Ann_Christin_Graef
       hours_to_show: 5
     - type: history-graph
       entities:
         - entity: sensor.David_Home
           name: David
         - entity: sensor.Tin_Home
           name: Tin
       refresh_interval: 0
       hours_to_show: 24
     - type: markdown
       content: >-
         David, {google-sharedlocations.0.user.102784136203768362088.battery}%
         Akku

         {google-sharedlocations.0.user.102784136203768362088.address}


         Tin, {google-sharedlocations.0.user.110377221062377408374.battery}%
         Akku

         {google-sharedlocations.0.user.110377221062377408374.address} 
       title: 'Wo ist wer:'
 - title: Netzwerk
   path: netzwerk
   icon: 'mdi:network'
   badges: []
   cards:
     - type: iframe
       title: Internet
       url: >-
         https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.Internet
     - type: markdown
       content: '{0_userdata.0.VIS.ping.ping_tabelle}'
       title: Erreichbarkeit
 - path: default_view
   title: Tests
   icon: 'mdi:help-circle-outline'
   badges: []
   cards:
     - type: 'custom:theme-maker'
     - type: entities
       style: |
         ha-card {
           background: none;
           box-shadow: none;
           --secondary-text-color: var(--primary-text-color);
         } 
       title: My Title
       entities:
         - entity: binary_sensor.Schloss_Haustuere
     - type: entities
       style: |
         ha-card {
           color: red;
         }
       entities:
         - binary_sensor.Schloss_Haustuere
     - type: entities
       style: |
         ha-card {
           font-variant: small-caps;
         }
         .card-header {
           font-size: 16px;
         }
       entities:
         - binary_sensor.Schloss_Haustuere
     - type: button
       tap_action:
         action: toggle
       hold_action:
         action: more-info
       show_icon: true
       show_name: true
       entity: switch.batterietest
       name: Batterietestbenachrichtigung
     - type: media-control
       entity: media_player.Wohnzimmer
     - type: picture-entity
       entity: switch.anlage_scharf
       image: 'https://demo.home-assistant.io/stub_config/bedroom.png'
       tap_action:
         action: none
       hold_action:
         action: none
       name: .
       show_state: false
       show_name: false
       aspect_ratio: 50%
     - type: entities
       entities:
         - entity: switch.alarm_manueller_modus
       show_header_toggle: false
     - type: conditional
       conditions:
         - entity: switch.alarm_manueller_modus
           state: 'on'
       card:
         type: entities
         entities:
           - entity: input_text.pin_vis
             name: PIN
             icon: 'mdi:key'
     - type: conditional
       conditions:
         - entity: input_text.pin_vis
           state: '12345'
       card:
         type: entities
         entities:
           - entity: switch.anlage_scharf
             name: aktivieren/deaktivieren
     - type: vertical-stack
       cards:
         - type: horizontal-stack
           cards:
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
             - type: button
               tap_action:
                 action: toggle
               hold_action:
                 action: more-info
               show_icon: true
               show_name: false
               entity: switch.Bose_1
         - type: entity
           entity: sensor.Duty_Cycle
     - type: entities
       entities:
         - entity: input_select.test_input_select
         - entity: sensor.HUMIDITY
         - entity: sensor.SD_Karte
     - type: 'custom:stack-in-card'
       mode: vertical
       keep:
         box_shadow: false
         margin: true
         border_radius: true
         outer_padding: true
       cards:
         - type: horizontal-stack
           cards:
             - type: picture-entity
               image: /cards/davidd.jpg
               entity: switch.David
               show_name: false
               show_state: false
             - type: picture-entity
               image: /cards/tinn.jpg
               entity: switch.Tin
               show_name: false
               show_state: false
         - type: vertical-stack
           cards:
             - type: markdown
               content: '---'
               title: Anwesend
         - type: vertical-stack
           cards:
             - type: history-graph
               entities:
                 - entity: switch.Tin
                 - entity: switch.David
               refresh_interval: 0
               hours_to_show: 24
     - type: entities
       entities:
         - entity: sensor.LOWBAT
         - entity: switch.alarm_ausgeloest
         - entity: switch.Antrieb_Garage
         - entity: input_text.Bose_1_Sender
         - entity: switch.BOSE_PRESET_2
     - type: shopping-list
       title: Infos
     - type: markdown
       content: >-
         <b>Waschmaschine</b>


         Steckdose

         {sonoff.0.steckdose_waschmaschine.ENERGY_Total}

         SA

         {sourceanalytix.0.sonoff__0__steckdose_waschmaschine__ENERGY_Total.Current_Reading}


         <b>Trockner</b>


         Steckdose

         {sonoff.0.steckdose_trockner.ENERGY_Total}

         SA

         {sourceanalytix.0.sonoff__0__steckdose_trockner__ENERGY_Total.Current_Reading}


         <b>Kühltruhe</b>


         Steckdose

         {sonoff.0.steckdose_kuehltruhe.ENERGY_Total}

         SA

         {sourceanalytix.0.sonoff__0__steckdose_kuehltruhe__ENERGY_Total.Current_Reading}
       title: Gesamtverbrauch
     - type: markdown
       content: >-
         <table style="width: 100%;">

         <tbody>

         <tr>

         <td width=100%><b><font size="3">Gerät</b></td></font>

         <td ALIGN="CENTER"><b><font size="3">Status</b></td></font>

         </tr>

         <tr>

         <td colspan="2">

         <hr>

         </dt>

         </tr>

         <tr>

         <td>ONLINE</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Google_.alive;a === true || a
         === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>VPN Druckerei</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.sophosfirma;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td colspan="2">

         <hr>

         </dt>

         </tr>

         <tr>

         <td>David Handy</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Davidhandy;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>Tin Handy</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Tinhandy;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>NAS</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.192_168_99_22;a === true || a
         === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>Bose Soundtouch</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Bose_Soundtuch;a === true || a
         === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>CCU3</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Ccu3;a === true || a === 'true'
         ? '<font size="3"><b><font color=green>● ' : '<font color=red><font
         size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>Digibit R1</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Digibit_;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>Fire TV</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.FireTV_TV;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>PS4</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.PS4;a === true || a === 'true' ?
         '<font size="3"><b><font color=green>● ' : '<font color=red><font
         size="3">●</font> '}</td>

         </tr>

         <tr>

         <td>Webcam Kinderzimmer 2</td>

         <td ALIGN="CENTER">{a:ping.0.iobroker.Webcam_bh;a === true || a ===
         'true' ? '<font size="3"><b><font color=green>● ' : '<font
         color=red><font size="3">●</font> '}</td>

         </tr>

         </tbody>

         </table>
     - type: 'custom:clockwork-card'
       locale: de-De
       other_time:
         - America/New_York
         - Australia/Sydney
         - America/Los_Angeles
hideToolbar: false
resources:
 - type: module
   url: /cards/accuweather-card.js
 - type: module
   url: /cards/button-card.js
 - type: module
   url: /cards/card-mod.js
 - type: jpg
   url: /cards/david.jpg
 - type: jpg
   url: /cards/diebstahl.jpg
 - type: png
   url: /cards/door-closed-lock.png
 - type: svg
   url: /cards/door-closed-lock.svg
 - type: png
   url: /cards/door-open.png
 - type: svg
   url: /cards/door-open.svg
 - type: jpg
   url: /cards/garage_auf.jpg
 - type: png
   url: /cards/garage_auf.png
 - type: jpg
   url: /cards/garage_zu.jpg
 - type: png
   url: /cards/garage_zu.png
 - type: jpg
   url: /cards/pi.jpg
 - type: module
   url: /cards/stack-in-card.js
 - type: svg
   url: /cards/test.svg
 - type: module
   url: /cards/theme-maker.js
 - type: jpg
   url: /cards/tin.jpg
 - type: module
   url: /cards/vertical-stack-in-card.js

Und mein Theme

Spoiler

noctis:  

 # Fonts
 primary-font-family: 'Raleway,sans-serif'
 paper-font-common-base_-_font-family: "var(--primary-font-family)"
 paper-font-common-code_-_font-family: "var(--primary-font-family)"
 paper-font-body1_-_font-family: "var(--primary-font-family)"
 paper-font-subhead_-_font-family: "var(--primary-font-family)"
 paper-font-headline_-_font-family: "var(--primary-font-family)"
 paper-font-caption_-_font-family: "var(--primary-font-family)"
 paper-font-title_-_font-family: "var(--primary-font-family)"
 ha-card-header-font-family: "var(--primary-font-family)"

 # Text
 text-color: '#ffffff' 
 primary-text-color: 'var(--text-color)'
 text-primary-color: 'var(--text-color)'
 secondary-text-color: "#BAC0C6"
 text-medium-light-color: '#A0A2A8'
 text-medium-color: '#80828A'
 disabled-text-color: '#626569'
 primary-color: 'var(--accent-color)'
 
 # Main Colors
 app-header-background-color: '#242e42'
 accent-color: '#1A89F5'
 accent-medium-color: 'var(--accent-color)'

 # Background
 background-color: '#242e42'
 primary-background-color: 'var(--background-color)'
 background-color-2: '#20293c' 
 secondary-background-color: 'none'
 markdown-code-background-color: 'var(--background-color)'
 
 # Card
 card-background-color: 'var(--ha-card-background)'
 ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
 ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
 ha-card-border-radius: "5px"
 border-color: 'none'

 # Icons
 paper-item-icon-color: '#EBEBEB'
 paper-item-icon-active-color: 'var(--accent-color)'
 
 # Sidebar
 sidebar-background-color: 'var(--background-color)'
 sidebar-icon-color: '#98a7b9'
 sidebar-selected-icon-color: 'var(--accent-color)'
 sidebar-selected-text-color: 'var(--text-color)'
 paper-listbox-background-color: 'var(--sidebar-background-color)'
 divider-color: 'var(--background-color)'
 light-primary-color: 'var(--ha-card-background)'

 # Sliders
 paper-slider-knob-color: 'var(--accent-color)'
 paper-slider-pin-color: 'var(--background-color-2)'
 paper-slider-active-color: 'var(--accent-color)'
 paper-slider-container-color: 'var(--background-color-2)'

 # Toggle:
 paper-toggle-button-checked-bar-color: 'var(--accent-color)'
 mdc-theme-primary: 'var(--accent-color)'

 # Switch
 switch-unchecked-color: '#70889e'
 switch-checked-button-color: 'var(--accent-color)'
 switch-unchecked-track-color: 'var(--background-color-2)'
 switch-checked-track-color: 'var(--background-color-2)'

 # Radio Button
 paper-radio-button-checked-color: 'var(--accent-color)'

 # Popups
 more-info-header-background: 'var(--secondary-background-color)'
 paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

 # Tables
 table-row-background-color: 'var(--background-color)'
 table-row-alternative-background-color: 'var(--ha-card-background)'

 # Badges
 label-badge-background-color: 'var(--background-color)'
 label-badge-text-color: 'var(--text-primary-color)'
 label-badge-red: 'rgba(73,85,108,1)'
 label-badge-blue: 'rgba(26,137,245,1)'
 label-badge-green: 'rgba(0,202,139,1)'
 label-badge-yellow: 'rgba(222,176,107,1)'

 paper-input-container-focus-color: 'var(--accent-color)'
 
 # Custom Header
 ch-background: 'var(--background-color)'
 ch-active-tab-color: 'var(--accent-color)'
 ch-notification-dot-color: 'var(--accent-color)'
 ch-all-tabs-color: 'var(--sidebar-icon-color)'
 ch-tab-indicator-color: 'var(--accent-color)'

 # Mini Mediaplayer
 mini-media-player-base-color: 'var(--text-color)'
 mini-media-player-accent-color: 'var(--accent-color)'

Meine Custom-Cards

Spoiler

 - type: module
   url: /cards/accuweather-card.js
 - type: module
   url: /cards/button-card.js
 - type: module
   url: /cards/card-mod.js
 - type: module
   url: /cards/stack-in-card.js
 - type: module
   url: /cards/theme-maker.js
 - type: module
   url: /cards/vertical-stack-in-card.js

Die Blocklys kann ich leider nicht Posten. Dann bekomme ich die Meldung, dass die maximale länge des Posts überschritten wird....

[haumichel]

@philo686
Hallo,
kannst du mir sagen, welche "battery-entity" du genau genommen hast? Ich bekomme die, die ich von GitHub bezogen habe, nicht in Lovelace eingebunden. Egal was ich auch mache, es gibt folgende Fehlermeldung:
Custom element doesn't exist: battery-entity.
Ich kann mich erinnern, dass es auf GitHub mal eine "button-card" gab, die schlichtweg kaputt war.

Vielen Dank

[dontobi]

Anbei ein Script für die Anzeige der Pollenflug daten, vom gleichnamigen Adapter.

Hier der Code des Scripts. Wer es für sich anpassen möchte, sollte das Objekt (Zeile 4 und 15) und die Region (Zeile 22 und 23) anpassen.

// Pollenflug - Aufbereitung der Daten für die Anzeige in der Lovelace UI

createState('javascript.0.Lovelace.pollenflug', { name: 'Pollenflug - HTML', type: 'string', read: true, write: true, });

// Um 11:00 Uhr werden die Adapter-Daten aktualisiert - 11:05 Uhr werden die HTML-Daten neu erzeugt
schedule("5 11 * * *", async function () {
    let htmlStr = '';
    let pollen =['Ambrosia','Beifuss','Birke','Erle','Esche','Graeser','Hasel','Roggen'];
    htmlStr = ['<table style="width: 100%;"><tbody><tr><td width=100%><b><font size="3">Typ</b></td></font><td ALIGN="CENTER"><b><font size="3">Heute</td><td><b><font size="3">Morgen</td></b></font></tr><tr><td colspan="3"><hr></dt></tr>'].join('');
    for (let j = 0; j< pollen.length ; j++) {
        htmlStr = htmlStr + auswertung(pollen[j]);
    }
    htmlStr = htmlStr + ['</tbody></table>'].join('');
    setState('javascript.0.Lovelace.pollenflug', htmlStr, true);
});

function auswertung(name){
    let html = '';
    let farbe_heute = '';
    let farbe_morgen = '';
    const heute = getState('pollenflug.0.region#101.'+name+'.index_today').val;
    const morgen = getState('pollenflug.0.region#101.'+name+'.index_tomorrow').val;
    // Berechnung Pollenflug heute
    if (heute == 0) {
        farbe_heute = '#00FF00';
    } else if (heute == 1) {
        farbe_heute = '#FFFF00';
    } else if (heute == 2) {
        farbe_heute = '#FFCC00';
    } else if (heute == 3) {
        farbe_heute = '#FF9900';
    } else if (heute == 4) {
        farbe_heute = '#FF6600';
    } else if (heute == 5) {
        farbe_heute = '#FF3300';
    } else if (heute == 6) {
        farbe_heute = '#FF0000';
    }
    // Berechnung Pollenflug morgen
    if (morgen == 0) {
        farbe_morgen = '#00FF00';
    } else if (morgen == 1) {
        farbe_morgen = '#FFFF00';
    } else if (morgen == 2) {
        farbe_morgen = '#FFCC00';
    } else if (morgen == 3) {
        farbe_morgen = '#FF9900';
    } else if (morgen == 4) {
        farbe_morgen = '#FF6600';
    } else if (morgen == 5) {
        farbe_morgen = '#FF3300';
    } else if (morgen == 6) {
        farbe_morgen = '#FF0000';
    }
    // Setze die Daten zusammen
    html = ['<tr><td><b>',name,'</b>','</td><td ALIGN="CENTER"><font size="3" color=',farbe_heute,'>●</font></td><td ALIGN="CENTER"><font size="3" color=',farbe_morgen,'>●</font></td></tr>'].join('');
    return html;
}

Ergebnis sieht dann so aus.

[Ein ehemaliger Benutzer]

@haumichel Sry für meine späte Rückmeldung, war ewig nicht mehr im Forum... soweit ich mich erinnern kann war das folgende: https://github.com/cbulock/lovelace-battery-entity/blob/master/README.md

[MaHzeL]

@m1r0o
Hallo,
Darf ich fragen wie ich die App Header Toolbar Farbe ändern kann?
Die ist immer dieses Standard blau.
Trotz des Parameters im Theme
Header app-header-background-color:

Bitte um Hilfe. Danke

[Feuersturm]

Hallo zusammen,

ich bin gerade dabei die "Willkommensseite" von der ioBroker Doku zu überarbeiten (https://forum.iobroker.net/topic/51919/brainstorming-doku-abschnitt-willkommen/11)

Ich bin aktuell dabei das Kapitel "Visualisierung" zu überarbeiten.
Den aktuellen Entwurfsstand für Lovelace findet ihr hier:
https://github.com/Feuer-sturm/ioBroker.docs/blob/FS-welcome/docs/de/README.md#lovelace

Ich suche weiteren Input für die Doku und würde mich über Rückmeldungen zu den folgenden Themen freuen:

• Kurzbeschreibung / Merkmale von Lovelace ( @Garfonso Kannst du hier unterstützen?)
• Eure Lovelace Views welche in die Doku als Beispiel eingettet werden können und einem Besucher helfen einen ersten Eindruck von Lovelace zu bekommen

[David G.]

@feuersturm sagte in Zeigt her eure Lovelace-Visualisierung:

Eure Lovelace Views welche in die Doku als Beispiel eingettet werden können und einem Besucher helfen einen ersten Eindruck von Lovelace zu bekommen

Meine kannst du gerne verwenden. Kann die Screenshots auch am PC neu machen.
Die Frage ist, ob custom-cards verwendet werden dürfen.
Ist "Out of the Box" eben nicht möglich, was Anfänger beim testen irritieren könnte.

[Garfonso]

@feuersturm said in Zeigt her eure Lovelace-Visualisierung:

Kurzbeschreibung / Merkmale von Lovelace ( @Garfonso Kannst du hier unterstützen?)

Mein erster Vorschlag wäre:

Mit diesem Adapter kann die HomeAssistant UI Lovelace für ioBroker genutzt werden. Lovelace ist responsive, passt sich also automatisch an das Display an (PC, Tablet, Smartphone, ...). Es lassen sich einfach hübsche UIs erstellen und man kann sich an vielen Beispielen aus der HomeAssistant Welt inspirieren lassen. Der Editor ist in die UI integriert und weitgehend WYSIWYG (What you see is what you get). Gleichzeitig erlauben die Verwendung von custom cards und der YAML Editor auch die Umsetzung von komplexen Wünschen.

Der Adapter verwendet das Geräte-Konzept des ioBroker und nutzt die Informationen daraus um verschiedene States zu Geräten zusammen zu fügen, die dann vom UI automatisch als eins dargestellt werden und so intuitiv werden können, Beispielsweise Lampen mit an/aus, Helligkeit und Farbe oder Thermostate / Klimaanlagen.

[Feuersturm]

@garfonso sagte in Zeigt her eure Lovelace-Visualisierung:

Der Adapter verwendet das Geräte-Konzept des ioBroker und nutzt die Informationen daraus um verschiedene States zu Geräten zusammen zu fügen, die dann vom UI automatisch als eins dargestellt werden und so intuitiv werden können, Beispielsweise Lampen mit an/aus, Helligkeit und Farbe oder Thermostate / Klimaanlagen.

Ich persönlich finde diesen Absatz noch etwas schwer verständlich für jemanden der bisher noch keine Berührungen zu ioBroker hat. Kann man das etwas vereinfachen? Was genau ist das "Geräte-Konzept" für dich?
Ist die Kernaussage, dass der Adapter automatisch die in ioBroker bekannten Geräte (wie z.B. eine Lampe) erkennt inkl. ihrer Raumzuordnung und Datenpunkte/States und hierfür eine einfache Steuerungsmöglichkeit "Lampe ein/aus" anbietet?

[Garfonso]

@feuersturm

Es wäre halt gut, wenn das Geräte-Konzept an prominenter Stelle erläutert würde. ;-)

Es geht im Grunde um alles, was sich im Geräte-Tab abspielt und was auch iot und material nutzen. Wenn alles gut läuft (insbesondere, wenn die Adapter in Ordnung sind oder das leisten können), dann ist es, wie du sagst, dass ioBroker automatisch die Geräte erkennt. Wenn nicht (z.B. weil der Adapter nicht die richtigen rollen vergibt oder Geräte nicht identifizieren kann, wie z.B. KNX oder mqtt, muss der User leider von Hand nacharbeiten mit alias-Geräten).

Ich hänge nicht an der Formulierung. Ich bin mir aber nicht ganz sicher, wie man es schreiben soll, dass es verständlich ist. Im Grunde will ich damit auch sagen, dass man bei einem komplexen Gerät nicht für jeden State von Hand irgendwas tun muss, sondern das automatisch in lovelace reinkommt und sich da gut steuern lässt mit den vorhandenen Karten. Z.B. bei einer Lampe mit an/aus, Helligkeit, Farbe reicht es, wenn diese vom type-detector erkannt wird und raum & funktion zugewiesen hat, dann taucht sie als Lampe auf und alle Optionen können gesteuert werden. Das ist ja z.B. in vis deutlich anders.

[Zeptran]

Hallo zusammen,
da es leider nur sehr wenige Beispiel der Lovelace Vis hier im Forum und Generell unter IoBroker gibt wollte ich nun auch mal meine Vorstellen.
Die Ansicht hier sieht etwas verzerrt und Komisch aus da das Ganze auf ein Tablet Optimiert ist.

Startseite
Startseite der Übersicht mit PV-Anlage, Müll, Anwesenheit und die Steuerung fürs Außenwasser:![Startseite2.png]

Bewässerung
Übersicht über die Bewässerungssteuerung und Manuelles laufen lassen mit dem Adapter Sprinklecontrol:

Staubsauger
Übersicht über den Staubsauger Roboter, leider absolut nicht optimal. Bekomme die Lovelace Karten für die Valetudo Sauger nicht zum laufen da diese alle entities in einer gebündelt haben wollen, mit verschiedenen Attributen dann.
Ist aktuell über ein hier eingebaute Vis gelöst, soll aber geändert werden da die Ladezeiten auf dem zur Verfügung stehenden Tablet störend sind.

Übersicht
Hier eine Übersicht über das Erdgeschoss mit sämtlichen Temperaturen und den bis jetzt hier Sinnvoll darstellbaren „Smart“ Sachen.

Nicht gezeigtes:
Fahrtwege und Fahrtzeiten mit Google Maps eingebettet

Geplant ist es die Staubsauger Darstellung zu ändern auf etwas Lovelace Natives, falls hier jemand einen Tipp hat für mich sehr gerne….
Ebenfalls ist angedacht den Rasenmäher (Gardena Sileno) einzubinden. Hier gibt es eine sehr schöne Karte für allerdings erfordert diese eine entity mit mehreren Attributen.
Angedacht ist auch eine Visualisierung der Verpassten Anrufe, hier habe ich bis jetzt nur den tr064 Adapter aber noch keine Herangehensweise.

Meine Custom Cards:

Spoiler

banner-card.js
button-card.js
card-mod.js
fold-entity-row.js
layout-card.js
mini-graph-card-bundle.js
slider-entity-row.js
stack-in-card.js
tesla-style-solar-power-card.js

Es sind noch einige mehr installiert als diese aber nicht in nutzbaren Views verwendet.

Für Anregungen und Fragen bin ich offen.

[XBiT]

Hallo, ich stelle mal meine Lovelace Visualisierung vor, sie ist noch nicht fertig wird sie sicher nie :-)

Auf der Startseite sind die wichtigsten Infos zu finden.
Beim Tap auf Fenster, Lichter, Anrufer etc. werden weiter Infos in einem Fenster angezeigt.
die anderen Ansichten sollten selbsterklärend sein.

Home:

Lampen:

Fenster:

Steckdosen:

Temperatur:

Staubsauger:

Sonos:

TV:

Synology&Router:

Heizung:

Tankstellen:

Iobroker:

Verwendete custom Karten:

Spoiler

custom:simple-clock-card
custom:vertical-stack-in-card
custom:button-card
custom:fold-entity-row
custom:simple-thermostat
custom:mini-graph-card
custom:mini-media-player

[MCU]

@zeptran Kannst du bitte erklären, wie du die PV-Anzeige integriert hast? Danke.

[David G.]

@mcu

Das ist die https://github.com/reptilex/tesla-style-solar-power-card