Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[OliverIO]

@Qlink

Ok dann musst du genauer sagen was du mit aktiver Hintergrundmaterial meinst.

Ein Button hat eigentlich keinen Status. Ein Button wird gedrückt und wenn man loslässt dann ist er wieder normal. Ggfs gibts Hoover.
Wenn in vis bei Button noch eine Zusatzmodul ist musst du schauen wie die css sich im Browser verändert. Das macht man am besten mit den dev Tools des Browsers mit f12

[Qlink]

@oliverio
Im Prinzip möchte ich eigentlich nur, dass die Darstellung wieder genau so funktioniert wie in vis-1.
Die Filter Bar verhält sich eher wie ein Schalter als ein Taster(Button).
Wenn ich auf "Heute" drücke, dann wird mir das Heute-Diagramm angezeigt.
Das wird so lange angezeigt bis ich auf "Morgen" drücke.
Wie eine Art Umschalter.

In vis-1 schaut es so aus, wenn Heute angewählt ist:

und so wenn Morgen ausgewählt ist: (hier werden noch keine Daten angezeigt, da die Strompreise für Morgen erst gegen Mittag verfügbar sind)

Man sieht so auf Grund der Hintergrundfarbe auf den ersten Blick, welches der beiden Diagramme ausgewählt ist.

Diese Darstellung hätte ich gerne auch in vis-2.

[OliverIO]

@Qlink

Hast du mal ein Export des viewsaus vis2
Möglichst so das ich das möglichst einfach nachstellen kann

[Qlink]

@oliverio

hilft dir ein Widget export vom Dropdown Widget ?

der wäre wie folgt:

