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.
    • W
      wizard2010 @David G. last edited by

      @david-g
      @M1R0O

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

      Vielen Dank.

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

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

        dark:
          # Background image
          lovelace-background: 'center / cover no-repeat url("/local/night.jpg") fixed'
        
          # Colors
          text-color: '#DADADB'
          text-medium-light-color: '#A0A2A8'
          text-medium-color: '#80828A'
          text-dark-color: '#6A6B74'
          accent-color: '#008bef'
          accent-medium-color: '#2484C9'
          background-color: '#3b4049'
          background-color-2: '#484E59'
          background-card-color: '#434952'
          border-color: '#383C46'
        
          # Header
          app-header-background-color: '#363941'
        
          # Text
          primary-color: 'var(--text-color)'
          text-primary-color: 'var(--text-color)'
        
          # Left Menu
          paper-listbox-background-color: 'var(--background-color)'
          sidebar-icon-color: 'var(--text-medium-color)'
          sidebar-selected-icon-color: 'var(--text-medium-light-color)'
          sidebar-selected-text-color: 'var(--text-color)'
        
          # UI
          paper-card-header-color: 'var(--text-color)'
          primary-background-color: 'var(--background-color)'
          mdc-theme-primary: 'var(--accent-medium-color)'
          card-background-color: 'var(--background-card-color)'
        
          # Card
          paper-card-background-color: 'var(--background-card-color)'
          dark-primary-color: 'var(--text-color)'
          primary-text-color: 'var(--text-color)'
          paper-listbox-color: 'var(--text-color)'
          light-primary-color: 'var(--text-dark-color)'
          secondary-text-color: 'var(--text-medium-color)'
          disabled-text-color: 'var(--text-dark-color)'
          paper-dialog-button-color: 'var(--text-color)'
          secondary-background-color: 'var(--background-color-2)'
        
          # Icons
          paper-item-icon-color: 'var(--text-dark-color)'
          paper-item-icon-active-color: 'var(--accent-color)'
        
          # Switches
          switch-checked-button-color: 'var(--text-medium-light-color)'
          switch-unchecked-button-color: 'var(--text-medium-light-color)'
          switch-checked-track-color: '#009FFF'
          switch-unchecked-track-color: '#767682'
        
          # Slider
          paper-slider-active-color: 'var(--accent-color)'
          paper-slider-knob-color: 'var(--text-medium-light-color)'
          paper-slider-container-color: 'var(--text-dark-color)'
          paper-slider-knob-start-color: 'var(--text-medium-light-color)'
        
          # Badges
          label-badge-text-color: 'var(--text-color)'
          label-badge-background-color: 'rgba(54, 57, 65, 0.6)'
        
          # Shadows
          ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
        
          # HACS
          hacs-badge-color: 'var(--accent-color)'
          hacs-status-installed: 'var(--text-color)'
          hacs-status-pending-restart: 'var(--text-dark-color)'
          hacs-status-pending-update: 'var(--accent-color)'
          
        darkOWN:
          #Background image
          lovelace-background: center / cover no-repeat url("/cards/background.jpg") fixed
          mdc-theme-surface: var(--primary-background-color) 
        
          # Colors
          text-color: '#DADADB'
          text-medium-light-color: '#A0A2A8'
          text-medium-color: '#80828A'
          text-dark-color: '#6A6B74'
          accent-color: 'rgba(236, 237, 238)'
          accent-medium-color: 'rgba(236, 237, 238)'
          background-color: '#3b4049'
          background-color-2: 'rgba(72, 78, 89, 0.1)'
          background-card-color: 'rgba(67, 73, 82, 0.1)'  
          #border-color: '#383C46'
        
          # Header
          app-header-background-color: '#363941'
        
          # Text
          primary-color: 'var(--text-color)'
          text-primary-color: 'var(--text-color)'
        
          # Left Menu
          paper-listbox-background-color: 'var(--background-color)'
          sidebar-icon-color: 'var(--text-medium-color)'
          sidebar-selected-icon-color: 'var(--text-medium-light-color)'
          sidebar-selected-text-color: 'var(--text-color)'
        
          # UI
          paper-card-header-color: 'var(--text-color)'
          primary-background-color: 'var(--background-color)'
          mdc-theme-primary: 'var(--accent-medium-color)'
          card-background-color: 'var(--background-card-color)'
        
          # Card
          paper-card-background-color: 'var(--background-card-color)'
          dark-primary-color: 'var(--text-color)'
          primary-text-color: 'var(--text-color)'
          paper-listbox-color: 'var(--text-color)'
          light-primary-color: 'var(--text-dark-color)'
          secondary-text-color: 'var(--text-medium-color)'
          disabled-text-color: 'var(--text-dark-color)'
          paper-dialog-button-color: 'var(--text-color)'
          secondary-background-color: 'var(--background-color-2)'
        
          # Icons
          paper-item-icon-color: 'var(--text-dark-color)'
          paper-item-icon-active-color: 'var(--accent-color)'
        
          # Switches
          switch-checked-button-color: 'var(--text-medium-light-color)'
          switch-unchecked-button-color: 'var(--text-medium-light-color)'
          switch-checked-track-color: 'rgba(236, 237, 238)'
          switch-unchecked-track-color: 'rgba(236, 237, 238)'
        
          # Slider
          paper-slider-active-color: 'var(--accent-color)'
          paper-slider-knob-color: 'var(--text-medium-light-color)'
          paper-slider-container-color: 'var(--text-dark-color)'
          paper-slider-knob-start-color: 'var(--text-medium-light-color)'
        
          # Badges
          label-badge-text-color: 'var(--text-color)'
          label-badge-background-color: 'rgba(54, 57, 65, 0.6)'
        
          # Shadows
          ha-card-box-shadow: 'inset 1px 1px 1px 2px var(--border-color)'
        
          # HACS
          hacs-badge-color: 'var(--accent-color)'
          hacs-status-installed: 'var(--text-color)'
          hacs-status-pending-restart: 'var(--text-dark-color)'
          hacs-status-pending-update: 'var(--accent-color)'
        
        W 1 Reply Last reply Reply Quote 1
        • W
          wizard2010 @M1R0O last edited by

          Hi @m1r0o,

          Vielen Dank 🙂

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

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

            @wizard2010

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

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

              Hallo an alle,

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

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

              Screenshot_20210206-135135_Fully Kiosk Browser.jpg

              Screenshot_20210206-135122_Fully Kiosk Browser.jpg

              Sicherheit

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

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

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

              Screenshot_20210206-135156_Fully Kiosk Browser.jpg

              Screenshot_20210206-135215_Fully Kiosk Browser.jpg

              Temperatur

              Hier sollte sich alles selber erklären.

              Screenshot_20210206-135228_Fully Kiosk Browser.jpg

              Multimedia

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

              Screenshot_20210206-135322_Fully Kiosk Browser.jpg

              Screenshot_20210206-135241_Fully Kiosk Browser.jpg

              Lichtsteuerung

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

              Screenshot_20210206-135329_Fully Kiosk Browser.jpg

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

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

              Die HmIP und Sonoff Tabellen generiere ich komplett in Blockly.

              Screenshot_20210206-135647_Fully Kiosk Browser.jpg

              Kalender

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

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

              JPEG_20210206_133938_4528894568156670496.jpg

              Verbraucherübersicht

              Screenshot_20210206-135339_Fully Kiosk Browser.jpg

              Fernsehprogramm

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

              Screenshot_20210206-135349_Fully Kiosk Browser.jpg

              Screenshot_20210206-135344_Fully Kiosk Browser.jpg

              Anwesenheit

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

              JPEG_20210206_133815_7437582055055507556.jpg

              Netzwerk

              Alles rund ums Netzwerk.

              Screenshot_20210206-135359_Fully Kiosk Browser.jpg

              Mein YAML-Code

              title: Home
              views:
               - title: Garage
                 path: garage
                 icon: 'mdi:garage'
                 panel: false
                 badges: []
                 cards:
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: picture-entity
                             entity: binary_sensor.Sensor_Garage
                             show_name: false
                             show_state: false
                             state_image:
                               'on': /cards/garage_auf.png
                               'off': /cards/garage_zu.png
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                       - type: vertical-stack
                         cards:
                           - type: entity-button
                             entity: switch.Antrieb_Garage
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: false
                             show_name: true
                             name: Garage betätigen
               - title: Sicherheit
                 path: sicherheit
                 icon: 'mdi:home-lock-open'
                 panel: false
                 badges: []
                 cards:
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: picture
                             image: /cards/security.png
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                             title: Offene Fenster und Türen
                       - type: vertical-stack
                         cards:
                           - type: 'custom:slideshow-card'
                             fill: false
                             arrow_color: White
                             arrow_opacity: 1
                             auto_play: false
                             auto_delay: 4
                             style:
                               border-radius: 25px
                             cards:
                               - type: entity-filter
                                 entities:
                                   - entity: binary_sensor.Sensor_Garage
                                     name: Garagentor
                                     icon: 'mdi:garage'
                                   - entity: binary_sensor.Schloss_Haustuere
                                     name: Haustürschloss
                                     icon: 'mdi:door'
                                   - entity: binary_sensor.Fensterkontakt_Kueche_1
                                     name: Küchenfenster
                                     icon: 'mdi:window-closed-variant'
                                   - entity: binary_sensor.Fensterkontakt_Bad
                                     name: Badezimmerfenster
                                     icon: 'mdi:window-closed-variant'
                                 state_filter:
                                   - 'on'
                               - type: entities
                                 title: Alles
                                 entities:
                                   - entity: binary_sensor.Schloss_Haustuere
                                     name: Haustürschloss
                                     icon: 'mdi:door'
                                   - entity: binary_sensor.Sensor_Garage
                                     name: Garage
                                     icon: 'mdi:garage'
                                   - entity: binary_sensor.Fensterkontakt_Kueche_1
                                     name: Küchenfesnter
                                     icon: 'mdi:window-closed-variant'
                                   - entity: binary_sensor.Fensterkontakt_Bad
                                     name: Badezimmerfenster
                                     icon: 'mdi:window-closed-variant'
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: markdown
                         content: '---'
                         title: Alarmanlage
                       - type: horizontal-stack
                         cards:
                           - type: markdown
                             content: |-
                               **Aktivierungsmodus**
                               {0_userdata.0.Alarmanlage.Aktivierter_Modus} 
                           - type: markdown
                             content: |-
                               **Schutzmodus**
                               {0_userdata.0.Alarmanlage.Aktivierter_Alarmmodus} 
                       - type: entities
                         entities:
                           - entity: input_text.pin_vis
                             name: PIN
                             icon: 'mdi:key'
                         title: 'Einstellungen bearbeiten '
                       - type: conditional
                         conditions:
                           - entity: input_text.pin_vis
                             state: '12345'
                         card:
                           type: entities
                           entities:
                             - entity: switch.immer_alarmieren
                               name: Schutzmodus
                               icon: 'mdi:home'
                       - type: conditional
                         conditions:
                           - entity: input_text.pin_vis
                             state: '12345'
                         card:
                           type: entities
                           entities:
                             - entity: switch.manueller_modus
                               name: Manueller Modus
                               icon: 'mdi:hand'
                       - type: conditional
                         conditions:
                           - entity: input_text.pin_vis
                             state: '12345'
                         card:
                           type: entities
                           entities:
                             - entity: switch.anlage_scharf
                               name: aktivieren / deaktivieren
                               icon: 'mdi:security'
                   - type: picture-entity
                     entity: camera.Test
                     aspect_ratio: 70%
                     show_name: true
                     show_state: false
                     name: Kinderzimmer Ben-Henri
                   - type: picture-entity
                     entity: camera.Kamera_Wilke_Eingang
                     aspect_ratio: 70%
                     show_name: true
                     show_state: false
                     name: Wilke Eingang
               - title: Heizung
                 path: heizung
                 icon: 'mdi:thermometer'
                 badges: []
                 cards:
                   - type: 'custom:slideshow-card'
                     fill: true
                     arrow_color: White
                     arrow_opacity: 0.5
                     auto_play: false
                     auto_delay: 4
                     border-radius: 25px
                     style: |
                       ha-card {
                          --secondary-text-color: #f59042 !important;
                       }
                     cards:
                       - type: weather-forecast
                         entity: weather.Hilchenbach__Hilchenbach_Deutschland_
                         name: Hilchenbach
                         show_forecast: true
                       - type: weather-forecast
                         entity: weather.Haiger__Haiger_Deutschland_
                         name: Haiger
                         show_forecast: true
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: thermostat
                             entity: climate.Thermostat_Wohnbereich
                             name: 'Wohnzimmer '
                             style: |
                               ha-card {
                                  --heat-color: #f59042 !important;
                               }
                               round-slider {
                                 --round-slider-bar-color: #f59042 !important;
                               }
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                       - type: horizontal-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_thermo_settings.png
                             elements:
                               - type: image
                                 image: /cards/boost_active.png
                                 entity: switch.Heizung_Wohnbereich_boost
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 28%
                                   width: 10%
                               - type: image
                                 image: /cards/urlaub_active.png
                                 entity: switch.Heizung_Wohnbereich_party
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 72%
                                   width: 10%
                               - type: image
                                 image: /cards/linie_senkrecht.png
                                 entity: binary_sensor.Schloss_Haustuere
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 50%
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: 'custom:simple-thermostat'
                             entity: climate.Heizung_KZ_2
                             step_layout: row
                             name: Ben-Henri
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                       - type: horizontal-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_thermo_settings.png
                             elements:
                               - type: image
                                 image: /cards/boost_active.png
                                 entity: switch.Heizung_KZ_2_BOOST
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 28%
                                   width: 10%
                               - type: image
                                 image: /cards/urlaub_active.png
                                 entity: switch.Heizung_KZ_2_party
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 72%
                                   width: 10%
                               - type: image
                                 image: /cards/linie_senkrecht.png
                                 entity: binary_sensor.Schloss_Haustuere
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 50%
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: 'custom:simple-thermostat'
                             entity: climate.Heizung_Kinderzimmer_1_1
                             step_layout: row
                             name: Hanna Emilia
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                       - type: horizontal-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_thermo_settings.png
                             elements:
                               - type: image
                                 image: /cards/boost_active.png
                                 entity: switch.Heizung_KZ_1_boost
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 28%
                                   width: 10%
                               - type: image
                                 image: /cards/urlaub_active.png
                                 entity: switch.Heizung_KZ_1_party
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 72%
                                   width: 10%
                               - type: image
                                 image: /cards/linie_senkrecht.png
                                 entity: binary_sensor.Schloss_Haustuere
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 50%
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: 'custom:simple-thermostat'
                             entity: climate.Heizung_Bad
                             step_layout: row
                             name: Bad
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                       - type: horizontal-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_thermo_settings.png
                             elements:
                               - type: image
                                 image: /cards/boost_active.png
                                 entity: switch.Heizung_Bad_BOOST
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 28%
                                   width: 10%
                               - type: image
                                 image: /cards/urlaub_active.png
                                 entity: switch.Heizung_Bad_party
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 72%
                                   width: 10%
                               - type: image
                                 image: /cards/linie_senkrecht.png
                                 entity: binary_sensor.Schloss_Haustuere
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 20px
                                   left: 50%
                   - type: 'custom:slideshow-card'
                     fill: false
                     arrow_color: White
                     arrow_opacity: 0.5
                     auto_play: false
                     auto_delay: 4
                     style: null
                     border-radius: 25px
                     cards:
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Wohnzimmer
                         title: Wohnzimmer
                       - type: iframe
                         title: Ben-Henri
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Ben-Henri
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Hannah%20Emilia
                         title: Hannah Emilia
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.Heizung.Bad
                         title: Bad
               - title: Multimedia
                 path: multimedia
                 icon: 'mdi:music'
                 badges: []
                 cards:
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: vertical-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_tr_bose_klein.png
                             elements:
                               - type: image
                                 image: /cards/1.png
                                 entity: switch.BOSE_PRESET_1
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 10%
                                   width: 8%
                               - type: image
                                 image: /cards/2.png
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 entity: switch.BOSE_PRESET_2
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 26%
                                   width: 8%
                               - type: image
                                 image: /cards/3.png
                                 entity: switch.BOSE_PRESET_3
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 42%
                                   width: 8%
                               - type: image
                                 image: /cards/4.png
                                 entity: switch.BOSE_PRESET_4
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 58%
                                   width: 8%
                               - type: image
                                 image: /cards/5.png
                                 entity: switch.BOSE_PRESET_5
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 74%
                                   width: 8%
                               - type: image
                                 image: /cards/6.png
                                 entity: switch.BOSE_PRESET_6
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 50%
                                   left: 90%
                                   width: 8%
                       - type: horizontal-stack
                         cards:
                           - type: markdown
                             content: >-
                               <img src="{0_userdata.0.Multimedia.Bose_1.Cover}" 
                               width="100%">
                           - type: picture-elements
                             image: /cards/bg_1px_tr.png
                             elements:
                               - style:
                                   top: 40%
                                   left: 50%
                                 type: state-label
                                 entity: input_text.Bose_1_Sender
                               - style:
                                   top: 50%
                                   left: 50%
                                 type: state-label
                                 entity: input_text.Bose_1_Titel
                               - style:
                                   top: 20%
                                   left: 50%
                                 type: state-label
                                 entity: input_text.Bose_1_Source
                       - type: vertical-stack
                         cards:
                           - type: entities
                             entities:
                               - type: 'custom:slider-entity-row'
                                 entity: input_number.Bose_1_Volume
                                 full_row: true
                             show_header_toggle: null
                       - type: vertical-stack
                         cards:
                           - type: picture-elements
                             image: /cards/bg_tr_bose_klein.png
                             elements:
                               - type: image
                                 image: /cards/power.png
                                 entity: switch.bose_1_an_aus
                                 state_filter:
                                   'true': brightness(100%) saturate
                                   'false': brightness(100%) saturate(0.0)
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 17px
                                   left: 10%
                                   width: 7%
                               - type: image
                                 image: /cards/usb.png
                                 entity: switch.Bose_1_Source
                                 state_filter:
                                   'true': brightness(100%) saturate(0.0)
                                   'false': brightness(100%) saturate
                                 tap_action:
                                   action: toggle
                                 hold_action:
                                   action: none
                                 style:
                                   top: 15px
                                   left: 90%
                                   width: 7%
               - title: Licht
                 path: ''
                 icon: 'mdi:lightbulb-on-outline'
                 badges: []
                 cards:
                   - type: entities
                     entities:
                       - entity: light.auto_an
                         name: Automatisch einschalten
                         icon: 'mdi:clock'
                       - entity: light.auto_aus
                         name: Automatisch ausschalten
                         icon: 'mdi:clock'
                     show_header_toggle: false
                   - type: entities
                     entities:
                       - entity: light.steckdose_sofa
                         name: Wohnzimmer
                       - entity: light.steckdose_esszimmer
                         name: Esszimmer
                       - entity: light.steckdose_kueche
                         name: Küche
                       - entity: light.steckdose_var_1
                         name: Stern
                       - entity: light.steckdose_var_2
                         name: Kranz
                       - entity: light.steckdose_flur_oben
                         name: Flur oben
                       - entity: light.steckdose_flur_unten
                         name: Flur unten
                     title: Lichter
                     state_color: false
               - title: System
                 path: system
                 icon: 'mdi:cpu-32-bit'
                 badges: []
                 cards:
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: picture
                         image: /cards/cpu.png
                         tap_action:
                           action: none
                         hold_action:
                           action: ''
                       - type: markdown
                         content: '---'
                         title: System
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: markdown
                         content: '---'
                         title: Raspberry
                       - type: horizontal-stack
                         cards:
                           - type: gauge
                             entity: sensor.CPU_Auslastung
                             min: 0
                             max: 100
                             name: CPU
                           - type: gauge
                             entity: sensor.CPU_Temp
                             min: 0
                             max: 100
                             name: CPU-Temp.
                       - type: horizontal-stack
                         cards:
                           - type: gauge
                             entity: sensor.RAM
                             min: 0
                             max: 100
                           - type: gauge
                             entity: sensor.sd_karte_prozent
                             min: 0
                             max: 100
                             name: SD-Karte
                             unit: '%'
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.Pi4
                         aspect_ratio: 50%
                   - type: 'custom:stack-in-card'
                     cards:
                       - type: markdown
                         content: '---'
                         title: CCU
                       - type: horizontal-stack
                         cards:
                           - type: picture-entity
                             entity: input_number.Servicemeldungen_CCU
                             show_name: true
                             show_state: false
                             state_image:
                               '0': /cards/garage_auf.png
                               '1': /cards/1.png
                               '2': /cards/1.png
                               '3': /cards/1.png
                               '4': /cards/1.png
                               '5': /cards/1.png
                               '6': /cards/1.png
                           - type: gauge
                             entity: sensor.Duty_Cycle
                             min: 0
                             max: 100
                             name: Duty Cycle
                           - type: picture-elements
                             elements:
                               - type: state-label
                                 entity: input_text.ccu_an_seit_text
                                 style:
                                   top: 40%
                                   left: 50%
                               - type: state-label
                                 entity: input_text.ccu_uptime
                                 style:
                                   top: 70%
                                   left: 50%
                             image: /cards/bg_tr.png
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.CCU
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: false
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: markdown
                         content: '---'
                         title: USV
                       - type: horizontal-stack
                         cards:
                           - type: gauge
                             entity: sensor.akku_usv
                             min: 0
                             max: 100
                             name: AKKU USV
                             unit: '%'
                           - type: gauge
                             entity: sensor.spannung_usv
                             min: 0
                             name: Spannung
                             max: 15
                             unit: V
                           - type: picture-elements
                             elements:
                               - type: state-label
                                 entity: input_text.letzter_stromausfall_text
                                 style:
                                   top: 40%
                                   left: 50%
                               - type: state-label
                                 entity: input_text.letzter_stromausfall_zeit
                                 style:
                                   top: 70%
                                   left: 50%
                             image: /cards/bg_tr.png
                       - type: iframe
                         url: >-
                           https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.USV
                   - type: markdown
                     content: '{0_userdata.0.VIS.Akkumeldungen.hmip_akku_tabelle}'
                     title: HmIP
                   - type: markdown
                     content: '{0_userdata.0.VIS.Tabellen.Erreichbarkeit_Sonoff}'
                     title: Sonoff
               - title: Termine
                 path: termine
                 icon: 'mdi:calendar'
                 badges: []
                 cards:
                   - type: horizontal-stack
                     cards:
                       - type: markdown
                         content: >-
                           <center><b>Restmüll</b><br><img
                           src="/cards/muell_schwarz.png"><br>
              
                           {0_userdata.0.Muell.Texte_fuer_vis.Restmuell}
                       - type: markdown
                         content: |-
                           <center><b>Gelbersack</b><br><img src="/cards/muell_gelb.png"><br>
                           {0_userdata.0.Muell.Texte_fuer_vis.Gelber_Sack}
                       - type: markdown
                         content: |-
                           <center><b>Papiermüll</b><br><img src="/cards/muell_blau.png"><br>
                           {0_userdata.0.Muell.Texte_fuer_vis.Papiermuell}
                       - type: markdown
                         content: |-
                           <center><b>Biomüll</b><br><img src="/cards/muell_braun.png"><br>
                           {0_userdata.0.Muell.Texte_fuer_vis.Biomuell}
                   - type: markdown
                     content: '{ical.1.data.html}'
                     title: Termine
               - title: Energie
                 path: energie
                 icon: 'mdi:power-socket-jp'
                 badges: []
                 cards:
                   - type: markdown
                     content: >-
                       <font size="5">Waschmaschine
                       {sonoff.0.steckdose_waschmaschine.ENERGY_Power} W </font>
              
                       <table>
                        <tr>
                         <td></td>
                         <td ALIGN="CENTER"><b>2020</b></td>
                         <td ALIGN="CENTER"><b>2021</b></td>
                        </tr>
                        <tr>
                         <td><b>Wäschen ges. </b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.gaenge_vorjahr}</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.gaenge}</td>
                        </tr>
                        <tr>
                         <td><b>Ø pro Tag</b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_tag_vorjahr}</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_tag}</td>
                        </tr>
                       <tr>
              
                       <td><b>Ø pro Monat</b></td>
              
                       <td ALIGN="CENTER">
              
                       {0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_monat_vorjahr}
              
                       </td>
              
                       <td align="Center">
              
                       {0_userdata.0.Zaehlen.Waschmaschine.garnge_pro_monat}
              
                       </td>
                        <tr>
                         <td width=30%><b>Kosten ges.</b></td>
                         <td  ALIGN="CENTER" width=52%>{0_userdata.0.Zaehlen.Waschmaschine.Kosten_ges_Vorjahr} €</td>
                         <td  ALIGN="CENTER" width=52%>{sourceanalytix.0.sonoff__0__steckdose_waschmaschine__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
                        </tr>
                        <tr>
                         <td><b>Ø pro Gang</b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.kosten_pro_gang_vorjahr} €</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Waschmaschine.kosten_pro_gang} €</td>
                        </tr>
                       </table>
                   - type: markdown
                     content: >-
                       <font size="5">Trockner {sonoff.0.steckdose_trockner.ENERGY_Power} W
                       </font>
              
                       <table>
                        <tr>
                         <td></td>
                         <td ALIGN="CENTER"><b>2020</b></td>
                         <td ALIGN="CENTER"><b>2021</b></td>
                        </tr>
                        <tr>
                         <td><b>Wäschen ges. </b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.gaenge_vorjahr}</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.gaenge}</td>
                        </tr>
                        <tr>
                         <td><b>Ø pro Tag</b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.garnge_pro_tag_vorjahr}</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.garnge_pro_tag}</td>
                        </tr>
                       <tr>
              
                       <td><b>Ø pro Monat</b></td>
              
                       <td ALIGN="CENTER">
              
                       {0_userdata.0.Zaehlen.Trockner.garnge_pro_monat_vorjahr}
              
                       </td>
              
                       <td align="Center">
              
                       {0_userdata.0.Zaehlen.Trockner.garnge_pro_monat}
              
                       </td>
                        <tr>
                         <td width=30%><b>Kosten ges.</b></td>
                         <td  ALIGN="CENTER" width=52%>{0_userdata.0.Zaehlen.Trockner.Kosten_ges_Vorjahr} €</td>
                         <td  ALIGN="CENTER" width=52%>{sourceanalytix.0.sonoff__0__steckdose_trockner__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
                        </tr>
                        <tr>
                         <td><b>Ø pro Gang</b></td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.kosten_pro_gang_vorjahr} €</td>
                         <td ALIGN="CENTER">{0_userdata.0.Zaehlen.Trockner.kosten_pro_gang} €</td>
                        </tr>
                       </table>
                   - type: markdown
                     content: |-
                       <table>
                        <tr>
                         <td width=10% align=center>Kosten 2021</td>
                         <TD width=10% align=center>Kosten pro Monat (hochgerechnet)</td>
                        <td width=10% align=center>Kosten pro Jahr (hochgerechnet)</td>
                        </tr>
                        <tr>
                         <td align=center>{sourceanalytix.0.sonoff__0__steckdose_kuehltruhe__ENERGY_Total.currentYear.costs.05_currentYear} €</td>
                         <td align=center>{0_userdata.0.Zaehlen.Gefrierschrank.ca_verbrauch_monat} €</td>
                         <td align=center>{0_userdata.0.Zaehlen.Gefrierschrank.ca_verbrauch_jahr} €</td>
                        </tr>
              
              
                       </table>
                     title: Gefrierschrank
               - title: TV
                 path: tv
                 icon: 'hass:television'
                 badges: []
                 cards:
                   - type: 'custom:slider-entity-row'
                     entity: input_number.lautstaerke_frrnseher
                     full_row: true
                   - type: vertical-stack
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: button
                             tap_action:
                               action: toggle
                             entity: light.schalter_2015
                             show_name: true
                             show_icon: true
                             show_state: false
                             name: '20:15'
                             icon: 'hass:clock'
                           - type: button
                             tap_action:
                               action: toggle
                             entity: light.schalter_aktuell
                             show_name: true
                             show_icon: true
                             name: aktuell
                             icon: 'hass:clock'
                       - type: conditional
                         conditions:
                           - entity: light.schalter_2015
                             state: 'on'
                         card:
                           type: markdown
                           content: '{0_userdata.0.VIS.tvprogramm.2015}'
                       - type: conditional
                         conditions:
                           - entity: light.schalter_aktuell
                             state: 'on'
                         card:
                           type: markdown
                           content: '{0_userdata.0.VIS.tvprogramm.aktuell}'
               - title: Wir
                 path: wir
                 icon: 'mdi:face'
                 badges: []
                 cards:
                   - type: map
                     entities:
                       - entity: geo_location.David_G_
                       - entity: geo_location.Ann_Christin_Graef
                     hours_to_show: 5
                   - type: history-graph
                     entities:
                       - entity: sensor.David_Home
                         name: David
                       - entity: sensor.Tin_Home
                         name: Tin
                     refresh_interval: 0
                     hours_to_show: 24
                   - type: markdown
                     content: >-
                       David, {google-sharedlocations.0.user.102784136203768362088.battery}%
                       Akku
              
                       {google-sharedlocations.0.user.102784136203768362088.address}
              
              
                       Tin, {google-sharedlocations.0.user.110377221062377408374.battery}%
                       Akku
              
                       {google-sharedlocations.0.user.110377221062377408374.address} 
                     title: 'Wo ist wer:'
               - title: Netzwerk
                 path: netzwerk
                 icon: 'mdi:network'
                 badges: []
                 cards:
                   - type: iframe
                     title: Internet
                     url: >-
                       https://192.168.99.33:8082/adapter/echarts/chart/index.html?preset=echarts.0.System.Internet
                   - type: markdown
                     content: '{0_userdata.0.VIS.ping.ping_tabelle}'
                     title: Erreichbarkeit
               - path: default_view
                 title: Tests
                 icon: 'mdi:help-circle-outline'
                 badges: []
                 cards:
                   - type: 'custom:theme-maker'
                   - type: entities
                     style: |
                       ha-card {
                         background: none;
                         box-shadow: none;
                         --secondary-text-color: var(--primary-text-color);
                       } 
                     title: My Title
                     entities:
                       - entity: binary_sensor.Schloss_Haustuere
                   - type: entities
                     style: |
                       ha-card {
                         color: red;
                       }
                     entities:
                       - binary_sensor.Schloss_Haustuere
                   - type: entities
                     style: |
                       ha-card {
                         font-variant: small-caps;
                       }
                       .card-header {
                         font-size: 16px;
                       }
                     entities:
                       - binary_sensor.Schloss_Haustuere
                   - type: button
                     tap_action:
                       action: toggle
                     hold_action:
                       action: more-info
                     show_icon: true
                     show_name: true
                     entity: switch.batterietest
                     name: Batterietestbenachrichtigung
                   - type: media-control
                     entity: media_player.Wohnzimmer
                   - type: picture-entity
                     entity: switch.anlage_scharf
                     image: 'https://demo.home-assistant.io/stub_config/bedroom.png'
                     tap_action:
                       action: none
                     hold_action:
                       action: none
                     name: .
                     show_state: false
                     show_name: false
                     aspect_ratio: 50%
                   - type: entities
                     entities:
                       - entity: switch.alarm_manueller_modus
                     show_header_toggle: false
                   - type: conditional
                     conditions:
                       - entity: switch.alarm_manueller_modus
                         state: 'on'
                     card:
                       type: entities
                       entities:
                         - entity: input_text.pin_vis
                           name: PIN
                           icon: 'mdi:key'
                   - type: conditional
                     conditions:
                       - entity: input_text.pin_vis
                         state: '12345'
                     card:
                       type: entities
                       entities:
                         - entity: switch.anlage_scharf
                           name: aktivieren/deaktivieren
                   - type: vertical-stack
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                           - type: button
                             tap_action:
                               action: toggle
                             hold_action:
                               action: more-info
                             show_icon: true
                             show_name: false
                             entity: switch.Bose_1
                       - type: entity
                         entity: sensor.Duty_Cycle
                   - type: entities
                     entities:
                       - entity: input_select.test_input_select
                       - entity: sensor.HUMIDITY
                       - entity: sensor.SD_Karte
                   - type: 'custom:stack-in-card'
                     mode: vertical
                     keep:
                       box_shadow: false
                       margin: true
                       border_radius: true
                       outer_padding: true
                     cards:
                       - type: horizontal-stack
                         cards:
                           - type: picture-entity
                             image: /cards/davidd.jpg
                             entity: switch.David
                             show_name: false
                             show_state: false
                           - type: picture-entity
                             image: /cards/tinn.jpg
                             entity: switch.Tin
                             show_name: false
                             show_state: false
                       - type: vertical-stack
                         cards:
                           - type: markdown
                             content: '---'
                             title: Anwesend
                       - type: vertical-stack
                         cards:
                           - type: history-graph
                             entities:
                               - entity: switch.Tin
                               - entity: switch.David
                             refresh_interval: 0
                             hours_to_show: 24
                   - type: entities
                     entities:
                       - entity: sensor.LOWBAT
                       - entity: switch.alarm_ausgeloest
                       - entity: switch.Antrieb_Garage
                       - entity: input_text.Bose_1_Sender
                       - entity: switch.BOSE_PRESET_2
                   - type: shopping-list
                     title: Infos
                   - type: markdown
                     content: >-
                       <b>Waschmaschine</b>
              
              
                       Steckdose
              
                       {sonoff.0.steckdose_waschmaschine.ENERGY_Total}
              
                       SA
              
                       {sourceanalytix.0.sonoff__0__steckdose_waschmaschine__ENERGY_Total.Current_Reading}
              
              
                       <b>Trockner</b>
              
              
                       Steckdose
              
                       {sonoff.0.steckdose_trockner.ENERGY_Total}
              
                       SA
              
                       {sourceanalytix.0.sonoff__0__steckdose_trockner__ENERGY_Total.Current_Reading}
              
              
                       <b>Kühltruhe</b>
              
              
                       Steckdose
              
                       {sonoff.0.steckdose_kuehltruhe.ENERGY_Total}
              
                       SA
              
                       {sourceanalytix.0.sonoff__0__steckdose_kuehltruhe__ENERGY_Total.Current_Reading}
                     title: Gesamtverbrauch
                   - type: markdown
                     content: >-
                       <table style="width: 100%;">
              
                       <tbody>
              
                       <tr>
              
                       <td width=100%><b><font size="3">Gerät</b></td></font>
              
                       <td ALIGN="CENTER"><b><font size="3">Status</b></td></font>
              
                       </tr>
              
                       <tr>
              
                       <td colspan="2">
              
                       <hr>
              
                       </dt>
              
                       </tr>
              
                       <tr>
              
                       <td>ONLINE</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Google_.alive;a === true || a
                       === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>VPN Druckerei</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.sophosfirma;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td colspan="2">
              
                       <hr>
              
                       </dt>
              
                       </tr>
              
                       <tr>
              
                       <td>David Handy</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Davidhandy;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>Tin Handy</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Tinhandy;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>NAS</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.192_168_99_22;a === true || a
                       === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>Bose Soundtouch</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Bose_Soundtuch;a === true || a
                       === 'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>CCU3</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Ccu3;a === true || a === 'true'
                       ? '<font size="3"><b><font color=green>● ' : '<font color=red><font
                       size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>Digibit R1</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Digibit_;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>Fire TV</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.FireTV_TV;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>PS4</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.PS4;a === true || a === 'true' ?
                       '<font size="3"><b><font color=green>● ' : '<font color=red><font
                       size="3">●</font> '}</td>
              
                       </tr>
              
                       <tr>
              
                       <td>Webcam Kinderzimmer 2</td>
              
                       <td ALIGN="CENTER">{a:ping.0.iobroker.Webcam_bh;a === true || a ===
                       'true' ? '<font size="3"><b><font color=green>● ' : '<font
                       color=red><font size="3">●</font> '}</td>
              
                       </tr>
              
                       </tbody>
              
                       </table>
                   - type: 'custom:clockwork-card'
                     locale: de-De
                     other_time:
                       - America/New_York
                       - Australia/Sydney
                       - America/Los_Angeles
              hideToolbar: false
              resources:
               - type: module
                 url: /cards/accuweather-card.js
               - type: module
                 url: /cards/button-card.js
               - type: module
                 url: /cards/card-mod.js
               - type: jpg
                 url: /cards/david.jpg
               - type: jpg
                 url: /cards/diebstahl.jpg
               - type: png
                 url: /cards/door-closed-lock.png
               - type: svg
                 url: /cards/door-closed-lock.svg
               - type: png
                 url: /cards/door-open.png
               - type: svg
                 url: /cards/door-open.svg
               - type: jpg
                 url: /cards/garage_auf.jpg
               - type: png
                 url: /cards/garage_auf.png
               - type: jpg
                 url: /cards/garage_zu.jpg
               - type: png
                 url: /cards/garage_zu.png
               - type: jpg
                 url: /cards/pi.jpg
               - type: module
                 url: /cards/stack-in-card.js
               - type: svg
                 url: /cards/test.svg
               - type: module
                 url: /cards/theme-maker.js
               - type: jpg
                 url: /cards/tin.jpg
               - type: module
                 url: /cards/vertical-stack-in-card.js
              
              

              Und mein Theme

              noctis:  
              
               # Fonts
               primary-font-family: 'Raleway,sans-serif'
               paper-font-common-base_-_font-family: "var(--primary-font-family)"
               paper-font-common-code_-_font-family: "var(--primary-font-family)"
               paper-font-body1_-_font-family: "var(--primary-font-family)"
               paper-font-subhead_-_font-family: "var(--primary-font-family)"
               paper-font-headline_-_font-family: "var(--primary-font-family)"
               paper-font-caption_-_font-family: "var(--primary-font-family)"
               paper-font-title_-_font-family: "var(--primary-font-family)"
               ha-card-header-font-family: "var(--primary-font-family)"
              
               # Text
               text-color: '#ffffff' 
               primary-text-color: 'var(--text-color)'
               text-primary-color: 'var(--text-color)'
               secondary-text-color: "#BAC0C6"
               text-medium-light-color: '#A0A2A8'
               text-medium-color: '#80828A'
               disabled-text-color: '#626569'
               primary-color: 'var(--accent-color)'
               
               # Main Colors
               app-header-background-color: '#242e42'
               accent-color: '#1A89F5'
               accent-medium-color: 'var(--accent-color)'
              
               # Background
               background-color: '#242e42'
               primary-background-color: 'var(--background-color)'
               background-color-2: '#20293c' 
               secondary-background-color: 'none'
               markdown-code-background-color: 'var(--background-color)'
               
               # Card
               card-background-color: 'var(--ha-card-background)'
               ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
               ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
               ha-card-border-radius: "5px"
               border-color: 'none'
              
               # Icons
               paper-item-icon-color: '#EBEBEB'
               paper-item-icon-active-color: 'var(--accent-color)'
               
               # Sidebar
               sidebar-background-color: 'var(--background-color)'
               sidebar-icon-color: '#98a7b9'
               sidebar-selected-icon-color: 'var(--accent-color)'
               sidebar-selected-text-color: 'var(--text-color)'
               paper-listbox-background-color: 'var(--sidebar-background-color)'
               divider-color: 'var(--background-color)'
               light-primary-color: 'var(--ha-card-background)'
              
               # Sliders
               paper-slider-knob-color: 'var(--accent-color)'
               paper-slider-pin-color: 'var(--background-color-2)'
               paper-slider-active-color: 'var(--accent-color)'
               paper-slider-container-color: 'var(--background-color-2)'
              
               # Toggle:
               paper-toggle-button-checked-bar-color: 'var(--accent-color)'
               mdc-theme-primary: 'var(--accent-color)'
              
               # Switch
               switch-unchecked-color: '#70889e'
               switch-checked-button-color: 'var(--accent-color)'
               switch-unchecked-track-color: 'var(--background-color-2)'
               switch-checked-track-color: 'var(--background-color-2)'
              
               # Radio Button
               paper-radio-button-checked-color: 'var(--accent-color)'
              
               # Popups
               more-info-header-background: 'var(--secondary-background-color)'
               paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
              
               # Tables
               table-row-background-color: 'var(--background-color)'
               table-row-alternative-background-color: 'var(--ha-card-background)'
              
               # Badges
               label-badge-background-color: 'var(--background-color)'
               label-badge-text-color: 'var(--text-primary-color)'
               label-badge-red: 'rgba(73,85,108,1)'
               label-badge-blue: 'rgba(26,137,245,1)'
               label-badge-green: 'rgba(0,202,139,1)'
               label-badge-yellow: 'rgba(222,176,107,1)'
              
               paper-input-container-focus-color: 'var(--accent-color)'
               
               # Custom Header
               ch-background: 'var(--background-color)'
               ch-active-tab-color: 'var(--accent-color)'
               ch-notification-dot-color: 'var(--accent-color)'
               ch-all-tabs-color: 'var(--sidebar-icon-color)'
               ch-tab-indicator-color: 'var(--accent-color)'
              
               # Mini Mediaplayer
               mini-media-player-base-color: 'var(--text-color)'
               mini-media-player-accent-color: 'var(--accent-color)'
              

              Meine Custom-Cards

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

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

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

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

                Vielen Dank

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

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

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

                  // Pollenflug - Aufbereitung der Daten für die Anzeige in der Lovelace UI
                  
                  createState('javascript.0.Lovelace.pollenflug', { name: 'Pollenflug - HTML', type: 'string', read: true, write: true, });
                  
                  // Um 11:00 Uhr werden die Adapter-Daten aktualisiert - 11:05 Uhr werden die HTML-Daten neu erzeugt
                  schedule("5 11 * * *", async function () {
                      let htmlStr = '';
                      let pollen =['Ambrosia','Beifuss','Birke','Erle','Esche','Graeser','Hasel','Roggen'];
                      htmlStr = ['<table style="width: 100%;"><tbody><tr><td width=100%><b><font size="3">Typ</b></td></font><td ALIGN="CENTER"><b><font size="3">Heute</td><td><b><font size="3">Morgen</td></b></font></tr><tr><td colspan="3"><hr></dt></tr>'].join('');
                      for (let j = 0; j< pollen.length ; j++) {
                          htmlStr = htmlStr + auswertung(pollen[j]);
                      }
                      htmlStr = htmlStr + ['</tbody></table>'].join('');
                      setState('javascript.0.Lovelace.pollenflug', htmlStr, true);
                  });
                  
                  function auswertung(name){
                      let html = '';
                      let farbe_heute = '';
                      let farbe_morgen = '';
                      const heute = getState('pollenflug.0.region#101.'+name+'.index_today').val;
                      const morgen = getState('pollenflug.0.region#101.'+name+'.index_tomorrow').val;
                      // Berechnung Pollenflug heute
                      if (heute == 0) {
                          farbe_heute = '#00FF00';
                      } else if (heute == 1) {
                          farbe_heute = '#FFFF00';
                      } else if (heute == 2) {
                          farbe_heute = '#FFCC00';
                      } else if (heute == 3) {
                          farbe_heute = '#FF9900';
                      } else if (heute == 4) {
                          farbe_heute = '#FF6600';
                      } else if (heute == 5) {
                          farbe_heute = '#FF3300';
                      } else if (heute == 6) {
                          farbe_heute = '#FF0000';
                      }
                      // Berechnung Pollenflug morgen
                      if (morgen == 0) {
                          farbe_morgen = '#00FF00';
                      } else if (morgen == 1) {
                          farbe_morgen = '#FFFF00';
                      } else if (morgen == 2) {
                          farbe_morgen = '#FFCC00';
                      } else if (morgen == 3) {
                          farbe_morgen = '#FF9900';
                      } else if (morgen == 4) {
                          farbe_morgen = '#FF6600';
                      } else if (morgen == 5) {
                          farbe_morgen = '#FF3300';
                      } else if (morgen == 6) {
                          farbe_morgen = '#FF0000';
                      }
                      // Setze die Daten zusammen
                      html = ['<tr><td><b>',name,'</b>','</td><td ALIGN="CENTER"><font size="3" color=',farbe_heute,'>●</font></td><td ALIGN="CENTER"><font size="3" color=',farbe_morgen,'>●</font></td></tr>'].join('');
                      return html;
                  }
                  

                  Ergebnis sieht dann so aus.
                  4dfb5051-0946-4ba9-815f-c3f5edc29217-image.png

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

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

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

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

                      Bitte um Hilfe. Danke

                      1 Reply Last reply Reply Quote 0
                      • Feuersturm
                        Feuersturm last edited by Feuersturm

                        Hallo zusammen,

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

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

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

                        • Kurzbeschreibung / Merkmale von Lovelace ( @Garfonso Kannst du hier unterstützen?)
                        • Eure Lovelace Views welche in die Doku als Beispiel eingettet werden können und einem Besucher helfen einen ersten Eindruck von Lovelace zu bekommen
                        David G. Garfonso 2 Replies Last reply Reply Quote 1
                        • David G.
                          David G. @Feuersturm last edited by

                          @feuersturm sagte in Zeigt her eure Lovelace-Visualisierung:

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

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

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

                            @feuersturm said in Zeigt her eure Lovelace-Visualisierung:

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

                            Mein erster Vorschlag wäre:

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

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

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

                              @garfonso sagte in Zeigt her eure Lovelace-Visualisierung:

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

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

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

                                @feuersturm

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

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

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

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

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

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

                                  Startseite2.png

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

                                  Bewässerung2.png

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

                                  Robi.png

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

                                  Grundriss.png

                                  Nicht gezeigtes:
                                  Fahrtwege und Fahrtzeiten mit Google Maps eingebettet

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

                                  Meine Custom Cards:

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

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

                                  Für Anregungen und Fragen bin ich offen.

                                  M Z 2 Replies Last reply Reply Quote 2
                                  • XBiT
                                    XBiT @Tirador last edited by XBiT

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

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

                                    Home:
                                    home.png

                                    Lampen:
                                    Lampen.png

                                    Fenster:
                                    Fenster.png

                                    Steckdosen:
                                    Steckdosen.png

                                    Temperatur:
                                    Temperatur.png

                                    Staubsauger:
                                    Sauger.png

                                    Sonos:
                                    Sonos.png

                                    TV:
                                    TV.png

                                    Synology&Router:
                                    Synology.png

                                    Heizung:
                                    Heizung.png

                                    Tankstellen:
                                    Tankstelle.png

                                    Iobroker:
                                    iobroker.png

                                    Verwendete custom Karten:


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

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

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

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

                                        @mcu

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

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

                                          @zeptran

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

                                          Deswegen gibt es hier jetzt ein Update zu meiner Vis

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

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

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

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

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

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

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

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

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

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

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

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

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

                                            @zeptran

                                            gefällt mir, schaut gut aus

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            704
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

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