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

[Franko1278]

Hallo,

ich würde gerne die Farbe des Schiebers an den aktuellen Wert anpassen.

Widget: vis-inventwo – Simple Slider horizontal
VIS-Adapter-Version: 2.13.4
Einstellung: Slider → Regler → Farbe

Ich verwende folgende Definition:

{wert:alias.0.Kg.Buero.Schreibtischlampe.TEMPERATURE; wert > 430 ? "#ffae00" :: wert > 410 ? "#f0b62a" :: wert > 390 ? "#e7bb45" :: wert > 370 ? "#dec061" :: wert > 350 ? "#d5c57a" :: wert > 330 ? "#cdca95" :: wert > 310 ? "#c4cfae" :: wert > 290 ? "#bbd4c8" :: wert > 270 ? "#b1d8e2" :: "#c4dfe6"}

Im Editor wird die Farbe gelegentlich übernommen, live jedoch nie:

Mir ist bewusst, dass nur der inventwo design – Schieberegler vollständig für VIS 2 getestet wurde. Allerdings bietet dieser Schieberegler keine Möglichkeit, einen Farbverlauf oder farbabhängige Anzeige für Bar oder Slider einzustellen.

Falls die Farbzuweisung im vis-inventwo – Simple Slider horizontal nicht funktioniert, wäre dies eventuell ein Feature-Request für den inventwo design – Schieberegler. Damit könnte man eigene Slider erstellen, die RGB- oder andere Farbverläufe abhängig vom Wert darstellen.

Danke für eure Hilfe

Hier noch der Export des Widgets zum Nachtest:

[
  {
    "tpl": "i-vis-slider-simple",
    "data": {
      "bindings": [],
      "oid": "alias.0.Kg.Buero.Schreibtischlampe.TEMPERATURE",
      "iMinVal": "250",
      "g_common": true,
      "iMaxVal": "454",
      "iStepVal": "1",
      "iVisibleStepVal": "1",
      "iSliderRotation": "0",
      "iSliderHeight": 15,
      "g_i-css": true,
      "iSliderColor": "linear-gradient(90deg,rgba(171, 220, 245, 1) 0%, rgba(255, 174, 0, 1) 100%);",
      "iSliderCorners": "100",
      "iSliderKnobSize": 25,
      "iSliderKnobColor": "{wert:alias.0.Kg.Buero.Schreibtischlampe.TEMPERATURE; wert > 430 ? \"#ffae00\" :: wert > 410 ? \"#f0b62a\" :: wert > 390 ? \"#e7bb45\" :: wert > 370 ? \"#dec061\" :: wert > 350 ? \"#d5c57a\" :: wert > 330 ? \"#cdca95\" :: wert > 310 ? \"#c4cfae\" :: wert > 290 ? \"#bbd4c8\" :: wert > 270 ? \"#b1d8e2\" :: \"#c4dfe6\"}",
      "iSliderKnobCorners": "100",
      "iSliderTextColor": "rgba(7,87,91,1)",
      "iValueTextColor": "rgba(7,87,91,1)",
      "iTextSize": 15,
      "iStepTextSize": "12",
      "iChangeOnRelease": true,
      "iSliderLabel": "Lichtfarbe"
    },
    "style": {
      "bindings": [],
      "left": "426px",
      "top": "380px",
      "width": "239px",
      "height": "50px",
      "z-index": "10"
    },
    "widgetSet": "vis-inventwo",
    "_id": "i000001"
  }
]

[OliverIO]

@Franko1278

ah jetzt erst die frage richtig verstanden.
es geht um die farbe des slider knopfes und nicht der farbverlauf der im runtime nicht angezeigt wird

hier funktioniert es auch im runtime mode
24312cf3-e297-4776-9ac0-603d6382d768-20251118-1836-43.8247062.mp4

ne auch das funktioniert korrekt
ich hatte im vorgehenden video noch nicht meinen testdatenpunkt eingetragen
unter dem slider ist der berechnete wert als zahl und wieder darunter der ermittelte farbwert auf basis deines bindings

a4210e62-40f9-49c1-a685-baf8abbc407c-20251118-1844-16.6695176.mp4

[Franko1278]

Hallo @OliverIO,

vielen Dank für die schnelle Rückmeldung. Ich habe alle relevanten Adapter und Komponenten aktualisiert und anschließend das gesamte System neu gestartet.

Leider besteht das Problem weiterhin: Der Schieberegler verhält sich bei mir nicht wie in deinem Video demonstriert. Die Farbe des Reglers wird nicht live aktualisiert, sondern nur beim Verlassen aktiven Modus.

Reproduzierbares Verhalten:

Im Live-Betrieb wird die Farbe des Schiebereglers nicht dynamisch angepasst:

Bildschirmaufnahme 2025-11-19 140012.mp4

Im Editor erfolgt eine Aktualisierung der Farbe erst beim Beenden des aktiven Modus:

Bildschirmaufnahme 2025-11-19 142120.mp4

Das Verhalten ist identisch unter:

• Google Chrome
• Mozilla Firefox
• Fully Kiosk Browser (Fire HD 10)

Um eine mögliche Versionsinkompatibilität auszuschließen:
Welche Versionen nutzt du aktuell?

Meine System- und Adapterversionen:

• Node.js: v20.19.5
• NPM: v10.8.2
• js-controller: v7.0.7
• admin: v7.7.19
• vis-2.0: v2.13.8
• vis-inventwo: v3.3.5
• web: v7.0.9

Wenn weitere Logs, Debug-Ausgaben oder Tests benötigt werden, stelle ich diese gerne bereit.

[OliverIO]

@Franko1278

Versionen muss ich später nachschauen
Du kannst zwischenzeitlich mal ein komplett leeres Projekt anlegen und nur den Schieberegler reinpacken und noch mal
Nur um auszuschließen, dass es irgendwelche Schwierigkeiten mit anderen CSS Anweisungen gibt
Die können sich nämlich gegenseitig beeinflussen, je nachdem, wie gut und sauber man sie benannt hat

[Franko1278]

@OliverIO
Auch in einem neuen Projekt verhält sich der Silder leider gleich.

[OliverIO]

@Franko1278

so jetzt habe ich das detailproblem verstanden:

du verwendest ein vis1 widget in vis2 obwohl es entsprechende vis2 widgets gibt

leider funktionieren viele vis1 widgets nicht unter vis2
daher gibt es dann auch extra adapter die versuchen die widgets unter vis2 neu zu erstellen
sie sehen evtl gleich aus, sind aber ein anderes stück software.

so werden hier andere css klassen adressiert. auch das binding funktioniert hier nicht so wie gedacht.

ich habe dir mal mit dem vis2 widget inventwo slider das aussehen fast nachempfunden,
da in die farbangabe kein gradient angegeben werden kann, muss man zusätzliches css einsetzen

die css angabe nennt sich slider und wird dann im feld css klasse unter General eingetragen. das eigentliche css im css reiter

Spoiler

[
 {
   "tpl": "tplInventwoWidgetSlider",
   "data": {
     "bindings": [],
     "oid": "0_userdata.0.battery_value",
     "minValue": 250,
     "g_common": true,
     "maxValue": 454,
     "step": 1,
     "orientation": "horizontal",
     "showMinMax": true,
     "showSteps": false,
     "stepMode": "auto",
     "stepDisplay": 10,
     "sliderRailColor": "",
     "g_attr_group_css_slider_track": true,
     "sliderRailActiveColor": "",
     "trackBarType": "normal",
     "trackWidth": 20,
     "trackBorderRadius": 100,
     "trackShadowX": 2,
     "trackShadowY": 2,
     "trackShadowBlur": 2,
     "trackShadowSize": 1,
     "trackShadowColor": "rgba(0, 0, 0, 1)",
     "sliderThumbColor": "{wert:0_userdata.0.battery_value; wert > 430 ? \"#ffae00\" :: wert > 410 ? \"#f0b62a\" :: wert > 390 ? \"#e7bb45\" :: wert > 370 ? \"#dec061\" :: wert > 350 ? \"#d5c57a\" :: wert > 330 ? \"#cdca95\" :: wert > 310 ? \"#c4cfae\" :: wert > 290 ? \"#bbd4c8\" :: wert > 270 ? \"#b1d8e2\" :: \"#c4dfe6\"}",
     "g_attr_group_css_slider_slider_thumb": true,
     "thumbSize": 25,
     "thumbBorderRadius": 100,
     "thumbShadowX": 2,
     "thumbShadowY": 2,
     "thumbShadowBlur": 2,
     "thumbShadowSize": 1,
     "thumbShadowColor": "rgba(0, 0, 0, 0.5)",
     "name": null,
     "comment": null,
     "class": "slider",
     "filterkey": null,
     "multi-views": null,
     "locked": null,
     "g_fixed": true
   },
   "style": {
     "bindings": [],
     "left": "238px",
     "top": "14px",
     "width": "235px",
     "overflow": "visible",
     "height": "50px"
   },
   "widgetSet": "vis-2-widgets-inventwo",
   "_id": "i000001"
 }
]

.slider {
  & .MuiSlider-rail {
    background: linear-gradient(90deg,rgba(171, 220, 245, 1) 0%, rgba(255, 174, 0, 1) 100%);
    opacity: 1;
  }
  & .MuiSlider-track {
    background: none;
  }
  .MuiSlider-thumb::before {
    box-shadow: black 0px 0px 5px 1px;
  }
}

das obere widget ist die vis2 version
darunter die vis1 version
31dcdd39-031c-4cc8-afed-9408d01dc80e-20251119-1757-04.7266773.mp4

[Franko1278]

@OliverIO super, danke, funktioniert!
Dann werde ich mal alles von VIS 1 löschen und mein Wissen in CSS auffrischen.
Gibt es eine Übersicht welche Eigenschaften die Widgets haben, oder sind die nur im Bowser Debug herausfindbar?

[OliverIO]

@Franko1278

Standard UI ist das MUI Framework auf React Basis.
Der Slider ist hier
https://mui.com/material-ui/react-slider/

Auf der Definitionseben kann man da relativ viel anpassen.
Was der Programmierer dann an dich über die widget-Einstellung tatsächlich verfügbar macht bleibt ihm überlassen.
Nachträglich kann man dann noch über die CSS-Klassen reinmanipulieren
Für den Track gibt es diese Angabe

https://mui.com/material-ui/api/slider/#classes

Ich persönlich finde die MUI-Angaben immer etwas verwirrend und schaue meistens direkt in der Developer Konsole des Browsers nach und kann da ja life solange anpassen bis es passt.