In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im fünften Teil passen wir ein Custom Widget an unserer Bedürfnisse an. Im dritten Teil habe ich bereits gezeigt, wie einfach beliebige Temperatur, Feuchtigkeits oder Luftdruckwerte in einem Widget kombiniert dargestellt werden können. Wir haben dazu das Widget „Xiaomi Humidity Temperature“ importiert. Mich hat an diesem Widget allerdings die Anzeige des Titels (Außentemperatur) gestört. Ich hätte den Titel lieber zentriert und mit einer größeren Schrift dargestellt. Da es im Widget für diese Anpassungen keine Einstellungen gibt, wollen wir daher das Widget jetzt direkt anpassen.
Für die Anpassung gehen wir zunächst auf die HABPanel-Einstellungen und klicken unten rechts im Bereich „Custom Widgets“ auf Manage.
In den Custom Widgets sehen wir das importiere Widget „humidity-temperature-pressure“. Auf dem Widget klicken wir nun in den Bearbeitungsfunktionen auf Export to file. Mit dieser Funktion wird das Widget im JSON-Format heruntergeladen.
Nach dem Download klicken wir nun auf die Schaltfläche Import widget – Import from file…
Im Import-Fenster müssen wir einen eindeutigen Namen vergeben. Ich habe hierzu einfach vor den bestehenden Namen des Widgets die Kennung „smarthometricks-“ hinzugefügt. Wichtig ist hierbei zu beachten keine Sonderzeichen oder Leerzeichen im Namen zu verwenden.
Nun wurde das Widget importiere und sollte als extra Widget in Liste der Custom Widgets auftauchen.
Mit einem Klick auf das Widget wird nun der Code sowie die Einstellungen des Widgets geöffnet. Wir können hier den HTML-Code für die Darstellung anpassen. Für meine Anpassungen habe ich zunächst die CSS-Definitionen angepasst. Ich habe den text-align auf center gesetzt sowie zusätzliche Font-Einstellungen für die Schriftgröße und die Darstellung (fett darstellen) hinzugefügt. Zusätzlich habe ich noch zwei Zeilenumbrüche (<br>) eingefügt.
Nach dem Speichern des Widgets wird das Widget nun so dargestellt.
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. Ich freue mich über Deinen Kommentar 🙂