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

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Zeigt her eure Lovelace-Visualisierung

    This topic has been deleted. Only users with topic management privileges can see it.
    • 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
                                          • G
                                            gyle @Zeptran last edited by

                                            @zeptran

                                            hast du mit apex-chats zufällig auch mal ausprobiert ob man das in dieser Form hinbekommt?
                                            3d4fb3c0-0f24-4716-bd23-c6519dbf3896-grafik.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            490
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            template vis
                                            31
                                            98
                                            29878
                                            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