Widgets
Übersicht aller verfügbaren Widgets. Jede Seite zeigt das Widget und seinen Einstellungs-Dialog.
Steuerung & Anzeige
| Widget | Beschreibung |
|---|---|
| Auswahlfeld | DP-Werte (0,1,2…) auf Text-Labels mappen; Dropdown schreibt den Wert zurück. |
| Binärsensor | Allgemeinen Binärsensor anzeigen (z. B. Bewegungsmelder, Alarm). |
| Countdown | Restzeit hh:mm:ss mit Start/Pause/Stopp und ±-Tasten – läuft im Adapter, schaltet am Ende einen Datenpunkt; zeigt wahlweise die Restzeit eines fremden Datenpunkts. |
| Datumswähler | Datum/Uhrzeit auswählen und als Datenpunkt speichern. |
| Diagramm (einfach) | Verlauf eines einzelnen Datenpunkts als einfaches Diagramm. |
| Diagramm (erweitert) | Erweitertes Diagramm mit mehreren Datenpunkten und Optionen. |
| Diagramm (Verteilung) | Anteilige Darstellung (Balken, Torte oder Donut) beliebig vieler Gruppen aus mehreren Datenpunkten mit History-Aggregation – z.B. Energiebilanz, Kosten, Speicherbelegung |
| Dimmer | Licht dimmen – Helligkeitsregler 0–100 % mit Ein/Aus-Taste. |
| Drehregler | Wert über Drehknopf einstellen – 3 Zeigertypen, Winkelbereich konfigurierbar. |
| Dynamische Liste | Datenpunkte automatisch aus einem ioBroker-Ordner auflisten. |
| eCharts | Vorkonfiguriertes eCharts-Diagramm per JSON-Preset. |
| Eingabefeld | Text per Tastatur eingeben und in einen Datenpunkt schreiben. |
| Fenster-/Türkontakt | Fenster- oder Türkontakt-Status anzeigen (offen/geschlossen). |
| Füllstandsanzeige | Füllstand (z. B. Wassertank, Heizöl) als Balken visualisieren. |
| Gauge | Zahlenwert als Tachonadel/Kreisbogen visualisieren. |
| HTTP-Aktion | HTTP GET/POST-Anfrage per Klick auslösen (z. B. Webhook). |
| Mediaplayer | Mediaplayer steuern (Sonos, Squeezeserver, Spotify …). |
| Raumklima | Temperatur, Luftfeuchtigkeit und optionalen Temperaturverlauf kombiniert anzeigen. |
| RGB-Licht | RGB / CCT / Dimmer in einem Widget – Helligkeit, Farbe, Lichtwärme, Effekte. |
| Rollladen | Rollladen-Position (0–100 %) steuern und anzeigen. |
| Schalter | Ein/Aus-Schalter für Boolean-Datenpunkte (z. B. Lampe, Steckdose). |
| Schieberegler | Beliebigen Zahlenwert per Schieberegler einstellen. |
| Schnellzugriff-Chips | Kompakte Schaltflächen-Leiste für Szenen und häufige Aktionen. |
| Statische Liste | Manuell gepflegte Liste mit frei konfigurierbaren Datenpunkt-Links. |
| Thermostat | Soll-Temperatur einstellen und Ist-Temperatur anzeigen. |
| Universal-Widget | Freies Raster – Zellen einzeln mit Schaltern, Reglern, Werten und Bildern belegen. |
| Wert-Anzeige | Einen Datenpunktwert als Zahl/Text anzeigen (read-only). |
Spezial
| Widget | Beschreibung |
|---|---|
| Adapter-Logs | Live-Log-Stream aller Adapter — Filter nach Schweregrad, Adapter und Freitext. |
| Adapter-Status | Liste aller ioBroker-Instanzen mit Status, Update-Hinweisen und Aktionen. |
| Alarmanlage | ioBroker.alarm-Adapter steuern — Scharf/Inside/Nacht, Zonen, PIN, Tages-Log. |
| Bild | Statisches Bild, lokale Datei oder URL anzeigen. |
| Energiefluss (evcc) | PV-Erzeugung, Haus, Netz und Hausbatterie als Flussgrafik – aus einer evcc-Instanz, samt Ladepunkt-Steuerung. |
| HTML | Beliebigen HTML/CSS-Code frei einbetten. |
| iFrame | Externe Webseite oder lokale URL einbetten. |
| JSON-Tabelle | JSON-Array-Datenpunkt als formatierte Tabelle anzeigen. |
| Kalender | Termine aus dem iCal-Adapter. |
| Kamera | Kamera-Livebild einbinden (go2rtc / MJPEG-Stream). |
| Karte | Positionen (Auto, Kind, …) aus Datenpunkten auf einer OpenStreetMap-Karte anzeigen – optional mit Entfernung. |
| Karussell | Horizontal scrollbare Chip-Liste – pro Item Datenpunkt + eigene Klick-Aktion. |
| Meldungen | Verlauf der eingegangenen Informationen, Warnungen und Fehler — Filter nach Schweregrad und Zeitraum. |
| Müllabfuhr | Nächste Müllabfuhr-Termine vom Trash-Adapter anzeigen. |
| Müllabfuhr-Zeitplan | Detaillierter Müllabfuhr-Kalender (Datenpunkt vom Trash-Adapter). |
| Skript-Status | Liste aller JavaScript-Skripte mit Status, Filter und Start-/Stopp-Aktionen. |
| Uhrzeit | Aktuelle Uhrzeit und Datum anzeigen (kein Datenpunkt nötig). |
| Wetter | Wetterdaten vom ioBroker-Wetter-Adapter anzeigen. |
| Zeitschaltuhr | Zeitgesteuerte Ereignisse — Wochentag/Astro/Einmalig/Zeitraum. |
| Zustandsbild | Je nach Zustand (true/false) ein anderes Bild anzeigen. |
Layout
| Widget | Beschreibung |
|---|---|
| Abschnittstitel | Trennlinie mit Überschrift zur Gliederung des Dashboards. |
| Button | Klick-Aktion auslösen (Datenpunkt schreiben, HTTP-Call, Szene …). |
| Gruppe | Mehrere Widgets in einem gemeinsamen Rahmen gruppieren. |
| Menü | Frei positionierbares Navigations-Menü – zeigt die Bereiche, die Tabs oder eine Übersicht aller Bereiche mit ihren Tabs zum direkten Umschalten. |
| Panels | Mehrere Widgets als swipebare Slides – Wischen, Pagination-Dots und Pfeil-Buttons. |
| Spiegel | Zeigt ein vorhandenes Widget live an einer zweiten Stelle an – kein Duplikat: Änderungen an der Quelle wirken sofort mit. |
Konzepte
- Bindings & Berechnungen — Datenpunkt-Platzhalter im HTML, mit Rechnen, Runden, Farben und Datum
- Custom-Layout — Widgets mit freier Zellen-Matrix gestalten
Datenpunkt-Wert im Widget-Namen
Der Name jedes Widgets löst [[<dp>]] zum aktuellen Wert dieses Datenpunkts auf, gemischt mit festem Text:
| Name | zeigt |
|---|---|
Wohnzimmer [[0_userdata.0.Temp]] °C | Wohnzimmer 21.5 °C |
[[0_userdata.0.Status]] | den Inhalt des Datenpunkts |
Mehrere Tokens pro Name sind erlaubt, JSON-Pfade ([[dp?battery.soc]]) ebenfalls; Booleans erscheinen als AN / AUS. In einer Popup-View kombinierbar mit {{parent}}.