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

[Benji 0]

Wow. Das ist ein sehr erfolgreicher IOBroker Tag für mich heute. Danke.
Hast du noch Geduld?

[Benji 0]

Wie kann man die Farbe von dem Schieberegler anpassen?```
[
{
"tpl": "tplInventwoWidgetSlider",
"data": {
"bindings": [
"sliderRailActiveColor"
],
"oid": "0_userdata.0.Schlafen_h_Benji",
"minValue": 0,
"g_common": true,
"maxValue": "12",
"step": 0.25,
"orientation": "horizontal",
"showMinMax": false,
"showSteps": false,
"stepMode": "auto",
"stepDisplay": 10,
"sliderRailColor": "rgb(110,110,110)",
"g_attr_group_css_slider_track": true,
"sliderRailActiveColor": "{0_userdata.0.Vis_Col_Active}",
"trackBarType": "normal",
"trackWidth": 5,
"trackBorderRadius": 100,
"trackShadowX": 2,
"trackShadowY": 2,
"trackShadowBlur": 2,
"trackShadowSize": 1,
"trackShadowColor": "rgba(0, 0, 0, 1)",
"sliderThumbColor": "{0_userdata.0.Vis_Col_Active}",
"g_attr_group_css_slider_slider_thumb": true,
"thumbSize": 16,
"thumbBorderRadius": 100,
"thumbShadowX": 2,
"thumbShadowY": 2,
"thumbShadowBlur": 2,
"thumbShadowSize": 1,
"thumbShadowColor": "rgba(0, 0, 0, 0.5)"
},
"style": {
"bindings": [],
"left": 63,
"top": 455,
"width": "228px",
"overflow-x": "visible",
"overflow-y": "visible",
"height": "40px"
},
"widgetSet": "vis-2-widgets-inventwo",
"_id": "i000001"
}
]

[OliverIO]

@Benji-0

keine code-tags, dieses mal hat es aber dennoch funktioniert
konsistenz ist nicht so dein ding?

.mycolor .MuiSlider-colorPrimary {
    color: red;
}

[Benji 0]

Prima. Hat funktioniert.

Hm, ich hatte den Code in den vorgesehenen Bereich kopiert. Weiß nicht, was schief gelaufen ist. Aber ja, da ist noch Luft nach oben. Lass es mich noch mit einem anderen Widget probieren.
In dem Widget habe ich zwei Dinge, die mich stören.
A) Wenn ein Wert aktiv ist, wird der Kreis teilweise eingefärbt. Leider auch in grün
B) Der Dialog hierfür ist auch in grün. Zumindest die Zahlen und der Balken

[Benji 0]

[
  {
    "tpl": "tplMaterial2SimpleState",
    "data": {
      "bindings": [],
      "values_count": 0,
      "g_common": true,
      "oid": "0_userdata.0.A_Alarm_Timer_h",
      "circleSize": 0,
      "noIcon": true,
      "title": "Timer",
      "noCard": true,
      "withNumber": true,
      "withStates": false,
      "colorEnabled": "LightGray",
      "color": "LightGray",
      "unit": "",
      "name": "Ti Alarm",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true,
      "ignored": null,
      "signals-oid-0": null,
      "signals-cond-0": "==",
      "signals-val-0": "true",
      "signals-icon-0": null,
      "signals-smallIcon-0": null,
      "signals-color-0": null,
      "signals-icon-size-0": null,
      "signals-icon-style-0": null,
      "signals-text-0": null,
      "signals-text-style-0": null,
      "signals-text-class-0": null,
      "signals-blink-0": null,
      "signals-horz-0": null,
      "signals-vert-0": null,
      "signals-hide-edit-0": null
    },
    "style": {
      "bindings": [],
      "left": 242,
      "top": 81,
      "width": "121px",
      "height": "84px",
      "position": "absolute"
    },
    "widgetSet": "vis-2-widgets-material",
    "_id": "i000001"
  }
]

[OliverIO]

@Benji-0

leider wieder anders
da hier im widget so ein knopf vorkommt den wir schon mal woanders einfärben, muss man eine andere cssklasse nehmen, also mycolor1 eintragen

.mycolor1 path[fill="#00af78"] {
  fill: red;
}
@keyframes vis-2-widgets-material-newValueAnimationDark {
	0% {
		color: #800000;
	}
	80% {
		color: #bd0000;
	}
	100% {
		color: #ffffff;
	}
}

[Benji 0]

Vielen Dank Oliver.

Jetzt sieht meine Grafik schon viel harmonischer aus.
Das hilft dir jetzt persönlich nicht, aber ich spende für deinen Einsatz 20 Euro an das IOBroker Forum.

Wenn ich jetzt noch wüsste, wie sich beim Schließen der Handy Tastatur ein unterer Rand bei der IOBroker App verhindern lässt. Aber hierfür werde ich ein Ticket bei Github öffnen...

Beste Grüße
Benjamin

[OliverIO]

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

Handy Tastatur ein unterer Rand

Das hab ich gelesen.
Eigentlich sollte das nicht passieren, weil das responsive ist.
Als workaround kannst du mal probieren das Handy um 90 grad zu drehen und wieder zurück. Dann sollte der rand weggehen

[Benji 0]

Hab ich probiert. Funktioniert nicht. Das einzige was aktuell hilft, ist das Projekt und somit die Grafik neu zu laden.

[Cyberraph]

Haha, ich leg mir hier mal ein Lesezeichen drauf.
Da kann man einiges mitnehmen von den Gurus wie Oliver. :-D Danke auch von mir -> solche Dinge greifbarer gezeigt zu bekommen. :-)

[OliverIO]

@Cyberraph

ziel sollte immer sein das grundübel abzustellen.
daher am besten im verlinkten issue zu kommentieren das es dich auch betrifft

[Benji 0]

Verlinkter Issue?

Generell stellt sich mir die Frage, warum sind die ganzen obigen CSS Einstellungen nicht in den Standard CSS Reitern hinterlegt? Das wäre mega.

[OliverIO]

@Benji-0

weil react das anders macht.
https://v6.mui.com/material-ui/customization/theming/

[Cyberraph]

@OliverIO
Das meinte ich eher allgemein, dass man von dem Gezeigten hier was mitnehmen kann.
Das Issue hab ich nicht.
v2.13.4 der VIS-2 hab ich drauf.
Und nicht laut Github Issue wohl diesen Farbfehler erzeugende v2.13.8 od. v2.13.10.
Muss ich mal schauen, vielleicht sehe ich es falsch. Lt. Github wäre ja schon die v2.13.8 im latest.
Dass die mir im iobroker noch nicht angeboten wurde... (egal)
Teste ich mal und schreib im Issue notfalls mich auch hinzu.

[OliverIO]

so hab mal in vis geschaut.

über eine kleine Anpassung in vis könnte man dann selbst die Farben anpassen ohne dieses ganze einzelne CSS-geraffel

https://github.com/ioBroker/ioBroker.vis-2/issues/581#issuecomment-3987150863

Habe auch mal einen Hinweis direkt an Bluefox gegeben. Evtl übernimmt er das kurzfristig.

[Benji 0]

Was soll das bringen? Und was könnte Bluefox übernehmen? Gilt das ganze für VIS1?

:root {
--mui-palette-primary-main: #ff0000;
}

[OliverIO]

@Benji-0

Ich verstehe deine Frage nicht so ganz.
Ich habe das im Issue ja beschrieben.
Wie oben schon geschrieben vis2 wurde in react mit Hilfe der Komponentenbibliothek mui (Material UI) geschrieben. Zum stylen muss man diese Regeln beachten.

Nein, vis1 ist was komplett anderes