So, nachdem ich jetzt mehrere Anläufe für ein Dashboard gebraucht habe, wurde ich von einem React-Dashboard inspiriert. Da ich aber nicht auch noch in dieses Thema einsteigen wollte, versuchte ich es mit der Custom Button Card. Hier das (noch nicht fertige) Ergebnis:
5 „Gefällt mir“
Dein Anhang vom Ergebnis fehlt noch.. 
1 „Gefällt mir“
Funktioniert nicht … doch jetzt 
Das sieht super aus! Das ist ja mal etwas ganz anderes, als was man sonst so von Home Assistant Dashboards kennt Wie hast du das Layout mit der Sidebar links gemacht?
War ein bisschen gefummel. Sind auch Picture Element Cards eingebaut.
Sieht schön aus, hell ist nur nicht so mein Ding, mag es mehr dunkler.. Wäre noch schön, wenn du ein wenig Code teilen kannst, wenn es sich einer nach-/ oder ähnlich bauen möchte.
@MarzyHA Die Seitenleiste ist bestimmt mit der Sidebar von HA direkt gemacht oder über eine Custom Sidebar. HA bietet unter Dashboard die Sidebar inzwischen an, habe mich damit aber auch noch nie beschäftigt.
2 „Gefällt mir“
Klar, wenn jemand was davon haben möchte, gerne melden 
1 „Gefällt mir“
Ein wirklich sehr schönes Dashboard
Ich bin ja neue bei HA und wäre sehr interessiert an dem Code folgenden Karten
Noch besser wäre natürlich der Code des gesamten Dashboards aber das muss nicht unbedingt sein
Kannst du mir sagen welche Karten du für die einzelnen Dinge genutzt hast oder sind das wirklich alles „Custom Button Card“
Danke im Voraus
Gruß
Marcel
Hi, gerne. Das sind fast alles Custom Button Cards. Wo das nicht funktionierte, habe ich noch die Picture Element Card eingesetzt. Wie bei dem ersten Bild. Das hab ich mit dem Affinity Designer erstellt und dann in die Seitenleiste eingeblendet. Für die Tanken/Heizöl Karte benötigst du das Repository „Tankerkönig“ und der Heizölpreis ist von der Tecson-Website gescrapt. Für die Leuchten und Fenster benötigst du „Helfer“. Bitte beachte, dass die großen auf ein IPad10 angepasst sind. Nun viel Spaß beim nachbauen
Hier jetzt die Personen-Karte:
type: picture-elements
image: /local/picture_elements/sidebar_bottomcard.png
card_mod:
style: |
ha-card {
background: transparent;
border: none;
}
elements:
- type: image
entity: person.frank
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(1)
not_home: opacity(0)
state_image:
home: /local/pictures/Avatar_Frank.png
style:
top: 37%
left: 11%
width: 22%
border-radius: 12px
- type: image
entity: person.nicole
title: Nicole
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(1)
not_home: opacity(0)
state_image:
home: /local/pictures/Avatar_Nicole.png
style:
top: 37%
left: 34%
width: 22%
border-radius: 12px
- type: image
entity: person.frank
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(0)
not_home: opacity(1)
state_image:
not_home: /local/pictures/Avatar_Frank.png
style:
top: 37%
left: 66%
width: 22%
border-radius: 12px
- type: image
entity: person.nicole
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(0)
not_home: opacity(1)
state_image:
not_home: /local/pictures/Avatar_Nicole.png
style:
top: 37%
left: 89%
width: 22%
border-radius: 12px
--------------- Energie-Batterielevel ---------------
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
name: Energie
show_name: true
show_label: false
show_state: false
custom_fields:
power_sum: |
[[[
const p1 = parseFloat(states['sensor.garage_licht_power']?.state) || 0;
const p2 = parseFloat(states['sensor.garage_steckdose_tor_leistung']?.state) || 0;
const p3 = parseFloat(states['sensor.garage_torantrieb_leistung']?.state) || 0;
const p4 = parseFloat(states['sensor.garage_lichtleiste_power']?.state) || 0;
const sum = Math.round(p1 + p2 + p3 + p4);
return sum + " W";
]]]
styles:
grid:
- grid-template-areas: "\"n power_sum\""
- grid-template-columns: 1fr min-content
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-left: 10px
custom_fields:
power_sum:
- justify-self: end
- align-self: center
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-right: 12px
card:
- background: transparent
- border: none
- type: custom:button-card
entity: sensor.garage_licht_energy
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Licht
icon: |
[[[
const light = states['light.garage_licht'];
return (light && light.state === "on")
? "mdi:counter"
: "mdi:meter-electric-outline";
]]]
show_name: true
show_state: false
custom_fields:
main_state: |
[[[
const light = states['light.garage_licht'];
if (light && light.state === "on") {
const v = parseFloat(states['sensor.garage_licht_power']?.state);
return !isNaN(v) ? Math.round(v) + " W" : "";
} else {
const energy = parseFloat(entity.state);
return (!isNaN(energy) ? energy.toFixed(3) : entity.state) + " kWh";
}
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i main_state\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
const light = states['light.garage_licht'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
const light = states['light.garage_licht'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
custom_fields:
main_state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
const light = states['light.garage_licht'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
const light = states['light.garage_licht'];
return (light && light.state === "on")
? 'linear-gradient(120deg, #9495E0 0%, #8696E6 100%)'
: 'transparent';
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.garage_lichtleiste_energy
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: LED Lichtleiste
icon: |
[[[
const light = states['switch.garage_lichtleiste'];
return (light && light.state === "on")
? "mdi:counter"
: "mdi:meter-electric-outline";
]]]
show_name: true
show_state: false
custom_fields:
main_state: |
[[[
const light = states['switch.garage_lichtleiste'];
if (light && light.state === "on") {
const v = parseFloat(states['sensor.garage_lichtleiste_power']?.state);
return !isNaN(v) ? Math.round(v) + " W" : "";
} else {
const energy = parseFloat(entity.state);
return (!isNaN(energy) ? energy.toFixed(3) : entity.state) + " kWh";
}
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i main_state\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
const light = states['switch.garage_lichtleiste'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
const light = states['switch.garage_lichtleiste'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
custom_fields:
main_state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
const light = states['switch.garage_lichtleiste'];
return (light && light.state === "on") ? '#FFFFFF' : '#8F92C8';
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
const light = states['switch.garage_lichtleiste'];
return (light && light.state === "on")
? 'linear-gradient(120deg, #9495E0 0%, #8696E6 100%)'
: 'transparent';
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.garage_steckdose_tor_energiezahler_gesamt
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Steckdose Tor
icon: |
[[[
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
return (v > 0.5)
? "mdi:counter"
: "mdi:meter-electric-outline";
]]]
show_name: true
show_state: false
custom_fields:
main_state: |
[[[
// _power: ohne Nachkommastellen
// _energy: 3 Nachkommastellen
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
if (v > 0.5) {
// Power (Watt)
return states['sensor.garage_steckdose_tor_leistung']
? Math.round(v) + " W"
: "";
} else {
// Energy (kWh)
const energy = parseFloat(entity.state);
return (!isNaN(energy) ? energy.toFixed(3) : entity.state) + " kWh";
}
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i main_state\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
custom_fields:
main_state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
const v = parseFloat(states['sensor.garage_steckdose_tor_leistung'].state);
return (v > 0.5)
? 'linear-gradient(100deg, #9495E0 0%, #8696E6 100%)'
: 'transparent';
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.garage_torantrieb_energy
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Torantrieb
icon: |
[[[
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
return (v > 0.5)
? "mdi:counter"
: "mdi:meter-electric-outline";
]]]
show_name: true
show_state: false
custom_fields:
main_state: |
[[[
// _power: ohne Nachkommastellen
// _energy: 3 Nachkommastellen
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
if (v > 0.5) {
// Power (Watt)
return states['sensor.garage_torantrieb_power']
? Math.round(v) + " W"
: "";
} else {
// Energy (kWh)
const energy = parseFloat(entity.state);
return (!isNaN(energy) ? energy.toFixed(3) : entity.state) + " kWh";
}
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i main_state\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
custom_fields:
main_state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
return (v > 0.5) ? '#FFFFFF' : '#8F92C8';
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
const v = parseFloat(states['sensor.garage_torantrieb_power'].state);
return (v > 0.5)
? 'linear-gradient(100deg, #9495E0 0%, #8696E6 100%)'
: 'transparent';
]]]
- border: none
- type: custom:gap-card
height: 6
- type: picture
image: /local/picture_elements/divider.svg
card_mod:
style: |
ha-card {
background: transparent;
border: none;
}
- type: custom:gap-card
height: 6
- type: custom:button-card
name: Batterielevel
show_name: true
show_label: false
show_state: false
styles:
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-left: 10px
card:
- background: transparent
- border: none
- type: custom:button-card
entity: binary_sensor.garage_wandthermostat_battery
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Wandthermostat
show_name: true
show_state: true
icon: |
[[[
// direkt den String-Zustand prüfen
if (entity.state === "on") return 'mdi:battery-outline';
if (entity.state === "off") return 'mdi:battery-high';
return 'mdi:battery-unknown';
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[ return (entity.state === "on")
? 'linear-gradient(100deg, #C83830 0%, #64120D 100%)'
: 'transparent'; ]]]
- border: none
- animation: |
[[[ return (entity.state === "on")
? 'blink 1s infinite'
: 'none'; ]]]
extra_styles: |
@keyframes blink {
0%, 100% {
background: linear-gradient(100deg, #C83830 0%, #64120D 100%);
}
50% {
background: transparent;
}
}
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: binary_sensor.garage_prasenzmelder_battery
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Präsenzmelder
show_name: true
show_state: true
icon: |
[[[
// direkt den String-Zustand prüfen
if (entity.state === "on") return 'mdi:battery-outline';
if (entity.state === "off") return 'mdi:battery-high';
return 'mdi:battery-unknown';
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[ return (entity.state === "on")
? 'linear-gradient(100deg, #C83830 0%, #64120D 100%)'
: 'transparent'; ]]]
- border: none
- animation: |
[[[ return (entity.state === "on")
? 'blink 1s infinite'
: 'none'; ]]]
extra_styles: |
@keyframes blink {
0%, 100% {
background: linear-gradient(100deg, #C83830 0%, #64120D 100%);
}
50% {
background: transparent;
}
}
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: binary_sensor.hcu1_garage_tor_vibrationssensor_battery
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Vibrationssensor
show_name: true
show_state: true
icon: |
[[[
// direkt den String-Zustand prüfen
if (entity.state === "on") return 'mdi:battery-outline';
if (entity.state === "off") return 'mdi:battery-high';
return 'mdi:battery-unknown';
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[ return (entity.state === "on") ? '#FFFFFF' : '#8F92C8'; ]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[ return (entity.state === "on")
? 'linear-gradient(100deg, #C83830 0%, #64120D 100%)'
: 'transparent'; ]]]
- border: none
- animation: |
[[[ return (entity.state === "on")
? 'blink 1s infinite'
: 'none'; ]]]
extra_styles: |
@keyframes blink {
0%, 100% {
background: linear-gradient(100deg, #C83830 0%, #64120D 100%);
}
50% {
background: transparent;
}
}
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.kamera_einfahrt_batterie
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Kamera
show_name: true
show_state: true
icon: |
[[[
const val = Number(entity.state);
if (val <= 5) return 'mdi:battery-outline';
if (val <= 15) return 'mdi:battery-low';
if (val <= 50) return 'mdi:battery-medium';
return 'mdi:battery-high';
]]]
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
const val = Number(entity.state);
return (val <= 5) ? '#FFFFFF' : '#8F92C8';
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
const val = Number(entity.state);
return (val <= 5) ? '#FFFFFF' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
const val = Number(entity.state);
return (val <= 5) ? '#FFFFFF' : '#8F92C8';
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
const val = Number(entity.state);
return (val <= 5)
? 'linear-gradient(100deg, #C83830 0%, #64120D 100%)'
: 'transparent';
]]]
- border: none
- animation: |
[[[
const val = Number(entity.state);
return (val <= 5)
? 'blink 1s infinite'
: 'none';
]]]
extra_styles: |
@keyframes blink {
0%, 100% {
background: linear-gradient(100deg, #C83830 0%, #64120D 100%);
}
50% {
background: transparent;
}
}
card_mod:
style: |
ha-card {
border-radius: 25px;
border: none;
padding: 10px;
background: linear-gradient(160deg, #F8F9FD 0%, #EDF1FB 100%);
box-shadow: 3px 8px 8px#ABBCB8;
width: 210px;
height: 565px;
overflow: visible;
}
1 „Gefällt mir“
Hier der 2. Teil:
--------------- Tanken/Heizöl (ist mit Müllabfuhr, kannst Du dann ja löschen) ---------------
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
name: Müllabfuhr
show_name: true
show_label: false
show_state: false
styles:
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-left: 10px
card:
- background: transparent
- border: none
- type: custom:button-card
entity: sensor.bioabfall
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Bioabfall
icon: mdi:flower
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "linear-gradient(100deg, #9495E0 0%, #8696E6 100%);" : "transparent";
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.verpackungen
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Verpackungen
icon: mdi:recycle
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "linear-gradient(100deg, #9495E0 0%, #8696E6 100%);" : "transparent";
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.papier
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Papier
icon: mdi:newspaper
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "linear-gradient(100deg, #9495E0 0%, #8696E6 100%);" : "transparent";
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.restmull
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Restmüll
icon: mdi:dump-truck
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "white" : "#8F92C8";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Morgen" || entity.state === "Heute") ? "linear-gradient(100deg, #9495E0 0%, #8696E6 100%);" : "transparent";
]]]
- border: none
- type: custom:gap-card
height: 6
- type: picture
image: /local/picture_elements/divider.svg
card_mod:
style: |
ha-card {
background: transparent;
border: none;
}
- type: custom:gap-card
height: 6
- type: custom:button-card
name: Tanken / Heizöl
show_name: true
show_label: false
show_state: false
styles:
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-left: 10px
card:
- background: transparent
- border: none
- type: custom:button-card
entity: sensor.aral_moselstrasse_1_super_e10
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: ARAL Karden
show_entity_picture: true
show_icon: false
show_name: true
show_label: false
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
icon:
- width: 28px
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_regular
- margin-left: 10px
- font-size: 15px
state:
- justify-self: start
- font-size: 13px
- font-family: poppins_regular
- color: "#8F92C8"
- margin-left: 10px
card:
- padding: 3px 0px 3px 7px
- background: transparent
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.budget_oil_roeserstrasse_15_super_e10
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Kaifenheim
show_entity_picture: true
show_icon: false
show_name: true
show_label: false
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
icon:
- width: 28px
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_regular
- margin-left: 10px
- font-size: 15px
state:
- justify-self: start
- font-size: 13px
- font-family: poppins_regular
- color: "#8F92C8"
- margin-left: 10px
card:
- padding: 3px 0px 3px 7px
- background: transparent
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.raiffeisen_hunsruck_moselufer_37_super_e10
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Burgen
show_entity_picture: true
show_icon: false
show_name: true
show_label: false
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
icon:
- width: 28px
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_regular
- margin-left: 10px
- font-size: 15px
state:
- justify-self: start
- font-size: 13px
- font-family: poppins_regular
- color: "#8F92C8"
- margin-left: 10px
card:
- padding: 3px 0px 3px 7px
- background: transparent
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.heizoelpreis_aktuell
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Heizöl
tap_action:
action: more-info
show_icon: true
icon: mdi:barrel-outline
show_name: true
show_label: false
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
icon:
- width: 28px
- color: "#8F92C8"
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_regular
- margin-left: 10px
- font-size: 15px
state:
- justify-self: start
- font-size: 13px
- font-family: poppins_regular
- color: "#8086B1"
- margin-left: 10px
card:
- padding: 3px 0px 3px 7px
- background: transparent
- border: none
- type: custom:gap-card
height: 8
card_mod:
style: |
ha-card {
border-radius: 25px;
border: none;
padding: 10px;
background: linear-gradient(160deg, #FCFCFE 0%, #E5ECF9 100%);
box-shadow: 3px 8px 8px#ABBCB8;
width: 210px;
margin-left: 4px;
overflow: visible;
}
- type: custom:gap-card
height: 2
- type: custom:button-card
entity: input_boolean.briefkasten
state_display: |
[[[ return (entity.state === 'on') ? 'Post' : 'Leer'; ]]]
show_state: true
name: Briefkasten
icon: mdi:email-outline
card_mod:
style: |
ha-card {
border-radius: 25px !important;
/* falls du noch Abstand brauchst: margin o. Ä. hier einfügen */
}
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 35px
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#FFFFFF';
]]]
img_cell:
- height: 45px
- width: 45px
- margin-left: 8px
- border-radius: 12px
- box-shadow: |
[[[
return (entity.state === 'on') ? 'none' : '2px 2px 4px#ABBCB8';
]]]
- background: |
[[[
return (entity.state === 'on') ? 'none' : '#585AA5';
]]]
name:
- justify-self: start
- margin-top: 10px
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 20px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 14px
- opacity: "0.8"
- margin-left: 10px
- margin-top: "-10px"
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#8F92C8';
]]]
card:
- padding: 7px
- height: 80px
- width: 210px
- margin-left: 4px
- box-shadow: 3px 8px 8px#ABBCB8
- overflow: visible
- background: |
[[[
return (entity.state === 'on')
? 'linear-gradient(110deg, #9495E0 0%, #8696E6 100%)'
: 'linear-gradient(110deg, #FCFCFE 0%, #E5ECF9 100%)';
]]]
- border: none
- type: custom:button-card
entity: ""
show_state: true
name: Alarm
icon: mdi:shield-home-outline
tap_action:
action: navigate
navigation_path: /ipad-alarm
card_mod:
style: |
ha-card {
border-radius: 25px !important;
/* falls du noch Abstand brauchst: margin o. Ä. hier einfügen */
}
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 35px
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#FFFFFF';
]]]
img_cell:
- height: 50px
- width: 50px
- margin-left: 8px
- border-radius: 15px
- box-shadow: |
[[[
return (entity.state === 'on') ? 'none' : '3px 3px 5px#ABBCB8';
]]]
- background: |
[[[
return (entity.state === 'on') ? 'none' : '#585AA5';
]]]
name:
- justify-self: start
- margin-top: 10px
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#8F92C8';
]]]
- font-family: poppins_regular
- font-size: 20px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 14px
- opacity: "0.8"
- margin-left: 10px
- margin-top: "-10px"
- color: |
[[[
return (entity.state === 'on') ? 'white' : '#8F92C8';
]]]
card:
- margin-top: 10px
- padding: 7px
- height: 80px
- width: 210px
- margin-left: 4px
- box-shadow: 3px 8px 8px#ABBCB8
- overflow: visible
- background: |
[[[
return (entity.state === 'on')
? 'linear-gradient(100deg, #9495E0 0%, #8696E6 100%)'
: 'linear-gradient(100deg, #FCFCFE 0%, #E5ECF9 100%)';
]]]
- border: none
--------------- Leuchten/Fenster ---------------
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
name: Übersicht
show_name: true
show_label: false
show_state: false
styles:
name:
- justify-self: start
- color: "#8F92C8"
- font-family: poppins_medium
- font-size: 17px
- margin-left: 10px
card:
- background: transparent
- border: none
- type: custom:button-card
entity: sensor.lights_on
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Leuchten
icon: |
[[[
return (entity.state === "Alle AUS") ? "mdi:lightbulb-outline" : "mdi:lightbulb-on-outline";
]]]
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 28px
- color: |
[[[
return (entity.state === "Alle AUS") ? "#8F92C8" : "#FFFFFF";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Alle AUS") ? "#8F92C8" : "#FFFFFF";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Alle AUS") ? "#8F92C8" : "#FFFFFF";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Alle AUS") ? "transparent" : "linear-gradient(100deg, #9495E0 0%, #8696E6 100%)";
]]]
- border: none
- type: custom:gap-card
height: 4
- type: custom:button-card
entity: sensor.window_open
card_mod:
style: |
ha-card {
border-radius: 15px !important;
}
name: Fenster
icon: |
[[[
return (entity.state === "Alle ZU") ? "mdi:window-closed-variant" : "mdi:window-open-variant";
]]]
show_name: true
show_state: true
styles:
grid:
- grid-template-areas: "\"i n\" \"i s\""
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content 1fr
icon:
- width: 26px
- color: |
[[[
return (entity.state === "Alle ZU") ? "#8F92C8" : "#FFFFFF";
]]]
img_cell:
- height: 30px
- width: 30px
name:
- justify-self: start
- color: |
[[[
return (entity.state === "Alle ZU") ? "#8F92C8" : "#FFFFFF";
]]]
- font-family: poppins_regular
- font-size: 15px
- margin-left: 10px
state:
- justify-self: start
- font-family: poppins_regular
- font-size: 13px
- margin-left: 10px
- color: |
[[[
return (entity.state === "Alle ZU") ? "#8F92C8" : "#FFFFFF";
]]]
card:
- padding: 3px 0px 3px 7px
- background: |
[[[
return (entity.state === "Alle ZU") ? "transparent" : "linear-gradient(100deg, #9495E0 0%, #8696E0 100%)";
]]]
- border: none
card_mod:
style: |
ha-card {
border-radius: 25px;
border: none;
padding: 10px;
background: linear-gradient(150deg, #FCFCFE 0%, #E5ECF9 100%);
box-shadow: 3px 8px 8px#ABBCB8;
width: 210px;
overflow: visible;
}
--------------- Klima ---------------
type: custom:button-card
entity: sensor.hwr_wandthermostat_temperature
name: Klima
label: HWR
show_label: true
show_state: false
icon: mdi:thermometer-water
custom_fields:
state: |
[[[
// Holt den Wert, ersetzt Komma durch Punkt, formatiert ihn auf 1 Nachkommastelle und fügt °C hinzu
const raw = states['sensor.heizung_tankraum_klima_temperature'].state;
if (isNaN(parseFloat(raw.replace(',', '.')))) return raw;
const num = parseFloat(raw.replace(',', '.')).toFixed(1);
return `${num} °C`;
]]]
state2: |
[[[
return "Luftfeuchte " + states['sensor.hwr_wandthermostat_humidity'].state + " %";
]]]
styles:
card:
- height: 176px
- padding: 10px 20px 20px 20px
- border-radius: 25px
- box-shadow: 3px 8px 8px#ABBCB8
- width: 210px
- border: none
- background: "linear-gradient(130deg,#4F46A3 0%, #443A83 100%)"
grid:
- display: grid
- grid-template-areas: |
"i state2"
"i state"
"l x"
"n x"
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
icon:
- grid-area: i
- margin-left: "-22px"
- width: 40px
- color: |
[[[
const temp = parseFloat(states['sensor.heizung_tankraum_klima_temperature'].state.replace(',', '.'));
const hum = parseFloat(states['sensor.hwr_wandthermostat_humidity'].state.replace(',', '.'));
if (hum < 50 || temp < 18) return "#00BFFF"; // rot
if (hum > 60 || temp > 20) return "#FF0000"; // blau
return "#00FF00"; // grün
]]]
custom_fields:
state:
- grid-area: state
- justify-self: end
- margin-bottom: "-5px"
- font-size: 28px
- font-family: poppins_regular
- color: "#FFFFFF"
state2:
- justify-self: end
- font-size: 14px
- font-family: poppins_regular
- color: "#FFFFFF"
- margin-top: 15px
label:
- justify-self: start
- font-family: poppins_regular
- font-size: 14px
- margin-top: 25px
- color: "#FFFFFF"
- margin-bottom: "-5px"
- opacity: "0.8"
name:
- justify-self: start
- font-size: 20px
- font-family: poppins_regular
- padding: 10px 0
- margin-bottom: "-10px"
- color: "#FFFFFF"
--------------- Verbrauch ---------------
type: custom:button-card
name: Verbrauch
icon: mdi:meter-electric-outline
entity: sensor.power_consumption
tap_action:
action: more-info
custom_fields:
bar: |
[[[
var color = "#E68594";
var state = parseFloat(entity.state);
var max = 3650;
if (isNaN(state)) return `<div style="height:22px"></div>`;
var width = Math.max(0, Math.min(state * 100 / max, 100));
return `
<div style="background:#BAE2F5; border-radius:5px; height:22px width:100%;">
<div style="background:${color}; border-radius:5px; height:22px; width:${width}%;">
</div>
</div>
`;
]]]
prod: |
[[[
if (entity.state === "unknown") return "--";
return Math.round(entity.state) + " Watt";
]]]
styles:
custom_fields:
bar:
- justify-self: start
- width: 100%
- height: 22px
- margin-bottom: "-5px"
prod:
- justify-self: start
- padding-top: 5px
- font-family: poppins_regular
- font-size: 15px
- margin-bottom: 5px
- color: |
[[[
if (entity.state === "unknown" || Number(entity.state) <= 1) {
return "#8F92C8";
} else {
return "#FFFFFF";
}
]]]
card:
- height: 176px
- padding: 10px 20px 20px 20px
- border-radius: 25px
- border: none
- box-shadow: 3px 8px 8px#ABBCB8
- width: 210px
- background: |
[[[
if (entity.state === "unknown" || Number(entity.state) <= 1) {
return "linear-gradient(125deg, #FCFCFE 0%, #E5ECF9 100%)";
} else {
return "linear-gradient(125deg, #9495E0 0%, #8696E6 100%)";
}
]]]
grid:
- grid-template-areas: "'i' 'prod' 'bar' 'n'"
name:
- justify-self: start
- font-size: 20px
- font-family: poppins_regular
- padding: 10px 0
- margin-bottom: "-10px"
- color: |
[[[
if (entity.state === "unknown" || Number(entity.state) <= 1) {
return "#8F92C8";
} else {
return "#FFFFFF";
}
]]]
icon:
- width: 40px
- color: |
[[[
if (entity.state === "unknown" || Number(entity.state) <= 1) {
return "#8F92C8";
} else {
return "#FFFFFF";
}
]]]
img_cell:
- justify-self: start
- width: 40px
- height: 40px
--------------- Licht ---------------
type: custom:button-card
entity: light.flur_ug_licht
name: Licht
label: Treppe / Flur
show_label: true
icon: mdi:lightbulb-outline
tap_action:
action: toggle
state:
- value: "off"
icon: mdi:lightbulb-outline
styles:
card:
- background: |
linear-gradient(130deg, #FCFCFE 0%, #E5ECF9 100%)
icon:
- color: "#8F92C8"
name:
- color: "#8F92C8"
custom_fields:
state:
- color: "#8F92C8"
label:
- color: "#8F92C8"
- value: "on"
icon: mdi:lightbulb-on-outline
styles:
card:
- background: |
linear-gradient(130deg, #9495E0 0%, #8182C3 100%)
icon:
- color: "#FFFFFF"
name:
- color: "#FFFFFF"
custom_fields:
state:
- color: "#FFFFFF"
label:
- color: "#FFFFFF"
styles:
card:
- padding: 10px 20px 20px 20px
- height: 176px
- border-radius: 25px
- box-shadow: 3px 8px 8px#ABBCB8
- border: none
- width: 210px
grid:
- grid-template-areas: "\"i custom_icon\" \"l l\" \"n state\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content
label:
- justify-self: start
- font-family: poppins_regular
- font-size: 14px
- margin-top: 25px
- margin-bottom: "-5px"
- opacity: "0.8"
name:
- justify-self: start
- font-size: 20px
- font-family: poppins_regular
- margin-bottom: "-10px"
icon:
- width: 40px
img_cell:
- justify-self: start
- width: 40px
- height: 40px
custom_fields:
custom_icon:
- justify-self: end
state:
- justify-self: end
- margin-top: 10px
- font-size: 20px
- font-family: poppins_regular
custom_fields:
custom_icon: |
[[[
var state = entity.state;
if(state == "on")
return `<ha-icon icon="mdi:toggle-switch" style="color: #3D3879; width:40px; height:40px;"></ha-icon>`;
else
return `<ha-icon icon="mdi:toggle-switch-off" style="color: #C1C1C1; width:40px; height:40px;"></ha-icon>`;
]]]
state: |
[[[
var state = entity.state
if(state == "on")
return `AN`;
else
return `AUS`;
]]]
--------------- Helfer counter_lights_on ---------------
Hier musst Du alles Leuten mit dem Label „lights“ versehen
{% set label = 'light' %}
{% set state = 'on' %}
{{ label_entities(label) | select('is_state', state) | list | count }}
Und hier das passende sensor-template lights_on
{% if states('sensor.counter_lights_on') | float == 0 %}
Alle AUS
{% elif states('sensor.counter_lights_on') | float == 1 %}
Eine Lampe AN
{% else %}
{{states('sensor.counter_lights_on')}} Lampen AN
{% endif %}
Mit den Fenstern funktioniert das genau so.
1 „Gefällt mir“
Hi, ist die „Sidebar-Card“ aus HACS:
sidebar:
hideTopMenu: false
hideHassSidebar: false
width:
desktop: 22
digitalClock: true
digitalClockWithSeconds: false
clock: false
date: true
dateFormat: dddd, DD. MMMM YYYY
sidebarMenu:
- action: navigate
navigation_path: /dashboard-ipad/ipad_start
name: HOME
active: true
icon: mdi:view-dashboard-outline
- action: navigate
navigation_path: /ipad-ug
name: UNTERGESCHOSS
active: false
icon: mdi:floor-plan
- action: navigate
navigation_path: /ipad-eg
name: ERDGESCHOSS
active: false
icon: mdi:floor-plan
- action: navigate
navigation_path: /ipad-og
name: OBERGESCHOSS
active: false
icon: mdi:floor-plan
- action: navigate
navigation_path: /ipad-dg
name: DACHGESCHOSS
active: false
icon: mdi:floor-plan
- action: navigate
navigation_path: /ipad-ab
name: AUSSENBEREICH
active: false
icon: mdi:floor-plan
- action: navigate
navigation_path: /ipad-st
name: ÜBERSICHTEN
active: false
icon: mdi:view-grid-outline
style: |
:host {
--sidebar-background: #FFFFFF !important; /* Hintergrundfarbe */
--sidebar-text-color: #A6AAC3; /* Schriftfarbe */
background-image: linear-gradient(
120deg,
rgba(253, 253, 255, 1) 0%,
rgba(247, 248, 252, 1) 20%,
rgba(237, 241, 250, 1) 100%
);
--border-radius: 25px; /* Definiert den Radius der Rahmen-Ecken */
/* Optional ausgeblendete Variablen
--face-color: var(--primary-text-color);
--face-border-color: var(--primary-text-color);
*/
}
#customSidebar {
z-index: 9999 !important; /* Setzt den z-index der benutzerdefinierten Seitenleiste */
}
.sidebarMenu li {
background-color: none !important; /* Hintergrundfarbe des inaktiven Listenelements in der Seitenleiste */
line-height: 30px !important; /* Zeilenhöhe der Listenelemente in der Seitenleiste */
color: #A5A8D4 !important; /* Textfarbe der Listenelemente in der Seitenleiste */
font-size: 15px !important;
font-family: poppins_regular;
margin-left: -10px;
}
.sidebarMenu li ha-icon {
color: #A5A8D4 !important; /* Textfarbe des Icons im inaktiven Listenelement */
--mdc-icon-size: 27px;
margin-right: -10px;
}
.sidebarMenu li.active {
background-color: #FEFEFE !important; /* Hintergrundfarbe des aktiven Listenelements in der Seitenleiste */
/* border-radius: 10px !important; Setzt den Radius der Rahmen-Ecken des aktiven Listenelements */
color: #8A8CC8 !important; /* Textfarbe des aktiven Listenelements */
font-family: poppins_bold;
width: 475px !important;
}
div > ul > li.active > span {
color: #8A8CC8 !important;
}
div > ul.sidebarMenu > li.active::before {
background-color: white;
}
.sidebarMenu li.active ha-icon {
color: #8A8CC8 !important; /* Textfarbe des Icons im aktiven Listenelement */
--mdc-icon-size: 27px;
margin-right: 275px !important;
}
.digitalClock {
margin-bottom: 0px; /* Setzt den unteren Innenabstand der digitalen Uhr */
margin-top: 10px !important; /* Setzt den oberen Innenabstand der digitalen Uhr */
color: #9897E1; !important; /* Textfarbe der digitalen Uhr */
font-size: 75px !important; /* Schriftgröße der digitalen Uhr */
font-family: poppins_light;
letter-spacing: -0.05vw !important;
text-align: center; /* Zentrierung des Textes der digitalen Uhr */
}
.date {
margin-bottom: 0px !important; /* Setzt den unteren Innenabstand des Datums */
padding-top: 15px; /* Setzt den oberen Innenabstand des Datums */
color: #9897E1; /* Textfarbe des Datums */
font-family: poppins_medium;
/* opacity: 0.6; Setzt die Transparenz des Datums */
font-size: 16px; /* Schriftgröße des Datums */
font-weight: 400; /* Schriftgewicht des Datums */
text-align: center; /* Zentrierung des Textes des Datums */
/* letter-spacing: 0.03vw; Buchstabenabstand des Datums */
}
.bottom {
width: 90% !important; /* Setzt die Breite des unteren Bereichs */
margin-left: 10px !important;
}
bottomCard:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border: none; /* Entfernt den Rahmen der Karte */
background: transparent;
}
cardOptions:
cards:
- type: picture-elements
image: /local/picture_elements/sidebar_bottomcard.png
card_mod:
style: |
ha-card {
background: transparent;
border: none;
}
elements:
- type: image
entity: person.frank
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(1)
not_home: opacity(0)
state_image:
home: /local/pictures/Avatar_Frank.png
style:
top: 37%
left: 11%
width: 22%
border-radius: 12px
- type: image
entity: person.nicole
title: Nicole
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(1)
not_home: opacity(0)
state_image:
home: /local/pictures/Avatar_Nicole.png
style:
top: 37%
left: 34%
width: 22%
border-radius: 12px
- type: image
entity: person.frank
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(0)
not_home: opacity(1)
state_image:
not_home: /local/pictures/Avatar_Frank.png
style:
top: 37%
left: 66%
width: 22%
border-radius: 12px
- type: image
entity: person.nicole
title: Frank
image: /local/pictures/1x1_transparent.png
state_filter:
home: opacity(0)
not_home: opacity(1)
state_image:
not_home: /local/pictures/Avatar_Nicole.png
style:
top: 37%
left: 89%
width: 22%
border-radius: 12px
- type: custom:button-card
entity: sensor.greeting
show_name: false
show_state: true
icon: |
[[[
var state = entity.state;
if (state == "GUTEN ABEND") {
return "mdi:weather-sunset-down";
} else
if (state == "GUTE NACHT") {
return "mdi:weather-night";
} else
if (state == "GUTEN MORGEN") {
return "mdi:weather-sunset-up";
} else {
return "mdi:weather-sunny";
}
]]]
styles:
grid:
- grid-template-areas: '"i s"'
- grid-template-columns: min-content 1fr
icon:
- width: 28px
- color: |
[[[
var state = entity.state;
if (state == "GUTEN ABEND") {
return "#FF6A13";
} else
return "#3D3879";
} else
if (state == "GUTEN MORGEN") {
return "#FF6A13";
} else {
return "#FFCD00";
}
]]]
state:
- justify-self: start
- margin: 5px
- color: '#8A8CC8'
- font-family: poppins_medium
- font-size: 14px
card:
- background: transparent
- border: none
- width: 160px
style:
left: 64%
top: 84%
- type: custom:button-card
entity: input_boolean.vollbild
tap_action:
action: toggle
show_state: false
show_name: false
show_icon: false
styles:
card:
- background: transparent
- border: none
- width: 160px
- height: 60px
style:
left: 50%
top: 84%
cardStyle: |
:host {
width: 100%; /* Setzt die Breite des Hosts auf 100% */
}
ha-card {
border: none; /* Entfernt den Rahmen der Karte */
background: transparent; /* Setzt den Hintergrund der Karte auf transparent */
margin-bottom: 30px;
}
Ah, das sieht interessant aus!! Funktioniert das auch mit dem Abschnitte-Layout? Also der Variante mit dem Drag and drop.
@Technikperry
Vielen Dank für deine Mühe
Ich habe da aber noch eine Frage (wie erwähnt ich bin noch Anfänger)
Welche Art von Helfer muss ich da nehmen?
Und wo muss Dieses Template rein?
Danke im Voraus
Gruß
Marcel
Einstellungen → Geräte und Dienste → Helfer
Da gehören beide hin. Musst Du auch genau so benennen, sonst klappt das nicht. Sind Sensor Templates.
Grüße Frank
1 „Gefällt mir“
Das geht. So ist mein Dashboard auch aufgebaut.
1 „Gefällt mir“
Hab jetzt noch ein bisschen an der Klima-Karte gebastelt. Wechselt jetzt den Status von Temperatur und Luftfeuchtigkeit:
hier der Code:
type: custom:button-card
entity: sensor.hwr_wandthermostat_temperature
name: Klima
label: HWR
show_label: true
show_state: false
icon: |
[[[
const flip = states['input_boolean.icon_flip_hwr']?.state === 'on';
return flip ? 'mdi:water-percent' : 'mdi:thermometer';
]]]
custom_fields:
state: |
[[[
const flip = states['input_boolean.icon_flip_hwr']?.state === 'on';
if (!flip) {
const raw = states['sensor.hwr_wandthermostat_temperature'].state;
if (isNaN(parseFloat(raw.replace(',', '.')))) return raw;
const num = parseFloat(raw.replace(',', '.')).toFixed(1);
return `${num} °C`;
} else {
const raw = states['sensor.hwr_wandthermostat_humidity'].state;
if (isNaN(parseFloat(raw.replace(',', '.')))) return raw;
const num = parseFloat(raw.replace(',', '.')).toFixed(0);
return `${num} %`;
}
]]]
state2: |
[[[
const flip = states['input_boolean.icon_flip_hwr']?.state === 'on';
if (!flip) {
return "Luftfeuchte " + states['sensor.hwr_wandthermostat_humidity'].state + " %";
} else {
const raw = states['sensor.hwr_wandthermostat_temperature'].state;
if (isNaN(parseFloat(raw.replace(',', '.')))) return raw;
const num = parseFloat(raw.replace(',', '.')).toFixed(1);
return `Temp. ${num} °C`;
}
]]]
styles:
card:
- height: 176px
- padding: 10px 20px 20px 20px
- border-radius: 25px
- box-shadow: 3px 8px 8px#ABBCB8
- width: 210px
- border: none
- background: "linear-gradient(130deg,#4F46A3 0%, #413A86 100%)"
grid:
- display: grid
- grid-template-areas: |
"i state2"
"i state"
"l x"
"n x"
- grid-template-columns: min-content 1fr
- grid-template-rows: 1fr min-content min-content min-content
- column-gap: 0
icon:
- margin-left: "-25px"
- width: 45px
- color: |
[[[
const t = parseFloat(states['sensor.hwr_wandthermostat_temperature'].state.replace(',', '.'));
const h = parseFloat(states['sensor.hwr_wandthermostat_humidity'].state.replace(',', '.'));
const flip = states['input_boolean.icon_flip_hwr']?.state === 'on';
if (!flip) {
if (!isNaN(t)) {
if (t < 18) return "#61B4FF"; // blau
if (t > 20) return "#FF6961"; // rot
return "#61FF9D"; // grün
}
return "#FFFFFF";
}
if (!isNaN(h)) {
if (h < 35) return "#FF6961"; // rot
if (h > 65) return "#61B4FF"; // blau
if ((h >= 35 && h <= 39) || (h >= 61 && h <= 65)) return "#FFD24D"; // gelb
return "#61FF9D"; // grün
}
return "#FFFFFF";
]]]
custom_fields:
state:
- justify-self: stretch
- text-align: right
- margin-bottom: "-5px"
- font-size: 28px
- font-family: poppins_regular
- color: "#FFFFFF"
state2:
- justify-self: stretch
- text-align: right
- font-size: 14px
- font-family: poppins_regular
- color: "#FFFFFF"
- margin-top: 15px
label:
- justify-self: start
- font-family: poppins_regular
- font-size: 14px
- margin-top: 25px
- color: "#FFFFFF"
- margin-bottom: "-5px"
- opacity: "0.8"
name:
- justify-self: start
- font-size: 20px
- font-family: poppins_regular
- padding: 10px 0
- margin-bottom: "-10px"
- color: "#FFFFFF"
dazugehörige Automation:
- id: flip_hwr_icon_5s
alias: Flip HWR Icon every 5s
trigger:
- platform: time_pattern
seconds: "/5"
action:
- service: input_boolean.toggle
target:
entity_id: input_boolean.icon_flip_hwr
mode: single
und ein Boolean-Helfer names „icon_flip_hwr“
1 „Gefällt mir“