Dashboard Design

alles was Dashboard Design angeht...

Frontends von HACS installieren

Um Frontends von HACS zu nutzen musst du diesen natürlich erst installieren:

button (7).png

Meine Dashboards als Inspiration

hier kannst du dir meine Dashboards als Design Vorlage nehmen

Meine Dashboards als Inspiration

PC Dashboard

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

Meine Dashboards als Inspiration

Smartphone Dashboard

image.png


image.png


image.png


image.png


image.png


image.png


image.png


image.png


image.png


image.png


Meine Dashboards als Inspiration

Dashboard Design Überlegungen

macht euch im Vorfeld Gedanken was ihr alles braucht


Welche Räume und Status Seiten brauche ich?

Überlege dir eine Struktur wie du deine Kategorien anlegen willst

image.png

Template Card - Codes

Icon farbig (on / off) + Werte von Sensoren
wir verwenden hier eine Mushroom Template Card



Icon Farbe basierend auf Gruppenstatus (alle Lichter und Geräte als Helfer kombiniert)

{% if is_state('light.lichter_wohnzimmer', 'on') %}
  orange
{% endif %}

Raumstatus anzeige - Temperatur und Luftfeuchtigkeit:


{{ states('sensor.STATUS_1') }} °C / {{ states('sensor.STATUS_2') }} %

image.png

Mehrfarbige Icons auf Basis von Sensorwerten
wir verwenden hier eine Mushroom Template Card



{% set s = states('sensor.DEIN_SENSOR')|int %}
{% if s < 250 %}
  green
{% elif s < 300 %}
  orange
{% elif s > 500 %}
  red
{% else %}
{% endif %}

image.png

Badge Icon auf Basis von Sensor
{% if states('sensor.tautulli_beobachtend') | int == 1 %}
  mdi:numeric-1-circle
{% elif states('sensor.tautulli_beobachtend') | int == 2 %}
  mdi:numeric-2-circle
{% else %}
  mdi:alert-circle-outline
{% endif %}

image.png

On zu An / open zu geöffnet wir überschreiben States

image.png

individuelle Statusanzeige zum Beispiel machst du hiermit aus einem Sensorstate ON ein einfaches offen / an / etc.

{% if is_state('switch.alle_gerate', 'on') %}
  An
{% else %}
  Aus
{% endif %}
Sensor Werte in Template Card
{{ states('sensor.STATUS_1') }} °C / {{ states('sensor.STATUS_2') }} %

(Videos 2022) Mein Smartphone Dashboard

(Videos 2022) Mein Smartphone Dashboard

Startseite

