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

Widget - HomeMatic Heizkörperthermostat (1760 Downloads)

 

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

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

2 Gedanken zu „ioBroker VIS – CSS – RadioButtons ValueList

  • 6. Dezember 2018 um 12:37
    Permalink

    Hallo Matthias,

    super Artikel. Leider funktioniert der Download des Widgets nicht mehr.
    Kannst du den nochmal zur Verfügung stellen?

    Vielen dank

    Gruß

    Thomas

    Antwort
    • 15. Dezember 2018 um 15:53
      Permalink

      Hallo Thomas,

      der Link steht wieder zur Verfügung. Danke für den Hinweis 🙂

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere