ioBroker VIS – CSS – RadioButtons ValueList

Für meine Visualisierung habe ich ein jqui RadioButtons ValueList Widget über CSS eingefärbt. Im Artikel zeige ich, wie ich das gelöst habe.

Die Anzeige von Heizkörperthermostaten in meiner Visualisierung erfolgt über eine eigene Darstellung, auf der ich zusätzliche Informationen wie den Batterie-Status oder die Ventilöffnung anzeige. Zusätzlich lässt sich über die Visualisierung der Modus der Heizungssteuerung bestimmen. Hierfür nutze ich ein jqui RadioButtons ValueList Widget, mit dem ich die verschiedenen Modis definiere und somit anzeigen und zugleich auch steuern kann. Da sich das Widget leider nicht per Designer-Einstellungen nicht an den gewünschten Styl anpassen lässt (Farben, etc.), habe ich die Darstellung mittels CSS (Cascading Style Sheets) angepasst.

Hier nun im ersten Schritt das eingefügte Widget für den Modus auf der View. Ich möchte den Hintergrund der Buttons (Auto, Manuell, Party und Boost) schwarz einfärben, den aktuellen Modus gelb und die Farbe der Beschriftungen weiß.

Dazu klicke ich auf der View die Tab-Lasche „CSS“ an. In dem Auswahlfeld habe ich Projekt ausgewählt, da die nachfolgenden CSS-Definitionen nur für dieses Projekt zur Verfügung stehen sollen. Alternativ kann hier auch global ausgewählt werden, wenn die CSS-Definition für alle VIS-Projekte zur Verfügung stehen sollen.

In der CSS-Definition werden mittels der Klasse MKTempModeStyle die bestehenden Definition von ui-button (alle Buttons) und ui-state-active (aktiver Button) überschrieben. Hierbei wird der Hintergrund der Buttons Schwarz gesetzt (background: #000000) und die Textfarbe Weiß (#ffffff). Zudem setze ich die Schriftart und Schriftgröße. Zuletzt wird der Rahmen des Widgets definiert.

Anbei die CSS-Definitionen zum Kopieren und Einfügen 🙂

.MKTempModeStyle .ui-button {
background: #000000;
color: #ffffff;
font-family: Tahoma;
font-size: 13px;
border: 1px solid #000000;
}

.MKTempModeStyle .ui-state-active {
background: #f9e686;
color: #000000;
font-family: Tahoma;
font-size: 13px;
border: 0px solid #000000;
}

Im nächsten Schritt müssen wir nun das Widget markieren und unter „Generell“ die CSS Klasse „MKTempModeStyle“ eintragen. Das Aussehen des Widgets wird jetzt über unsere eigene CSS-Klasse verändert. Nun sehen wir bereits im Designer, wie das Widget aussieht. Änderungen an der CSS-Definition wirken sich direkt im Designer aus, somit können wir einfach und schnell Veränderungen der CSS-Definition austesten.

Hier das komplette Widget als Download im JSON-Format

Ich hoffe Dir gefällt der Artikel 🙂 Ich freue mich über Deinen Kommentar!