Wie im Dashboards-Thread versprochen kommt anbei ein kleiner Breakdown über das Walltablet welches ich aktuell im Einsatz habe.
TLDR: Der Yaml Code befindet sich ganz unten
Optik
- Das System basiert weitestgehend aus den bekannten Mushroom-Cards. Alle weiteren Karten wurden mit Card-Mod so angepasst, dass sie sich optisch einfügen.
- Die Schriftart ist „Alexandria“ von Google-Fonts
- Die Icons sind von „Streamline-Icons“
Aufbau und Gridsystem
- Das linke fixierte Menü habe ich durch durch das Custom Repository “Sidebar Card” realisiert. Ich benutze eine ältere Version, da ich ein paar Änderungen vorgenommen habe um alles wie gewünscht aussehen zu lassen. Mittlerweile gab es ein paar neue Releases.
- Das Dashboard ist zwar responsiv und ich benutze das gleiche auf dem Smartphone, allerdings weitestgehend für ein Ipad optimiert (in Verwendung mit der Kioskr-App)
- Das Grid ist ingesamt sehr rigide und über die Layout-Card (mit custom:grid-layout) praktisch handgefertigt. Jede Anpassung muss neu definiert werden und ein Hinzufügen neuer Karten über die UI ist leider kaum möglich.
Verwendete HACS Komponenten
Sidebar-Card (von RomRider)
Link zum Repository
kiosk-mode(von maykar)
Button-Card (von RomRider)
Link zum Repository
Mushroom Light Card (von piitaya)
Link zum Repository
Mushroom Entity Card (von piitaya)
Link zum Repository
Mushroom Climate Card (von piitaya)
Link zum Repository
Mushroom Chips Card (von piitaya)
Link zum Repository
Mushroom Vacuum Card (von piitaya)
Link zum Repository
Mushroom Select Card (von piitaya)
Link zum Repository
Mini Graph Card (von kalkih)
Link zum Repository
Mini Media Player Card (von kalkih)
Link zum Repository
Mod-Card (von thomasloven)
Link zum Repository
State Switch Card (von thomasloven)
Link zum Repository
Popup Card (von thomasloven)
Link zum Repository
State-Switch Card (von thomasloven)
Link zum Repository
Layout-Card (von thomasloven)
Link zum Repository
Native HA Karten
- Gauge
(Nativ in Home Assistant verfügbar)
Seiten
Das System besteht maßgeblich aus folgenden Seiten:
Welcome Board
Dies ist ein Bildschirmschoner der als schnelle Übersicht dient, da das Tablet sich per Gesichtserkennung einschaltet und an einem sehr zentralen Ort im Haus hängt.
Die Mushroom-Bubble Cards geben Aufschluss über unterschiedliche Infos wie:
- Müllentsorgung
- anstehende Geburtstage
- Waschmaschine
- Fahrzeiten
- Anwesenheit
- usw.
Darüber hinaus gibt es Widget-Cards die ich mit Custom:Button-Cards und vielen (wild verschachtelten) Konditionals gezimmert habe.
- Wenn sich das Haus in einem bestimmten „Modus“ befindet, wird dieser hier angezeigt und kann mit einem Touch beendet werden.
- Wenn Musik läuft, wird ein kleiner Mediaplayer ebenfalls als Widget angezeigt.
- Es gibt auch ein Stoßlüften-Widget was anhand der Raumfeuchtigkeit Hinweise über die Raumluft gibt.
Home-Ansicht:
Hier sollten eigentlich weitestgehend Raum-übergreifende Dinge dargestellt werden, wie: Stromverbrauch, Außentemperatur, Globale Helligkeitswerte, Saugroboter, Pflanzen etc.
Ein paar Licht-Entitäten für die Räume haben sich mittlerweile auch hier hin verirrt, da man so sehr schnell ganze Bereiche des Hauses ein und ausschalten kann. Konzeptionell ist das nicht ganz sauber und ich habe schon Pläne diese Seite bald zu updaten.
Das Herzstück dieses Dashboards ist ein selbstgebauter „Slider“ (der eigentlich keiner ist).
Es handelt sich lediglich um eine Custom:State-Switch Card, die sich den aktiven Wert eines Input Selects-Helfers zu Nütze macht und immer die gleichnamige Karte anzeigt. Die Slides sind Custom:Button Cards. Mit Klick auf die Karte wechselt der Input-Select durch und es wird die nächste Karte angezeigt (input_select.select_next).
Das gleiche Prinzip verwende ich auf der Audio-Seite um den aktiven Mediaplayer anzuzeigen.
Ich hoffe es ist einigermaßen verständlich 
Raum-Übersicht:
Diese Ansicht beinhaltet alle Sensoren und Schalter in die jeweiligen Räume gruppiert.
Bei uns läuft, wie wahrscheinlich bei den meisten, ziemlich viel automatisiert, weshalb ich nur selten ganz spezielle Entitäten hierüber an und ausschalten muss.
Audio:
Analog wie bei dem „Slider“ auf der Home-Ansicht, wird der MediaPlayer anhand eines Input-Selects und Custom:State-Switch gesteuert. (Es müsste auch mit Conditional-Karten funktionieren.) Dadurch entsteht die Illusion es handelt sich um einen Player und man wählt nur den Output. In Wahrheit sind es natürlich vier. Auch das Styling der Player-Auswahl (Alles Custom:Button-Cards) fragt immer wieder den aktiven Eintrag aus dem Input-Select ab und passt das CSS dementsprechend an.
Die Karte für die Audio-Kacheln unterhalb ist ebenfalls eine Custom:Button-Card. Diese gibt bei der tap_action eine Sonos-Favorite-ID als Parameter weiter. Somit benötigt man nur ein Script zum Abspielen aller Sonos-Playlisten. Das Script zieht sich ebenfalls den Namen des Media-Players aus dem korrespondierendem Input-Select und weiß somit, Auf welchem Mediaplayer die Musik abgespielt werden soll.
Es gibt noch weitere Audio-Kategorien wie Radio (Rss), Podcast(Multiscrape) oder längere Sets die direkt im Media-Ordner liegen.
Szenen
Diese Seite ist noch ein WIP. Der Name ist etwas irreführend. Hierbei handelt es sich eher um verschiedene Modi die aktiviert werden können. Auch diese Seite wird bald noch mal angefasst.
Einstellungen
Hier eine Auswahl an wichtigen Einstellungsschaltern, damit sich auch andere zurecht finden, die sich nicht mit HA auskennen.
Hier ist der Raw-Yaml für Welcome Board, Home, Räume und Audio.
Ich musste kürzen um die max. Anzahl an Zeichen nicht zu brechen. Es sollte hoffentlich trotzdem alles passen.
title: Home
views:
- theme: Backend-selected
title: Räume
path: raeume
icon: ''
badges: []
type: custom:grid-layout
layout:
grid-template-columns: 24px 1fr 1fr 1fr 1fr 24px
grid-template-rows: auto
grid-gap: 16px
grid-template-areas: |
". wohnzimmer_h wohnzimmer_h wohnzimmer_h wohnzimmer_h . "
". wz_licht_1 wz_licht_2 wz_licht_3 wz_licht_5 ."
". wz_licht_6 wz_licht_6 wz_licht_7 wz_licht_7 ."
". wz_temp wz_temp wz_luft wz_luft ."
". wz_climate wz_climate wz_climate wz_climate ."
". wz_vh_offen wz_vh_zu wz_vh_hund wz_vh_cinema ."
". wz_kerzen wz_kerzen wz_block wz_block ."
". wz_licht_4 wz_multi wz_schimmel wz_schimmel ."
". wz_reinigen wz_reinigen wz_schimmel wz_schimmel ."
mediaquery:
'(max-width: 900px)':
grid-template-columns: 50% 50%
grid-gap: 0px
grid-template-areas: |
"wohnzimmer_h wohnzimmer_h"
"wz_licht_1 wz_licht_2"
"wz_licht_3 wz_licht_6"
"wz_licht_5 wz_licht_7"
"wz_licht_4 wz_licht_4"
"wz_temp wz_temp"
"wz_luft wz_luft"
"wz_block wz_block"
"wz_vh_zu wz_vh_offen"
"wz_vh_hund wz_vh_cinema"
"wz_climate wz_climate"
"wz_reinigen wz_reinigen"
"wz_schimmel wz_schimmel"
"wz_kerzen wz_kerzen"
"wz_multi wz_multi"
cards:
- type: custom:button-card
template: header_card
view_layout:
grid-area: wohnzimmer_h
name: Wohnzimmer
- type: custom:mushroom-light-card
entity: light.wohnzimmer
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Wohnzimmer
view_layout:
grid-area: wz_licht_1
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-light-card
entity: light.wohnzimmer_stehlampe
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Stehlampe
view_layout:
grid-area: wz_licht_2
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-light-card
entity: light.wohnzimmer_fensterbank
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Fensterbank
view_layout:
grid-area: wz_licht_3
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-entity-card
entity: switch.wohnzimmer_growlight
tap_action:
action: toggle
icon: fapro:grow_light
icon_color: teal
name: Growlight
view_layout:
grid-area: wz_licht_4
- type: custom:mushroom-light-card
entity: light.wohnzimmer_fensterbank_golight
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Tisch Spot
view_layout:
grid-area: wz_licht_6
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-light-card
entity: light.wohnzimmer_blumentopf
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Blumentopf
view_layout:
grid-area: wz_licht_7
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_oeffnen
view_layout:
grid-area: wz_vh_offen
icon: fapro:curtain
layout: icon_name
name: Öffnen
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_schliessen
view_layout:
grid-area: wz_vh_zu
icon: fapro:curtain
layout: icon_name
name: Schließen
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_hund
view_layout:
grid-area: wz_vh_hund
icon: fapro:curtain
layout: icon_name
name: Hund
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_cinema_mode
view_layout:
grid-area: wz_vh_cinema
icon: fapro:curtain
layout: icon_name
name: Cinema
- type: custom:mini-graph-card
entities:
- sensor.wohnzimmer_temperatur_luftfeuchtigkeit_temperature
icon: fapro:temp
name: Temperatur
view_layout:
grid-area: wz_temp
align_icon: left
align_state: left
animate: true
line_width: 5
hour24: true
show:
fill: false
card_mod:
style: |
ha-card .header {
justify-content: flex-start;
}
ha-card .header {
padding: 16px 24px 8px 24px;
}
ha-card .name > span {
opacity: 1;
margin-left: 22px;
font-weight: 700;
font-size: 14px;
}
ha-card .state {
font-size: 8px;
font-weight: 500;
line-height: 12px;
color: var(--secondary-text-color);
margin-left: 62px;
transform: translateY(-8px);
}
ha-card .icon {
color: var(--primary-text-color);
transform: translateY(12px) scale(1.25);
}
- type: custom:mini-graph-card
entities:
- sensor.wohnzimmer_temperatur_luftfeuchtigkeit_humidity
icon: fapro:drop
name: Luftfeuchtigkeit
view_layout:
grid-area: wz_luft
align_icon: left
align_state: left
animate: true
line_width: 5
hour24: true
line_color: var(--secondary-text-color)
show:
fill: false
card_mod:
style: |
ha-card .header {
justify-content: flex-start;
}
ha-card .header {
padding: 16px 24px 8px 24px;
}
ha-card .name > span {
opacity: 1;
margin-left: 22px;
font-weight: 700;
font-size: 14px;
}
ha-card .state {
font-size: 8px;
font-weight: 500;
line-height: 12px;
color: var(--secondary-text-color);
margin-left: 62px;
transform: translateY(-8px);
}
ha-card .icon {
color: var(--primary-text-color);
transform: translateY(12px) scale(1.25);
}
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.vacuum_wohnzimmer_reinigen
view_layout:
grid-area: wz_reinigen
icon: fapro:vacuum
layout: icon_name
name: Wohnzimmer
show_state: false
- type: custom:mushroom-entity-card
entity: switch.wohnzimmer_multimedia
tap_action:
action: toggle
icon: fapro:smartplug
icon_color: teal
name: Multimedia
view_layout:
grid-area: wz_multi
- type: gauge
entity: sensor.wohnzimmer_schimmel_sensor
view_layout:
grid-area: wz_schimmel
min: 0
needle: false
max: 100
unit: '%'
segments:
- from: 0
color: var(--accent-color)
- from: 70
color: '#EC6337'
- type: custom:mushroom-entity-card
entity: input_boolean.licht_wohnzimmer_kerzeneffekt
tap_action:
action: toggle
icon: fapro:candle
icon_color: teal
name: Kerzeneffekt
view_layout:
grid-area: wz_kerzen
- type: custom:mushroom-entity-card
entity: input_boolean.bewegungsmelder_vorderes_haus_blockieren
tap_action:
action: toggle
icon: fapro:toggle
icon_color: teal
name: Beweg. vorne blockieren
view_layout:
grid-area: wz_block
- type: custom:mushroom-climate-card
icon: fapro:heat
entity: climate.better_thermostat_wohnzimmer
fill_container: false
collapsible_controls: false
show_temperature_control: true
name: Wohnzimmer
layout: horizontal
hvac_modes: []
view_layout:
grid-area: wz_climate
- theme: Backend-selected
title: Home
path: home
badges: []
type: custom:grid-layout
layout:
grid-template-columns: 24px 1fr 1fr 1fr 1fr 24px
grid-template-rows: auto
grid-gap: 16px
grid-template-areas: |
". home_h h_chips h_chips h_chips . "
". h_licht_1 h_licht_2 h_licht_3 h_bright ."
". h_temp h_temp h_slider h_slider ."
". h_vacuum h_vacuum h_slider h_slider ."
". h_script_1 h_script_2 h_script_3 h_script_4 ."
". h_pop1 h_pop1 h_pop2 h_pop2 ."
". h_pop3 h_pop3 h_pop4 h_pop4 ."
mediaquery:
'(max-width: 900px)':
grid-template-columns: 50% 50%
grid-gap: 0px
grid-template-areas: |
"h_chips_mobile h_chips_mobile"
"home_h home_h"
"h_licht_1 h_licht_2"
"h_licht_3 h_bright"
"h_script_1 h_script_2"
"h_script_3 h_script_4"
"h_vacuum h_vacuum"
"h_temp h_temp"
"h_slider h_slider"
cards:
- type: custom:button-card
template: header_card
view_layout:
grid-area: home_h
name: Home
- type: custom:mushroom-light-card
entity: light.wohnzimmer
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Wohnzimmer
view_layout:
grid-area: h_licht_1
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-light-card
entity: light.flur
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Flur
view_layout:
grid-area: h_licht_2
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-light-card
entity: light.kueche
icon: fapro:lightbulb
use_light_color: false
fill_container: false
secondary_info: state
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
name: Küche
view_layout:
grid-area: h_licht_3
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mushroom-number-card
entity: input_number.variable_global_helligkeit
icon: fapro:sun
icon_color: teal
view_layout:
grid-area: h_bright
name: Gl. Helligkeit
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: var(--accent-color) !important;
}
- type: custom:mini-graph-card
entities:
- sensor.garten_bewegungsmelder_temperature
icon: fapro:temp
view_layout:
grid-area: h_temp
align_icon: left
align_state: left
name: Außentemperatur
animate: true
line_width: 5
hour24: true
show:
fill: false
card_mod:
style: |
ha-card .header {
justify-content: flex-start;
}
ha-card .header {
padding: 16px 24px 8px 24px;
}
ha-card .name > span {
opacity: 1;
margin-left: 22px;
font-weight: 700;
font-size: 14px;
}
ha-card .state {
font-size: 8px;
font-weight: 500;
line-height: 12px;
color: var(--secondary-text-color);
margin-left: 62px;
transform: translateY(-8px);
}
ha-card .icon {
color: var(--primary-text-color);
transform: translateY(12px) scale(1.25);
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.waschmaschine
state: 'on'
chip:
type: entity
entity: sensor.waschmaschine_verbleibende_zeit
icon: fapro:chip-laundry-2
- type: conditional
conditions:
- entity: sensor.schlafzimmer_luftfeuchtigkeit_zu_hoch
state: 'true'
chip:
type: entity
entity: sensor.schlafzimmer_luftfeuchtigkeit_gerundet
icon: fapro:chip-bed
- type: conditional
conditions:
- entity: sensor.schlafzimmer_entfeuchter_power
state: '0.3'
chip:
type: template
icon: fapro:drop
content: Tank voll
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
- type: conditional
conditions:
- entity: calendar.geburtstage
state: 'on'
chip:
type: entity
entity: sensor.geburtstage_heute
icon: fapro:birthday
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state_not: Morgen
- entity: sensor.abfall_naechster
state_not: Heute
chip:
type: template
entity: sensor.abfall_naechster
icon: mdi:recycle-variant
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state: Morgen
chip:
type: entity
entity: sensor.abfall_naechster_morgen
icon: mdi:recycle-variant
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state: Heute
chip:
type: entity
entity: sensor.abfall_naechster_heute
icon: mdi:recycle-variant
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
hold_action:
action: more-info
- type: template
icon: mdi:timer-outline
tap_action:
action: navigate
navigation_path: /lovelace/kuchenhelfer
- type: template
icon: fapro:chip-car-2
tap_action:
action: more-info
entity: sensor.fahrzeit
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Anwesend
chip:
type: template
icon: fapro:chip-presence-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Abwesend
chip:
type: template
icon: fapro:chip-presence-not-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Wachhund
chip:
type: template
icon: fapro:chip-presence-watchdog
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: true
tap_action:
action: more-info
alignment: end
view_layout:
grid-area: h_chips
show:
mediaquery: '(min-width: 901px)'
card_mod:
style: |
ha-card {
margin-top: 48px;
padding-bottom: 0px;
margin-bottom: -20px;
transition: none;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.waschmaschine
state: 'on'
chip:
type: entity
entity: sensor.waschmaschine_verbleibende_zeit
icon: fapro:chip-laundry-2
- type: conditional
conditions:
- entity: sensor.schlafzimmer_luftfeuchtigkeit_zu_hoch
state: 'true'
chip:
type: entity
entity: sensor.schlafzimmer_luftfeuchtigkeit_gerundet
icon: fapro:chip-bed
- type: conditional
conditions:
- entity: calendar.geburtstage
state: 'on'
chip:
type: entity
entity: sensor.geburtstage_heute
icon: fapro:birthday
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state_not: Morgen
- entity: sensor.abfall_naechster
state_not: Heute
chip:
type: template
entity: sensor.abfall_naechster
icon: mdi:recycle-variant
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state: Morgen
chip:
type: entity
entity: sensor.abfall_naechster_morgen
icon: mdi:recycle-variant
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
- type: conditional
conditions:
- entity: sensor.abfall_naechster
state: Heute
chip:
type: entity
entity: sensor.abfall_naechster_heute
icon: mdi:recycle-variant
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
hold_action:
action: more-info
- type: template
icon: fapro:chip-car-2
tap_action:
action: more-info
entity: sensor.fahrzeit
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Anwesend
chip:
type: template
icon: fapro:chip-presence-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Abwesend
chip:
type: template
icon: fapro:chip-presence-not-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Wachhund
chip:
type: template
icon: fapro:chip-presence-watchdog
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: true
tap_action:
action: more-info
alignment: start
view_layout:
grid-area: h_chips_mobile
show:
mediaquery: '(max-width: 900px)'
card_mod:
style: |
ha-card {
margin-top: 48px;
padding-bottom: 0px;
margin-bottom: -20px;
transition: none;
}
- type: custom:mushroom-vacuum-card
entity: vacuum.vacuumEntity
commands:
- on_off
- start_pause
- locate
- clean_spot
- return_home
icon_animation: true
icon: fapro:vacuum
hold_action:
action: none
double_tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.vacuum_zum_muell_fahren
view_layout:
grid-area: h_vacuum
card_mod:
style: |
ha-card{
}
- type: custom:mod-card
view_layout:
grid-area: h_slider
card_mod:
style: |
ha-card {
background: var(--ha-card-background);
border-top: 1px solid var(--background-color);
height: 100%;
}
card:
type: custom:state-switch
entity: input_select.dashboard_state_switch_card_helfer
states:
Flora:
type: custom:button-card
entity: null
card_mod:
style: |
:host {
}
tap_action:
action: call-service
service: script.dashboard_state_switch_card_durchwechseln
name: Flora
icon: fapro:grow_light
styles:
card:
- background: >-
var(--ha-card-background)
url('/local/src/buttoncard-pflanze-bg.png')
- background-position: center right
- background-size: contain
- background-repeat: no-repeat
- border: 0px
- height: 100%
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 16px
name:
- font-size: 14px
- padding-left: 4px
- font-weight: bold
- justify-self: start
custom_fields:
label_strelitzie:
- font-size: 14px
- padding-left: 24px
- padding-top: 6px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 24px
strelitzie:
- font-size: 20px
- padding-top: 10px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
label_efeutute:
- font-size: 14px
- padding-left: 24px
- padding-top: 6px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 18px
efeutute:
- font-size: 20px
- padding-top: 10px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
label_stillstand:
- font-size: 14px
- padding-left: 24px
- padding-top: 6px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 24px
stillstand:
- font-size: 20px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
- margin-top: 4px
next:
- font-size: 20px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
- margin-top: 24px
grid:
- grid-template-areas: >-
"i n" "label_efeutute label_efeutute""efeutute
efeutute""label_strelitzie label_strelitzie" "strelitzie
strelitzie""label_stillstand label_stillstand""stillstand
stillstand" "next next"
- grid-template-columns: 64px 1fr
- grid-template-rows: 32px 1fr
custom_fields:
label_strelitzie: |
[[[
if (states["plant.wohnzimmer_strelitzie"].state === "problem")
return `STRELITZIE <ha-icon icon="fapro:chip-warning" style="width: 17px; height: 17px; transform: translateY(-3px) !important; color: #EC6337"></ha-icon>`
else
return "STRELITZIE"
]]]
strelitzie: |
[[[
let plantBackDefault = "var(--accent-color-background-opacity)"
let plantBackDefaultIcon = "var(--accent-color)"
let warningColor = "var(--accent-color)"
let warningColorIcon = "var(--primary-text-color)"
let plant = "plant.wohnzimmer_strelitzie"
let moisture = (states[plant].attributes.problem.includes("moisture") === true) ? warningColor : plantBackDefault;
let moistureIcon = (states[plant].attributes.problem.includes("moisture") === true) ? warningColorIcon : plantBackDefaultIcon;
let conductivity = (states[plant].attributes.problem.includes("conductivity") === true) ? warningColor : plantBackDefault;
let conductivityIcon = (states[plant].attributes.problem.includes("conductivity") === true) ? warningColorIcon : plantBackDefaultIcon;
return `<div style=" background: ` + moisture + `; padding: 4px 8px 4px 4px; border-radius: 50px; text-align: left; display: inline-block;">
<ha-icon icon="fapro:plant_water" style="width: 24px; height: 24px; transform:translateY(-2px) !important; padding-right:0px; color:` + moistureIcon + `"></ha-icon>`
+
states["sensor.wohnzimmer_pflanze_strelitzie_moisture"].state +
`<span style="font-size: 12px;"> %</span> </div>`
+
`<div style=" background: `+ conductivity + `; padding: 4px 8px 4px 4px; border-radius: 50px; text-align: left; display: inline-block; margin-left: 8px;">
<ha-icon icon="fapro:plant_conductivity" style="width: 24px; height: 24px; transform:translateY(-2px) !important; padding-right:0px; color:` + conductivityIcon + ` "></ha-icon>` + states["sensor.wohnzimmer_pflanze_strelitzie_conductivity"].state
+
`<span style="font-size: 12px;"> µS</span> </div>`
]]]
label_efeutute: |
[[[
if (states["plant.buero_efeutute"].state === "problem")
return `EFEUTUTE <ha-icon icon="fapro:chip-warning" style="width: 17px; height: 17px; transform: translateY(-3px) !important; color: #EC6337"></ha-icon>`
else
return "EFEUTUTE"
]]]
efeutute: |
[[[
let plantBackDefault = "var(--accent-color-background-opacity)"
let plantBackDefaultIcon = "var(--accent-color)"
let warningColor = "var(--accent-color)"
let warningColorIcon = "var(--primary-text-color)"
let plant = "plant.buero_efeutute"
let moisture = (states[plant].attributes.problem.includes("moisture") === true) ? warningColor : plantBackDefault;
let moistureIcon = (states[plant].attributes.problem.includes("moisture") === true) ? warningColorIcon : plantBackDefaultIcon;
let conductivity = (states[plant].attributes.problem.includes("conductivity") === true) ? warningColor : plantBackDefault;
let conductivityIcon = (states[plant].attributes.problem.includes("conductivity") === true) ? warningColorIcon : plantBackDefaultIcon;
return `<div style=" background: ` + moisture + `; padding: 4px 8px 4px 4px; border-radius: 50px; text-align: left; display: inline-block;">
<ha-icon icon="fapro:plant_water" style="width: 24px; height: 24px; transform:translateY(-2px) !important; padding-right:0px; color:` + moistureIcon + `"></ha-icon>`
+
states["sensor.buero_pflanze_efeutute_moisture"].state +
`<span style="font-size: 12px;"> %</span> </div>`
+
`<div style=" background: `+ conductivity + `; padding: 4px 8px 4px 4px; border-radius: 50px; text-align: left; display: inline-block; margin-left: 8px;">
<ha-icon icon="fapro:plant_conductivity" style="width: 24px; height: 24px; transform:translateY(-2px) !important; padding-right:0px; color:` + conductivityIcon + ` "></ha-icon>` + states["sensor.buero_pflanze_efeutute_conductivity"].state
+
`<span style="font-size: 12px;"> µS</span> </div>`
]]]
label_stillstand: |
[[[
if (states["sensor.pflanzen_zuletzt_gegossen"].state >= 14)
return `GEGOSSEN VOR <ha-icon icon="fapro:chip-warning" style="width: 17px; height: 17px; transform: translateY(-3px) !important; color: #EC6337"></ha-icon>`
else
return "GEGOSSEN VOR"
]]]
stillstand: |
[[[
let suffix = (states["sensor.pflanzen_zuletzt_gegossen"].state === 1) ? " Tage" : " Tagen";
return states["sensor.pflanzen_zuletzt_gegossen"].state + suffix
]]]
next: |
[[[
return `<ha-icon
icon="mdi:arrow-right"
style="width: 24px; height: 24px; color:var(--primary-text-color); background: rgba(189,189,189,0.2); padding: 4px 16px 8px; border-radius: 8px;">
</ha-icon>`
]]]
Verbrauch:
type: custom:button-card
entity: null
tap_action:
action: call-service
service: script.dashboard_state_switch_card_durchwechseln
name: Energieverbrauch
icon: fapro:energy
styles:
card:
- background: var(--ha-energieverbrauch-img)
- background-position: center right
- background-size: contain
- background-repeat: no-repeat
- border: 0px
- height: 100%
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 16px
name:
- font-size: 14px
- padding-left: 4px
- font-weight: bold
- justify-self: start
custom_fields:
label_gas:
- font-size: 14px
- padding-left: 24px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 24px
gas:
- font-size: 40px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
label_strom:
- font-size: 14px
- padding-left: 24px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 24px
strom:
- font-size: 40px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
label_wasser:
- font-size: 14px
- padding-left: 24px
- font-weight: bold
- justify-self: start
- color: var(--secondary-text-color)
- margin-top: 24px
wasser:
- font-size: 20px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
- margin-top: 4px
next:
- font-size: 20px
- padding-left: 24px
- font-weight: 300
- justify-self: start
- color: var(--primary-text-color)
- margin-top: 24px
grid:
- grid-template-areas: >-
"i n" "label_gas label_gas" "gas gas""label_strom
label_strom""strom strom""label_wasser
label_wasser""wasser wasser" "next next"
- grid-template-columns: 64px 1fr
- grid-template-rows: 32px 1fr
custom_fields:
label_gas: >
[[[ return "GAS - " +
(parseFloat(states["sensor.energie_gasverbrauch_taeglich"].state)
* 0.11).toFixed(2).replace(".",",") + " €"]]]
gas: |
[[[
return parseFloat(states["sensor.energie_gasverbrauch_taeglich"].state).toFixed(2).replace(".",",") + `<span style="font-size: 14px"> kWh</span>`
]]]
label_strom: >
[[[ return "STROM - " +
(parseFloat(states["sensor.energie_stromverbrauch_taeglich"].state)
* 0.3).toFixed(2).replace(".",",") + " €"]]]
strom: |
[[[
return parseFloat(states["sensor.energie_stromverbrauch_taeglich"].state).toFixed(2).replace(".",",") + `<span style="font-size: 14px"> kWh</span>`
]]]
label_wasser: >
[[[ return "WASSER - " +
(parseFloat(states["sensor.energie_wasserverbrauch_taeglich"].state)
* 1.8).toFixed(2).replace(".",",") + " €"]]]
wasser: |
[[[
return parseFloat(states["sensor.energie_wasserverbrauch_taeglich"].state).toFixed(2) / 0.0010000 + " liter"
]]]
next: |
[[[
return `<ha-icon
icon="mdi:arrow-right"
style="width: 24px; height: 24px; color:var(--primary-text-color); background: rgba(189,189,189,0.2); padding: 4px 16px 8px; border-radius: 8px;">
</ha-icon>`
]]]
- type: custom:button-card
entity: input_select.haus_anwesenheit
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.haus_anwesenheit
option: Abwesend
view_layout:
grid-area: h_script_1
icon: fapro:door
layout: icon_name
show_state: false
name: Haus verlassen
show_name: true
show_label: false
styles:
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 64px 1fr
- type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.haus_anwesenheit
option: Wachhund
view_layout:
grid-area: h_script_2
icon: fapro:freddy
layout: icon_name
show_state: false
name: freddy Mode
show_name: true
show_label: false
styles:
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 64px 1fr
- type: custom:button-card
entity: input_select.haus_modi
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.haus_modi
option: Nacht
icon: fapro:stars
view_layout:
grid-area: h_script_3
layout: icon_name
show_state: false
name: Gute Nacht
show_name: true
show_label: false
styles:
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 64px 1fr
- type: custom:button-card
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.guten_morgen_mode_aktiviert
view_layout:
grid-area: h_script_4
icon: fapro:sun
layout: icon_name
show_state: false
name: Guten Morgen
show_name: true
show_label: false
styles:
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 64px 1fr
- theme: Backend-selected
title: Audio
path: audio
badges: []
type: custom:grid-layout
layout:
grid-template-columns: 24px 1fr 1fr 1fr 1fr 1fr 24px
grid-template-rows: auto
grid-gap: 16px
grid-template-areas: >
". audio_h audio_h audio_h audio_h audio_h . "
". a_player a_player a_player a_player a_player ."
". a_pl_h a_pl_h a_pl_h a_pl_h a_pl_h . "
". a_p1 . . . . ."
". a_pc_h a_pc_h a_pc_h a_pc_h a_pc_h . "
". a_pc1 . . . . ."
". a_r_h a_r_h a_r_h a_r_h a_r_h . "
". a_r1 . . . . ."
". a_bottomSpacer a_bottomSpacer a_bottomSpacer a_bottomSpacer
a_bottomSpacer ."
mediaquery:
'(max-width: 900px)':
grid-template-columns: 50% 50%
grid-gap: 0px
grid-template-areas: |
"audio_h audio_h"
"a_player_mobile a_player_mobile"
"a_pl_h a_pl_h"
"a_p1 ."
"a_pc_h a_pc_h"
"a_pc1 ."
"a_r_h a_r_h"
"a_r1 ."
". ."
"a_bottomSpacer a_bottomSpacer"
cards:
- type: custom:button-card
entity: null
view_layout:
grid-area: audio_h
show_state: false
name: Audio
show_name: true
show_icon: false
show_label: false
styles:
card:
- background: transparent
- height: 48px
- margin: 44px 0px -64px 0px
- padding: 0px 0px 0px 0px
- border: 0px
name:
- font-size: 24px
- padding-left: 0px
- font-weight: 300
- text-transform: uppercase
- justify-self: start
- color: var(--secondary-text-color)
card_mod:
style: |
ha-card{
transition: none;
}
@media only screen and (max-width: 900px) {
ha-card{
margin-bottom:-24px !important;
}
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto 200px
grid-template-rows: 88px
grid-template-areas: |
". . a_player_lsdrop"
mediaquery:
'(max-width: 900px)':
grid-template-columns: 50% 50%
grid-gap: 0px
grid-template-areas: |
"a_player_lsdrop a_player_lsdrop"
cards:
- type: custom:button-card
view_layout:
grid-area: a_player_lsdrop
show_icon: false
name: Player wählen
tap_action:
action: call-service
service: script.media_player_auswahl_menue_anzeigen
styles:
card:
- height: 48px
- margin-top: 30px
- border-radius: 16px
- display: inline-block
- margin-left: 8px
grid:
- grid-template-areas: '"n arrow"'
- grid-template-columns: auto 48px
- grid-template-rows: auto
name:
- justify-self: left
- padding-left: 18px
- line-height: 14px
- padding-top: 0px
- padding-bottom: 0px
- font-size: 14px
- font-weight: bold
- margin-top: 0px
icon:
- padding: 0px
- margin-top: 0px
- margin-left: '-8px'
custom_fields:
arrow:
- padding-top: 0px
- padding-bottom: 0px
- margin-top: 0px
custom_fields:
arrow: |
[[[
if (states["input_boolean.media_player_auswahl_helfer"].state === "on")
return `<ha-icon icon="mdi:chevron-up" style="width: 32px; height: 32px; margin-left: -2px;"></ha-icon>`
else
return `<ha-icon icon="mdi:chevron-down" style="width: 32px; height: 32px; margin-left: -2px;"></ha-icon>`
]]]
card_mod:
style: |
ha-card {
transition: none;
}
- type: conditional
conditions:
- entity: input_boolean.media_player_auswahl_helfer
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: null
icon: fapro:speaker
tap_action:
action: call-service
service: script.media_player_auswahl_input_select_wechseln
service_data:
mplayer: Wohnzimmer
layout: icon_name
show_state: false
name: Wohnzimmer
show_name: true
show_label: false
label: Spielt
styles:
card:
- border: 0px solid
- padding: 20px 0px
- overflow: visible
- background: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer")
return "var(--accent-color)"
else
return "var(--ha-card-background)"
]]]
icon:
- width: 32px
- height: 32px
- background: |
[[[
if (states["media_player.wohnzimmer"].state === "playing" && states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer")
return "rgba(255,255,255,0.75)"
if (states["media_player.wohnzimmer"].state === "playing")
return "var(--accent-color-background-opacity)"
else
return "transparent"
]]]
- border-radius: 50px
- color: |
[[[
if (states["media_player.wohnzimmer"].state === "playing")
return "var(--accent-color)"
if (states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer")
return "rgba(255,255,255,1)"
else
return "var(--primary-text-color)"
]]]
- padding: 8px
- margin: 0px 0px 0px 12px
name:
- font-size: 14px
- padding-left: 0px
- margin-top: '-20px'
- font-weight: bold
- justify-self: start
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer" )
return "rgba(255,255,255,1)"
else
return "(var(--primary-text-color)"
]]]
grid:
- grid-template-areas: '"i n" ". playing_label"'
- grid-template-columns: 76px 1fr
custom_fields:
playing_label:
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer" )
return "rgba(255,255,255,0.5)"
else
return "var(--secondary-text-color)"
]]]
- justify-self: start
- font-weight: 700
- font-size: 14px
- margin-top: '-30px'
active_indicator:
- position: absolute
- bottom: '-16px'
- margin-left: 50%
- background: var(--accent-color)
- width: 20px
- height: 20px
- transform: rotate(45deg) translateX(-15px)
- display: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Wohnzimmer" )
return "block"
else
return "none"
]]]
custom_fields:
playing_label: |
[[[
if (states["media_player.wohnzimmer"].state === "playing")
return "Spielt ab"
else if (states["media_player.wohnzimmer"].state === "paused")
return "Wartet"
else
return "Unbekannt"
]]]
active_indicator: ''
- type: custom:button-card
entity: null
icon: fapro:speaker
tap_action:
action: call-service
service: script.media_player_auswahl_input_select_wechseln
service_data:
mplayer: Küche
layout: icon_name
show_state: false
name: Küche
show_name: true
show_label: false
label: Spielt
styles:
card:
- border: 0px solid
- padding: 20px 0px
- overflow: visible
- margin-bottom: 8px
- background: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Küche")
return "var(--accent-color)"
else
return "var(--ha-card-background)"
]]]
icon:
- width: 32px
- height: 32px
- background: |
[[[
if (states["media_player.kueche"].state === "playing" && states["input_select.media_player_auswahl_helfer"].state === "Küche")
return "rgba(255,255,255,0.75)"
if (states["media_player.kueche"].state === "playing")
return "var(--accent-color-background-opacity)"
else
return "transparent"
]]]
- border-radius: 50px
- color: |
[[[
if (states["media_player.kueche"].state === "playing")
return "var(--accent-color)"
if (states["input_select.media_player_auswahl_helfer"].state === "Küche")
return "rgba(255,255,255,1)"
else
return "var(--primary-text-color)"
]]]
- padding: 8px
- margin: 0px 0px 0px 12px
name:
- font-size: 14px
- padding-left: 0px
- margin-top: '-20px'
- font-weight: bold
- justify-self: start
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Küche" )
return "rgba(255,255,255,1)"
else
return "(var(--primary-text-color)"
]]]
grid:
- grid-template-areas: '"i n" ". playing_label"'
- grid-template-columns: 76px 1fr
custom_fields:
playing_label:
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Küche" )
return "rgba(255,255,255,0.5)"
else
return "var(--secondary-text-color)"
]]]
- justify-self: start
- font-weight: 700
- font-size: 14px
- margin-top: '-30px'
active_indicator:
- position: absolute
- bottom: '-16px'
- margin-left: 50%
- background: var(--accent-color)
- width: 20px
- height: 20px
- transform: rotate(45deg) translateX(-15px)
- display: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Küche" )
return "block"
else
return "none"
]]]
custom_fields:
playing_label: |
[[[
if (states["media_player.kueche"].state === "playing")
return "Spielt ab"
else if (states["media_player.kueche"].state === "paused")
return "Wartet"
else
return "Unbekannt"
]]]
active_indicator: ''
- type: custom:button-card
entity: null
icon: fapro:speaker
tap_action:
action: call-service
service: script.media_player_auswahl_input_select_wechseln
service_data:
mplayer: Büro
layout: icon_name
show_state: false
name: Büro
show_name: true
show_label: false
label: Spielt
styles:
card:
- border: 0px solid
- padding: 20px 0px
- overflow: visible
- margin-bottom: 8px
- background: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Büro")
return "var(--accent-color)"
else
return "var(--ha-card-background)"
]]]
icon:
- width: 32px
- height: 32px
- background: |
[[[
if (states["media_player.buero"].state === "playing" && states["input_select.media_player_auswahl_helfer"].state === "Büro")
return "rgba(255,255,255,0.75)"
if (states["media_player.buero"].state === "playing")
return "var(--accent-color-background-opacity)"
else
return "transparent"
]]]
- border-radius: 50px
- color: |
[[[
if (states["media_player.buero"].state === "playing")
return "var(--accent-color)"
if (states["input_select.media_player_auswahl_helfer"].state === "Büro")
return "rgba(255,255,255,1)"
else
return "var(--primary-text-color)"
]]]
- padding: 8px
- margin: 0px 0px 0px 12px
name:
- font-size: 14px
- padding-left: 0px
- margin-top: '-20px'
- font-weight: bold
- justify-self: start
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Büro" )
return "rgba(255,255,255,1)"
else
return "(var(--primary-text-color)"
]]]
grid:
- grid-template-areas: '"i n" ". playing_label"'
- grid-template-columns: 76px 1fr
custom_fields:
playing_label:
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Büro" )
return "rgba(255,255,255,0.5)"
else
return "var(--secondary-text-color)"
]]]
- justify-self: start
- font-weight: 700
- font-size: 14px
- margin-top: '-30px'
active_indicator:
- position: absolute
- bottom: '-16px'
- margin-left: 50%
- background: var(--accent-color)
- width: 20px
- height: 20px
- transform: rotate(45deg) translateX(-15px)
- display: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Büro" )
return "block"
else
return "none"
]]]
custom_fields:
playing_label: |
[[[
if (states["media_player.buero"].state === "playing")
return "Spielt ab"
else if (states["media_player.buero"].state === "paused")
return "Wartet"
else
return "Unbekannt"
]]]
active_indicator: ''
- type: custom:button-card
entity: null
icon: fapro:speaker
tap_action:
action: call-service
service: script.media_player_auswahl_input_select_wechseln
service_data:
mplayer: Gym
layout: icon_name
show_state: false
name: Gym
show_name: true
show_label: false
label: Spielt
styles:
card:
- border: 0px solid
- padding: 20px 0px
- overflow: visible
- margin-bottom: 8px
- background: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Gym")
return "var(--accent-color)"
else
return "var(--ha-card-background)"
]]]
icon:
- width: 32px
- height: 32px
- background: |
[[[
if (states["media_player.gym"].state === "playing" && states["input_select.media_player_auswahl_helfer"].state === "Gym")
return "rgba(255,255,255,0.75)"
if (states["media_player.gym"].state === "playing")
return "var(--accent-color-background-opacity)"
else
return "transparent"
]]]
- border-radius: 50px
- color: |
[[[
if (states["media_player.gym"].state === "playing")
return "var(--accent-color)"
if (states["input_select.media_player_auswahl_helfer"].state === "Gym")
return "rgba(255,255,255,1)"
else
return "var(--primary-text-color)"
]]]
- padding: 8px
- margin: 0px 0px 0px 12px
name:
- font-size: 14px
- padding-left: 0px
- margin-top: '-20px'
- font-weight: bold
- justify-self: start
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Gym" )
return "rgba(255,255,255,1)"
else
return "(var(--primary-text-color)"
]]]
grid:
- grid-template-areas: '"i n" ". playing_label"'
- grid-template-columns: 76px 1fr
custom_fields:
playing_label:
- color: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Gym" )
return "rgba(255,255,255,0.5)"
else
return "var(--secondary-text-color)"
]]]
- justify-self: start
- font-weight: 700
- font-size: 14px
- margin-top: '-30px'
active_indicator:
- position: absolute
- bottom: '-16px'
- margin-left: 50%
- background: var(--accent-color)
- width: 20px
- height: 20px
- transform: rotate(45deg) translateX(-15px)
- display: |
[[[
if (states["input_select.media_player_auswahl_helfer"].state === "Gym" )
return "block"
else
return "none"
]]]
custom_fields:
playing_label: |
[[[
if (states["media_player.gym"].state === "playing")
return "Spielt ab"
else if (states["media_player.gym"].state === "paused")
return "Wartet"
else
return "Unbekannt"
]]]
active_indicator: ''
- type: custom:state-switch
entity: input_select.media_player_auswahl_helfer
states:
Wohnzimmer:
type: custom:mini-media-player
entity: media_player.wohnzimmer
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
min-height: 280px;
border-radius: 0px !important;
}
ha-card .mmp-player {
width: 62%;
}
Küche:
type: custom:mini-media-player
entity: media_player.kueche
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
min-height: 280px
}
ha-card .mmp-player {
width: 62%;
}
Büro:
type: custom:mini-media-player
entity: media_player.buero
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
min-height: 280px
}
ha-card .mmp-player {
width: 62%;
}
Gym:
type: custom:mini-media-player
entity: media_player.gym
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
min-height: 280px
}
ha-card .mmp-player {
width: 62%;
}
view_layout:
grid-area: a_player
show:
mediaquery: '(min-width: 901px)'
- type: vertical-stack
cards:
- type: custom:mushroom-select-card
icon_color: teal
icon: fapro:speaker
layout: horizontal
entity: input_select.media_player_auswahl_helfer
name: ' '
primary_info: none
secondary_info: none
view_layout:
grid-area: a_player_lsdrop
card_mod:
style: |
ha-card {
margin-top: 8px;
}
- type: custom:state-switch
entity: input_select.media_player_auswahl_helfer
states:
Wohnzimmer:
type: custom:mini-media-player
entity: media_player.wohnzimmer
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
}
Küche:
type: custom:mini-media-player
entity: media_player.kueche
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
}
Büro:
type: custom:mini-media-player
entity: media_player.buero
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
}
Gym:
type: custom:mini-media-player
entity: media_player.gym
artwork: material
hide:
icon: true
power: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.wohnzimmer
name: Sonos Wohnzimmer
- entity_id: media_player.kueche
name: Sonos Küche
- entity_id: media_player.buero
name: Sonos Büro
- entity_id: media_player.gym
name: Sonos Gym
entities: null
card_mod:
style: |
ha-card {
}
view_layout:
grid-area: a_player_mobile
show:
mediaquery: '(max-width: 900px)'
- type: custom:button-card
template: header_audio_card
view_layout:
grid-area: a_pl_h
name: Playlists
- type: custom:button-card
template: audio_card
entity: script.media_player_sonos_playlist_abspielen
tap_action:
action: call-service
service: script.media_player_sonos_playlist_abspielen
service_data:
mc_id: FV:2/22
view_layout:
grid-area: a_p1
icon: mdi:spotify
name: Playlist Name
custom_fields:
thumb: |
[[[
return `<img src="" style="width:100%;, height:100%;")>`
]]]
- type: custom:button-card
template: audio_card
entity: script.media_player_neuste_podcastfolge_abspielen
tap_action:
action: call-service
service: script.media_player_neuste_podcastfolge_abspielen
service_data:
podcast: hoass_podcast
view_layout:
grid-area: a_pc1
icon: fapro:podcast
name: Home Assistant
custom_fields:
thumb: |
[[[
return `<img src="https://i.podnews.network/r/t/198/292586-131a124d.webp" style="width:100%;, height:100%;")>`
]]]
- type: custom:button-card
template: header_audio_card
view_layout:
grid-area: a_r_h
name: Radio
- type: custom:button-card
template: audio_card
entity: script.media_player_sonos_playlist_abspielen
tap_action:
action: call-service
service: script.media_player_sonos_playlist_abspielen
service_data:
mc_id: FV:2/27
view_layout:
grid-area: a_r1
icon: fapro:radio
name: Deutschlandfunk
custom_fields:
thumb: |
[[[
return `<img src="https://sali.sonos.radio/image?w=60&image=https%3A%2F%2Fcdn-profiles.tunein.com%2Fs42828%2Fimages%2Flogog.png%3Ft%3D1&partnerId=tunein" style="width:100%;, height:100%;")>`
]]]
- type: custom:button-card
view_layout:
grid-area: a_bottomSpacer
icon: fapro:radio
show_icon: false
show_name: false
name: Empty
styles:
card:
- border: 0px
- height: 100px
- background: transparent
button_card_templates:
header_card:
entity: null
show_state: false
show_name: true
show_icon: false
show_label: false
styles:
card:
- background: transparent
- height: 48px
- margin: 44px 0px -16px 0px
- padding: 0px 0px 0px 0px
- border: 0px
name:
- font-size: 24px
- padding-left: 0px
- font-weight: 300
- text-transform: uppercase
- justify-self: start
- color: var(--secondary-text-color)
header_unterseite_card:
entity: null
show_state: false
show_name: true
show_icon: false
show_label: false
styles:
card:
- background: transparent
- height: 48px
- margin: 0px 0px -16px 0px
- padding: 0px 0px 0px 0px
- border: 0px
name:
- font-size: 24px
- padding-left: 0px
- font-weight: 300
- text-transform: uppercase
- justify-self: start
- color: var(--secondary-text-color)
header_audio_card:
entity: null
show_state: false
show_name: true
show_icon: false
show_label: false
styles:
card:
- background: transparent
- height: 48px
- margin: 24px 0px -16px 0px
- padding: 0px 0px 0px 0px
- border: 0px
name:
- font-size: 24px
- padding-left: 0px
- font-weight: 300
- text-transform: uppercase
- justify-self: start
- color: var(--secondary-text-color)
audio_card:
show_icon: true
show_name: true
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: '"i thumb name"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
icon:
- color: var(--accent-color)
- padding: 4px
- right: 8px
- top: 8px
- position: absolute
- border-radius: 50px
- width: 28px
- height: 28px
- justify-self: end
card:
- margin: 0px
- padding: 0px
name:
- position: absolute
- font-weight: bold
- bottom: 0px
- width: 100%
- font-size: 14px
- padding-bottom: 8%
- border-radius: 8px
- justify-self: center
custom_fields:
thumb:
- position: absolute
- top: calc(50% - 6px)
- left: 50%
- transform: translate(-50%, -50%)
- width: 60%
- height: 60%
- justify-self: center
- border-radius: 100%
- margin-bottom: 8px
script_card:
show_state: false
show_name: true
show_label: false
label: label
styles:
card:
- max-height: 80px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 14px 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 64px 1fr
sidebar:
digitalClock: true
date: false
hideTopMenu: true
showTopMenuOnMobile: true
dateFormat: dddd, DD. MMMM
width:
mobile: 0
tablet: 16
desktop: 17
template: |
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
icon: fapro:home
active: true
- action: navigate
navigation_path: /lovelace/raeume
name: Räume
icon: fapro:chair
- action: navigate
navigation_path: /lovelace/audio
name: Audio
icon: fapro:music
- action: navigate
navigation_path: /lovelace/szenen
name: Szenen
icon: fapro:molecules
- action: navigate
navigation_path: /lovelace/einstellungen
name: Einstellungen
icon: fapro:toggle
style: |
h1.digitalClock {
font-size: 24px !important;
line-height: 24px !important;
margin-top: 16px;
margin-bottom: 0px !important;
cursor: default;
}
.clock-link {
display: contents;
}
h2 {
font-weight: 300 !important;
font-size: 20px !important;
line-height: 20px !important;
}
:host {
--sidebar-background: var(--card-background-color);
--sidebar-text-color: var(--primary-text-color);
}
.sidebar-inner {
align-items: center !important;
margin: 0px !important;
padding: 0px !important;
height: 100vh !important;
}
.digitalClock{
position: absolute !important;
top: 50px !important;
font-weight: 300;
}
.template li {
position: absolute !important;
bottom: 54px !important;
font-weight: 300;
font-size: 24px !important;
margin-left: -14px !important;
}
.sidebarMenu {
position: absolute !important;
margin-top: 50vh !important;
transform: translateY(calc(-50% + 10px)) !important;
border-top: 0px !important;
border-bottom: 0px !important;
}
.sidebarMenu li span {
display: none !important;
}
.sidebarMenu li {
width: 64px !important;
height: 52px !important;
padding: 12px 0px 0px 0px !important;
margin-bottom: 16px !important;
}
.sidebarMenuIcons{
margin-left: 12px !important;
margin-top: 12px !important;
}
.sidebarMenuIcons svg{
width: 48px !important;
height: 48px !important;
}
.sidebarMenu li.active::before{
opacity: 0.05 !important;
}
