Home Assistant: Das ultimative Tibber-Dashboard – Interaktive Preis-Charts für Heute & Morgen
Wer einen dynamischen Stromtarif wie Tibber nutzt, möchte wissen: Wann ist der Strom am günstigsten?
Die Standard-Ansichten sind oft statisch oder unübersichtlich. Ich habe ein Dashboard für Home Assistant gebaut, das keine Wünsche offen lässt.
Es bietet eine Tab-Ansicht (Reiter) für den heutigen und den morgigen Tag, ist touch-optimiert (perfektes Wischen auf dem Handy) und zoomt automatisch in den relevanten Preisbereich.
🚀 Features des Dashboards
- 📅 Heute & Morgen: Saubere Trennung durch Tabs.
- point-genau: Wenn du mit dem Finger über das Diagramm fährst, siehst du exakt den Preis zu jeder Uhrzeit (kein Springen!).
- 🔍 Auto-Zoom: Die Y-Achse passt sich dynamisch an. Niedrige Preisschwankungen werden groß dargestellt, damit man Peaks sofort erkennt.
- 📱 Live-Anzeige: Der aktuelle Live-Preis und der Batterie-Ladestand (SoC) werden oben im Header angezeigt.
- ☁️ Smart Preview: Der Tab für „Morgen“ zeigt automatisch eine Info-Meldung, solange Tibber die neuen Preise noch nicht veröffentlicht hat (meist vor 13:00 Uhr).
🛠️ Installation & Voraussetzungen
Damit dieser Code funktioniert, benötigst du HACS (Home Assistant Community Store) und zwei Frontend-Integrationen:
- ApexCharts Card: Die Engine für die schönen Diagramme.
- Tabbed Card: Für die Reiter-Ansicht.
(Installiere beide über HACS -> Frontend und lade den Browser danach neu).
Wichtig: Der REST-Sensor
Damit wir die Preise für den ganzen Tag im Voraus plotten können, benötigen wir die Daten als Liste. Der Standard-Tibber-Sensor liefert das oft nicht in diesem Format. Füge diesen Sensor in deine configuration.yaml ein (benötigt einen Tibber API Token):
YAML
sensor:
- platform: rest
name: Tibber Preise Vorhersage REST
resource: https://api.tibber.com/v1-beta/gql
method: POST
headers:
Authorization: "Bearer DEIN_TIBBER_TOKEN_HIER_EINFÜGEN"
Content-Type: application/json
payload: '{ "query": "{ viewer { homes { currentSubscription { priceInfo { today { total startsAt } tomorrow { total startsAt } } } } } }" }'
value_template: "{{ value_json.data.viewer.homes[0].currentSubscription.priceInfo.today[0].total }}"
json_attributes_path: "$.data.viewer.homes[0].currentSubscription.priceInfo"
json_attributes:
- today
- tomorrow
unit_of_measurement: EUR/kWh
💻 Der Dashboard-Code (YAML)
Füge eine „Manuelle Karte“ in deinem Dashboard hinzu und kopiere diesen Code hinein.
(Hinweis: Ersetze ggf. die Sensor-Namen mit deinen eigenen).
YAML
type: custom:tabbed-card
options:
defaultTabIndex: 0
styles:
"--mdc-tab-text-label-color-default": "#eeeeee"
"--mdc-theme-primary": "#ffffff"
"--mdc-tab-indicator-active-indicator-color": "#ffffff"
tabs:
# --- TAB 1: HEUTE ---
- attributes:
label: Heute
icon: mdi:calendar-today
card:
type: custom:apexcharts-card
graph_span: 24h
span:
start: day
header:
show: true
title: SmartPrice
show_states: true
colorize_states: true
now:
show: true
label: JETZT
color: red
all_series_config:
stroke_width: 2
apex_config:
chart:
height: 400
zoom: { enabled: false }
toolbar: { show: false }
animations: { enabled: false }
tooltip:
enabled: true
shared: true
intersect: false
followCursor: true
fixed:
enabled: true
position: topLeft
y:
formatter: |
EVAL:function(value) { return value.toFixed(3) + " €"; }
xaxis:
tooltip: { enabled: false }
crosshairs: { show: true, position: back }
fill:
type: solid
opacity: 0.2
series:
# 1. PREIS (Blaue Fläche)
- entity: sensor.electricity_price_prognose_15min_am_rottenbach_6
name: Preis
type: area
curve: stepline
color: "#00B0FF"
stroke_width: 2
yaxis_id: first
show:
in_header: false
legend_value: false
data_generator: |
var data = entity.attributes.today;
if(!data) return [];
var points = [];
var start = new Date(); start.setHours(0,0,0,0);
var startTime = start.getTime();
// 1-Minuten Raster für perfekten Touch
for(var i=0; i < 1440; i++) {
var timestamp = startTime + (i * 60 * 1000);
var index = Math.floor(i / 15);
if(index < data.length) {
var entry = data[index];
var val = (entry && entry.total !== undefined) ? entry.total : entry;
points.push([timestamp, val]);
}
}
return points;
# 2. LIVE PREIS (Weiße Linie)
- entity: sensor.tibber_preis_live_echtzeit
name: Aktuell
type: line
curve: stepline
color: "#FFFFFF"
stroke_width: 3
float_precision: 3
yaxis_id: first
group_by:
func: avg
duration: 5min
show:
in_header: true
legend_value: true
in_chart: true
# 3. SOC (Grün - Nur im Header)
- entity: sensor.battery_state_of_charge
name: SoC
type: line
color: "#00E676"
yaxis_id: soc
group_by:
func: last
duration: 10min
show:
in_header: true
legend_value: true
in_chart: false # Linie im Chart versteckt
yaxis:
- id: first
decimals: 3
apex_config:
tickAmount: 5
- id: soc
opposite: true
decimals: 0
max: 100
apex_config:
tickAmount: 5
# --- TAB 2: MORGEN ---
- attributes:
label: Morgen
icon: mdi:calendar-arrow-right
card:
type: vertical-stack
cards:
# Bedingung: Keine Daten -> Info Text
- type: conditional
conditions:
- entity: binary_sensor.tibber_preise_morgen_verfugbar
state: "off"
card:
type: markdown
content: >
### 🕒 Keine Daten für Morgen
Die Tibber-Strompreise werden meist **ab ca. 13:00 Uhr** veröffentlicht.
# Bedingung: Daten da -> Chart anzeigen
- type: conditional
conditions:
- entity: binary_sensor.tibber_preise_morgen_verfugbar
state: "on"
card:
type: custom:apexcharts-card
graph_span: 24h
span:
start: day
offset: +1d
header:
show: true
title: SmartPrice (Morgen)
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
apex_config:
chart:
height: 400
zoom: { enabled: false }
toolbar: { show: false }
animations: { enabled: false }
tooltip:
enabled: true
shared: true
intersect: false
followCursor: true
fixed:
enabled: true
position: topLeft
y:
formatter: |
EVAL:function(value) { return value.toFixed(3) + " €"; }
xaxis:
tooltip: { enabled: false }
crosshairs: { show: true, position: back }
fill:
type: solid
opacity: 0.2
series:
- entity: sensor.electricity_price_prognose_15min_am_rottenbach_6
name: Preis
type: area
curve: stepline
color: "#9c27b0"
stroke_width: 2
yaxis_id: first
show:
in_header: true
legend_value: false
data_generator: |
var data = entity.attributes.tomorrow;
if(!data) return [];
var points = [];
var start = new Date();
start.setDate(start.getDate() + 1);
start.setHours(0,0,0,0);
var startTime = start.getTime();
for(var i=0; i < 1440; i++) {
var timestamp = startTime + (i * 60 * 1000);
var index = Math.floor(i / 15);
if(index < data.length) {
var entry = data[index];
var val = (entry && entry.total !== undefined) ? entry.total : entry;
points.push([timestamp, val]);
}
}
return points;
yaxis:
- id: first
decimals: 3
apex_config:
tickAmount: 5
☕ Support
Hat dir der Code geholfen oder nutzt du das Dashboard täglich? Dann freue ich mich riesig über einen virtuellen Kaffee!
Gefällt dir das Projekt? Spendier mir einen Kaffee ☕️
Vielen Dank für deine Unterstützung!
Share this content:
