Navigation

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

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Zeigt her eure Lovelace-Visualisierung

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dan11hh @Guest last edited by

      Vielen Danke für Eure Beispiele. Ich bastele auch noch. Was mir bei @philo686 auffällt ist der "verschwendete" Platz links und rechts. Und genau das ist auch mein Problem. Wie könnte man das lösen? Ich würde gerne lovelace kleiner skalieren, aber trotzdem noch die gesamte breite des Bildschirms nutzen. Geht das?

      M ? 2 Replies Last reply Reply Quote 0
      • M
        M1R0O @dan11hh last edited by

        Ich stelle dann hier auch meine Visualisierung vor, die mit Hilfe von @David-G und dem Raspberry-Forum hingebastelt habe. Es ist noch nicht fertig, insbesondere die Unterseiten befinden sich noch im Aufbau.
        Optisch ist es an das transparent-Theme angelehnt, ich habe es nur ein wenig abgeändert, da ich es nicht so bunt mag und es auf dem Touchscreen mMn so besser aussieht. Der Screen schaltet sich automatisch ab und, wenn der Motion-Sensor eine Bewegung erkennt, wieder an.

        Die Vis dient zur Steuerung meines wachsenden Smarthomes.

        Bildschirmfoto 2021-01-12 um 19.43.46.png
        Bildschirmfoto 2021-01-12 um 19.44.47.png
        Bildschirmfoto 2021-01-12 um 19.44.17.png

        Aufbaut sieht das ganze so aus:
        IMG_7253.png

        Und noch der Code:

        title: Home
        views:
          - path: home
            title: Home
            panel: false
            badges: []
            cards:
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.AwayLL
                    name: ALL OFF
                    icon: 'mdi:power'
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.Alles
                    name: ALL NIGHT
                    icon: 'mdi:sleep'
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.JalousAufLL
                    name: EG OPEN
                    icon: 'mdi:window-shutter-open'
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG OPEN
                    icon: 'mdi:window-shutter-open'
                    entity: switch.AlleAufOG
              - type: horizontal-stack
                cards:
                  - type: light
                    entity: light.Esszimmerlicht
                    name: Esszimmerlicht
                    icon: 'mdi:vanity-light'
                  - type: light
                    entity: light.Philips_hue_Wohnzimmerlicht
                    icon: 'mdi:ceiling-light'
                    name: Wonzimmerlicht
              - type: weather-forecast
                entity: weather.Luenen__Luenen_Deutschland_
                name: Wetter in Lünen
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.JalousZuLL
                    name: EG CLOSE
                    icon: 'mdi:window-shutter'
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG CLOSE
                    icon: 'mdi:window-shutter'
                    entity: switch.AlleZuOG
              - type: horizontal-stack
                cards:
                  - type: light
                    entity: light.Philips_hue_Flurlicht
                    name: Flurlicht
                    icon: 'mdi:outdoor-lamp'
                  - type: light
                    entity: light.Lightstrip
                    name: Lightstrip
                    icon: 'mdi:led-strip-variant'
              - type: horizontal-stack
                cards:
                  - type: sensor
                    graph: line
                    entity: sensor.Wohnzimmertemperatur
                    name: Wohnzimmertemperatur
                  - type: sensor
                    graph: line
                    entity: sensor.Luftfeuchtigkeit
                    name: Luftfeuchtigkeit
                    icon: 'mdi:water-percent'
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.Jalous30LL
                    name: EG DAY
                    icon: 'mdi:window-shutter-alert'
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG DAY
                    icon: 'mdi:window-shutter-alert'
                    entity: switch.AlleSonneOG
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.PS4HelpLL
                    name: PS4 HELP
                    icon: 'mdi:sony-playstation'
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.FernsehenLL
                    name: FERNSEHEN
                    icon: 'mdi:remote-tv'
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.TVLL
                    name: TV
                    icon: 'mdi:television'
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.DenonToggleLL
                    name: AVR
                    icon: 'mdi:audio-video'
              - type: entities
                entities:
                  - entity: binary_sensor.Sensor_F3
                    name: Fenster 3
                  - entity: binary_sensor.Sensor_F4
                    name: Fenster 4
                  - entity: binary_sensor.Sensor_F7
                    name: Fenster 7
                  - entity: binary_sensor.Sensor_F9
                    name: Fenster 9
              - type: markdown
                content: '{ical.0.data.html}'
          - title: Licht
            path: licht
            icon: 'mdi:lightbulb-on'
            panel: false
            badges: []
            cards:
              - type: light
                entity: light.Esszimmer
                name: Esszimmerlicht
                icon: 'mdi:vanity-light'
              - type: light
                entity: light.Lightstrip
                name: Lightstrip
                icon: 'mdi:led-strip-variant'
              - type: light
                entity: light.Philips_hue_Flurlicht
                name: Flurlicht
                icon: 'mdi:outdoor-lamp'
              - type: light
                entity: light.Philips_hue_Wohnzimmerlicht
                icon: 'mdi:ceiling-light'
                name: Wonzimmerlicht
              - type: light
                entity: light.Aussenlicht
                icon: 'mdi:coach-lamp'
              - type: light
                entity: light.Terrassenlicht
                icon: 'mdi:wall-sconce-flat'
              - type: horizontal-stack
                cards:
                  - type: light
                    entity: light.Aussenlicht
                    icon: 'mdi:coach-lamp'
                  - type: light
                    entity: light.Terrassenlicht
                    icon: 'mdi:wall-sconce-flat'
          - title: Temperatur
            path: temperatur
            icon: 'mdi:thermometer'
            badges: []
            cards:
              - type: sensor
                entity: sensor.Wohnzimmertemperatur
                name: Wohnzimmertemperatur
                graph: line
                hours_to_show: 12
                detail: 1
                icon: 'mdi:thermometer'
              - type: vertical-stack
                title: Klima
                cards:
                  - type: gauge
                    entity: sensor.Luftfeuchtigkeit
                    min: 0
                    max: 100
                  - type: gauge
                    entity: sensor.Wohnzimmertemperatur
                    min: 0
                    max: 100
              - type: sensor
                entity: sensor.Luftfeuchtigkeit
                name: Luftfeuchtigkeit
                graph: line
                hours_to_show: 12
                detail: 1
                icon: 'mdi:water-percent'
              - type: horizontal-stack
                title: Klima
                cards:
                  - type: gauge
                    entity: sensor.Wohnzimmertemperatur
                    min: 0
                    max: 100
                  - type: gauge
                    entity: sensor.Luftfeuchtigkeit
                    min: 0
                    max: 100
          - title: Fenster
            path: jalousien
            icon: 'mdi:window-open-variant'
            badges: []
            cards:
              - type: entity
                entity: lock.HaustuersperrstatusLL
                name: Haustürschloss
              - type: entities
                entities:
                  - entity: cover.Fenster1
                  - entity: cover.Fenster2
                  - entity: cover.Fenster3
                  - entity: cover.Fenster4
                  - entity: cover.Fenster5
                  - entity: cover.Fenster6
                  - entity: cover.Fenster7
                  - entity: cover.Fenster8
                  - entity: cover.Fenster9
                  - entity: cover.Fenster10
                title: Jalousien
              - type: entity
                entity: binary_sensor.HaustuerLL
                name: Haustür
              - type: 'custom:button-card'
                entity: binary_sensor.HaustuerLL
                name: Haustür
                map_state:
                  '3': geöffnet
                  offen: geschlossen
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.JalousAufLL
                    name: EG OPEN
                    icon: 'mdi:window-shutter-open'
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.Jalous30LL
                    name: EG DAY
                    icon: 'mdi:window-shutter-alert'
                  - type: button
                    tap_action:
                      action: toggle
                    entity: switch.JalousZuLL
                    name: EG CLOSE
                    icon: 'mdi:window-shutter'
              - type: horizontal-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG OPEN
                    icon: 'mdi:window-shutter-open'
                    entity: switch.AlleAufOG
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG DAY
                    icon: 'mdi:window-shutter-alert'
                    entity: switch.AlleSonneOG
                  - type: button
                    tap_action:
                      action: toggle
                    name: OG CLOSE
                    icon: 'mdi:window-shutter'
                    entity: switch.AlleZuOG
          - title: Wetter
            path: wetter
            icon: 'mdi:weather-partly-snowy-rainy'
            badges: []
            cards:
              - type: 'custom:clockwork-card'
                locale: de-DE
                other_time:
                  - America/New_York
                  - Australia/Sydney
                  - America/Los_Angeles
                style: |
                  .other_time { display: none; }
          - title: Media
            path: media
            badges: []
            cards:
              - type: button
                tap_action:
                  action: toggle
                entity: switch.Alles
                name: ALLES
                icon: 'mdi:power'
                resource: null
              - type: button
                tap_action:
                  action: toggle
                entity: switch.DenonToggleLL
                name: AVR
                icon: 'mdi:audio-video'
        hideToolbar: true
        
        

        Vielen Dank an alle Helfer und die Inspirationen die ich bisher erhalten habe.

        W M 2 Replies Last reply Reply Quote 1
        • ?
          A Former User @dan11hh last edited by A Former User

          @dan11hh Die Screenshots habe ich auf meinem 24" Bildschirm gemacht. Nur da habe ich links und rechts einen breiten ungenutzten Bereich. Auf meinem Laptop 15", sowie am Echo Show 8, habe ich ebenso die 3 Spalten, jedoch seitlich keinen oder nur kaum ungenutzten Bereich.
          2021-01-12 22_00_53-Filme & TV.png

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

            Hi @m1r0o dein Thema sieht toll aus!
            Können Sie mir sagen, wie ich es importieren kann?
            Vielen Dank

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

              @wizard2010

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

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

                @m1r0o
                @wizard2010

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

                Allerdings hat @M1R0O das Theme nicht mit gepostet.

                W 1 Reply Last reply Reply Quote 0
                • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            874
                                            Online

                                            31.8k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

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