Gezeiten Im Blick: So Baust Du Dir Ein Tide-Dashboard In Home Assistant

Im ersten Teil dieser Serie habe ich dir gezeigt, wie du die Integration „BSH Tides for Germany“ installierst und konfigurierst. Jetzt geht es ans Visuelle: Du möchtest natürlich auf deinem Dashboard sehen, wann die nächste Flut oder Ebbe ansteht.

In diesem Artikel zeige ich dir, wie du mit Mushroom Cards eine schöne, informative Visualisierung der nächsten Tide-Ereignisse baust.

Voraussetzungen

Bevor wir loslegen, brauchst du folgende Komponenten:

• Die Integration BSH Tides for Germany, wie in Artikel 1 beschrieben.
• Mushroom Cards über HACS installiert.

Ziel: Ein einfaches, aber informatives Dashboard

Ich möchte dir drei Visualisierungsvarianten zeigen, die du direkt übernehmen oder anpassen kannst:

1️⃣ Nächste Tide als kompakte Badge

Eine platzsparende Mushroom-Badge mit Symbol, Uhrzeit und Wasserstand der nächsten Tide.

Beispiel:

type: custom:mushroom-template-card
layout: horizontal
primary: Bald ist
secondary: >
  {% set event = {
    'high_tide': 'Flut',
    'low_tide': 'Ebbe'
  }[states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_event')] %} {% set time =
  states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_time') %} {% set diff =
  states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_diff_to_mean') %}

  {{ event }} {{ as_timestamp(time) | timestamp_custom('%H:%M') }} ({{ diff
  }} cm) 
badge_icon: >
  {% set event = states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_event') %}
  {% if event == 'high_tide' %}
    mdi:arrow-collapse-up
  {% elif event == 'low_tide' %}
    mdi:arrow-collapse-down
  {% else %}
    mdi:help
  {% endif %}
badge_color: >
  {% set event = states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_event') %}
  {% if event == 'high_tide' %}
    blue
  {% elif event == 'low_tide' %}
    deep-orange
  {% else %}
    grey
  {% endif %}
tap_action:
  action: more-info
multiline_secondary: false
fill_container: false
icon: mdi:wave
entity: sensor.bsh_hamburg_st_pauli_elbe_next_tide_event

Das sieht als Badge dann so aus:

2️⃣ Hoch- und Niedrigwasser auf einen Blick

Zwei Werte gleichzeitig anzeigen – mit Zeiten und Wasserstand in einem Textblock.

type: custom:mushroom-template-card
primary: Ebbe & Flut
secondary: >
  {% set hw = states('sensor.bsh_hamburg_st_pauli_elbe_next_high_tide_time') %}
  {% set hw_lvl = states('sensor.bsh_hamburg_st_pauli_elbe_next_high_tide_level') %}
  {% set nw = states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_time') %}
  {% set nw_lvl = states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_level') %}

  HW: {{ as_timestamp(hw) | timestamp_custom('%d.%m. %H:%M') }} – {{ hw_lvl }} cm
  
  NW: {{ as_timestamp(nw) | timestamp_custom('%d.%m. %H:%M') }} – {{ nw_lvl }} cm
multiline_secondary: true
icon: mdi:chart-timeline-variant-shimmer

💡 Praktisch, wenn du morgens kurz schauen willst, wie dein Tag aussieht – besonders nützlich für alle, die in tideabhängigen Regionen leben.

3️⃣ Dynamisch sortiert: Welche Tide kommt zuerst?

Diese Karte zeigt zuerst das Ereignis, das zeitlich näher liegt – Hoch- oder Niedrigwasser.

type: custom:mushroom-template-card
primary: Gezeitenvorschau
secondary: >
  {% set hw_time =
  as_datetime(states('sensor.bsh_hamburg_st_pauli_elbe_next_high_tide_time')) %}
  {% set nw_time =
  as_datetime(states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_time')) %}
  {% set hw_level =
  states('sensor.bsh_hamburg_st_pauli_elbe_next_high_tide_level') %} {% set
  nw_level = states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_level') %}
  {% set hw_diff =
  states('sensor.bsh_hamburg_st_pauli_elbe_next_high_tide_diff_to_mean') %} {%
  set nw_diff =
  states('sensor.bsh_hamburg_st_pauli_elbe_next_low_tide_diff_to_mean') %}

  {% if hw_time < nw_time %} 🔵 Hochwasser: {{ as_local(hw_time) | as_timestamp |
  timestamp_custom('%d.%m. %H:%M') }} – {{ hw_level }} cm ({{ hw_diff }})

  🔶 Niedrigwasser:  {{ as_local(nw_time) | as_timestamp | timestamp_custom('%d.%m.
  %H:%M') }} – {{ nw_level }} cm ({{ nw_diff }}) {% else %} 🔶 Niedrigwasser:  {{
  as_local(nw_time) | as_timestamp | timestamp_custom('%d.%m. %H:%M') }} – {{
  nw_level }} cm ({{ nw_diff }})

  🔵 Hochwasser: {{ as_local(hw_time) | as_timestamp | timestamp_custom('%d.%m.
  %H:%M') }} – {{ hw_level }} cm ({{ hw_diff }}) {% endif %}
multiline_secondary: true
icon: mdi:wave
badge_icon: >
  {% set event = states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_event') %}
  {% if event == 'high_tide' %}
    mdi:arrow-collapse-up
  {% else %}
    mdi:arrow-collapse-down
  {% endif %}
badge_color: >
  {% set event = states('sensor.bsh_hamburg_st_pauli_elbe_next_tide_event') %}
  {% if event == 'high_tide' %}
    #0074ba
  {% else %}
    #ff6723
  {% endif %}
tap_action:
  action: more-info
entity: sensor.bsh_hamburg_st_pauli_elbe_next_tide_event

Was so aussieht:

Tipps zur Anpassung

• Ändere die sensor.bsh_hamburg_st_pauli_elbe_* durch die Namen deiner Station.
• Wenn du Mushroom nicht verwendest, kannst du die Templates auch in Standard-Karten oder als Sensoren verwenden.
• Mit apexcharts-card lässt sich auch eine Verlaufsgrafik der Pegelkurve bauen – das zeige ich dir vielleicht später.

Vorschau: Automationen mit Tide-Daten

Im nächsten Artikel geht es um die praktische Nutzung der Daten für Automationen:

• Frühwarnung bei kritischem Wasserstand
• Kombination mit Sonnenaufgang/-untergang oder Wetter

Wenn du Feedback, Fragen oder Verbesserungsvorschläge hast schau in die anderen Artikel dieser Reihe – und schreib mir gerne einen Kommentar hier oder auf GitHub!