Dynamic fill-color of an image-widget

[FIH-RSB (Hannes Fisch <°///---<)]

Problem
The colour code (e.g. #FC7D00) is known in the application of a specific module.
In mappView, this colour should now be displayed on a specific screen to show the user which colour is currently being used.
The colour code can be any code.

So the code #0000FF should lead to

and the code #FC7D00 should lead to

We have already tried various approaches to solve this problem, but none of them work or are quite complex.

Approach 1 - Image-Widget - styles
If the image widget is used, the fill colour can be transferred via a property (a stylable property).
With this variant, the colour can be switched to that of a specific style, but not to any colour code.

Approach 2 - Paper-Widget - Transformationen
By passing the transform-string to a paper-widget, the style of a specific object can be changed.
With this variant, the colours can be switched, but only from a list of colours that are permanently transferred to the widget via the style.
Switching via the colour code is supported by svg, but not by the paper widget.

Approach 3 - Paper-Widget - Content
Another approach is, to create the complete svg content, inclucding the style, in an content string in the application and bind this string to the paper-widget.
Although this approach works, it requires complex string operations and is quite time-consuming, especially when more complex shapes need to be coloured.

Approach 4 - Custom widget
Using the mappView widget development toolchain, it would be possible to create a widget to which this code can be passed.
Perhaps such an approach would be possible, but it is so time-consuming and complex that it is not worthwhile for such a supposedly simple problem.

Does anyone see another, simpler approach that we haven’t thought of yet?

[marcel.voigt]

@FIH-RSB are the stars just an example or is that the actual image you are trying to change color on? How many colors are we talking about and are they fix or configurable by the user?

[FIH-RSB (Hannes Fisch <°///---<)]

The star is only an example.
We actually use a reasonably complex SVG path.

It should be possible to display every possible RGB colour from #000000 to #FFFFFF.
For this reason, it is not possible to work with the styles or the colour lists.

[marcel.voigt]

After playing and testing around for a bit I pretty much came to the same conclusion as you.

However depending on your SVG I found replacing the fill not too difficult with a simple string operation.

For a simple SVG I used this

That’s not really ideal for an SVG with multiple paths like you are hinting at.

In that case a global style my be the ticket but yes then the creating the SVG string gets a bit more complex. Still not too bad annoying nonetheless for something that could be easily done with a binding to the imageColor property.

I just connected the colorString variable to a DropDown but the TextInput also works to select any color under the rainbow.

Maybe we have someone in the Community that can create a custom image widget with a binding to imageColor using the Widget Development Tool Chain.