Vis 2 inventwo Widgets

Um

Eine Sammlung hochgradig anpassbarer Widgets für ioBroker vis 2.0 – entwickelt für Anwender, die die volle Kontrolle über das Erscheinungsbild ihrer Dashboards wünschen. Jedes Widget bietet umfangreiche Gestaltungsoptionen und integriert sich nahtlos in die ioBroker-Datenpunkte.

📖 Benutzerdokumentation – detaillierte Anleitungen für alle Widgets, Einstellungen und Beispiele.

Widgets

Widget - Universell

Das Flaggschiff-Widget dieses Adapters – ein einzelnes Widget, das als Schalter, Schaltfläche, Navigationselement, schreibgeschütztes Display und vieles mehr fungieren kann.

Interaktionstypen

• Schalter – schaltet einen Datenpunkt zwischen zwei Werten um
• Taste – setzt beim Drücken einen Wert; optional wird der Wert so lange gespeichert, wie die Taste gedrückt wird, und beim Loslassen zurückgesetzt.
• Navigation – navigiert per Klick zur Vis-Ansicht.
• Schreibgeschützt – zeigt einen Wert ohne Interaktion an
• Ansicht im Dialog – öffnet eine Vis-Ansicht in einem modalen Dialog
• Wert erhöhen/verringern – erhöht oder verringert einen numerischen Datenpunkt
• HTTP-Anfrage / URL öffnen – sendet eine HTTP-Anfrage oder öffnet eine URL (im selben Tab oder in einem neuen Tab).

Anzeigemodi

• Einzelne Schaltfläche – ein Widget mit einem oder mehreren Zuständen
• Getrennte Schaltflächen – jeder Zustand wird als eigene Schaltfläche dargestellt (ersetzt die klassische Optionsfeldliste)

Inhaltstypen

Mehrere Inhaltselemente können pro Bundesland frei kombiniert werden:

• Text / HTML – statisches oder dynamisches Label
• Symbol – ioBroker-Symbolbibliothek
• Bild – lokales oder entferntes Bild mit konfigurierbarem Maßstab, Position und Füllmodus
• Ansicht im Widget – eine weitere Vis-Ansicht direkt in das Widget einbetten
• Farbauswahl – vollumfängliche Farbauswahl (HEX, HEX8, RGB, HSL, HSV, CIE) mit konfigurierbarer Komponentensichtbarkeit

• Analoge Uhr – SVG-Analoguhr mit konfigurierbarem Zifferblattdesign, Teilstrichen, Zahlen und Zeigern

Weitere Funktionen

• Mehrere Bundesstaaten mit individuellem Styling pro Bundesstaat
• Klick-Feedback-Animation
• Vergleich bedingter Zustände (nach Wert oder anderen Kriterien)
• Konfigurierbare Dialogoptionen (Vollbildmodus, Schließen bei Klick außerhalb des Bildschirms, automatischer Schließtimer)

Design

Jeder Aspekt des Widgets ist anpassbar:

Detaillierte Designbeispiele finden Sie hier .

Polygonformen

Widgets sind nicht auf Rechtecke beschränkt. Mit den Formeinstellungen können Sie aus integrierten Polygonformen auswählen oder eine vollständig benutzerdefinierte Kontur definieren:

Weitere Formoptionen:

• Drehung (0–359°) — Dreht jedes integrierte Polygon um einen beliebigen Winkel
• Eckradius (0–30) – rundet alle Eckpunkte gleichmäßig mit Bézierkurven ab; funktioniert für jede Form, auch für benutzerdefinierte.
• Benutzerdefinierte Polygonpunkte — durch Komma getrenntX% Y% Paare im Uhrzeigersinn, z.B.40% 0%, 100% 50%, 40% 100%, 0% 50% • Erstellen Sie Pfade visuell unter https://bennettfeely.com/clippy/

Alle vorhandenen Funktionen – Innen-/Außenschatten, Rahmen, Farbverläufe im Hintergrund, Klick-Feedback – funktionieren mit jeder Form.

Beispiel: Hexagonales Waben-Dashboard → docs/example-views/hexagonal-view.md
Beispiel: Rechteckiges Dashboard → docs/example-views/rectangle-view.md

Widget - Schieberegler

