[Showcase] Mobile UI

[falkio8]

Video Tour:link

Hi, I just wanted to show my UI in which I invested a lot of time in the last weeks.
I started with HA in September and was amazed of alle the possibilities. Seeing all the amazing dashboard and configurations motivated me to do something for my setup. But instead of a fixed dashboard in my house I thought about the use cases. I didnt wanted a stationary tablet at the wall. I have my phone with me all the time and that is my central element for everything. I already checked my tado (thermostat) and my netatmo (thermometer) with my phone. Now I wanted something where I can see literally everthing interesting on one page. So I took inspiration from (#667) and made my own swiss army knife for my home automation.
I can check, weather, network, indoor climate and air quality, car, heating, warm water, thermostats, survelliance, energy usage, trash calendars, lighting for in and outdoor and I have a status for all my relevant devices if they are on or not and can see their consumption and control elements.
This is mainly based on the amazing bubble card and its pop up. The devices status on the bottom are mushroom cards. I heavily used css styling for the background progress bars which show me different additional information.

Now I can see the status of my home on a single page. The whole section is now over 5000 lines of code. If you have questions, feel free to ask and I am happy to share.

[johndoe0815]

Video tour link is 404.

[falkio8]

Sorry my bad. Try again.

[ralf170768]

Hi Falkio. I am currently working on my dashboard with inspiration from (#667). Are you able to share your Yaml Code. That would be very appreciated as your version includes some nice features which I like to incorporate into my dashboard. Thanks Ralf

[ralf170768]

Hallo Falkio, danke für die schnelle Antwort. Mich würden vor allem Deine Überblick Pop-ups interessieren.... Das würde mir eine Menge Arbeit ersparen :) Viele Grüsse Ralf
Hi Falkio, I am particular interested in your Overview Popups... This would help me a lot. Thanks Ralf

[falkio8]

Hi, ok. Womit wollen wir anfangen? Die sind eigentlich recht simpel. Meist eine einfache bubble pop up mit header und ein paar Mini Graph Card und oder statistic cards. In die pop ups packe ich halt das rein was mich interessiert. Hast du schon eine grobe Struktur deines Dashboards?

[ralf170768]

Hi, vielleicht vorab ein paar Infos zu meinem Setup. Ich wohne seit 14 Jahren ein KNX-Haus und betreibe meine Automatisierungen und Dashboard mit dem Gira Homeserver. Die eigenständige Programmierung von Dashboards war mir immer zu aufwendig, so dass ich über den Gira Quadclient alles dargestellt habe. Es war ein simples aber auch eingeschränktes Design - aber funktionell... Im Grunde brauche ich den Quadclient nur hin und wieder, um einen Überblick um gewisse Zustände (offene Fenster, Alarmanlage etc.) zu bekommen und weniger um etwas zu schalten. Vieles läuft automatisiert im Homeserver über Präsenzmelder oder aber auch Alexa Befehle.

Nun hat mich vor einem Jahr mein Gira Homeserver im Stich gelassen und ich musste mir einen neuen Homeserver - mangelns schneller Alternativen zu bereits vorhandenen Automatisierungen, Einbindungen von Geräten etc. zulegen. Da in Zukunft der Homeserver ein Auslaufmodell ist, habe ich mich in diesem Zusammenhang mit Alternativen umgesehen habe und habe mich seitdem mit Home Assistant beschäftigt.... hier fokussiere ich mich zunächst auf die Einrichtung eines einfachen aber ansprechenden Dashboards, um auch meine Familie auf die Veränderung mitzunehmen. Die Automatisierungen laufen erstmal im Hintergrund weiter auf den Homeserver, sollen dann im nächsten Schritt auf den Home Assistant übertragen werden...

Auf der Suche nach einem ansprechenden Dashboard bin ich auf unsere gemeinsame Basis gestoßen und bin seit ca. einer Woche damit beschäftigt, es anzupassen. Es dauert alles länger als erwartet, da ich mich erstmal an YAML gewöhnen muss. Hier bist Du mir schon um Einiges mit Deinem tollen Dashboard voraus. Jetzt konkret, wie könntest Du mich im ersten Schritt unterstützen:

• Dashboard Hauptseite: Yaml Code für die Kachel: Heizung und Müll
• Seite Innenklima: Yaml Code für die Kachel Wohnzimmer
• Seite Heizung: Yaml Code Aussentemperatur sowie Vor & Rücklauf

Herzlichen Dank schon mal vorab, für Deine Unterstüzung.

Ralf

[falkio8]

Ok verstanden. Du wirst aber einiges nicht so einfach übernehmen können, da du natürlich auch die entsprechenden Entitäten benötigst. Gerade für die Heizung. Für den Müll brauchst du den Müll Kalender. Dann fangen wir mal an. Ich habe auch erst im Sep angefangen mit HA und yaml. Man kommt da mit Beispielen sehr schnell rein und auch MS Copilot kann da sehr gut helfen. Bei Fragen wieder melden!

Heizung:

Bubble Card Heizung auf der Hauptseite (nicht das pop up):

                          type: custom:bubble-card
                          card_type: button
                          button_type: state
                          entity: sensor.trovis_hk1_stellsignal
                          'false': []
                          scrolling_effect: false
                          name: Heizung
                          show_state: true
                          sub_button:
                            - name: Tado
                              entity: ''
                              show_background: false
                              show_icon: true
                              show_state: false
                              show_arrow: false
                              icon: mdi:thermostat
                              tap_action:
                                action: navigate
                                navigation_path: '#tado'
                            - name: Auswahl
                              entity: input_select.bubble_card_heizung_helper
                              show_background: false
                              show_icon: true
                              show_state: false
                              show_arrow: false
                              icon: mdi:format-list-bulleted
                          tap_action:
                            action: navigate
                            navigation_path: '#heizung'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                          button_action:
                            tap_action:
                              action: navigate
                              navigation_path: '#heizung'
                            double_tap_action:
                              action: none
                            hold_action:
                              action: none
                          icon: mdi:home-thermometer
                          styles: |-
                            :host{
                                --color-bar: #d75c28;
                                --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
                            }
                            ha-card { 
                              font-size: 14px;
                              opacity: 1;
                              --accent-color: ;
                            }    
                            .bubble-button-card-container {
                                background: linear-gradient(
                              to right, 
                              var(--color-bar) 0%, 
                              var(--color-bar) ${Math.round(hass.states['sensor.trovis_hk1_stellsignal'].state)}%,
                              var(--color-background) ${Math.round(hass.states['sensor.trovis_hk1_stellsignal'].state)}%,
                              var(--color-background) 100%
                            ) !important;
                            }

                            .bubble-icon {
                              opacity: ${hass.states['sensor.trovis_hk1_stellsignal'].state < '1' ? '0.5' : '1'} !important;
                              color: ${hass.states['sensor.trovis_hk1_stellsignal'].state >= '1' ? '#FFFFFF' : ''} !important;
                            }
                            .bubble-sub-button-container {
                                margin-right: 8px !important;
                            }
                            .bubble-sub-button { 
                                min-width: 22px !important;
                                height: 22px !important;
                                width: 22px !important;
                            }
                            ${state < '1' ? icon.setAttribute("icon",
                            "mdi:heating-coil") : state >= '1' ?
                            icon.setAttribute("icon", "mdi:heat-wave") :
                            icon.setAttribute("icon", "heating-coil")};
                          card_layout: normal

Bubble Card Müll (nicht das pop up):

                     - type: custom:bubble-card
                        card_type: button
                        button_type: state
                        entity: sensor.anstehende_abholungen
                        'false': []
                        scrolling_effect: true
                        name: Müll
                        show_state: true
                        tap_action:
                          action: navigate
                          navigation_path: '#trash'
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        button_action:
                          tap_action:
                            action: navigate
                            navigation_path: '#trash'
                          double_tap_action:
                            action: none
                          hold_action:
                            action: none
                        icon: mdi:lamps
                        styles: >-



                          :host{
                              --color-bar: ${hass.states['sensor.anstehende_abholungen'].state.includes('Rest') ? '#515151' : hass.states['sensor.anstehende_abholungen'].state.includes('Gelbe') ? '#b19300' : hass.states['sensor.anstehende_abholungen'].state.includes('Bio') ? '#006700' : hass.states['sensor.anstehende_abholungen'].state.includes('Altpapier') ? '#00468c' : ''};
                              --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
                          }

                          ha-card { 
                            font-size: 14px;
                            opacity: 1;
                            --accent-color: ;
                          }                          

                          .bubble-button-card-container {
                              background: linear-gradient(
                            to right, 
                            var(--color-bar) 0%, 
                            var(--color-bar) ${Math.round(hass.states['sensor.muell_tage_prozent_helper'].state)}%,
                            var(--color-background) ${Math.round(hass.states['sensor.muell_tage_prozent_helper'].state)}%,
                            var(--color-background) 100%
                          ) !important;

                          }


                          .bubble-icon {
                            opacity: ${hass.states['sensor.anstehende_abholungen'].state === 'on' ? '1' : '1'} !important;
                              color: ${hass.states['sensor.anstehende_abholungen'].state === 'on' ? '#FFFFFF' : ''} !important;
                          }

                          ${state.includes('Restmüll') ?
                          icon.setAttribute("icon", "mdi:trash-can-outline") :
                          state.includes('Gelbe') ? icon.setAttribute("icon",
                          "mdi:recycle-variant") : state.includes('Papier') ?
                          icon.setAttribute("icon", "mdi:newspaper") :
                          state.includes('Bio') ? icon.setAttribute("icon",
                          "mdi:flower") : icon.setAttribute("icon",
                          "mdi:trash-can-outline")};
                        card_layout: normal
                        columns: 2
                    columns: 2

Pop up card Innenklima mit dem ersten Eintrag (weitere sind copy paste des Ersten)

          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#climate'
                name: Innenklima
                icon: mdi:thermometer
                entity: sensor.wohnraumtemperatur_mittelwert
                show_state: true
                state_unit: ''
                width_desktop: 600px
                margin_top_mobile: 0px
                margin_top_desktop: 0px
                auto_close: 1500000
                bg_opacity: 75
                bg_blur: 80
                backdrop_blur: 10
                show_header: true
                styles: |
                  .bubble-button-background {
                    background: grey !important;
                    }          
                  .bubble-button-card-container {
                      background: !important;
                    }
                  .bubble-icon {
                      color: white !important;
                    }
                  .bubble-icon-container {
                      background: ;
                    }
              - type: custom:text-divider-row
                text: Erdgeschoss
              - type: heading
                heading: Wohnzimmer
                icon: mdi:sofa
                entity: input_boolean.conditional_room_1_helper
                tap_action:
                  action: toggle
                badges:
                  - type: entity
                    entity: sensor.wohnzimmer_temperatur_2
                    color: red
                  - type: entity
                    entity: sensor.wohnzimmer_luftfeuchtigkeit_2
                    color: blue
                  - type: entity
                    entity: sensor.wohnzimmer_kohlendioxid
                    color: yellow
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.conditional_room_1_helper
                    state: 'on'
                card:
                  type: horizontal-stack
                  cards:
                    - type: custom:mini-graph-card
                      entities:
                        - sensor.wohnzimmer_temperatur_2
                      color_thresholds:
                        - color: '#fe2712'
                          value: 24
                        - color: '#fe9933'
                          value: 22
                        - color: '#4db373'
                          value: 20
                        - color: '#0000cd'
                          value: 18
                      color_thresholds_transition: smooth
                      show:
                        name: false
                      animate: true
                      hours_to_show: 12
                      points_per_hour: 4
                      align_icon: state
                      height: 220
                      line_width: 8
                      font_size: 75
                    - type: custom:mini-graph-card
                      entities:
                        - sensor.wohnzimmer_luftfeuchtigkeit_2
                      color_thresholds:
                        - color: '#0000cd'
                          value: 60
                        - color: '#33cbfe'
                          value: 55
                        - color: '#4db373'
                          value: 50
                        - color: '#ab8200'
                          value: 45
                      color_thresholds_transition: smooth
                      show:
                        name: false
                      animate: true
                      hours_to_show: 12
                      points_per_hour: 4
                      align_icon: state
                      height: 220
                      line_width: 8
                      font_size: 75

Pop up Card Heizung:

          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#heizung'
                name: Heizung
                icon: mdi:heating-coil
                entity: sensor.trovis_hk1_stellsignal
                show_state: true
                state_unit: '%'
                width_desktop: 600px
                margin_top_mobile: 0px
                margin_top_desktop: 0px
                auto_close: 1500000
                bg_opacity: 75
                bg_blur: 80
                backdrop_blur: 10
                show_header: true
                styles: |-
                  .bubble-button-background {
                    background: grey !important;
                    }          
                  .bubble-button-card-container {
                      background:  !important;
                    }
                  .bubble-icon {
                      color: white !important;
                    }
                  .bubble-icon-container {
                      background: ;
                    }
              - type: custom:apexcharts-card
                apex_config:
                  legend:
                    show: false
                header:
                  show: true
                  title: Thermostate
                  show_states: false
                  colorize_states: true
                chart_type: radialBar
                series:
                  - entity: sensor.wohnzimmer_heizung
                    show:
                      legend_value: false
                  - entity: sensor.eingang_heizung
                    show:
                      legend_value: false
                  - entity: sensor.jonas_heizung
                    show:
                      legend_value: false
                  - entity: sensor.johanna_heizung
                    show:
                      legend_value: false
                  - entity: sensor.moritz_heizung
                    show:
                      legend_value: false
                  - entity: sensor.schlafzimmer_heizung
                    show:
                      legend_value: false
                  - entity: sensor.arbeitszimmer_heizung
                    show:
                      legend_value: false
                  - entity: sensor.wc_heizung
                    show:
                      legend_value: false
                  - entity: sensor.trovis_hk1_stellsignal
                    show:
                      legend_value: false
              - type: entities
                entities:
                  - entity: sensor.wohnzimmer_heizung
                  - entity: sensor.eingang_heizung
                  - entity: sensor.jonas_heizung
                  - entity: sensor.johanna_heizung
                  - entity: sensor.moritz_heizung
                  - entity: sensor.schlafzimmer_heizung
                  - entity: sensor.arbeitszimmer_heizung
                  - entity: sensor.wc_heizung
                  - entity: sensor.trovis_hk1_stellsignal
                title: Thermostate
                show_header_toggle: true
                state_color: true
              - name: R1
                type: custom:plotly-graph
                title: Aussentemperatur (24h)
                layout:
                  paper_bgcolor: transparent
                  plot_bgcolor: transparent
                  xaxis:
                    showlegend: true
                    rangeselector:
                      bgcolor: transparent
                      'y': 1
                      xanchor: left
                      yanchor: top
                      buttons:
                        - count: 3
                          step: hour
                        - count: 6
                          step: hour
                  yaxis:
                    type: number
                hours_to_show: 12
                refresh_interval: 60
                entities:
                  - name: AT
                    entity: sensor.trovis_fuhler_aussen_1_af1
                    yaxis: y1
                    line:
                      shape: spline
                      color: lightgrey
                      width: 2
                    fill: tozeroy
                    fillcolor: ‘rgba(211, 211, 211, 0.3)’
                    opacity: 0.5
                  - name: Vorlauf Ist
                    entity: sensor.trovis_fuhler_vorlauf_1_vf1
                    show_value: false
                    yaxis: y2
                    zorder: 2
                    line:
                      shape: spline
                      color: '#FF0000'
                      width: 2
                  - name: Vorlauf Soll
                    entity: sensor.trovis_hk1_vorlaufsoll
                    show_value: false
                    yaxis: y2
                    zorder: 3
                    line:
                      shape: spline
                      color: '#FFA500'
                      width: 2
                card_mod:
                  style: |
                    ha-card { 
                      --card-mod-icon-color: white;
                      padding: 0;
                      background: transparent;
                    }  
              - name: R2
                type: custom:plotly-graph
                title: Vor- und Rücklauf HK (24h)
                layout:
                  paper_bgcolor: transparent
                  plot_bgcolor: transparent
                  xaxis:
                    showlegend: true
                    rangeselector:
                      bgcolor: transparent
                      'y': 1
                      xanchor: left
                      yanchor: top
                      buttons:
                        - count: 3
                          step: hour
                        - count: 6
                          step: hour
                  yaxis:
                    type: number
                    range:
                      - 20
                      - 70
                  yaxis2:
                    type: number
                    range:
                      - 0
                      - 100
                hours_to_show: 12
                refresh_interval: 60
                entities:
                  - name: Steller
                    entity: sensor.trovis_hk1_stellsignal
                    line:
                      shape: spline
                      color: lightgrey
                    fillcolor: ‘rgba(211, 211, 211, 0.3)’
                    yaxis: y2
                    fill: tozeroy
                    opacity: 0.5
                    mode: none
                  - name: Rücklauf
                    entity: sensor.trovis_fuhler_rucklauf_1_ruf1
                    yaxis: y1
                    zorder: 1
                    line:
                      shape: spline
                      color: '#00B0F0'
                      width: 2
                  - name: Vorlauf
                    entity: sensor.trovis_fuhler_vorlauf_1_vf1
                    show_value: false
                    yaxis: y1
                    zorder: 2
                    line:
                      shape: spline
                      color: '#FF0000'
                      width: 2
                card_mod:
                  style: |
                    ha-card { 
                      --card-mod-icon-color: white;
                      padding: 0;
                      background: transparent;
                    }

[ralf170768]

Danke Dir :) ... Guten Rutsch ins neue Jahr