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.
    • 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
                                          • Z
                                            Zeptran last edited by

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

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

                                            Startseite2.png

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

                                            Bewässerung2.png

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

                                            Robi.png

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

                                            Grundriss.png

                                            Nicht gezeigtes:
                                            Fahrtwege und Fahrtzeiten mit Google Maps eingebettet

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

                                            Meine Custom Cards:

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

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

                                            Für Anregungen und Fragen bin ich offen.

                                            M Z 2 Replies Last reply Reply Quote 2
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            756
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

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