Hallo zusammen,
An dieser Stelle möchte ich euch mein Wetter-Dashboard vorstellen.
Dieses ist erstmal nichts besonderes, eher verwendet es alltbekannte Karten und ist für mich als jemand der sich unter einem Jahr mit HAOS beschäftigt (und damit zähle ich mich immernoch zu den Anfängern) teilweise schon ganz schön knifflig gewesen. Andere schmunzeln da wohl eher drüber 
Als Anfänger und weil ja immer wieder nach solchen Wetter-Dashboards gefragt wird - also für Anfänger, hier einmal von A-Z erklärt und vorgestellt.
Ich erhebe dabei natürlich keinen Anspruch auf Vollständigkeit, oder gar den perfekten Code. Ich rechne sogar damit, dass man das ein oder andere pfiffiger lösen könnte und hoffe natürlich auch auf Vorschläge.
Was ich natürlich hoffe ist, dass keine groben Fehler drinn sind.
So siehts derzeit aus:
Dasselbe auf dem Smartphone:
Was ihr braucht (natürlich braucht ihr nur was euch gefällt ):
- HACS - Home Assistant Community Store
- Wetter Entitäten, die für euch interessant sind. Die können aus einer eigenen Wetterstation kommen, oder von einer aus der Nachbarschaft, oder vom Wetterdienst, oder eine Mischung daraus ;-). Manche Daten bekommt man nur von Extern.
Helfer:
- Templatehelfer: Wetterlage
- Templatehelfer: Windrichtung
Dashboardkarten:
- HACS Dashboardkarte: mini-graph-card : GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant Lovelace UI · GitHub
- HACS Dashboardkarte: button-card : GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant · GitHub
- HACS Dashboardkarte: apexcharts-card : GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant · GitHub
- HACS Dashboardkarte: clock-weather-card : GitHub - pkissling/clock-weather-card: A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons · GitHub
- HACS Dashboardkarte: weather-chart-card : GitHub - mlamberts78/weather-chart-card: Custom weather card with charts. · GitHub
- HACS Dashboardkarte: lovelace-horizon-card : GitHub - rejuvenate/lovelace-horizon-card: Sun Card successor: Visualize the position of the Sun over the horizon. · GitHub
- HACS Dashboardkarte: dwd-weather : GitHub - FL550/dwd_weather: Deutscher Wetterdienst integration for Home-Assistant · GitHub
- HACS Dashboardkarte: lovelace-windrose-card : GitHub - aukedejong/lovelace-windrose-card: Home Assistant Lovelace Windrose Card · GitHub
Integrationen:
- Mond (Moon)
- Sonne (Sun)
- RSTful
- Scrape - Damit wird der Staus der Wetterlage ausgelesen
- Deutscher Wetterdienst (HACS) - Diese Integration benötigt ihr für die grundlegende Vorhersage. Selbstverständlich muss das nicht der DWD sein. Es kann auch eine andere eurer Wahl sein.
- evtl. eine Integration für eine Wetterstation
Als erstes alle gewünschten Karten und Integrationen installieren. Das sollte problemlos ablaufen.
Grundsätzlich sollte an dieser Stelle klar sein, das ihr die von mir verwendeten Entitäten gegen eure eigenen austauschen müsst.
Helfer und Scrape einrichten
Mit Scrape hole ich die aktuelle Wetterlage von der Webseite
Das geht natürlich auch aus einer der installierten Karten oder Integrationen. Allerdings ist die Aktualisierung der Wetterlage teils so langsam (DWD max einmal in der Stunde), dass das für mich keinen Sinn macht. Ich benötige die auch für die Steuerung meines Sonnenschutz (Jalousiesteurung). Ich hole den Wetterzustand alle 10min ab. Falls ihr das bei euch nicht so häufig benötigt, dann könnt ihr den Helfer für die Wetterlage auch überspringen.
Zum einrichten von Scrape / RESTful / Wetterzustand habe ich dieses Video zu rate gezogen:
Das hat sehr gut funktioniert und soll hier nicht weiter Thema sein.
Generell kann man sich falls man keine eigene Wetterstation hat und dennoch alle Daten aus der Nachbarschaft von einer Wetterstation z.B. von WUnderground abholen möchte folgendermaßen drauf zugreifen:
Je einen Helfer erstellen vom Typ Template. Beispiel zum abholen der Temperatur:
{{ state_attr('sensor.weather_underground_EUER ORT', 'observations') [0] ['metric']['temp'] }}
Auch das ist Thema in dem Video.
Helfer für die Wetterlage:
Die Daten von Weather Underground kommen auf Englisch. Wer das so haben will muss nichts weiter tun. Wer die auf deutsch haben möchte, muss die übersetzen:
{% if is_state('sensor.web_scrape', 'Sunny') %}
Sonnig
{% elif is_state('sensor.web_scrape', 'Mostly Sunny') %}
Überwiegend sonnig
{% elif is_state('sensor.web_scrape', 'Sunny/Wind') %}
Sonnig / windig
{% elif is_state('sensor.web_scrape', 'Fair/Wind') %}
Freundlich / windig
{% elif is_state('sensor.web_scrape', 'Fair') %}
Freundlich
{% elif is_state('sensor.web_scrape', 'Clear/Wind') %}
Klare Nacht / windig
{% elif is_state('sensor.web_scrape', 'Clear') %}
Klare Nacht
{% elif is_state('sensor.web_scrape', 'Rain') %}
Regnerisch
{% elif is_state('sensor.web_scrape', 'Rain Shower') %}
Schauer
{% elif is_state('sensor.web_scrape', 'Light Rain Shower') %}
Leichte Schauer
{% elif is_state('sensor.web_scrape', 'Showers in the Vicinity') %}
Örtliche Schauer
{% elif is_state('sensor.web_scrape', 'Light Rain') %}
Leichter Regen
{% elif is_state('sensor.web_scrape', 'Light Rain with Thunder') %}
Leichter Regen und Gewitter
{% elif is_state('sensor.web_scrape', 'Light Drizzle') %}
Nieselregen
{% elif is_state('sensor.web_scrape', 'Rain Shower/Wind') %}
Regenschauer / windig
{% elif is_state('sensor.web_scrape', 'Light Rain Shower/Wind') %}
Leichte Schauer / windig
{% elif is_state('sensor.web_scrape', 'Rain/Wind') %}
Regen / windig
{% elif is_state('sensor.web_scrape', 'Light Rain/Wind') %}
Leichter Regen / windig
{% elif is_state('sensor.web_scrape', 'Thunder in the Vicinity') %}
Örtliche Gewitter
{% elif is_state('sensor.web_scrape', 'Snow Shower') %}
Schnee Schauer
{% elif is_state('sensor.web_scrape', 'Snowy') %}
Schnee
{% elif is_state('sensor.web_scrape', 'Snow') %}
Schnee
{% elif is_state('sensor.web_scrape', 'Wintry Mix') %}
Schneeregen
{% elif is_state('sensor.web_scrape', 'Cloudy') %}
Bewölkt
{% elif is_state('sensor.web_scrape', 'Partly Cloudy') %}
Teilweise bewölkt
{% elif is_state('sensor.web_scrape', 'Mostly Cloudy') %}
Überwiegend bewölkt
{% elif is_state('sensor.web_scrape', 'Cloudy/Wind') %}
Bewölkt / windig
{% elif is_state('sensor.web_scrape', 'Mostly Cloudy/Wind') %}
Überwiegend bewölkt / windig
{% elif is_state('sensor.web_scrape', 'Partly Cloudy/Wind') %}
Teilweise bewölkt / windig
{% elif is_state('sensor.web_scrape', 'Mist') %}
Nebelig
{% elif is_state('sensor.web_scrape', 'Fog') %}
Nebel
{% elif is_state('sensor.web_scrape', 'Drizzle and Fog') %}
Nieselregen und Nebel
{% else %}
unavailable
{% endif %}
Dieser Helfer übersetzt die einzelnen Eventualitäten. Leider habe ich das erst im laufenden Jahr aufgesetzt. Es hat bisher noch nicht geschneit. Ich kenne also die Wetterzustände für Schnee noch nicht. Es wird wahrscheinlich sowas wie snow, snowy, Snow-Shower, oder Snow-Shower in the Vicinity… noch fehlen.
Dafür habe ich im else ein unavailable hinterlegt. Wird dieser Status ausgegeben, dann ist höchst wahrscheinlich ein Wetterstatus auf Weather Undergrund, der noch nicht in der Liste steht. Das kann man dann im Helfer nachlesen. Der Status geht dann auf unavailable und der korrekte Status steht dabei.
Helfer für die Windrichtung:
Dieser Helfer übersetzt die Werte der Windrichtung von numerischen Werten in Worte. Natürlich können auch nur Buchstaben angezeigt werden. Dann einfach den Helfer anpassen. Alle Möglichkeiten stehen in dem Array.
{% set windrichtung = [
'Nord',
'Nord Nord Ost',
'Nord Ost',
'Ost Nord Ost',
'Ost',
'Ost Süd Ost',
'Süd Ost',
'Süd Süd Ost',
'Süd',
'Süd Süd West',
'Süd West',
'West Süd West',
'West',
'West Nord West',
'Nord West',
'Nord Nord West',
'Nord'] %}
{% set winkel = states('sensor.gw1100a_wind_direction') | float %}
{{ windrichtung [(( winkel + 11.25) / 22.5) | int ] }}
Die Karten:
Vorhersage:
Hierbei handelt sich im die Clock Weather Card.
Es ist 3 mal dieselbe Karte mit unterschiedlicher Konfiguration eingepflegt:
Links:
Zusammenfassung
type: custom:clock-weather-card
entity: weather.dwd
title: Aktuell
sun_entity: sun.sun
temperature_sensor: sensor.gw1100a_outdoor_temperature
humidity_sensor: sensor.gw1100a_humidity
weather_icon_type: fill
animated_icon: true
forecast_rows: 6
time_pattern: HH:mm 'Uhr'
time_format: 24
date_pattern: cccc, dd.MM.yyyy
hide_today_section: false
hide_forecast_section: true
show_humidity: true
hide_clock: true
hide_date: false
hourly_forecast: false
use_browser_time: false
show_decimal: true
Mitte:
Zusammenfassung
type: custom:clock-weather-card
entity: weather.dwd
title: 7 - Tage Vorhersage
sun_entity: sun.sun
temperature_sensor: sensor.gw1100a_outdoor_temperature
humidity_sensor: sensor.gw1100a_humidity
weather_icon_type: fill
animated_icon: true
forecast_rows: 6
time_pattern: HH:mm 'Uhr'
time_format: 24
date_pattern: cccc, dd.MM.yyyy
hide_today_section: true
hide_forecast_section: false
show_humidity: true
hide_clock: true
hide_date: false
hourly_forecast: false
use_browser_time: false
show_decimal: true
apparent_sensor: sensor.gw1100a_feels_like_temperature
Rechts:
Zusammenfassung
type: custom:clock-weather-card
entity: weather.dwd
title: Stündliche Vorhersage
sun_entity: sun.sun
temperature_sensor: sensor.gw1100a_outdoor_temperature
humidity_sensor: sensor.gw1100a_humidity
weather_icon_type: fill
animated_icon: false
forecast_rows: 6
time_pattern: HH:mm 'Uhr'
time_format: 24
date_pattern: cccc, dd.MM.yyyy
hide_today_section: true
hide_forecast_section: false
show_humidity: false
hide_clock: true
hide_date: false
hourly_forecast: true
use_browser_time: false
show_decimal: true
apparent_sensor: sensor.gw1100a_feels_like_temperature
Die Einstellungen sollten klar sein. Die Doku hilft euch ansosnten weiter
Weather Chart Card
Dieser Forcast enthält zusätzlich die Regenwahrscheinlichkeit.
Zusammenfassung
type: custom:weather-chart-card
entity: weather.dwd
show_main: false
show_temperature: false
show_current_condition: false
show_attributes: false
show_time: true
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: false
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: 40
animated_icons: true
icon_style: style1
autoscroll: false
forecast:
precipitation_type: rainfall
show_probability: false
labels_font_size: "11"
precip_bar_size: "50"
style: style2
show_wind_forecast: true
condition_icons: true
round_temp: true
type: daily
number_of_forecasts: "7"
disable_animation: false
precipitation_color: "#3076b4"
temperature2_color: "#96a8dc"
chart_height: 219
units:
speed: ""
temp: sensor.gw1100a_outdoor_temperature
humid: sensor.gw1100a_humidity
uv: sensor.gw1100a_uv_index
dew_point: sensor.gw1100a_dewpoint
winddir: sensor.gw1100a_wind_direction
windspeed: sensor.gw1100a_wind_speed
wind_gust_speed: sensor.gw1100a_wind_gust
press: sensor.gw1100a_absolute_pressure
grid_options:
columns: 24
rows: 4
Sonnenauf- und Untergang. MondPhase, sowie Sonnenwinkel
Die Karte zur Anzeige der Sonneauf und Untergang hat ansich erstmal nicht unbedingt etwas mit einem Wetterdashboard zu tun. Ich benötige die Daten von Azimut und Elevation aber regelmäßig für andere Automationen. Verwendet wird die lovelace-horizon-card.
Zusammenfassung
type: custom:horizon-card
refresh_period: 300
fields:
dawn: false
noon: false
dusk: false
sun_azimuth: true
sun_elevation: true
moon_phase: true
moon_phase_rotation: -30
elevation: 0
Wetterzustände:
Die Wetterzustände werden durch die HACS Karte “button-card” eingebunden. Als Entität ist der erstellte Helfer für die Wetterlage, der den Zustand von WUndergrund ausliest, hinterlegt.
Die Karten ändern je nach Zustandskategorie die Hintergrundfarbe, das Icon und natürlich die Stati
Wem das zu verspielt ist, oder zu kompliziert, kann das JavaScript entsprechend einfach entfernen.
Zusammenfassung
type: custom:button-card
entity: sensor.wetterlage_wunderground
layout: icon_name_state
show_state: true
show_name: false
show_label: true
icon: |
[[[
if (
entity.state == "Nieselregen" ||
entity.state == "Leichte Schauer" ||
entity.state == "Leichter Regen"
)
return "mdi:weather-rainy";
if (
entity.state == "Bewölkt" ||
entity.state == "Überwiegend bewölkt"
)
return "mdi:weather-cloudy";
if (
entity.state == "Teilweise bewölkt"
)
return "mdi:weather-partly-cloudy";
if (
entity.state == "Regnerisch" ||
entity.state == "Schauer" ||
entity.state == "Örtliche Schauer"
)
return "mdi:weather-pouring";
if (
entity.state == "Überwiegend bewölkt / windig" ||
entity.state == "Bewölkt / windig" ||
entity.state == "Regenschauer / windig" ||
entity.state == "Leichte Schauer / windig" ||
entity.state == "Regen / windig" ||
entity.state == "Teilweise bewölkt / windig" ||
entity.state == "Freundlich / windig" ||
entity.state == "Sonnig / windig" ||
entity.state == "Klar / windig"
)
return "mdi:weather-windy";
if (
entity.state == "Nebelig" ||
entity.state == "Nebel" ||
entity.state == "Nieselregen und Nebel"
)
return "mdi:weather-fog";
if (
entity.state == "Klare Nacht"
)
return "mdi:weather-night";
if (
entity.state == "Leichter Regen und Gewitter"
)
return "mdi:weather-lightning-rainy";
if (
entity.state == "Örtliche Gewitter"
)
return "mdi:weather-partly-lightning";
if (
entity.state == "Gewitter"
)
return "mdi:weather-lightning";
if (
entity.state == "Schnee" ||
entity.state == "Schnee Schauer" ||
entity.state == "Schneeregen"
)
return "mdi:weather-snowy-heavy";
else
return "mdi:weather-sunny";
]]]
styles:
card:
- background-color: |
[[[
if (
entity.state == "Regnerisch" ||
entity.state == "Nieselregen" ||
entity.state == "Schauer" ||
entity.state == "Leichte Schauer" ||
entity.state == "Örtliche Schauer" ||
entity.state == "Regen / windig" ||
entity.state == "Regenschauer / windig" ||
entity.state == "Leichte Schauer / windig" ||
entity.state == "Leichter Regen"
)
return "#122f5a";
if (
entity.state == "Leichter Regen und Gewitter" ||
entity.state == "Örtliche Gewitter" ||
entity.state == "Gewitter"
)
return "#04152d";
if (
entity.state == "Bewölkt" ||
entity.state == "Überwiegend bewölkt" ||
entity.state == "Teilweise bewölkt"
)
return "#25252d";
if (
entity.state == "Überwiegend bewölkt / windig" ||
entity.state == "Teilweise bewölkt / windig" ||
entity.state == "Bewölkt / windig"
)
return "#487890";
if (
entity.state == "Klare Nacht"
)
return "#0b084c";
if (
entity.state == "Nebelig" ||
entity.state == "Nebel" ||
entity.state == "Nieselregen und Nebel"
)
return "#787878";
if (
entity.state == "Schnee Schauer" ||
entity.state == "Schnee" ||
entity.state == "Schneeregen"
)
return "#b1b1b1";
else
return "#e4b532";
]]]
- color: |
[[[
if (
entity.state == "Freundlich" ||
entity.state == "Sonnig" ||
entity.state == "Überwiegend sonnig" ||
entity.state == "Schön" ||
entity.state == "Sonnig / windig" ||
entity.state == "Freundlich / windig"
)
return "#a73d03";
if (
entity.state == "Schnee Schauer" ||
entity.state == "Schnee" ||
entity.state == "Schneeregen"
)
return "#2a374b";
else
return "#b1b1b1";
]]]
- background-image: |
[[[
if (
entity.state == "Freundlich" ||
entity.state == "Sonnig" ||
entity.state == "Überwiegend sonnig" ||
entity.state == "Schön" ||
entity.state == "Sonnig / windig" ||
entity.state == "Freundlich / windig"
)
return "url(/local/bg_img/weather-partly-cloudy22.png)";
else
return "url(/local/bg_img/weather-partly-cloudy10.png)";
]]]
- background-repeat: no-repeat
- background-position: right -10px top 23px
- background-size: 130px
icon:
- color: |
[[[
if (
entity.state == "Freundlich" ||
entity.state == "Sonnig" ||
entity.state == "Überwiegend sonnig" ||
entity.state == "Schön" ||
entity.state == "Sonnig / windig" ||
entity.state == "Freundlich / windig"
)
return "#a73d03";
if (
entity.state == "Schnee Schauer" ||
entity.state == "Schnee" ||
entity.state == "Schneeregen"
)
return "#2a374b";
else
return "#e1e1e1";
]]]
- padding: 0
- margin: 0 0 0 -40px
name:
- display: flex
- align-items: center
- font-weight: normal
- width: 100%
- font-size: 22px
- white-space: wrap
- text-overflow: unset
- text-align: left
- padding: 0 10px 0 0
- margin: 0 0 0 -70px
label:
- margin: "-160px 0 0 0"
- text-align: right
- width: 100%
- padding: 0 19px 0 0
label: Aktuelles Wetter
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
rows: 2
columns: full
Die Windrichtung (Ebenfalls mit der “button-card gemacht)
Die Karte ändert je nach Windrichtung das Icon. Der Pfeil zeigt immer in die Richtung in die der Wind bläst. Als Entität ist der erstellte Helfer für die “Übersetzung” der Windrichtung eingebunden.
Zusammenfassung
type: custom:button-card
entity: sensor.windrichtung
layout: icon_name_state
show_state: true
show_label: true
show_name: false
icon: |
[[[
if (
entity.state == "Nord"
)
return "mdi:arrow-up-thin-circle-outline";
if (
entity.state == "Ost"
)
return "mdi:arrow-right-thin-circle-outline";
if (
entity.state == "Süd"
)
return "mdi:arrow-down-thin-circle-outline";
if (
entity.state == "West"
)
return "mdi:arrow-left-thin-circle-outline";
if (
entity.state == "Nord Nord Ost" ||
entity.state == "Ost Nord Ost" ||
entity.state == "Nord Ost"
)
return "mdi:arrow-top-right-thin-circle-outline";
if (
entity.state == "Ost Süd Ost" ||
entity.state == "Süd Ost" ||
entity.state == "Süd Süd Ost"
)
return "mdi:arrow-bottom-right-thin-circle-outline";
if (
entity.state == "Süd Süd West" ||
entity.state == "Süd West" ||
entity.state == "West Süd West"
)
return "mdi:arrow-bottom-left-thin-circle-outline";
else
return "mdi:arrow-top-left-thin-circle-outline";
]]]
styles:
card:
- background-color: "#323232"
- background-image: url(/local/bg_img/compass-rose-tn10.png)
- background-repeat: no-repeat
- background-position: right -20px top 29px
- background-size: 160px
- color: "#e1e1e1"
icon:
- color: "#e1e1e1"
- padding: 0
- margin: 0 0 0 -40px
name:
- display: flex
- align-items: center
- font-weight: normal
- width: 100%
- font-size: 22px
- white-space: wrap
- text-overflow: unset
- text-align: left
- padding: 0 10px 0 0
- margin: 0 0 0 -70px
label:
- margin: "-160px 0 0 0"
- text-align: right
- width: 100%
- padding: 0 19px 0 0
label: Windrichtung
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
rows: 2
columns: full
Hier gilt das gleiche wie oben. Weniger ist manchmal mehr… Bei beiden gezeigten Karten wird ein Hintergrundbild im CSS eingebunden. Das Bild stammt aus den originalen SVG Dateien und kann auf Wunsch auch geändert werden. Die Dateien müssen aber selbst an den passenden Ordnerpfad hochgeladen werden. Der Pfad muss eventuell angepasst werden.
Wingeschwindigkeit, Temperatur, Rel. Luftfeuchtigkeit und Sonneneinstrahlung
Hier wird die Karte mini-graph-card verwendet:
Windgeschwindigkeit:
Zusammenfassung
type: custom:mini-graph-card
icon: mdi:weather-windy
name: Windgeschwindigkeit
align_state: center
entities:
- entity: sensor.gw1100a_wind_gust
name: Windböen
show_fill: true
color: "#7f91c8"
- entity: sensor.gw1100a_wind_speed
name: Windgeschwindigkeit
show_fill: true
group: false
height: 170
hour24: true
font_size_header: 18
line_width: 1.5
points_per_hour: 6
show:
extrema: true
fill: fade
icon: true
labels: true
name: true
state: true
color_thresholds:
- value: 0
color: "#3134f9"
- value: 10
color: "#3485fa"
- value: 20
color: "#38d6fc"
- value: 30
color: "#3cfed8"
- value: 40
color: "#3cfe8e"
- value: 50
color: "#3cfe50"
- value: 60
color: "#87fe51"
- value: 70
color: "#d7ff52"
- value: 80
color: "#ffd64c"
- value: 90
color: "#fe8540"
- value: 100
color: "#fe3739"
- value: 110
color: "#f80c0e"
- value: 120
color: "#ff0000"
color_thresholds_transition: smooth
Temperatur und Taupunkt
Zusammenfassung
type: custom:mini-graph-card
name: Temperatur & Taupunkt
align_state: center
entities:
- entity: sensor.gw1100a_outdoor_temperature
name: Temperatur
- entity: sensor.gw1100a_dewpoint
name: Taupunkt
color: "#4b75ec"
hour24: true
hours_to_show: 24
font_size_header: 18
height: 170
line_width: 1.5
points_per_hour: 6
show:
graph: line
extrema: true
fill: fade
icon: true
labels: true
name: true
state: true
color_thresholds:
- value: -10
color: "#3134f9"
- value: 0
color: "#3485fa"
- value: 5
color: "#38d6fc"
- value: 12
color: "#3cfed8"
- value: 15
color: "#3cfe8e"
- value: 20
color: "#3cfe50"
- value: 23
color: "#87fe51"
- value: 25
color: "#d7ff52"
- value: 28
color: "#ffd64c"
- value: 30
color: "#fe8540"
- value: 33
color: "#fe3739"
- value: 35
color: "#f80c0e"
- value: 36
color: "#ff0000"
color_thresholds_transition: smooth
Ich denke das sollte als Beispiel genügen. Bei den anderen Karten wiederholt sich das am Ende nur. Und es soll auch auch noch Raum für Eigenes bleiben.
Die Apexchart Card
Diese Karte verwende ich für den relativen Luftduck:
Zusammenfassung
type: custom:apexcharts-card
update_interval: 10min
header:
title: Relativer Luftdruck
show: true
show_states: true
standard_format: true
colorize_states: true
now:
show: true
color: "#4b75f1"
label: Aktuell
graph_span: 24h
span:
start: day
apex_config:
chart:
height: 220px
width: 100%
yaxis:
- min: "|-1|"
max: "|+0.5|"
decimals: 1
experimental:
color_threshold: true
series:
- entity: sensor.gw1100a_relative_pressure
name: Relativer Luftdruck
type: line
unit: " hPa"
color: "#4b75f1"
stroke_width: 2
color_threshold:
- value: 970
color: "#3134f9"
- value: 980
color: "##3485fa"
- value: 990
color: "#38d6fc"
- value: 1000
color: "#3cfed8"
- value: 1013
color: "#3cfe50"
- value: 1020
color: "#d7ff52"
group_by:
duration: 1h
func: last
und auch für die Regenmenge eines Jahres nach Monat:
Zusammenfassung
type: custom:apexcharts-card
update_interval: 24h
header:
title: Niederschlag des Jahres
show: true
show_states: true
standard_format: false
colorize_states: true
graph_span: 12month
span:
start: year
apex_config:
xaxis:
type: datetime
labels:
style:
fontSize: 13
minHeight: 20
hideOverlappingLabels: false
datetimeFormatter:
month: MMM
dataLabels:
enabled: true
stroke:
show: true
width: 0
curve: smooth
chart:
type: area
height: 260px
width: 100%
yaxis:
- min: 0
max: "|+5|"
series:
- entity: sensor.gw1100a_monthly_rain
opacity: 1
name: Dieser Monat
unit: " mm"
type: column
color: "#4b75f1"
group_by:
duration: 1month
func: max
grid_options:
columns: 24
rows: auto
Gerade bei der ApexchartCard hat mir auch diese Referenz geholfen:
Regenmenge Total und Jahr:
Für die Regenmenge des Jahres und der Regenmenge Insgesamt, habe ich ebenfalls die button-card verwendet.
Hier die Jahresmenge als Beispiel:
Zusammenfassung
type: custom:button-card
entity: sensor.gw1100a_yearly_rain
show_state: true
name: "Regen dieses Jahr:"
styles:
card:
- background-color: "#3b65a5"
- color: "#b1b1b1"
icon:
- color: "#e1e1e1"
name:
- font-weight: normal
state:
- font-weight: normal
- font-size: 20px
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
rows: 2
columns: 6
Windgeschwindigkeit (Windrose)
Für die Wingeschwindigkeit ist die Karte windrose-card in Verwendung:
Zusammenfassung
type: custom:windrose-card
title: Windgeschwindigkeit
data_period:
period_back: "-24h"
refresh_interval: 300
windspeed_bar_location: right
wind_direction_entity:
entity: sensor.gw1100a_wind_direction
use_statistics: false
direction_compensation: 0
windspeed_entities:
- entity: sensor.gw1100a_wind_speed
name: ""
speed_unit: kph
use_statistics: false
windspeed_bar_full: true
output_speed_unit: kph
speed_range_beaufort: false
direction_labels:
cardinal_direction_letters: NOSW
rose_config:
windrose_draw_north_offset: 0
center_calm_percentage: true
current_direction:
show_arrow: true
arrow_size: 50
center_circle_size: 30
compass_direction:
auto_rotate: false
entity: ""
matching_strategy:
name: direction-first
colors:
rose_cardinal_direction_labels: "#e1e1e1"
rose_secondary_intercardinal_direction_labels: "#e1e1e1"
rose_current_direction_arrow: red
bar_border: none
bar_unit_name: "#e1e1e1"
bar_unit_values: "#e1e1e1"
Ich hoffe das euch das Dashboard etwas gefällt und eventuell ist für den ein oder anderen auch etwas dabei.