Ein horizontaler oder vertikaler Schieberegler zur Steuerung numerischer Datenpunkte.

Hauptmerkmale:

• Horizontale und vertikale Ausrichtung
• Konfigurierbare Minimal-, Maximal- und Schrittwerte (automatisch aus dem Datenpunktobjekt gelesen)
• Optionale Min-/Max-Wert-Beschriftungen
• Schrittanzeige (automatische oder benutzerdefinierte Schrittwerte)
• Schritte können innerhalb der Schiebeleiste platziert werden.
• Nur-Lese-Modus – zeigt einen Wert an, ohne Interaktion zu ermöglichen
• Unterstützung für Farbverläufe für Schienen und aktive Schienen (beliebige CSS-Farbzeichenfolge einschließlich)linear-gradient(...) )
• Individuelle Gestaltung von Spur, aktiver Spur und Daumen inklusive Schatteneffekten

Widget - Radialer Schieberegler

Ein kreisförmiger Schieber als elegante Alternative zum klassischen linearen Schieber.

Hauptmerkmale:

• Frei konfigurierbarer Start- und Endwinkel
• Konfigurierbare Spurbreite, Spurfarbe und aktive Spurfarbe
• Optionale Wertanzeige in der Mitte mit Schriftgröße und -farbe
• Optionale Beschriftung unterhalb des Wertes
• Daumengröße und Farbe
• Schatteneffekte für Spur und Daumen

Widget - Schalter

Ein Kippschalter für boolesche oder zweistufige Datenpunkte.

Hauptmerkmale:

• Benutzerdefinierte Wahr/Falsch-Werte (nicht beschränkt auf boolesche Werte)
• Individuelle Textbezeichnungen für jeden Staat
• Position des Etiketts: oben, unten, Anfang oder Ende
• Vollständig anpassbare Track- und Daumenfarben (einschließlich Farbverläufe)
• „Vom Widget“-Styling – Styling von einem anderen Schalter-Widget übernehmen

Widget - Kontrollkästchen

Eine Checkbox für boolesche oder zweistufige Datenpunkte.

Hauptmerkmale:

• Benutzerdefinierte Wahr/Falsch-Werte
• Individuelle Textbezeichnungen für jeden Staat
• Position des Etiketts: oben, unten, Anfang oder Ende
• Anpassbare Farben und Größe der Box und der aktiven Box

Widget - Tabelle

Eine dynamische Datentabelle, die JSON-Objekte aus einem ioBroker-Datenpunkt rendert.

Hauptmerkmale:

• Konfigurierbare Spalten: Schlüssel, Titel, Präfix, Suffix, Platzhalter
• Spaltenwertformate: Text, Zahl (mit Dezimalstellen), Datum/Uhrzeit, Bild
• Sortierbare Spalten mit ein- oder mehrspaltiger Sortierung
• Spaltenfilter – Zeilen nach Spaltenwert filtern
• Fixierter Header – Header bleibt beim Scrollen sichtbar.
• Standard-Sortierkonfiguration (Spalte und Richtung)
• Maximale Zeilenanzahl
• Bedingte Zeilenfarben – Hervorhebung von Zeilen basierend auf Spaltenwertbedingungen
• Anpassbare Kopfzeilen- und Zeilenformatierung (Hintergrund, Höhe, Rahmen)

Widget - Dropdown

Ein Dropdown-Auswahlfeld, das seine Optionen automatisch aus demcommon.states Eigenschaft eines ioBroker-Objekts.

Hauptmerkmale:

• Optionen werden automatisch aus den definierten Zuständen des Datenpunkts geladen.
• Optionen können einen Wert, eine Textbezeichnung oder beides anzeigen.
• Optionaler Titel über dem Dropdown-Menü
• Nur-Lese-Modus
• Bedingte Hintergrundfarbe – ändert den Hintergrund des Dropdown-Menüs basierend auf den Wertbedingungen (optional auch für den Titel anwendbar)
• Anpassbare Schriftart, Textfarbe, Hintergrund, Hervorhebungsfarbe, Rahmen (Breite, Farbe, Radius) und Schatten
• Individuelle Titelgestaltung (Schriftgröße, Farbe, Innenabstand)

Widget - Laufschrift

