Verbrauchsbildschirm
GGast | Lesen🍒0Erstelle deine Verbrauchsanzeige
Export gesperrt (Login + Lizenz)Anzeigen
Vorlagen
Schnellvorlagen anwenden: vordefinierte Widget-Kombinationen und Größen.
- AusgewogenBalance aus Preis, Verbrauch und Wetter.
- KompaktKleine Anzeige: Preis, Verbrauch, Temperatur.
- BreitGroßes Layout: alle Widgets aktiviert.
Templates, Widgets und Größen direkt im integrierten Editor bearbeiten.
Konfiguration
Allgemein
Wetter
Umweltwerte (OpenAQ)
Strom & Markt
Verkehr
HomeWizard
Home Assistant
ESP32 Code + Einbindung
Gast-Modus: Teilen und Embed sind deaktiviert.
Aktuelles JSON / Export Preview
{}Fuer ESP32 die Payload URL oder den Export verwenden. Embed-Snippet kann direkt in Webseiten eingebunden werden.
PFUISI.AT ESP32 E‑INK GUIDE
Der ESP32 holt die PFWS-Payload per WLAN ab, parst das JSON und zeichnet es auf ein E‑Ink-Display. Die folgenden Akkordeons sind bewusst kompakt aufgebaut, damit die Schritte auf der PFWS-System-Seite schnell erfassbar bleiben.
01/Grundablauf: Website → WLAN → JSON → E‑InkSTEP
- In der PFWS-Share-Ansicht die Payload URL (ESP32) kopieren.
- ESP32 mit WLAN verbinden und die Payload per HTTP GET abrufen.
- JSON mit ArduinoJson parsen.
- Widgets / Werte aus dem JSON auf dem I2C- oder SPI-E‑Ink-Display zeichnen.
- Nach dem Refresh in den Deep Sleep wechseln, um Akku zu sparen.
Wichtig: Die Anzeige ist ein Leser der PFWS-Payload. Das Layout, die Reihenfolge und die Datenquellen werden also zentral in PFWS gepflegt.
02/Hardware-EmpfehlungSTEP
- Mikrocontroller: ESP32 WROOM DevKit V1 mit 30 Pins.
- Display: Waveshare 4.2" E-Paper Modul in Schwarz/Weiß, 400x300.
- Touch (optional): kapazitives Overlay mit FT6236 oder kompatiblem I2C-Controller.
- Strom: 18650 Li-Ion Akku, idealerweise 3000 mAh oder größer.
- Laden: TP4056-Modul plus 5V Boost-Konverter oder ein Power-Bank-HAT.
Hinweis: Viele E‑Ink-Module brauchen 5V an VCC, die Logik bleibt aber meist 3.3V. Unbedingt das Datenblatt prüfen.
03/Verdrahtung: Display, Touch und Batterie-MessungWIRING
| Komponente | Signal | ESP32 GPIO | Farbe |
|---|---|---|---|
| E‑Ink Display | VCC | 3.3V / 5V* | Rot |
| E‑Ink Display | GND | GND | Schwarz |
| E‑Ink Display | SCK / CLK | GPIO 18 | Gelb |
| E‑Ink Display | MOSI / DIN | GPIO 23 | Grün |
| E‑Ink Display | MISO | GPIO 19 | Weiß |
| E‑Ink Display | CS | GPIO 5 | Blau |
| E‑Ink Display | DC | GPIO 4 | Orange |
| E‑Ink Display | RST | GPIO 16 | Violett |
| E‑Ink Display | BUSY | GPIO 2 | Grau |
| Touch Pad (I2C) | SDA | GPIO 21 | Grün |
| Touch Pad (I2C) | SCL | GPIO 22 | Gelb |
| Touch Interrupt | INT / Wake | GPIO 34 | Weiß |
| Batterie-Monitor | Spannungsteiler Mitte | GPIO 35 | - |
Touch und Sensorik laufen über I2C. Das Display selbst ist typischerweise SPI, daher bleiben die Busse sauber getrennt.
04/Benötigte Arduino LibrariesSTEP
- GxEPD2 von ZinggJM für E‑Ink-Ausgabe.
- ArduinoJson von Benoit Blanchon, Version 6.x.
- HTTPClient, WiFi und Wire sind standardmäßig dabei.
Die Bibliotheken werden im Arduino Library Manager installiert. Danach lässt sich das Display-Beispiel direkt an das konkrete WaveShare- oder GxEPD2-Modell anpassen.
05/Beispielcode: WLAN holen, JSON parsen, Display zeichnenCODE
Der Code unten ist bewusst als Startpunkt geschrieben. WLAN-Name, Passwort und die Payload-URL aus PFWS müssen oben eingetragen werden.
#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>
#include <GxEPD2_BW.h>
#include <Wire.h>
const char* ssid = "DEIN_WLAN_NAME";
const char* password = "DEIN_WLAN_PASSWORT";
const char* pfuisiApiUrl = "https://www.pfuisi.at/api/.../deine-lange-id...";
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
HTTPClient http;
http.begin(pfuisiApiUrl);
int httpCode = http.GET();
if (httpCode == 200) {
String payload = http.getString();
DynamicJsonDocument doc(15000);
if (deserializeJson(doc, payload)) {
// JSON verarbeiten und E-Ink zeichnen
}
}
http.end();
}
void loop() {}
06/Betrieb, Deep Sleep und typische StolperfallenSTEP
- Refresh-Intervall: typischerweise 5 bis 15 Minuten, je nach Akku und Displaygröße.
- Deep Sleep: nach dem Zeichnen schlafen legen, damit das Gerät sehr wenig Energie zieht.
- Touch als Wake-Up: optional kann das Touch-Overlay das Aufwecken auslösen.
- JSON prüfen: Die PFWS-Payload muss direkt JSON zurückgeben, ohne HTML oder Redirect.
- Display-Modell anpassen: In GxEPD2 muss die konkrete Panel-Klasse zum Display passen.
Tipp: Wenn das Layout später im PFWS geändert wird, folgt der ESP32 automatisch der neuen Widget-Reihenfolge, solange du die JSON-Struktur nutzt.
Hilfe & Dokumentation
01/Überblick & GrundkonzeptCORE
Was der Verbrauchsbildschirm kann
Der Verbrauchsbildschirm ist ein flexibles Anzeige-Modul für Strom- und Energiedaten. Er kann auf einem ESP32 E‑Ink Display, auf anderen Displays, im Browser, per Share-/Embed-Link oder in Home Assistant dargestellt werden.
- ESP32 E‑Ink Verbrauchsanzeige: Anzeige von Strompreis, Verbrauch, PV, Batterie, Status.
- User-Displays: Benutzer können eigene Layouts mit Widgets zusammenstellen.
- Parametrierung: Größe, Widgets, Datenquellen, Aktualisierungsintervalle.
- Share-/Embed-Optionen: sichere Einbindung per Token-URL in andere Systeme.
Ziel: Eine zentrale Anzeige, die sich an deine Infrastruktur anpasst – egal ob ESP32, Web-Dashboard oder Smart-Home-Integration.
02/Aktueller Stand / neue ErkenntnisseUPDATE
- Smart Meter: Das frühere Phasen-Widget ist jetzt fachlich als Smart Meter umgesetzt, bleibt aber technisch mit dem bestehenden Key kompatibel.
- E‑Ink: Mono und Color haben getrennte Regeln für Kontrast, Linien, Badges und Meta-Infos.
- Börsenkurs: Der Jetzt-Marker folgt der plausiblen Uhrzeit und zeigt zusätzlich Min/Max-Badges an.
- ESP32: Der Share-Dialog enthält jetzt einen eigenen ESP32-E-Ink-Guide mit nummerierten Akkordeons und klaren Prefixen.
- Traffic: Fahrrad- und Fußweg-Routen werden nachgeladen, wenn die erste Route-Liste unvollständig ist.
02/Anzeigen & Widgets konfigurierenLAYOUT
01/Anzeige auswählen oder neu erstellenSTEP
- Anzeige wählen: Eine bestehende Anzeige aus der Liste auswählen.
- Neue Anzeige: „Neues Display" wählen, Name und Basis-Layout festlegen.
- Display-Typ: z. B. „E‑Ink 2.9''", „Web-Widget", „Home Assistant Panel".
Jede Anzeige hat eine eigene ID und kann unabhängig konfiguriert, geteilt und mit einem ESP32 verknüpft werden.
02/Widget-Toolbar & LayoutGRID
Über die Widget-Toolbar kannst du deine Anzeige modular aufbauen:
- Widgets: z. B. Strompreis, aktueller Verbrauch, Tagesverbrauch, PV-Leistung, Temperatur, Verkehr.
- Templates: vordefinierte Layouts (Balanced, Compact, Wide).
- Größen: Widgets in Breite/Höhe anpassen (sm, md, lg).
- Reihenfolge: Drag & Drop, um Widgets neu anzuordnen.
Änderungen werden live in der Vorschau angezeigt.
03/Strompreis-Widgets & PreisstufenPRICE
Das Preis-Widget unterscheidet zwischen „günstig", „normal" und „teuer" und zeigt entsprechende Icons und Farben.
- Preis-Quelle: dynamischer Tarif (API), fixer Tarif oder manuelle Eingabe.
- Preis-Stufen: Grenzwerte definieren (z. B. <20 ct/kWh = günstig).
- E‑Ink-optimiert: Symbole und Farben für Schwarz-Weiß-Displays.
03/Datenquellen & APIsAPI
01/Allgemeines API-KonzeptJSON
Der Verbrauchsbildschirm arbeitet mit Payload-URLs, die alle benötigten Daten als JSON liefern. Die Payloads kommen vom PFWS-Backend oder von externen APIs, die über PFWS-Module eingebunden werden.
Jede Anzeige hat eine eigene Payload-URL, die vom ESP32, von Websites oder von Home Assistant abgefragt werden kann.
02/Externe APIs (Wetter, Strompreis, Home Assistant)PROXY
- Wetter: Open-Meteo → PFWS-Proxy → Widget „Wetter / PV-Prognose".
- Strompreis: dynamische Tarife → PFWS-Proxy → Preis-Widget.
- Home Assistant: Sensoren (Power, PV, Batterie) → PF_HAM / HA-Proxy → Verbrauchsbildschirm.
- HomeWizard: Direktanbindung per Host + API-Key in den Einstellungen.
Externe APIs sollten serverseitig über PFWS abgefragt werden (DSGVO).
03/Beispiel-Payload (JSON)PAYLOAD
{
"display_id": 123,
"title": "Strompreis & Verbrauch",
"widgets": [
{ "type": "price", "level": "cheap", "value_ct_kwh": 18.4 },
{ "type": "power", "value_w": 423 },
{ "type": "energy_today", "value_kwh": 7.2 }
]
}04/ESP32 Integration & E‑Ink DisplayESP32
01/Grundprinzip ESP32 / WLANWLAN
Der ESP32 ruft den Payload per HTTP-URL ab. Das Gerät benötigt nur WLAN-Zugang, die Payload-URL und ein definiertes Refresh-Intervall.
- Refresh-Intervall und Widgets sind frei definierbar.
- Der Share-Token ermöglicht sicheren Lesezugriff ohne Login.
- Die JSON-Struktur folgt direkt der PFWS-Widget-Reihenfolge.
- Kompatibel mit LILYGO, Waveshare und anderen E‑Ink-Modulen.
02/Beispiel ESP32-Code (Pseudo / Arduino)CODE
const char* PAYLOAD_URL = "https://pfuisi.at/api/payload.php?id=123&token=XYZ";
void loop() {
// 1) HTTP GET auf PAYLOAD_URL
// 2) JSON parsen
// 3) Widgets auf E-Ink zeichnen
// 4) Display refresh
// 5) Deep-Sleep (z. B. 5-15 Minuten)
}03/Share-Token & SicherheitTOKEN
Jede Anzeige kann einen Share-Token erhalten. Dieser ermöglicht lesenden Zugriff auf genau diese Anzeige und kann jederzeit zurückgesetzt werden.
So können E‑Ink-Clients, Websites oder Home Assistant sicher angebunden werden, ohne das gesamte Konto freizugeben.
05/PF_ESP32emu – ESP32 emulieren & testenEMU
01/Was PF_ESP32emu machtTEST
Das Modul PF_ESP32emu ist ein interaktiver ESP32 Breadboard-Emulator im PFWS. Du kannst damit Verbindungen zu Displays und Sensoren simulieren, Payload-URLs testen und ESP32-Verhalten nachstellen – ohne echte Hardware.
02/ESP32 mit PF_ESP32emu verbindenLINK
- PF_ESP32emu öffnen: Im Dashboard „ESP32 eMUlator" starten.
- Payload-URL eintragen: URL der Anzeige im Emulator hinterlegen.
- Simulation starten: Der Emulator ruft die URL ab und zeigt, wie der ESP32 die Daten sehen würde.
- Layout testen: Änderungen werden direkt sichtbar, ohne Hardware.
06/Share, Embed & Home AssistantSHARE
01/Share-Links & Embed-CodeEMBED
- Payload-URL: für ESP32, externe Skripte, Home Assistant.
- Embed-HTML: <iframe>-Code oder Widget-Snippet für Websites.
- Export: JSON-Export der Anzeige-Konfiguration.
<iframe
src="https://pfuisi.at/embed/verbrauchsbildschirm.php?id=123&token=XYZ"
width="400" height="300" style="border:0"></iframe>02/Home Assistant IntegrationHA
Den Verbrauchsbildschirm in Home Assistant einbinden als:
- Panel iframe: Anzeige direkt im HA-Frontend.
- REST-Sensor: liest Payload-Daten aus.
- Picture-Element: gerenderter Snapshot.
# configuration.yaml
panel_iframe:
verbrauch:
title: "Verbrauchsbildschirm"
url: "https://pfuisi.at/embed/verbrauchsbildschirm.php?id=123&token=XYZ"
icon: "mdi:flash"ESP32 Einbindung & PFWS Schnittstelle
1. PFWS API & Payload‑Struktur
Der ESP32 ruft die Daten des gewählten Verbrauchsbildschirms über die PFWS‑Schnittstelle ab:
GET https://www.pfuisi.at/core/api/verbrauchsbildschirm/PF_payload.php
?display_id=DISPLAY_ID
&token=SHARE_TOKEN- display_id – eindeutige ID der Anzeige
- token – Share‑Token für sicheren Lesezugriff
Der Payload liefert alle Widgets, Werte, Layout‑Infos und Farben für das E‑Ink‑Display.
2. ESP32 Workflow (Standalone)
- ESP32 verbindet sich mit WLAN
- ESP32 ruft die PFWS‑Payload‑URL ab
- ESP32 parst das JSON
- ESP32 rendert Widgets auf dem E‑Ink‑Display
- ESP32 schläft (Deep Sleep) für X Minuten
- ESP32 wiederholt den Zyklus
// Beispiel: ESP32 Payload URL const char* PAYLOAD_URL = "https://www.pfuisi.at/core/api/verbrauchsbildschirm/PF_payload.php" "?display_id=display-786053539b14" "&token=XYZ123";
3. ESP32 + I²C E‑Ink Color Display
Der ESP32 steuert das E‑Ink‑Display über I²C oder SPI an (je nach Modell). Typische Pins:
SCL → GPIO 22 SDA → GPIO 21 VCC → 3.3V GND → GND RST → GPIO 16 BUSY → GPIO 4 DC → GPIO 17 CS → GPIO 5
Der ESP32 rendert die Widgets entsprechend der PFWS‑Payload‑Daten:
- Text‑Widgets
- Preis‑Icons (cheap / normal / expensive)
- PV‑Leistung
- Smart Meter
- Wetter
- Verkehr
- CO₂
4. PF_ESP32emu – ESP32 Emulator
Mit PF_ESP32emu kannst du deinen ESP32 simulieren:
- Payload‑URL testen
- E‑Ink‑Rendering simulieren
- Widget‑Layout prüfen
- API‑Key & Token testen
- ESP32‑Deep‑Sleep‑Zyklen simulieren
PF_ESP32emu → „Payload URL eintragen" → „Simulieren"
5. Share, Embed & ESP32 Export
Der Export‑Dialog (⟨/⟩ ESP32 Code + Einbindung) liefert:
- Payload URL – direkt für ESP32
- Share URL – für Browser / Home Assistant
- Embed Snippet – für Websites (<iframe>)
- JSON Preview – aktueller Snapshot der Anzeige
Den Dialog öffnest du über das Menü „ESP32 Code + Einbindung" in der Toolbar des Verbrauchsbildschirms.