Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Zeigt her eure Lovelace-Visualisierung

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Zeigt her eure Lovelace-Visualisierung

    This topic has been deleted. Only users with topic management privileges can see it.
    • David G.
      David G. @wizard2010 last edited by

      @wizard2010

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

      1 Reply Last reply Reply Quote 0
      • David G.
        David G. last edited by 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.

        Screenshot_20210206-135135_Fully Kiosk Browser.jpg

        Screenshot_20210206-135122_Fully Kiosk Browser.jpg

        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 ^^.)

        Screenshot_20210206-135156_Fully Kiosk Browser.jpg

        Screenshot_20210206-135215_Fully Kiosk Browser.jpg

        Temperatur

        Hier sollte sich alles selber erklären.

        Screenshot_20210206-135228_Fully Kiosk Browser.jpg

        Multimedia

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

        Screenshot_20210206-135322_Fully Kiosk Browser.jpg

        Screenshot_20210206-135241_Fully Kiosk Browser.jpg

        Lichtsteuerung

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

        Screenshot_20210206-135329_Fully Kiosk Browser.jpg

        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.

        Screenshot_20210206-135647_Fully Kiosk Browser.jpg

        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.

        JPEG_20210206_133938_4528894568156670496.jpg

        Verbraucherübersicht

        Screenshot_20210206-135339_Fully Kiosk Browser.jpg

        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.

        Screenshot_20210206-135349_Fully Kiosk Browser.jpg

        Screenshot_20210206-135344_Fully Kiosk Browser.jpg

        Anwesenheit

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

        JPEG_20210206_133815_7437582055055507556.jpg

        Netzwerk

        Alles rund ums Netzwerk.

        Screenshot_20210206-135359_Fully Kiosk Browser.jpg

        Mein YAML-Code

        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

        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

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

        1 Reply Last reply Reply Quote 1
        • H
          haumichel @Guest last edited by

          @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

          ? 1 Reply Last reply Reply Quote 0
          • dontobi
            dontobi last edited by

            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.
            4dfb5051-0946-4ba9-815f-c3f5edc29217-image.png

            1 Reply Last reply Reply Quote 1
            • ?
              A Former User @haumichel last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • M
                MaHzeL @M1R0O last edited by

                @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

                1 Reply Last reply Reply Quote 0
                • Feuersturm
                  Feuersturm last edited by 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. Garfonso 2 Replies Last reply Reply Quote 1
                  • David G.
                    David G. @Feuersturm last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • Garfonso
                      Garfonso Developer @Feuersturm last edited by

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

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

                          1 Reply Last reply Reply Quote 0
                          • Z
                            Zeptran last edited by

                            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]
                            Startseite1.png

                            Startseite2.png

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

                            Bewässerung2.png

                            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.

                            Robi.png

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

                            Grundriss.png

                            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:

                            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.

                            M Z 2 Replies Last reply Reply Quote 2
                            • XBiT
                              XBiT @Tirador last edited by 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:
                              home.png

                              Lampen:
                              Lampen.png

                              Fenster:
                              Fenster.png

                              Steckdosen:
                              Steckdosen.png

                              Temperatur:
                              Temperatur.png

                              Staubsauger:
                              Sauger.png

                              Sonos:
                              Sonos.png

                              TV:
                              TV.png

                              Synology&Router:
                              Synology.png

                              Heizung:
                              Heizung.png

                              Tankstellen:
                              Tankstelle.png

                              Iobroker:
                              iobroker.png

                              Verwendete custom Karten:


                              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

                              T 1 Reply Last reply Reply Quote 3
                              • M
                                MCU @Zeptran last edited by MCU

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

                                David G. 1 Reply Last reply Reply Quote 0
                                • David G.
                                  David G. @MCU last edited by

                                  @mcu

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

                                  1 Reply Last reply Reply Quote 2
                                  • Z
                                    Zeptran @Zeptran last edited by

                                    @zeptran

                                    So in meiner Vis hat sich in letzter Zeit Extrem viel getan, unteranderem sind zwei Tablets die die Vis darstellen dazugekommen.

                                    Deswegen gibt es hier jetzt ein Update zu meiner Vis

                                    Die Startseite hat sich in vielen Punkten geändert:
                                    Lovelace_Card_Mod_so_soll_es_richtig.png

                                    Der Garagen Öffnungsverlauf ist leider nicht unter dem Zustand Sichtbar da die Screenshots per Fullybrowser diesen aus Gründen nicht anzeigt.

                                    Diese ist genau so angepasst das auf der Ersten Seite nicht gescrollt werden kann.
                                    Hierzu habe ich mit der Card-Mod Karte den Rahmen der Markdown Elemente angepasst. Dafür braucht man folgenden Code:

                                    card_mod:
                                      style: |
                                        ha-markdown.no-header {
                                          padding-top: 10px !important;
                                        }
                                        ha-markdown {
                                          padding: 0px 16px 16px;
                                            padding-bottom: 10px !important;
                                        }
                                    

                                    Ab hier kommen die Screenshots jetzt vom PC da auf den Tablets auf diesen Seiten gescrollt werden muss.

                                    Die Seite der Bewässerung hat sich auch in einigen Punkten verändert
                                    54a6828d-7bfc-4419-8cef-4b54df70a206-image.png

                                    Neu dazu gekommen ist eine komplette Steuerung der Außen Verschattung, hierzu habe ich ebenfalls ein eignes Skript geschrieben das je nach Sonnenstand, Außentemperatur, Solarleistung im Durchschnitt der letzten 10 Minuten (Hab keinen Helligkeitssensor) die Verschattung verfährt.
                                    Ebenfalls musste ich die nicht eindeutigen Werte der Warema Steuerung Umrechnen und in eigene Datenpunkte für die Vis stecken.
                                    75ba63b7-1375-4638-be43-2088807fdc87-image.png

                                    Hier gibt es nun eine andere Wettervorhersage, den Pollenflug in Niedersachsen und den Verlauf der Innen und Außentemperatur:
                                    Lovelace_wetter_ansicht.png

                                    Eine eigene Solar Übersichtsseite ist ebenfalls aufgebaut worden:
                                    792033cc-c76d-4ed1-96d3-1590f978b543-image.png
                                    Es ist inzwischen unpraktisch geworden zwischen Grafana und Lovelace immerhin und her zu wechseln daher ist es letztendlich auch hier gelandet

                                    Auf dieser Seite gibt es einen Überblick über die Fußbodenheizung Vorlauf und Rücklauftemperaturen sowie das Warmwasser:
                                    a94ea288-5475-47ca-818a-a13ab3da9d5b-image.png

                                    Die Staubsauger Seite ist komplett rausgeflogen und hier wird nun einfach das Valetudo Interface angezeigt:
                                    10a691bd-b6e9-4a40-ad5c-902b6828c89c-image.png

                                    Falls Interesse besteht stelle ich gerne Configs zur Verfügung.

                                    XBiT G H 3 Replies Last reply Reply Quote 2
                                    • XBiT
                                      XBiT @Zeptran last edited by

                                      @zeptran

                                      gefällt mir, schaut gut aus

                                      1 Reply Last reply Reply Quote 1
                                      • G
                                        gyle @Zeptran last edited by

                                        @zeptran könntest du mir bitte die config der Solar-Ansicht zu Verfügung stellen?
                                        mich interessieren vor allem die Diagramme...

                                        Danke

                                        Z 1 Reply Last reply Reply Quote 0
                                        • Z
                                          Zeptran @gyle last edited by

                                          @gyle

                                          Moin,

                                          ich habe das ganze immer mit vertical-stack Karten in die Spalten so aufgeteilt das es eben gut aussieht und die gleichen Sachen immer untereinander sind.
                                          Für die Graphen verwende ich ApexCharts.

                                          Ich verwende hier den Kostal Adapter der mir mit Skripten Daten teilweise so umrechnet das man damit was anfangen kann. Wird bei dir wahrscheinlich anders ankommen, muss dann eben angepasst werden.

                                          Das hier ist einmal die Mittlere komplette Spalte:

                                          type: vertical-stack
                                          cards:
                                            - type: horizontal-stack
                                              cards:
                                                - type: sensor
                                                  entity: sensor.PV_Anlage_EnergyHomePvDay
                                                  detail: 0
                                                  name: Eigenverbrauch
                                                - type: sensor
                                                  entity: sensor.PV_Anlage_EnergyHomeGridDay
                                                  detail: 2
                                                  name: Netz Verbrauch
                                            - type: markdown
                                              content: |
                                                # <center>PV Leistung</center>
                                              card_mod:
                                                style: |
                                                  ha-markdown.no-header {
                                                    padding-top: 10px !important;
                                                  }
                                                  ha-markdown {
                                                    padding: 0px 16px 16px;
                                                      padding-bottom: 10px !important;
                                                  }
                                            - type: horizontal-stack
                                              cards:
                                                - type: custom:apexcharts-card
                                                  header:
                                                    show: true
                                                    title: ' '
                                                    show_states: true
                                                    colorize_states: true
                                                  apex_config:
                                                    chart:
                                                      height: 350
                                                      zoom:
                                                        type: x
                                                        enabled: true
                                                        autoScaleYaxis: false
                                                      toolbar:
                                                        show: true
                                                        autoSelected: zoom
                                                      xaxis.type: datetime
                                                    stroke:
                                                      width: 1
                                                      curve: smooth
                                                  series:
                                                    - entity: sensor.PV_Anlage_Pv_P
                                                      name: PV Leistung
                                                      group_by:
                                                        func: avg
                                                        duration: 5min
                                                    - entity: sensor.PV_Anlage_Leistung_Stromnetz
                                                      name: Netz Leistung
                                                      group_by:
                                                        func: avg
                                                        duration: 5min
                                                    - entity: sensor.PV_Anlage_Home_P
                                                      name: Haus Verbrauch
                                                      group_by:
                                                        func: avg
                                                        duration: 5min
                                            - type: markdown
                                              content: |
                                                # <center>Erträge</center>
                                              card_mod:
                                                style: |
                                                  ha-markdown.no-header {
                                                    padding-top: 10px !important;
                                                  }
                                                  ha-markdown {
                                                    padding: 0px 16px 16px;
                                                      padding-bottom: 10px !important;
                                                  }
                                            - type: horizontal-stack
                                              cards:
                                                - type: custom:apexcharts-card
                                                  header:
                                                    show: true
                                                    title: ' '
                                                    show_states: true
                                                    colorize_states: true
                                                  apex_config:
                                                    chart:
                                                      height: 350
                                                      zoom:
                                                        type: x
                                                        enabled: true
                                                        autoScaleYaxis: false
                                                      toolbar:
                                                        show: true
                                                        autoSelected: zoom
                                                      xaxis.type: datetime
                                                  series:
                                                    - entity: sensor.Pv_Anlage_PV_Ertrag_heute
                                                      name: PV Ertrag
                                                      type: column
                                                      group_by:
                                                        func: max
                                                        duration: 23.9h
                                                    - entity: sensor.PV_Anlage_EnergyToGridDay
                                                      name: Einspeistung
                                                      type: column
                                                      group_by:
                                                        func: max
                                                        duration: 23.9h
                                                    - entity: sensor.PV_Anlage_EnergyHomePvDay
                                                      name: Eigenverbrauch
                                                      type: column
                                                      group_by:
                                                        func: max
                                                        duration: 23.9h
                                                    - entity: sensor.PV_Anlage_EnergyHomeGridDay
                                                      name: Netzbezug
                                                      type: column
                                                      group_by:
                                                        func: max
                                                        duration: 23.9h
                                                  graph_span: 8d
                                                  span:
                                                    end: day
                                          

                                          Damit das ganze etwas einfach zu kopieren ist wenn du nur Interesse an den Diagrammen hast kommen die auch noch einmal alleine:
                                          Hier sind die Leistungsverläufe des Tages drinnen:

                                          type: custom:apexcharts-card
                                          header:
                                            show: true
                                            title: ' '
                                            show_states: true
                                            colorize_states: true
                                          apex_config:
                                            chart:
                                              height: 350
                                              zoom:
                                                type: x
                                                enabled: true
                                                autoScaleYaxis: false
                                              toolbar:
                                                show: true
                                                autoSelected: zoom
                                              xaxis.type: datetime
                                            stroke:
                                              width: 1
                                              curve: smooth
                                          series:
                                            - entity: sensor.PV_Anlage_Pv_P
                                              name: PV Leistung
                                              group_by:
                                                func: avg
                                                duration: 5min
                                            - entity: sensor.PV_Anlage_Leistung_Stromnetz
                                              name: Netz Leistung
                                              group_by:
                                                func: avg
                                                duration: 5min
                                            - entity: sensor.PV_Anlage_Home_P
                                              name: Haus Verbrauch
                                              group_by:
                                                func: avg
                                                duration: 5min
                                          

                                          Hier ist dann einmal der Ertrag / Verbrauch der letzten acht Tage:

                                          type: custom:apexcharts-card
                                          header:
                                            show: true
                                            title: ' '
                                            show_states: true
                                            colorize_states: true
                                          apex_config:
                                            chart:
                                              height: 350
                                              zoom:
                                                type: x
                                                enabled: true
                                                autoScaleYaxis: false
                                              toolbar:
                                                show: true
                                                autoSelected: zoom
                                              xaxis.type: datetime
                                          series:
                                            - entity: sensor.Pv_Anlage_PV_Ertrag_heute
                                              name: PV Ertrag
                                              type: column
                                              group_by:
                                                func: max
                                                duration: 23.9h
                                            - entity: sensor.PV_Anlage_EnergyToGridDay
                                              name: Einspeistung
                                              type: column
                                              group_by:
                                                func: max
                                                duration: 23.9h
                                            - entity: sensor.PV_Anlage_EnergyHomePvDay
                                              name: Eigenverbrauch
                                              type: column
                                              group_by:
                                                func: max
                                                duration: 23.9h
                                            - entity: sensor.PV_Anlage_EnergyHomeGridDay
                                              name: Netzbezug
                                              type: column
                                              group_by:
                                                func: max
                                                duration: 23.9h
                                          graph_span: 8d
                                          span:
                                            end: day
                                          

                                          Die 23,9 Stunden Dauer musste ich nehmen da die Tagesdaten die aus dem Adapter kommen erst um 0:05 wieder bei null anfangen.

                                          Und dann ist hier noch einmal der Batterie Verlauf:

                                          type: custom:apexcharts-card
                                          header:
                                            show: true
                                            title: ' '
                                            show_states: true
                                            colorize_states: true
                                          apex_config:
                                            chart:
                                              height: 350
                                              zoom:
                                                type: x
                                                enabled: true
                                                autoScaleYaxis: false
                                              toolbar:
                                                show: true
                                                autoSelected: zoom
                                              xaxis.type: datetime
                                            stroke:
                                              width: 1
                                              curve: smooth
                                          yaxis:
                                            - id: first
                                              decimals: 0
                                              apex_config:
                                                tickAmount: 4
                                            - id: second
                                              opposite: true
                                              decimals: 0
                                              show: false
                                              apex_config:
                                                tickAmount: 4
                                          series:
                                            - entity: sensor.PV_Anlage_battery_P
                                              name: Batterie Leistung
                                              yaxis_id: first
                                              group_by:
                                                func: avg
                                                duration: 2min
                                            - entity: sensor.PV_Anlage_HomeBat_P
                                              name: Verbrauch aus Batterie
                                              yaxis_id: first
                                              group_by:
                                                func: avg
                                                duration: 2min
                                            - entity: sensor.PV_Anlage_battery_SoC
                                              name: Batterie SoC
                                              yaxis_id: second
                                              group_by:
                                                func: avg
                                                duration: 2min
                                          

                                          Falls es noch mehr Interesse gibt an Configs gibt stelle ich die gerne zur Verfügung.
                                          Bin echt begeistert von Lovelace mir gehen aber langsam die Ideen aus was und wie ich Sachen noch visualisieren kann.

                                          Finde es leider schade das der Thread hier nicht so aktiv genutzt wird wie er es meiner Ansicht nach Verdient.

                                          G 2 Replies Last reply Reply Quote 0
                                          • G
                                            gyle @Zeptran last edited by gyle

                                            @zeptran danke
                                            gut: dann zeige ich auch mal was ich bisher habe....(teilweise noch experimentell)
                                            technik.png sauger.png rolladen.png pv.png home_LI.jpg eg.png außen.png

                                            Iccube W 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            542
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            template vis
                                            32
                                            109
                                            31766
                                            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