<Hilfe> Symbolfarbe durch Farbcode in Item steuern

[Mike01]

Ich bräuchte bitte nochmal etwas Hilfe, (kämpfe nun schon seit 3 Tagen mit dem Problem und komme nicht weiter.)
Ich habe aus einer MQTT Abfrage in SHNG ein Item, welches einen HTML Farbcode enthält. Datentyp = str, aktueller Dateninhalt:

#898989FF

Ich würde jetzt gerne ein Symbol in SmartVISU mit diesem Item steuern, in dem es in der gewählten Farbe des Itemwert dargestellt wird.
Habe aktuell verschiedene ansätze probiert, einmal mit einem eigenen Widget, und dann mit einem script in basic.print, und mit dem status.customstyle, aber ich schaffe es nicht, dass das SVG in der Farbe des Items dargestellt wird.

Hab aber leider keine Ahnung von JS, probiere hier nur codeschnippsel aus, die ich in der Suche im Netz gefunden habe, und nach bestem wissen zusammensetzte
Deshalb die Frage > Geht das dann überhaupt, oder wird der HTML-Farbcode als Item durch irgendeinen Filter oder so ignoriert ?

Hier mal das erstellte eigene Widget (Widgetname= farbe.html:

/**
 * Display a icon with html-color
 *
 * @param       a gad/item with html colorcode
 */
{% macro icon_colorload(gad) %}
    {% import "basic.html" as basic %}
    
    {% set colorload = gad %}

    {{ basic.symbol('', '', '', 'film-spool-svgrepo-com.svg', [1,0], '', colorload) }}
{% endmacro %}​

{{ farbe.icon_colorload('bambu01.ams01.tray0.farbe')}}

Das wird dann im Browser auch geladen und wie folgt dargestellt. (siehe Anhang) html.png

[wvhn]

Moin Mike,

Twig ist eine Template-Engine, die noch vor dem Rendern der statischen html-Seite ausgeführt wird. Das heißt man mit den Makros sehr schön statische Eigenschaften wie Variablennamen besetzen, aber eben keine dynamischen Inhalte. Deswegen siehst Du bei Deinem Widget nur die item-Namen in den CSS-Anweisungen "stroke" und "fill", aber nicht die Werte der items. Diese kannst Du nur mit JavaScript einsetzen.

Ich sehe hier drei Lösungsmöglichkeiten:

• wenn das item die Farbe auch in 3 RGB-Komponenten als Array liefern kann, kannst Du das item direkt in basic.icon angeben.
• wenn die Anzahl der möglichen Farben begrenzt ist, kannst Du ein basic.symbol verwenden und die Werteliste der items mit allen Farben füllen. Dieselben Angaben machst Du dann im Array der Farben nochmal.
• bei einer großen Anzahl von Farben wird das schnell unübersichtlich und langsam. Dann kann man folgendes machen:
  

  	<span id="myId"> {{basic.icon('myIcon','#fff','','icon')}} <span>
  	{{basic.print('','myItem', 'script','$("#myId .icon").css("stroke",VAR1).css("fill", VAR1).css("color",VAR1)')}}
  	​

Alle drei Lösungen würde ich zuerst an einem smartVISU-icon ausprobieren und dann erst Dein selbsterstelltes icon testen, Es kann sein, dass Du die Anweisung ' fill="#fff" ' in Deinem icon aus dem path auf die svg-Ebene verlegen musst. Das habe ich jetzt nicht mehr getestet.

Gruß
Wolfram

[Mike01]

Hallo Wolfram,

Vielen Dank für deine Nachricht.
Ich hab es direkt mit deinem JS script probiert, damit klappt es auf anhieb, die HTML Farbe aus dem Item wird jetzt für die SVG Farbe erkannt.
Hatte es die letzten Tage auch mit so einem Script versucht, das hatte ich in einem beispiel so ähnlich gefunden, aber vermutlich lag es an den Feinheiten des scripts dass es bei mir nicht funktionierte. Vor allem das Leerzeichen zw. "#myId .icon" war bei deiner Lösung entscheidend.

Gruß, Mike

[wvhn]

Ich habe das zum Anlass genommen, das Widget "basic.icon" zu überarbeiten. Wenn Farben über ein item gesteuert werden, akzeptieren die Modi 'rgb', 'hsl' und 'hsv' nun einen vierten Wert für alpha. Es wird immer das erweiterte Farbmodell verwendet und alpha zu 1 gesetzt, wenn kein vierter Wert vorhanden ist.

Zusätzlich gibt es jetzt den Modus 'hex', der rgb(a)-Werte im Hexadezimal-Format akzeptiert, z.B. '#898989' oder '#898989FF'.

Die Lösung ist im develop branch verfügbar.

Gruß
Wolfram