Hi, @Fauli085 hatte mich letzte Woche gefragt, ob man optisch sowas wie die Mondphasen-Card auch für den Sonnenstand erstellen könnte.
Also habe ich mal gebastelt und das ist dabei herausgekommen. Ich weiß, es gibt auch diese Zenit-Card, aber wer es kompakt und im gleichen Stil mag ist mit den Sonnestand-Card gut beraten. Die Card ist eine Kombination aus einer custom-stack-in-card und einer grid-layout-card.
Gezeigt wird der aktuelle Stand der Sonne (Unter Horizont, Dämmerung, Morgen, Mittag, Nachmittag, Abend) Für allle Stände habe ich passende Bilder angelegt (weiter unten der Download).
Ihr braucht zwei Sensoren in der configuration.yaml, die in Abhängigkeit vom Sensor sun.sun den Stand der Sonne ermitteln und als Text und Bild wiedergeben.
- platform: template
sensors:
sun_position:
friendly_name: "Sun Position"
value_template: >-
{% set sun = states('sun.sun') %}
{% if sun == 'above_horizon' %}
{% set azimuth = state_attr('sun.sun', 'azimuth') | float(default=0) %}
{% set elevation = state_attr('sun.sun', 'elevation') | float(default=0) %}
{% if elevation < 0 %}
Unter Horizont
{% elif elevation < 10 %}
Dämmerung
{% elif azimuth < 150 %}
Morgen
{% elif azimuth < 200 %}
Mittag
{% elif azimuth < 255 %}
Nachmittag
{% else %}
Abend
{% endif %}
{% else %}
Unter Horizont
{% endif %}
- platform: template
sensors:
sun_position_bild:
friendly_name: "Sun Position Bild"
value_template: >-
{% set sun = states('sun.sun') %}
{% if sun == 'above_horizon' %}
{% set azimuth = state_attr('sun.sun', 'azimuth') | float(default=0) %}
{% set elevation = state_attr('sun.sun', 'elevation') | float(default=0) %}
{% if elevation < 0 %}
/local/sonne/unterHorizont.png
{% elif elevation < 10 %}
/local/sonne/dammerung.png
{% elif azimuth < 150 %}
/local/sonne/morgen.png
{% elif azimuth < 200 %}
/local/sonne/mittag.png
{% elif azimuth < 255 %}
/local/sonne/morgen.png
{% else %}
/local/sonne/abend.png
{% endif %}
{% else %}
/local/sonne/unterHorizont.png
{% endif %}
Ich denke die meisten haben schon Sensoren für die Uhrzeit zum Sonneauf-/untergang. Wenn nicht, müsst ihr dafür auch zwei Sensoren anlegen.
Sonnenaufgang
template:
- sensor:
- name: "Sonnenaufgang Uhrzeit"
state: "{{ (as_timestamp(state_attr('sun.sun', 'next_rising')) | timestamp_custom('%H:%M')) }}"
Sonnenuntergang
template:
- sensor:
- name: "Sonnenuntergang Uhrzeit"
state: "{{ (as_timestamp(state_attr('sun.sun', 'next_dusk')) | timestamp_custom('%H:%M')) }}"
Die hier gezeigten Bilder packt ihr bitte in das Verzeichnis www/sonne z.B. mit dem FileExplorer in HA! Geht natürlich auch mit einem anderen Ordner, aber so klappt direkt die Verlinkung mit dem Code aus meiner Card
Jetzt könnt ihr die Card in das Dashboard einfügen und sie sollte dann wie oben gezeigt aussehen. In Abhänigkeit der Auflösung müsst ihr eventuell noch ein wenig mit den margin-Werten herumspielen. Oder fragt nach, kann bestimmt auch weiterhelfen.
Sonnenstand-Card für das Dashboard
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Sonnenstand
card_mod:
style: |
ha-card {
margin-left: 10px;
margin-bottom: -20px;
}
.title {
color: white !important;
font-weight: bold !important;
font-size: 25px !important;
}
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 30% 50%
grid-template-rows: auto
cards:
- type: markdown
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0px !important;
width: 120% !important;
}
content: " }})"
- type: vertical-stack
cards:
- type: entity
entity: sensor.sun_position
name: Aktuell
state_color: false
icon: none
card_mod:
style: |
ha-card {
width: 120%;
margin-left: -10px;
padding-top: 10px;
box-shadow: none !important;
border: none !important;
background: transparent !important;
border-radius: 0px !important;
}
.header {
display: flex;
padding: 8px 16px 0;
justify-content: space-between;
margin-bottom: -10px;
}
.value {
font-size: 16px !important;
font-weight: normal !important;
color: steelblue;
}
.name {
font-size: 16px !important;
color: white !important;
}
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |
ha-card {
width: 130%;
background: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0px !important;
margin-top: 23px;
margin-left: -60px;
}
:host ::slotted(.card-content) {
padding: 25px 0 0 0 !important;
}
#states > * {
margin: -20px 0px !important;
}
entities:
- entity: sensor.sonnenaufgang_uhrzeit
icon: none
name: Sonnenaufgang
- entity: sensor.sonnenuntergang_uhrzeit
icon: none
name: Sonnenuntergang
update: 03/25
Für alle bei denen bei der Markdown-Card ein Border/Rand um das Bild herum angezeigt wird, kann folgende Variante als Alternativlösung nutzen. Mushroom-Card vorausgesetzt.
Bitte aufklappen für Alternativlösung
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Sonnenstand
card_mod:
style: |
ha-card {
margin-left: 10px;
margin-bottom: -20px;
}
.title {
font-weight: normal !important;
font-size: 25px !important;
}
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 30% 50%
grid-template-rows: auto
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: person.eric
show_name: false
show_state: false
icon: none
card_mod:
style: |
ha-card {
background-image: url('{{ states('sensor.sun_position_bild') }}');
background-size: cover;
background-position: center;
border: none;
width: 60px !important;
height: 60px !important;
margin: 15px;
--card-primary-color: transparent !important;
--card-secondary-color: transparent !important;
}
ha-state-icon {
color: none !important;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: vertical-stack
cards:
- type: entity
entity: sensor.sun_position
name: Aktuell
state_color: false
icon: none
card_mod:
style: |
ha-card {
width: 120%;
margin-left: -20px;
padding-top: -12px;
box-shadow: none !important;
border: none !important;
background: none !important;
}
.header {
margin-bottom: -10px;
margin-top: 13px;
border: none !important;
}
.value {
font-size: 15px !important;
font-weight: normal !important;
color: #258adb;
}
.name {
font-size: 15px !important;
color: #e4e8ed !important;
}
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |
ha-card {
width: 115%;
background: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0px !important;
margin-top: 25px;
margin-left: -50px;
}
:host ::slotted(.card-content) {
padding: 25px 0 0 0 !important;
}
#states > * {
margin: -20px -16px !important;
}
entities:
- entity: sensor.sonnenaufgang_uhrzeit
icon: none
name: Sonnenaufgang
- entity: sensor.sonnenuntergang_uhrzeit
icon: none
name: Sonnenuntergang
Nix wildes, aber hatte mich gewundert , dass kein Bild heute Nachmittag angezeigt wurde, bis ich dann gesehen habe, dass keins vorhanden ist.
Ein Fehler ist da aber nicht wirklich vorhanden, wenn du meinen Code verwendet hast, dann siehst du unter der Konfiguration für das Bild am Nachmittag, dass ich das gleiche Bild wie am Morgen verwende, weil es vom Stand auch das selbe ist. Du kannst also am Nachmittag das Bild vom Vormittag nutzen. 