views:
  - theme: Backend-selected
    title: Home
    type: custom:vertical-layout
    badges: []
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: weather
            entity: weather.home
            show_conditions: true
            show_temperature: false
          - type: entity
            entity: >-
              sensor.netatmo_mein_zuhause_weather_station_outdoor_module_temperature
          - type: light
            entity: light.alle_lichter
            tap_action:
              action: navigate
              navigation_path: licht
          - type: template
            icon: mdi:home-lightning-bolt
            icon_color: |-
              {% if is_state('switch.alle_gerate_ohne_3d_drucker', 'on') %}
                orange
              {% endif %}
            content: |-
              {% if is_state('switch.alle_gerate', 'on') %}
                An
              {% else %}
                Aus
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: gerat
          - type: template
            icon: mdi:window-closed-variant
            icon_color: |-
              {% if is_state('binary_sensor.fenster', 'on') %}
                orange
              {% endif %}
            content: |-
              {% if is_state('binary_sensor.fenster', 'on') %}
                geöffnet
              {% else %}
                geschlossen
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: fenster
          - type: entity
            entity: lock.tur
            tap_action:
              action: toggle
        alignment: center
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-person-card
            entity: person.manuel_fichtner
            icon_type: entity-picture
          - type: custom:mushroom-person-card
            entity: person.selina
            icon_type: entity-picture
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: binary_sensor.garagentor_on_off
            tap_action:
              action: call-service
              service: script.toggle
              data: {}
              target:
                entity_id: script.garage_taster
              confirmation:
                text: Bist du dir sicher?
            icon_color: yellow
          - type: custom:mushroom-entity-card
            entity: input_boolean.post
            tap_action:
              action: call-service
              service: input_boolean.turn_off
              data: {}
              target:
                entity_id: input_boolean.post
              confirmation:
                text: Briefkasten geleert?
            secondary_info: last-updated
            icon_color: yellow
      - type: custom:mushroom-template-card
        primary: Rooms
        secondary: ''
        icon: ''
      - square: false
        columns: 2
        type: grid
        cards:
          - type: custom:mushroom-template-card
            primary: Wohnen
            secondary: >-
              {{
              states('sensor.netatmo_mein_zuhause_weather_station_temperature')
              }} °C / {{
              states('sensor.netatmo_mein_zuhause_weather_station_humidity') }}
              % 
            icon: mdi:sofa
            icon_color: |-
              {% if is_state('light.lichter_wohnzimmer', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: wohnen
          - type: custom:mushroom-template-card
            primary: Küche
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature_5') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity_5') }} % 
            icon: mdi:fridge
            icon_color: |-
              {% if is_state('light.lichter_kuche', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: kuche
          - type: custom:mushroom-template-card
            primary: Büro
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature_2') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity_2') }} % 
            icon: mdi:desk
            icon_color: |-
              {% if is_state('light.ambiente_pc', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: buro
            badge_icon: mdi:electric-switch
            badge_color: |-
              {% if is_state('switch.3d_drucker_on_off', 'on') %}
                red
              {% endif %}
          - type: custom:mushroom-template-card
            primary: Bad
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature_4') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity_4') }} % 
            icon: mdi:shower
            icon_color: >-
              {% if is_state('light.badezimmerlicht_level_light_color_on_off',
              'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: bad
          - type: custom:mushroom-template-card
            primary: Schlafzimmer
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature_3') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity_3') }} % 
            icon: mdi:bed
            icon_color: |-
              {% if is_state('light.schlafzimmerlicht', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: schlafzimmer
          - type: custom:mushroom-template-card
            primary: Flur
            icon: mdi:floor-plan
            icon_color: |-
              {% if is_state('light.lichter_flur', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: flur
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity') }} % 
          - type: custom:mushroom-template-card
            primary: Keller
            icon: mdi:washing-machine
            icon_color: |-
              {% if is_state('light.waschkuche', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: keller
            secondary: >-
              {{ states('sensor.lumi_lumi_weather_temperature_6') }} °C / {{
              states('sensor.lumi_lumi_weather_humidity_6') }} % 
          - type: custom:mushroom-template-card
            primary: Garten
            icon: mdi:tree
            icon_color: ''
            tap_action:
              action: navigate
              navigation_path: garten
            secondary: >-
              {{
              states('sensor.netatmo_mein_zuhause_weather_station_outdoor_module_temperature')
              }} °C / {{
              states('sensor.netatmo_mein_zuhause_weather_station_outdoor_module_humidity')
              }} % 
            fill_container: false
            multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Status
        secondary: ''
        icon: ''
      - square: false
        columns: 4
        type: grid
        cards:
          - type: custom:mushroom-template-card
            primary: Robots
            icon: mdi:robot
            icon_color: red
            tap_action:
              action: navigate
              navigation_path: robots
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: PV
            icon: mdi:solar-power-variant
            icon_color: >-
              {% set s = states('sensor.pv_anlage_electrical_measurement')|int
              %}

              {% if s > 300 %}
                green
              {% elif s > 150 %}
                orange
              {% elif s > 1 %}
                red
              {% else %}

              {% endif %}
            tap_action:
              action: navigate
              navigation_path: pv
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Energy
            icon: mdi:lightning-bolt
            icon_color: |-
              {% set s = states('sensor.total_power')|int %}
              {% if s < 250 %}
                green
              {% elif s < 500 %}
                orange
              {% elif s > 500 %}
                red
              {% else %}
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: energy
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Netzwerk
            icon: mdi:server
            icon_color: >-
              {% if is_state('binary_sensor.fritz_box_7590_cable_link_2', 'on')
              %}
                green
              {% else %}
                red
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: netzwerk
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Mercedes
            icon: mdi:car
            icon_color: |-
              {% set s = states('sensor.n_as_690_fuel_level')|int %}
              {% if s > 60 %}
                green
              {% elif s > 30 %}
                orange
              {% elif s > 0 %}
                red
              {% else %}
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: car
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Smoker
            icon: mdi:grill
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: smoker
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Kalender
            icon: mdi:calendar
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: kalender
            secondary: ''
            layout: vertical
          - type: custom:mushroom-template-card
            primary: Müll
            icon: mdi:trash-can
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: mull
            secondary: ''
            layout: vertical
      - type: custom:auto-entities
        card:
          type: entities
          state_color: true
        filter:
          include:
            - attributes:
                device_class: battery
              state: <30
            - type: ''
          exclude: []
        show_empty: false


(Videos 2022) Mein Smartphone Dashboard

Video

hier kommt sämtlicher Code zu meinem Smartphone Dashboard incl. der dazugehörenden Videos

(Videos 2022) Mein Smartphone Dashboard

Back Button

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:arrow-left
    tap_action:
      action: navigate
      navigation_path: /smartphone-1/0
(Videos 2022) Mein Smartphone Dashboard

Grundgedanke

macht euch im Vorfeld Gedanken was ihr alles braucht


Welche Räume und Status Seiten brauche ich?
(Videos 2022) Mein Smartphone Dashboard

PV



type: custom:mini-graph-card
entities:
  - sensor.pv_anlage_electrical_measurement
color_thresholds:
  - value: 0
    color: '#ff0000'
  - value: 50
    color: '#ff8800'
  - value: 200
    color: '#90ee90'
align_icon: left
align_state: center
show_points: false
height: 100
hours_to_show: 24
name: Produktion
show:
  graph: true
  name: true
  extrema: true



type: energy-solar-graph



type: custom:sun-card
(Videos 2022) Mein Smartphone Dashboard

Raumstruktur

überlege dir eine Struktur wie du deine Kategorien anlegen willst

image.png

(Videos 2022) Mein Smartphone Dashboard

Kioskmode

Erstellt einen Helfer-Schalter mit dem Namen Kioskmode

Danach können wir den Kioskmode aktivieren indem wir folgenden Code im Dashboard ergänzen


kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.kioskmode: 'on'
      hide_sidebar: true
      hide_header: true
    - entity:
        input_boolean.kioskmode: 'off'
      hide_sidebar: false
      hide_header: false
(Videos 2022) Mein Smartphone Dashboard

Meine Frontend Pakete aus Hacs

image.png

wenn ihr mein Dashboard nachbauen wollt solltet ihr alle diese

(Videos 2022) Mein Smartphone Dashboard

Seiten anlegen und einstellen

image.png

bei der Seitenerstellung bitte die YAML anpassen

theme: Backend-selected
title: Büro
path: buro
type: custom:vertical-layout
subview: false
badges: []

Jetzt geht es an die Grundstruktur des ersten Raumes hier habe ich meist folgende Config:

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-left-bold
        picture: ''
        content: Home
        tap_action:
          action: navigate
          navigation_path: /lovelace-yotube/smartphonehome
      - type: entity
        entity: sensor.TEMPERATUR
      - type: entity
        entity: sensor.LUFTFEUCHTIGKEIT
  - type: custom:mushroom-template-card
    primary: Lichter
    secondary: ''
    icon: ''
  - type: vertical-stack
    cards: []
  - type: custom:mushroom-template-card
    primary: Geräte
    secondary: ''
    icon: ''
  - type: vertical-stack
    cards: []
  - type: custom:mushroom-template-card
    primary: Heizung
    secondary: ''
    icon: ''
  - type: vertical-stack
    cards: []
  - type: custom:mushroom-template-card
    primary: Sonstiges
    secondary: ''
    icon: ''
  - type: vertical-stack
    cards: []

Browsermod

 

Fullscreen Popup von z.B. einer Türklingel:

service: browser_mod.popup
data:
  dismissable: true
  autoclose: false
  size: fullscreen
  timeout: 10000
  content:                                    #trage hier deine Kamerakarte ein
    type: custom:frigate-card
    cameras:
      - camera_entity: camera.haustuer           
        live_provider: go2rtc