In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 21. Teil der Artikelreihe zeige ich euch mein erstelltes Widget für OpenWeatherMap. Die bereits bestehenden Widgets funktionen so leider in ioBroker nicht, daher habe ich ein eigenes Widget erstellt, mit dem die Datenpunkte des Adapters „OpenWeatherMap“ dargestellt werden können.
Mit dem folgenden Download-Link kann das Widget im JSON-Format heruntergeladen werden.
HABPanel Widget – openweathermap (5789 Downloads)
Bevor wir das Widget nun in HABPanel integrieren können, müssen wir zunächst sicherstellen, dass der OpenWeatherMap-Adapter in ioBroker installiert und eingerichtet wurde. Das Widget nutzt dazu die folgenden Datenpunkte in der Objektstruktur „openweathermap.0“.
Nach dem wir über die entsprechenden Datenpunkte verfügen können wir nun HABPanel öffnen und in den Bereich „Custom Widgets“ wechseln. Auf dieser Seite importieren wir das vorher heruntergeladene Widget im JSON-Format über die Funktion „Import from file…“.
Im Dateisystem müssen wir nun die folgende Datei auswählen:
Nach dem Importieren des Widgets wechseln wir auf das Dashboard, auf dem wir die Wetter-Informationen darstellen möchten. Über die Schaltfläche „Add Widget“ oben rechts können wir nun das Widget „smarthometricks-openweathermap“ einfügen.
Im nächsten Screenshot wird die Darstellung des Widgets angezeigt. Im Widget wird die aktuelle Temperatur, Luftfeuchtigkeit, Luftdruck und Windgeschwindigkeit angezeigt. Zudem ist eine Ansicht für die Wettervorhersage für die nächsten 3 Tage integriert. Die Icons und Texte werden direkt von OpenWeatherMap übernommen (aus der Objektstruktur).
ioBroker HABPanel
- Teil 1 – Installation und Grundlagen
- Teil 2 – Dashboard und Widgets
- Teil 3 – Custom Widgets
- Teil 4 – Custom Widgets importieren (JSON-Format)
- Teil 5 – Custom Widgets anpassen und erweitern
- Teil 6 – Eigenes Widget erstellen
- Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen
- Teil 8 – Tür-/Fensterkontakt visualisieren
- Teil 9 – Das Chart Widget
- Teil 10 - Mit dem Frame-Widget eine VIS-View einbinden
- Teil 11 - Script über Button starten
- Teil 12 - Das Timeline-Widget
- Teil 13 - Das Template-Widget
- Teil 14 - Template Wissenssammlung
- Teil 15 – Das Slider-Widget
- Teil 16 – Das Dummy-Widget
- Teil 17 – Das Knob-Widget
- Teil 18 – Das Clock-Widget
- Teil 19 – Das Button-Widget
- Teil 20 – iCal Termine HTML-Darstellung
- Teil 21 – OpenWeatherMap Widget
- Teil 22 – Image Widget
- Teil 23 – Selection Widget
- Teil 24 – Online-Status Widget
Ich hoffe Dir gefällt der Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