Ein horizontal scrollender Textticker – ideal zur Anzeige langer Textwerte oder Benachrichtigungen.

Hauptmerkmale:

• Datenpunkt oder statischer Text als Quelle
• Scrollrichtung: links oder rechts
• Konfigurierbare Scrollgeschwindigkeit (px/s)
• Konfigurierbare Anzahl von Textkopien (verhindert Lücken bei kurzen Texten)
• Konfigurierbarer Abstand zwischen Kopien
• Pause beim Überfahren
• Unterstützung für Hintergrundfarben
• Übernimmt die Schriftformatierung von den Einstellungen des Vis-Widgets.

Widget - Werteliste

Erstellt eine Stichpunktliste aus einem einzelnen Textwert – entweder aus einem Datenpunkt oder manuell eingegeben.

Hauptmerkmale:

• Datenpunkt oder manuelle Texteingabe als Quelle
• Frei konfigurierbares Trennzeichen – beliebiges Zeichen oder Zeichenkette:
  • Komma:,
  • Semikolon:;
  • Neue Zeile:\n
  • Tab:\t
  • Jede andere benutzerdefinierte Zeichenfolge
• Entfernen von führenden/nachfolgenden Leerzeichen pro Eintrag
• Filterung leerer Elemente
• Geschosstypen:• Scheibe,○ Kreis,▪ Quadrat,– Bindestrich,› Pfeil,1. 2. 3. Nummeriert, Keine, Benutzerdefiniertes Zeichen
• Die Farbe des einzelnen Aufzählungspunktes ist unabhängig von der Textfarbe.
• Textfarbe, Hintergrund, Schriftgröße, Textausrichtung
• Konfigurierbarer Abstand zwischen Aufzählungszeichen und Text
• Konfigurierbarer Zeilenabstand zwischen Elementen
• Innenpolsterung

Widget – Kalender

Monatskalenderansicht, ein einfacher Datumswähler basierend auf dem Datumskalender von MUI (Datumswähler, schreibgeschützte Datumsanzeige und/oder Heute-Hervorhebung – frei kombinierbar über „Schreibgeschützt“ und „Heute hervorheben“).

Hauptmerkmale:

• Liest/schreibt ein Datum aus einer Objekt-ID als Zeitstempel (ms) oder ISO-Datumszeichenfolge (YYYY-MM-DD )
• „Nur-Lese“-Modus zur Anzeige eines Datums ohne Änderungsmöglichkeit
• „Heute hervorheben“, um den heutigen Tag deutlich zu kennzeichnen
• Vergangene und/oder zukünftige Daten deaktivieren
• Optionale Schnellnavigation nach Monat/Jahr über die Kopfzeile
• Erster Tag der Woche: Montag oder Sonntag
• Optionale Kalenderwochennummern, ISO-8601- oder „einfacher“ Stil (Woche 1 enthält den 1. Januar).
• Konfigurierbare Tageszellengröße
• Unabhängige Farbgestaltung für Kopfzeile, Wochentage, reguläre Tage, ausgewählten Tag (inkl. Schatten), Heute-Markierung und Wochennummern
• Die Monats-/Wochentagsnamen richten sich nach der Browsersprache.
• Wiederverwendung des „From-Widget“-Stils in mehreren Kalender-Widgets

Widget – Veranstaltungskalender

Google-Kalender-ähnliche Ansicht für Ereignisse/Termine, basierend auf FullCalendar. Jede Farbe, Schriftgröße und Rahmenform ist konfigurierbar.

Hauptmerkmale:

