Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Benji 0]

Beide sind vom Typ "Gestylt" - Zustände steuern:

[Benji 0]

Gibt es noch weitere Infos, die helfen könnten

[OliverIO]

sagte in Systemfarbe Vis 2 App anpassen:

widget export geliefert.

[Benji 0]

So?

[
{
"tpl": "tplJquiButtonState",
"data": {
"bindings": [
"color1"
],
"type": "button",
"g_common": true,
"oid": "0_userdata.0.Vis_Radio_Select",
"count": 4,
"variant": "contained",
"orientation": "horizontal",
"text1": "",
"value1": "Bad",
"icon1": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMTIgN2MtMi43NiAwLTUgMi4yNC01IDVoMTBjMC0yLjc2LTIuMjQtNS01LTV6Ii8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSI4IiBjeT0iMjAiIHI9IjEiLz48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjE2IiBjeT0iMTciIHI9IjEiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMyA1LjA4VjNoLTJ2Mi4wOEM3LjYxIDUuNTcgNSA4LjQ3IDUgMTJ2MmgxNHYtMmMwLTMuNTMtMi42MS02LjQzLTYtNi45MnpNNyAxMmMwLTIuNzYgMi4yNC01IDUtNXM1IDIuMjQgNSA1SDd6Ii8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxNiIgY3k9IjIwIiByPSIxIi8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxMiIgY3k9IjE3IiByPSIxIi8+PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSI4IiBjeT0iMTciIHI9IjEiLz48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjEyIiBjeT0iMjAiIHI9IjEiLz48L3N2Zz4=",
"image1": "",
"color1": "{colour:bosesoundtouch.2.on; colour== true? "yellow" : "#000000"}",
"tooltip1": "",
"activeColor1": "",
"g_states-1": true,
"text2": "",
"value2": "Benji",
"icon2": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48Y2lyY2xlIGZpbGw9ImN1cnJlbnRDb2xvciIgY3g9IjciIGN5PSIxMSIgb3BhY2l0eT0iLjMiIHI9IjEiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMTkgOWgtNnY2aDh2LTRjMC0xLjEtLjktMi0yLTJ6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNCAxMWMwIDEuNjYgMS4zNCAzIDMgM3MzLTEuMzQgMy0zcy0xLjM0LTMtMy0zcy0zIDEuMzQtMyAzem00IDBjMCAuNTUtLjQ1IDEtMSAxcy0xLS40NS0xLTFzLjQ1LTEgMS0xczEgLjQ1IDEgMXptMTEtNGgtOHY4SDNWNUgxdjE1aDJ2LTNoMTh2M2gydi05YzAtMi4yMS0xLjc5LTQtNC00em0yIDhoLThWOWg2YzEuMSAwIDIgLjkgMiAydjR6Ii8+PC9zdmc+",
"image2": "",
"color2": "{colour:sonos.0.root.192_168_10_25.state; colour == "play"? "yellow" : "#000000"}",
"tooltip2": "",
"activeColor2": "",
"g_states-2": true,
"text3": "",
"value3": "Buero",
"icon3": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNOCA1aDh2M0g4eiIvPjxjaXJjbGUgZmlsbD0iY3VycmVudENvbG9yIiBjeD0iMTgiIGN5PSIxMS41IiByPSIxIi8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTkgOGgtMVYzSDZ2NUg1Yy0xLjY2IDAtMyAxLjM0LTMgM3Y2aDR2NGgxMnYtNGg0di02YzAtMS42Ni0xLjM0LTMtMy0zek04IDVoOHYzSDhWNXptOCAxNEg4di00aDh2NHptNC00aC0ydi0ySDZ2Mkg0di00YzAtLjU1LjQ1LTEgMS0xaDE0Yy41NSAwIDEgLjQ1IDEgMXY0eiIvPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iLjMiIGQ9Ik02IDEzaDEydjJoMnYtNGMwLS41NS0uNDUtMS0xLTFINWMtLjU1IDAtMSAuNDUtMSAxdjRoMnYtMnptMTItMi41Yy41NSAwIDEgLjQ1IDEgMXMtLjQ1IDEtMSAxcy0xLS40NS0xLTFzLjQ1LTEgMS0xeiIvPjwvc3ZnPg==",
"image3": "",
"color3": "{colour:bosesoundtouch.1.on; colour== true? "yellow" : "#000000"}",
"tooltip3": "",
"activeColor3": "",
"g_states-3": true,
"text4": "",
"value4": "WZ",
"icon4": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9Ii4zIiBkPSJNMjEgMTFjLS41NSAwLTEgLjQ1LTEgMXY0SDR2LTRjMC0uNTUtLjQ1LTEtMS0xcy0xIC40NS0xIDF2NWMwIC41NS40NSAxIDEgMWgxOGMuNTUgMCAxLS40NSAxLTF2LTVjMC0uNTUtLjQ1LTEtMS0xek02IDE0aDEydi0yYzAtLjg4LjM5LTEuNjcgMS0yLjIyVjdjMC0uNTUtLjQ1LTEtMS0xSDZjLS41NSAwLTEgLjQ1LTEgMXYyLjc4Yy42MS41NSAxIDEuMzQgMSAyLjIydjJ6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjEgOVY3YzAtMS42NS0xLjM1LTMtMy0zSDZDNC4zNSA0IDMgNS4zNSAzIDd2MmMtMS42NSAwLTMgMS4zNS0zIDN2NWMwIDEuNjUgMS4zNSAzIDMgM2gxOGMxLjY1IDAgMy0xLjM1IDMtM3YtNWMwLTEuNjUtMS4zNS0zLTMtM3pNNSA3YzAtLjU1LjQ1LTEgMS0xaDEyYy41NSAwIDEgLjQ1IDEgMXYyLjc4Yy0uNjEuNTUtMSAxLjM0LTEgMi4yMnYySDZ2LTJjMC0uODgtLjM5LTEuNjctMS0yLjIyVjd6bTE3IDEwYzAgLjU1LS40NSAxLTEgMUgzYy0uNTUgMC0xLS40NS0xLTF2LTVjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjRoMTZ2LTRjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjV6Ii8+PC9zdmc+",
"image4": "",
"color4": "{colour:bosesoundtouch.0.on; colour== true? "yellow" : "#000000"}",
"tooltip4": "",
"activeColor4": "",
"g_states-4": true,
"onlyIcon2": true,
"onlyIcon3": true,
"onlyIcon4": true,
"onlyIcon1": true,
"click_id": "",
"g_css_background": true,
"g_fixed": true,
"g_css_border": true,
"name": null,
"comment": null,
"class": "mycolor",
"filterkey": null,
"multi-views": null,
"locked": null
},
"style": {
"bindings": [],
"background": "",
"background-color": "LightGray",
"top": "85px",
"left": "56px",
"width": "250.927px",
"height": "36.95px",
"background-image": "",
"border-width": null,
"border-style": null,
"border-color": "Black",
"border-radius": "5"
},
"widgetSet": "jqui",
"_id": "i000001"
}
]

