Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[FoodFighter]

Hallo,
ich suche nach einer Möglichkeit ein Status-Auswahl-Menü für meine Heizung mit Pictogrammen zu erstellen. (Schutzbetrieb, Automatik, Reduziert, Komfort mit den Werten 0-3 in der Objekt-Variable).
Prinzipiell wäre das "jqui Radiobuttons Value List"-Widget genau das Richtige, wenn ich dort Bilder statt nur Text eintragen könnte.
Eine Alternative wäre die Buttons unbeschriftet zu lassen und ihnen eine feste Größe zu geben. Anschließend könnte man die Piktogramme einfach als PNG mit transparentem Hintergrund über die Buttons legen.

Leider kriege ich es weder hin im "Radiobuttons Value List"-Widget die Pictogramme zu verknüpfen noch den Buttons eine feste Größe zuzuweisen.
Weiterhin verdeckt das Auswahl-Menü das Bild, wenn man das Bild über das Manü schiebt (auch wenn das Bild im Vordergrund liegt).

Kann mir jemand erklären, wie ich dieses Vorhaben umgesetzt bekomme?

In den Buttons sollen die Pictogramme anstelle der Texte sein.

[FoodFighter]

So soll es mal aussehen.
Hier habe ich mächtig rum gepfuscht:
Das Widget hat die Klasse "FoFi" bekommen, im CSS ist dann eingetragen:

.FoFi .ui-widget{
    height: 60px !important;
    width: 65px !important;
    font-size: 0px !important;
}

Funktioniert leider nicht wirklich.
Im Browser wird die Schrift trotzdem angezeigt und wenn man die Icons über die Buttons schiebt, wird (logischerweise) kein Knopfdruck registriert, wenn man nicht neben das Bild klickt.... hätte mir klar sein sollen.
Die Bilder müssen also irgendwie anstelle des Textes in die Buttons selbst geschrieben werden.
Leider sehe ich keine chance das mit dem jqui Radiobottons-Value-List-Menü hin zu bekommen.
Ich finde leider auch keine Alternative wie ich das umsetzen könnte.

Ist das Vorhaben wirklich so außergewöhnlich?

[sigi234]

@FoodFighter

Verstehe nicht was du willst, via Buttons schalten?

[FoodFighter]

@sigi234

Die Buttons greifen alle auf die gleiche Objekt-Variable zu und senden je einen anderen Wert dorthin
(0;1;2;3)
Das allein ist nicht das Problem (das könnte ein normaler state-value-button auch -> ich brauche einen Button, der einen beliebigen Wert (nicht nur bool, sondern eben die int/string-Werte 0, 1, 2 bzw. 3) sowohl senden kann, als auch den korrekten status als gesetzt anzeigen kann.
Das "jqui Radiobuttons Value List"-Widget kann das.
Alle 4 Buttons beziehen sich auf das gleiche Objekt, der Wert, der im Objekt steht (0, 1, 2 ODER 3), wird auf dem richtigen Button als "gesetzt" angezeigt (im letzten Bild wäre es der vierte Button mit der Sonne (=="3"), der "gedrückt" signalisiert wird.

Mein Problem bei diesem Widget ist, dass man ihm nur Texte vorgeben kann (wie im Start-Beitrag: "Schutzbetrieb = 0; Automatik = 1; Reduziert = 2; Komfort = 3")
Ich hätte statt der Texte aber lieber Icons in den Buttons, wie oben dargestellt.

Da es nicht möglich ist im Widget Bilder statt der Texte zu hinterlegen, hatte ich die Idee, dass ich die Buttons des Widgets einfach auf meine gewünschte größe "zurechtpfusche", den Text darin ausblende und die gewünschten Icons als Bild "über" die Buttons zu schieben (Buttons z-index:1; Icons z-index:2)
Das kann natürlich nicht funktionieren, weil ein Klick auf die Icons nicht durch sie selbst hindurch auf dem eigentlichen Button landet (und der CSS-Pfusch mit font-size: 0px sowieso nicht vom Browser akzeptiert wird).

Leider weiß ich nicht, wie ich das realisieren soll oder kann und habe die Hoffnung, dass mir hier jemand auf die Sprünge helfen könnte.
Ich finde auch kein anderes Widget, was mir dieses Vorhaben ermöglicht.

Hier nochmal zur Veranschaulichung die Einstellmöglichkeiten des Widgets.

[sigi234]

@FoodFighter

Vis-materialdesign-Icon-List

[FoodFighter]

@sigi234 said in Status-Menü Radiobuttons Value List:

Vis-materialdesign-Icon-List

Jawoll! Vielen Dank!
Damit kriege ich was zurecht gebastelt.
Das "Bool" im Widget hat mich gar nicht erst darauf kommen lassen, dass es evtl. was sein könnte.

Manchmal wünsche ich mir eine kurze Funktionsbeschreibung des jeweiligen Widgets im ToolTipText in der Auswahl.

Vielen Dank. Damit komme ich erstmal zurecht.

[FoodFighter]

So im Nachhinein habe ich mich echt dumm angestellt.
Mit den jqui - Icon State Widgets geht das genauso....nur mit Bild statt der Materialdesign-Icons (logisch).
Manchmal sieht man den Wald vor lauter Bäumen nicht.
Aber ich lerne ja noch.

An einer Sache beiße ich mir gerade noch die Zähne aus.
Ich habe im Navigations-Menü überall die jquery-Buttos benutzt. Diese nutzen das im View-Reiter einstellbare Theme (in meinem Fall "Vader") und damit den entsprechenden Farbverlauf.
Das machen die Materialdesign-Buttons leider nicht - diese nutzen eine feste Hintergrundfarbe statt eines Hintergrundbildes (Farbverlauf).
Das Farbverlauf-Background-Bild liegt unter
/lib/css/themes/jquery-ui/vader/images/ui-bg_highlight-soft_35_adadad_1x100.png

Eingebunden wird das über CSS folgendermaßen (ausgelesen über den Browser -> Webseite untersuchen);

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #ccc;
    background: #adadad url(images/ui-bg_highlight-soft_35_adadad_1x100.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #333;
}

Wie kriegt man es hin, dass die Materialdesign-Buttons auch dieses Hintergrund-Bild benutzen und nicht nur eine feste Hintergrundfarbe?
Mit den gegebenen CSS-Einstellungen im vis-editor wird das Hintergrundbild nicht übernommen.
Also muss man sich wohl irgendwie eine CSS-Klasse zurecht bauen?

@sigi234
Hast du diesbezüglich vielleicht noch eine schnelle Idee?

Ich würde gerne die MaterialDesign-Icon-List nutzen, da mir die Icons und Einstellmöglichkeiten gut gefallen.