• Verweisen Sie mit „Events (datapoint)“ auf einen Datenpunkt, der eine JSON-Liste von Ereignissen enthält – entweder eine einfache benutzerdefinierte Form oder das native JSON, das vom ioBroker-Adapter „ical“ erzeugt wird.
• Alle Ansichten aus dem kostenlosen/MIT-lizenzierten FullCalendar-Paket: Monat, Woche, Tag, Mehrmonatsansicht (Jahr) und Liste (Tag/Woche/Monat/Jahr)
• Optionale Kalenderwochennummern (ISO-8601 oder „einfach“/lokalisierungsabhängig), hauptsächlich für Monats-/Mehrmonatsansichten.
• Die Kopfzeile (Titel + Zurück/Weiter/Heute Navigation) kann ein- und ausgeblendet werden, und die Navigation kann unabhängig deaktiviert werden, während der Titel erhalten bleibt.
• Verarbeitet mehrtägige/ganztägige Veranstaltungen korrekt (iCal-exklusiv – Abschlussveranstaltung)
• Es wird lediglich der Ereignisdatenpunkt benötigt – keine separate Objekt-ID erforderlich.
• Konfigurierbare Farbregeln für Ereignisse: Ereignisse anhand des Titels einfärben (Groß-/Kleinschreibung wird nicht beachtet), die Quellfarbe überschreiben – umgeht die Einschränkung des ioBroker-Adapters „ical“, der nur eine Farbe pro Kalender, nicht aber pro Ereignis bereitstellt.
• Vollständig konfigurierbarer Header (Titelfarbe/-größe, Schaltflächentext/-hintergrund/-rahmen/-radius inkl. Hover), Wochentage (Farbe/-hintergrund/-größe), Tag (Farbe/-größe, Farbe außerhalb des Monats, Hintergrund am Wochenende), Heute (Hintergrund-/Text-/Rahmenfarbe + -breite, Live-Anzeigelinie), Ereigniskacheln (Hintergrund-/Text-/Rahmen-/-radius/-größe, Farbe des „+N weitere“-Links) und Rasterrahmen (anzeigen/ausblenden, Breite, Farbe) – jede Farbgruppe mit unabhängiger „Vom Widget“-Stilwiederverwendung
• Der Kalender wird live in der Größe angepasst, wenn das Widget im vis-Editor vergrößert oder verkleinert wird (kein Neuladen der Seite erforderlich).
• Die Monats-/Wochentagsnamen richten sich nach der Browsersprache.

Ältere Änderungen

Kann in CHANGELOG_OLD.md gefunden werden.

Changelog

1.10.0 (2026-09-01)

• Event Calendar Widget: Added support for showing multiple calendars at once via a new "Additional calendars" group (datapoint + color + label per calendar, e.g. one iCal calendar per family member), merged into a single view with an optional color/label legend below the calendar and a persistent per-event colored left border showing which calendar an event belongs to (kept even when an Event color rule overrides the tile's fill color). The original single "Events (datapoint)" field keeps working unchanged when no additional calendars are configured; once at least one is added, that field is ignored
• Event Calendar Widget: Added "Max. events per day" setting (Month/Multi-month views) to cap how many event tiles are shown per day cell before the rest collapse behind FullCalendar's "+N more" popover link, instead of day cells always growing with the number of events
• Universal Widget: Fixed the dialog title "Size" setting, which was configurable but had no effect on the rendered dialog title font size

1.9.0 (2026-07-29)

• Added new Event Calendar Widget: Google-Calendar-style view for events/appointments based on FullCalendar, fed from a datapoint holding a JSON list of events (either a simple custom shape or the native JSON produced by the ioBroker "ical" adapter). Supports all FullCalendar free/MIT views (Month, Week, Day, Multi-month, List day/week/month/year), optional calendar week numbers, optional header bar/navigation, live resizing in the vis editor, and fully configurable header/weekday/day/today/event-tile/border styling (colors, font sizes, border radius/width, hover states, now-indicator), each with independent "From widget" style reuse

1.8.1 (2026-07-23)

• Added preview image for calendar and value list widgets

1.8.0 (2026-07-16)

• Radial Slider Widget: Added "Read only" option to prevent value changes, matching the Slider widget's behavior
• Table Widget: Added pagination support ("Pagination" / "Rows per page") to split large tables across pages instead of showing all rows at once
• Table Widget: Added weekday (WD/WDL) and calendar week (KW/K) tokens
• Added new Calendar Widget: month calendar based on MUI's Date Calendar, usable as a datepicker (read/write a date), a read-only date display, and/or a today-highlighter, with configurable first day of week, ISO/simple calendar week numbers, and full color/size customization

1.7.0 (2026-06-24)

• Dropdown Widget: Added support for manually defined value/label pairs as an alternative to OID-based state enumeration

License

The MIT License (MIT)

Copyright (c) 2025-2026 jkvarel jk@inventwo.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.