[OliverIO]

@Benji-0

da waren fehler drin, lag wohl daran das du es nicht in code tags gepackt hast. konnte es aber reapieren

hier das ergebnis

.mycolor .MuiButton-colorPrimary {
    background-color: red;
}

[Benji 0]

Die gute Nachricht: es funktioniert.

Die schlechte Nachricht: Ich verstehe nicht, was Du meinst mit: ... das du es nicht in code tags gepackt hast. konnte es aber reapieren

Danke schön

[Benji 0]

Und vielleicht magst du noch erklären, wie du darauf kamst, dass man den Code: .MuiButton-colorPrimary ... einfügen muss.

[OliverIO]

@Benji-0

https://forum.iobroker.net/help-german#editor-german

[Benji 0]

Alles klar. Beim nächsten Mal.

Jetzt hast du mir einen Fisch gegeben, aber nicht gezeigt wie man angelt :-)
Wie bist du darauf gekommen, das man .MuiButton-colorPrimary ... einfügen muss?

Weil jetzt gibt es noch zwei Punkte. In deinem Bild hat sich zwar der selektierte Schalter in rot gefärbt, der Trennstrich zwischen den Schaltern ist aber auch noch grün.
Und bei meinem Bild von weiter oben ist Rock Antenne leider auch grün markiert. Und .MuiButton-colorPrimary hat nicht geholfen.