[
  {
    "tpl": "tplFilterDropdown",
    "data": {
      "bindings": [],
      "items": "[{\"label\":\"Heute\",\"value\":\"Heute\",\"default\":true,\"activeColor\":\"#373737\",\"color\":\"#373737\"},{\"label\":\"Morgen\",\"value\":\"Morgen\",\"default\":false,\"activeColor\":\"#373737\",\"color\":\"#373737\"}]",
      "g_common": true,
      "type": "horizontal_buttons",
      "dropdownVariant": "standard",
      "buttonsVariant": "text",
      "dropdownSmall": false,
      "noAllOption": true,
      "g_style": true,
      "g_css_background": true,
      "g_fixed": true,
      "g_css_border": true,
      "g_css_shadow_padding": true,
      "g_css_font_text": true,
      "name": null,
      "comment": null,
      "class": "tuerkis",
      "filterkey": null,
      "multi-views": null,
      "locked": null
    },
    "style": {
      "bindings": [],
      "left": 760,
      "top": 443,
      "width": 200,
      "height": "30",
      "background": "#B2B2B2",
      "background-color": "#B2B2B2",
      "background-image": "",
      "border-width": "",
      "border-style": "solid",
      "border-color": "#B2B2B2",
      "border-radius": "5",
      "padding": "",
      "overflow-x": "",
      "color": "#373737"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[OliverIO]

@Qlink sagte:

dann nimm die das folgende css

.mybuttongroup:not(:has(.MuiButton-root:focus)) .MuiButtonGroup-firstButton {
  background-color: red !important;
}

.mybuttongroup .MuiButton-root:focus {
  background-color: red !important;
}

im widget musst du in css class
mybuttongroup eintragen.
du kannst auch einen anderen namen wählen, dann musst du mybuttongroup im css anpassen. dort muss der punkt davor aber bleiben

zur veranschaulichen habe ich jetzt die farbe rot gewählt.

diese lösung ist als workaraound zu sehen.
besser wäre, wenn man in vis den status über einen extra klassennamen wie bspw active mit aufnehmen würde. dann können man ein einfacheren css selektor wählen, da die farbe in react direkt per logik gesetzt wird. leider wählt react einen dynamisch generierten css klassennamen, der sich immer wieder mal ändert.

https://github.com/ioBroker/ioBroker.vis-2/blob/71c88db403f0d5ac97d1d31a0071fcec66ee9114/packages/iobroker.vis-2/src-vis/src/Vis/Widgets/Basic/BasicFilterDropdown.tsx#L457

evtl kannst du da im vis-2 repository auf github einen issue dazu erstellen

[Qlink]

@oliverio

Danke für deine Hilfe ! Mit deinem css Code funtkionierts nun genau so wie es in vis-1 Standard war und wie ichs mir von vorneherein erwartet/gewünscht hätte :)

Danke!

[sigma]

@oliverio
Leider löst dieser CSS-Code das Problem nicht. Ich habe einen Filter mit 3 Positionen. Ich habe das CSS wie empfohlen hinzugefügt, aber einen sehr seltsamen/lustigen Effekt gesehen (siehe Video). Kann man das irgendwie beheben?

Eigentlich wäre es wirklich super, wenn man diese Farbe direkt in den Widget-Einstellungen festlegen könnte.
https://drive.google.com/file/d/1BpG9EwCKi2K5WXJVUq053RBA-C1kHFjo/view?usp=drive_link

[OliverIO]

@sigma

das oben war für Text.
Du hast Icons. da hängt es davon ab was es für Icons sind.
Das die Icons nicht in der Mitte sind hängt wahrscheinlich von der Größe der Icons ab.

Auch weiß ich nicht was da du da angepasst hast. Das Grün kann nicht vom obenstehenden css kommen.
Normalerweise haben diese Buttons verschiedene States
Activ/Inactiv
Wenn Active dann
Enabled/Disabled
und dann noch mouseOver/Hoover

Ich kann gern mal schauen. benötige aber einen Widget-Export und alles was da sonst noch wirkt inklusive den icons bzw. wie du das eingestellt hast.
Ich bin kein Spezialist für das widget, kann mir aber mal das css anschauen.

[sigma]

@oliverio
Ich füge den Export meines Widgets hinzu. Ich verwende Icons aus dem Material Design package. Dass sie nicht zentriert sind, ist ein anderes Thema – das hängt von der Größe des Widgets ab. Meine Idee: nur Icons, aber ich möchte den background für den aktiven/inaktiven Button selbst festlegen.
Gerade habe ich den CSS-Code verwendet, der oben angegeben wurde (ich habe die rote Farbe gelassen, um sicher zu sein, dass sie genau aus dem CSS kommt).
Ich versuche zu beschreiben, was passiert:

1. Initiales Laden: kein aktiver Filter
   Der erste Button ist rot hervorgehoben, die anderen nicht (natürlich hätte ich gerne, dass hier alle Buttons nicht hervorgehoben sind).

2. Ich aktiviere den ersten Button
   Der background ändert sich nicht, aber der Button bekommt die Active color (in meinem Fall gelb).

3. Ich aktiviere den zweiten Button
   Der erste Button bleibt wie er war: Active color + red background.
   Der zweite Button: Active color + rgba(0, 175, 120, 0.5) background. Diese Farbe kommt aus dem Style .MuiButtonGroup-middleButton.

4. Ich aktiviere den dritten Button
   Erster Button: Active color + rgba(0, 175, 120, 0.5) background.
   Zweiter Button: Active color + rgba(0, 175, 120, 0.5) background.
   Dritter Button: Active color + roter background.

Beim Hovern wird dieser grüne background heller.
Ich habe versucht, dem obigen CSS noch folgendes hinzuzufügen:

.mybuttongroup:not(:has(.MuiButton-root:focus)) .MuiButtonGroup-middleButton {
  background-color: orange !important;
} 

Dann wird der background beim Aktivieren des zweiten Buttons rot.
Ich habe aber, glaube ich, den Style gefunden, der diese color vorgibt – das ist irgendein temporärer Style:

.css-3zskuc {
    background-color: var(--variant-textBg);
    --variant-textColor: #00af78;
    --variant-outlinedColor: #00af78;
    --variant-outlinedBorder: rgba(0, 175, 120, 0.5);
    --variant-containedColor: rgba(0, 0, 0, 0.87);
    --variant-containedBg: #00af78; 
}

Trotzdem sehe ich immer noch keine Möglichkeit, den active/non-active background festzulegen.

[sigma]

Filter widget

[
  {
    "tpl": "tplFilterDropdown",
    "data": {
      "bindings": [],
      "items": "[{\"label\":\"\",\"value\":\"light\",\"icon\":\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik05IDIxYzAgLjU1LjQ1IDEgMSAxaDRjLjU1IDAgMS0uNDUgMS0xdi0xSDl2MXptMy0xOUM4LjE0IDIgNSA1LjE0IDUgOWMwIDIuMzggMS4xOSA0LjQ3IDMgNS43NFYxN2MwIC41NS40NSAxIDEgMWg2Yy41NSAwIDEtLjQ1IDEtMXYtMi4yNmMxLjgxLTEuMjcgMy0zLjM2IDMtNS43NGMwLTMuODYtMy4xNC03LTctN3ptMi44NSAxMS4xbC0uODUuNlYxNmgtNHYtMi4zbC0uODUtLjZBNC45OTcgNC45OTcgMCAwIDEgNyA5YzAtMi43NiAyLjI0LTUgNS01czUgMi4yNCA1IDVjMCAxLjYzLS44IDMuMTYtMi4xNSA0LjF6Ii8+PC9zdmc+\",\"activeColor\":\"#ffcc00\",\"color\":\"#7a9bbd\",\"default\":false},{\"label\":\"\",\"value\":\"socket\",\"icon\":\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNiA5djQuNjZsLTMuNSAzLjUxVjE5aC0xdi0xLjgzTDggMTMuNjVWOWg4bTAtNmgtMnY0aC00VjNIOHY0aC0uMDFDNi45IDYuOTkgNiA3Ljg5IDYgOC45OHY1LjUyTDkuNSAxOHYzaDV2LTNsMy41LTMuNTFWOWMwLTEuMS0uOS0yLTItMlYzeiIvPjwvc3ZnPg==\",\"activeColor\":\"#ffcc00\",\"color\":\"#7a9bbd\",\"default\":false},{\"label\":\"\",\"value\":\"net\",\"icon\":\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMyAyMmg4di03aC0zdi00aC01VjloM1YySDh2N2gzdjJINnY0SDN2N2g4di03SDh2LTJoOHYyaC0zdjd6TTEwIDdWNGg0djNoLTR6TTkgMTd2M0g1di0zaDR6bTEwIDB2M2gtNHYtM2g0eiIvPjwvc3ZnPg==\",\"activeColor\":\"#ffcc00\",\"color\":\"#7a9bbd\"}]",
      "g_common": true,
      "type": "horizontal_buttons",
      "dropdownVariant": "standard",
      "buttonsVariant": "text",
      "dropdownSmall": false,
      "multiple": true,
      "noAllOption": true,
      "g_fixed": true,
      "g_css_background": true,
      "g_css_border": true,
      "g_css_font_text": true,
      "g_css_shadow_padding": true,
      "name": null,
      "comment": null,
      "class": "mybuttongroup",
      "filterkey": null,
      "multi-views": null,
      "locked": null
    },
    "style": {
      "bindings": [],
      "left": 0,
      "top": 667,
      "width": "125.992px",
      "height": "48",
      "background": "linear-gradient(180deg, #17375e 0%, #0e2440 100%)",
      "background-color": "",
      "border-color": "rgba(80,129,193,1)",
      "border-radius": "6",
      "color": "",
      "padding": "",
      "padding-left": "",
      "border-width": "1",
      "border-style": "solid"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]