Hi, na klar machen wir doch gerne… 
Fange ich mal an. Ich bin jetzt auch erst zwei Monate bei HA, vorher iobroker und würde mich daher eher als Einsteiger mit etwas Grunderfahrung bezeichnen.
Meine Übersichtsseite auf dem Tablet besteht hauptsächlich aus custom:vertical-stack-in-cards die dann entsprechend unterteilt und mit card-mod konfiguriert sind. Fand ich für mich erstmal den besten Ansatz, da ich mich mit CSS gut auskenne.
Uhr- und Infocard:
Der Abfall wird nur eingeblendet wenn eine Ziehung ansteht, ansonsten wird die Uhr zentriert.
EDIT: Habe die Card inzwischen überarbeitet und sie wird jetzt auf Handy, Tablet und PC korrekt dargestellt. Passt sich dynamisch an und es können auch zwei Tonnen für den nächsten Tag angezeigt werden, wenn halt zwei Tonnen zur Ziehung anstehen.
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin-bottom: 2px;
border: none;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr auto
grid-template-rows: auto
cards:
- type: custom:digital-clock
dateFormat:
weekday: short
day: 2-digit
month: short
year: numeric
timeFormat:
hour: 2-digit
minute: 2-digit
card_mod:
style: |
ha-card {
justify-self: center; /* Zentriert die Uhrzeit, wenn keine Tonne da ist */
background-color: transparent !important;
color: var(--primary-color) !important;
border: none !important;
margin-top: 5px;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background-color: transparent !important;
color: var(--primary-color) !important;
border: none !important;
border-radius: 0px !important;
zoom: 80%;
}
cards:
- type: custom:trash-card
event_grouping: true
drop_todayevents_from: "8:00:00"
next_days: 1
pattern:
- icon: mdi:flower
color: green
type: organic
pattern: Biotonne
image: /local/bilder/gruen.jpg
- icon: mdi:newspaper
color: blue
type: paper
pattern: Papiertonne
image: /local/bilder/blau.png
- icon: mdi:recycle-variant
color: amber
type: recycle
pattern: Gelber Sack
image: /local/bilder/gelb.png
- icon: mdi:trash-can-outline
color: grey
type: waste
pattern: Restabfall
image: /local/bilder/schwarz.png
- icon: mdi:dump-truck
color: purple
type: others
day_style: counter
alignment_style: center
color_mode: icon
items_per_row: 2
refresh_rate: 600
with_label: false
layout: vertical
entities:
- calendar.abfall
filter_events: false
use_summary: false
hide_time_range: false
full_size: false
card_mod:
style: |
ha-card {
background-color: transparent !important;
color: var(--primary-color) !important;
border: none !important;
border-radius: 0px !important;
position: relative;
padding-bottom: 0px !important;
width: 100px;
}
.card-container {
display: block !important;
}
/* Skaliert die Icons */
.icon-container {
transform: scale(1.5); /* Vergrößert nur die Icons */
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
}
/* Begrenzt den Einfluss des Scales auf den Rest */
.icon-container ha-tile-image {
margin: 0 !important;
}
/* Text kleiner machen */
.content {
font-size: 12px !important; /* Anpassung der Textgröße */
text-align: center;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.steps_kilometer_taglich
name: Jan
primary_info: state
fill_container: false
secondary_info: none
icon: mdi:walk
icon_color: grey
tap_action:
action: more-info
entity: person.jayjojayson
card_mod:
style: |
ha-card {
background: none !important;
border-radius: 0px !important;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 75% !important;
text-align: center !important;
zoom: 75%;
padding-right: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-state-icon {
margin-right: -20px;
}
- type: custom:mushroom-entity-card
entity: device_tracker.samsung_s24
name: Jan
primary_info: name
fill_container: false
secondary_info: none
icon: m3of:person-4
icon_color: grey
tap_action:
action: more-info
entity: person.jayjojayson
card_mod:
style: |
ha-card {
background: none !important;
border-radius: 0px !important;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 75% !important;
text-align: center !important;
zoom: 85%;
padding-right: 30px;
}
mushroom-shape-icon {
--shape-color-disabled: transparent !important;
--shape-color: none !important;
}
ha-state-icon {
margin-right: -15px;
color: {% if states('device_tracker.samsung_s24') == 'home' %} green {% else %} grey {% endif %};
}
- type: custom:mushroom-entity-card
entity: device_tracker.23124ra7eo
name: Mutti
primary_info: name
fill_container: false
secondary_info: none
icon: m3of:person-3
icon_color: grey
tap_action:
action: more-info
entity: person.mutti
card_mod:
style: |
ha-card {
background: none !important;
border-radius: 0px !important;
border-right: 1px solid grey !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 75% !important;
text-align: center !important;
zoom: 85%;
padding-right: 30px;
}
mushroom-shape-icon {
--shape-color-disabled: transparent !important;
--shape-color: none !important;
}
ha-state-icon {
margin-right: -15px;
}
ha-state-icon {
margin-right: -15px;
color: {% if states('person.mutti') == 'home' %} green {% else %} grey {% endif %};
}
- type: custom:mushroom-entity-card
entity: sensor.23124ra7eo_steps_sensor
name: Mutti
primary_info: state
fill_container: false
secondary_info: none
icon: mdi:walk
icon_color: grey
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: none !important;
border-radius: 0px !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 75% !important;
text-align: center !important;
zoom: 75%;
padding-right: 30px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-state-icon {
margin-right: -20px;
}
card_mod:
style: |
ha-card {
background: none !important;
border-radius: 0px !important;
border: none !important;
margin-top: -10px !important; margin-bottom: -3px;
}
Wetter-Card
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background-color: none !important;
}
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: entity
entity: sensor.aussentemperatur_temperatur
name: " "
state_color: false
icon: none
theme: Temps
card_mod:
style: |
ha-card {
background-color: transparent !important;
text-align: center;
font-weight: bold !important;
border: none !important;
border-radius: 0px !important;
padding-right: 20px !important;
padding-left: 10px !important;
height: 75px !important;
--primary-text-color:
{% if is_state('sensor.temperature_color', 'steelblue') %}
steelblue
{% elif is_state('sensor.temperature_color', 'green') %}
green
{% elif is_state('sensor.temperature_color', 'orange') %}
orange
{% else %}
red
{% endif %};
.value {
font-size: 30px !important; /* Ändere die Schriftgröße */
}
}
- type: entity
entity: sensor.aussentemperatur_luftfeuchtigkeit
name: " "
state_color: false
icon: none
theme: Temps
card_mod:
style: |
ha-card {
background-color: transparent !important;
text-align: center;
font-weight: bold !important;
border: none !important;
border-radius: 0px !important;
padding-right: 10px !important;
padding-left: 50px !important;
height: 75px !important;
}
.value {
font-size: 24px !important; /* Ändere die Schriftgröße */
}
- type: custom:weather-chart-card
entity: weather.fuerstenwalde_spree
show_main: true
show_temperature: false
show_current_condition: false
show_attributes: false
show_time: false
show_time_seconds: false
show_day: false
show_date: false
show_humidity: false
show_pressure: false
show_wind_direction: false
show_wind_speed: false
show_sun: true
show_feels_like: false
show_dew_point: false
show_wind_gust_speed: false
show_visibility: false
show_last_changed: false
use_12hour_format: false
icons_size: "45"
animated_icons: true
icon_style: style1
autoscroll: false
forecast:
precipitation_type: rainfall
show_probability: false
labels_font_size: "13"
precip_bar_size: "0"
style: style2
show_wind_forecast: false
condition_icons: true
round_temp: false
type: daily
number_of_forecasts: "7"
disable_animation: false
chart_height: "160"
units:
speed: ""
temp: sensor.aussentemperatur_temperatur
humid: sensor.aussentemperatur_humidity
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
.card{
padding-top: 0px !important;
}
.main {
margin-bottom: 0px !important;
}
.main img {
margin: 0 auto !important;
margin-top: -65px !important;
}
Zu dieser Card habe ich einen sensor in der configuration.yaml angelegt, der die Außentemperatur entsprechend der Gradzahl einfärbt.
#Sensor um Temperaturwerte einzufärben
sensor:
- platform: template
sensors:
temperature_color:
friendly_name: "Außentemperatur Farbconfig"
value_template: >
{% set temp = states('sensor.aussentemperatur_temperatur') | float %}
{% if temp < 10 %}
steelblue
{% elif temp < 15 %}
green
{% elif temp < 23 %}
orange
{% else %}
red
{% endif %}
Menü-Card
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: person.jayjojayson
fill_container: false
primary_info: none
secondary_info: none
icon: mdi:cog
icon_type: entity-picture
icon_color: primary
tap_action:
action: navigate
navigation_path: /dashboard-test/einstellungen
hold_action:
action: navigate
navigation_path: /dashboard-test/einstellungen
card_mod:
style: |
mushroom-shape-icon {
--shape-color: transparent !important;
--icon-size: 45px !important;
background: none !important;
box-shadow: none !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
border-right: 1px solid grey !important;
border-radius: 0px !important;
padding-right: 10px;
}
- type: custom:mushroom-entity-card
entity: person.jayjojayson
fill_container: false
primary_info: none
secondary_info: none
icon: mdi:robot-mower
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /dashboard-test/robter-steuerung
hold_action:
action: navigate
navigation_path: /dashboard-test/robter-steuerung
icon_color: primary
card_mod:
style: |
mushroom-shape-icon {
--shape-color: transparent !important;
--icon-size: 45px !important;
background: none !important;
box-shadow: none !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
border-right: 1px solid grey !important;
border-radius: 0px !important;
padding-right: 10px;
}
- type: custom:mushroom-entity-card
entity: person.jayjojayson
fill_container: false
primary_info: none
secondary_info: none
icon: mdi:cctv
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /dashboard-test/sicherheit
hold_action:
action: navigate
navigation_path: /dashboard-test/sicherheit
icon_color: primary
card_mod:
style: |
mushroom-shape-icon {
--shape-color: transparent !important;
--icon-size: 45px !important;
background: none !important;
box-shadow: none !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
border-right: 1px solid grey !important;
border-radius: 0px !important;
padding-right: 10px;
}
- type: custom:mushroom-entity-card
entity: person.jayjojayson
fill_container: false
primary_info: none
secondary_info: none
icon: mdi:cast-audio
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /dashboard-test/multimedia
hold_action:
action: navigate
navigation_path: /dashboard-test/multimedia
icon_color: primary
card_mod:
style: |
mushroom-shape-icon {
--shape-color: transparent !important;
--icon-size: 45px !important;
background: none !important;
box-shadow: none !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0px !important;
padding-right: 10px;
}
Heizung Übersicht Card
Hier lasse ich mir oben vom Luftreiniger die ppm Werte mit einem minigraph anzeigen. Die Linie und der Wert werden wieder mit zwei sensoren in der config.yaml entsprechend der Luftqualität eingefärbt.
type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- sensor.starkvind_luftreiniger_pm2_5
name: Luftqualität
hours_to_show: 10
points_per_hour: 0.25
refresh_interval: 5
height: 80
show:
labels: true
name: false
state: false
icon: false
line_color: var(--line-color)
card_mod:
style: |
ha-card {
background-color: rgba(22,22,22, 0);
--line-color: {{ states('sensor.luftquality_line_color') }};
}
- type: custom:button-card
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.starkvind_luftreiniger_ventilator
styles:
card:
- background-color: rgba(22,22,22, 0.1)
- text-align: center
- border: none
- border-radius: 0px
- padding: 10px
- "--primary-text-color": |
[[[
if (states['sensor.luftquality_color'].state === 'green') return 'green';
if (states['sensor.luftquality_color'].state === 'yellow') return 'yellow';
if (states['sensor.luftquality_color'].state === 'orange') return 'orange';
return 'red';
]]]
name: |
[[[
const quality = states['sensor.starkvind_luftreiniger_pm2_5'].state;
const fanState = states['fan.starkvind_luftreiniger_ventilator'].state === 'on'
? '<ha-icon icon="mdi:fan-auto" style="width: 20px; height: 20px; margin-left: 5px; vertical-align: top; color: var(--primary-color);"></ha-icon>'
: '';
return `Luftqualität - ${quality} µg/m³ ${fanState}`;
]]]
- type: entities
entities:
- entity: sensor.wandthermostat_jan_temperatur
name: Wandthermostat Jan
- entity: sensor.wandthermostat_jan_luftfeuchtigkeit
name: Wandthermostat Jan Luftfeuchte
- entity: sensor.werkstatt_thermostat_temperatur
name: Werkstatt Temperatur
- entity: sensor.wandthermostat_mutti_temperatur
name: Wandthermostat Mutti
- entity: sensor.wandthermostat_mutti_luftfeuchtigkeit
name: Wandthermostat Mutti Luftfeuchte
theme: grey-icon
card_mod:
style: |
ha-card {
background-color: rgba(22,22,22, 0);
}
angelegter Sensor für Farben der Linie und der Wertes
- platform: template
sensors:
luftquality_color:
friendly_name: "Luftqualität Farbconfig"
value_template: >
{% set temp = states('sensor.starkvind_luftreiniger_pm2_5') | float %}
{% if temp < 50 %}
green
{% elif temp < 100 %}
yellow
{% elif temp < 150 %}
orange
{% else %}
red
{% endif %}
- platform: template
sensors:
luftquality_line_color:
friendly_name: "Luftqualitäts Line Color"
value_template: >
{% if is_state('sensor.luftquality_color', 'green') %}
green
{% elif is_state('sensor.luftquality_color', 'yellow') %}
yellow
{% elif is_state('sensor.luftquality_color', 'orange') %}
orange
{% else %}
red
{% endif %}
Wenn noch Fragen zu einer Card bestehen, fragt mich. Den Rest werde ich dann mal gesammelt und zusammen vorstellen.
Ich hoffe alles ordentlich aufbereitet zu haben, steckt doch eine Menge Arbeit darin.
)
Mit was hast du die Tabsleiste gemacht bei deiner Tibber Übersicht?