[OliverIO]

@Benji-0

Ich habe ja oben schon geschrieben, das es individuell ist.
In diesem Fall ist es eine Mui ButtonGroup, und diese enthält für jeden Knopf einen MuiButton.

Dazu habe ich mir wie oben beschrieben das Html anzeigen lassen.
Da sind dann 4 button html Elemente

Dann habe ich mir die Klassen der button-Elemente herauskopiert und in einen Editor kopiert. Am Knopf mit der Farbe musste es einen Unterschied geben

und diese Klasse hab ich ausprobiert.

[Benji 0]

Top. Danke Dir.

[OliverIO]

@Benji-0 sagte in Systemfarbe Vis 2 App anpassen:

der Trennstrich zwischen den Schaltern ist aber auch noch grün

hier die lösung für den strich

.mycolor .MuiButtonGroup-firstButton, .mycolor .MuiButtonGroup-middleButton {
    border-color: red;
}

für das letzte problem darfst du nochmal raten was mir fehlt um es zu lösen

[Benji 0]

Hier der Code (bin lernfähig). Weiterhin Danke für deine Unterstützung:

[
  {
    "tpl": "tplJquiButtonState",
    "data": {
      "activeColor1": "",
      "activeColor2": "",
      "activeColor3": "",
      "activeColor4": null,
      "activeColor5": null,
      "activeColor6": null,
      "bindings": [],
      "click_id": "",
      "color1": "",
      "color2": "",
      "color3": "",
      "color4": null,
      "color5": null,
      "color6": null,
      "count": 6,
      "g_common": true,
      "g_css_background": true,
      "g_css_border": true,
      "g_css_font_text": true,
      "g_states-1": true,
      "g_states-2": true,
      "g_states-3": true,
      "g_states-4": true,
      "g_states-5": true,
      "g_states-6": true,
      "icon1": "",
      "icon2": "",
      "icon3": "",
      "icon4": "",
      "icon5": "",
      "icon6": "",
      "image1": "",
      "image2": "",
      "image3": "",
      "image4": null,
      "image5": null,
      "image6": null,
      "oid": "0_userdata.0.Vis_Radio_Preset",
      "onlyIcon1": false,
      "onlyIcon2": false,
      "onlyIcon3": false,
      "onlyIcon4": null,
      "onlyIcon5": null,
      "onlyIcon6": null,
      "open": false,
      "orientation": "vertical",
      "test5": null,
      "test6": null,
      "text1": "Lounge",
      "text2": "Antenne Relax",
      "text3": "Bayern 3",
      "text4": "Rock Antenne",
      "text5": "Sunshine Live",
      "text6": "Arabella",
      "tooltip1": "",
      "tooltip2": "",
      "tooltip3": "",
      "tooltip4": null,
      "tooltip5": null,
      "tooltip6": null,
      "type": "select",
      "value1": "1 Lounge",
      "value2": "2 Relax",
      "value3": "3 Bayern 3",
      "value4": "4 ROCK ANTENNE Bayern",
      "value5": "5 SUNSHINE LIVE",
      "value6": "6 Radio Arabella Bayern",
      "variant": "outlined",
      "widgetTitle": "",
      "test4": null,
      "name": null,
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "background": "",
      "background-color": "Lightgray",
      "top": "275px",
      "left": "58px",
      "width": "181.971px",
      "height": "28px",
      "border-radius": "5",
      "text-align": ""
    },
    "widgetSet": "jqui",
    "_id": "i000001"
  }
]

[Benji 0]

Wahrscheinlich überspanne ich jetzt den Bogen. Die Combo Box hat auch noch eine grüne Umrandung, sobald man diese auswählt. Vielleicht findest du das auch noch heraus.