ioBroker HABPanel – Teil 5 – Custom Widgets anpassen und erweitern
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.
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂
