ioBroker Jarvis – Teil 31 – Blinkendes Icon
In diesem Artikel zeige ich Dir, wie Du ein blinkendes Icon erstellen kannst.
In den letzten Artikeln haben wir bereits Geräte zu unserer Visualisierung hinzugefügt, das Layout definiert und zusätzlich einige Widgets kennen gelernt. In diesem Artikel zeige ich Dir, wie Du auf Deiner Visualisierung ein blinkendes Icon erstellen kannst. Ich nutze das Icon z.B. für die Batterie-Zustands-Anzeige von Sensoren. Wenn der Wert unter 15 Prozent fällt, soll das Icon zudem noch blinken.
Bevor wir mit der Konfiguration der Visualisierung beginnen, möchte ich Dir zunächst den Datenpunkt des Sensors zeigen. Im Datenpunkt battery wird der Ladezustand in Prozent dargestellt. Der Wert-Bereich geht von 0 bis 100 Prozent.
Im ersten Schritt öffnen wir nun die jarvis Visualisierung. Klicke hier in der Liste der Instanzen auf das Adapter-Website Symbol vom jarvis-Adapter.
Nach dem die Visualisierung gestartet wurde, können wir im nächsten Schritt mit der Konfiguration beginnen. Klicke dazu auf das Zahnrad-Symbol oben rechts.
In der Liste der Geräte habe ich dann den Sensor angelegt und zudem noch einen State für den Batterie-Zustand hinterlegt. Hier wird als Datenpunkt für die Anzeige der Datenpunkt des Ladezustands eingestellt. Für die Darstellung des Icons aufgrund des Wertes können wir hier nun das Icon im JSON-Format definieren. Über das Schraubenschlüssel-Symbol hinter dem Icon kann die JSON-Zeichenfolge bearbeitet werden.
Im JSON-Editor habe ich dann die folgende Definition hinterlegt. Dabei habe ich bei einem Wert <15 die Zusatzklasse „blink“ angegeben. Das Icon wird dann blinkend in der Visualisierung dargestellt.
Im Bereich des Layouts habe ich für diese Anzeige einen separaten Tab mit einem StateList Widget angelegt. Der Sensor wird dann wie folgt in der Modul-Konfiguration definiert:
In der Visualisierung wird das Icon dann blinkend dargestellt.
Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen zum aktuellen oder weiteren Artikeln freue ich mich wie immer.
- StateList
- Chart
- DateTime
- StateListHorizontal
- AdapterStatus
- Map
- iFrame
- DisplayImage
- Calendar
- MediaPlayer
- Darstellung von Sensorwerten
- Aktuelle Uhrzeit und Sonnenaufgang bzw. -untergang darstellen
- Karte mit Position von Personen anzeigen
- Zusätzliche GPS-Formatierung für Karte
- Abfalltermine darstellen
- Wetterinformationen darstellen
- Termine darstellen
- Tür- und Fensterstatus darstellen
- Heizkörperthermostat darstellen
- TrashSchedule darstellen
- Szenen steuern
- Beleuchtung steuern
- DWD Unwetterwarnungen darstellen
- Button für Garagentor-Öffner
- Verpasste Anrufe über den TR-064 Adapter darstellen
- Playlisten oder Radio-Sender über MediaPlayer steuern
- Darkmode aufgrund Astrozeit steuern
- Gruppen-Aktionen definieren
- News in jarvis anzeigen
Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂
Hi, schöne Idee und Erklärung, danke Dir.
Bin JSON Neuling und dachte, ich könnte das adaptieren auf meine Resttage bis zur Müllentleerung (Datenpunkt: trashschedule … daysleft).
Eingefärbt habe ich sie bei 0 bzw 1 Tage bis zur Müllabholung im Datenpunkt Stil des Geräts:
{ „0“: { „color“: „red“ },
„1“: { „color“: „orange“}}
Kann man die Anzeige dieser Resttage zusätzlich auch blinken lassen, wenn der Wert 0 und 1 ist?
Die Einheit des Geräts ist auf „Tage“ gestellt.