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.
    • ?
      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
                                          • XBiT
                                            XBiT @Tirador last edited by XBiT

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

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

                                            Home:
                                            home.png

                                            Lampen:
                                            Lampen.png

                                            Fenster:
                                            Fenster.png

                                            Steckdosen:
                                            Steckdosen.png

                                            Temperatur:
                                            Temperatur.png

                                            Staubsauger:
                                            Sauger.png

                                            Sonos:
                                            Sonos.png

                                            TV:
                                            TV.png

                                            Synology&Router:
                                            Synology.png

                                            Heizung:
                                            Heizung.png

                                            Tankstellen:
                                            Tankstelle.png

                                            Iobroker:
                                            iobroker.png

                                            Verwendete custom Karten:


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

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            471
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

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