How does TouchGFX directly change the color of the picture in the image widget?

[L丶zs]

Does touchgfx have a function that can directly change the color of the image in the image widget, similar to the recolor function of the image widget in LVGL, to re-color the image into a pure color image. If touchgfx does not have this function, is there a way to achieve this function?

[Yoann KLEIN]

Hello @L?zs​,

TouchGFX doesn't support this kind of functionality for the moment. It's only possible to modify the color of SVG icons that belong to the "Stock>Material Icons" theme. I'm not sure whether you can achieve what you want using TouchGFX or not by using a workaround. Could you elaborate a bit more on what your user-case is and give an example, please ?

So we can evaluate if it's interesting for a future version of TouchGFX.

Thanks,

/Yoann

[L丶zs]

It sounds like SVG icons is also a good choice. Does it support user customization to add new icons? In this way, I can use some simple images as icons and modify colors. However, in my project, TouchGFX 4.17 is used. It seems that TouchGFX 4.21 can only use TouchGFX Stock. In my project, there are many pictures with the same pattern but different colors. Each picture with different colors must be saved into external FLASH, which will lead to excessive consumption of external FLASH resource space. If I can use the program to recolor different colors, I only need to save an image into the external FLASH, and then use the program to recolor. In this way, it can save a lot of resource space.

[Yoann KLEIN · Accepted solution]

Hello,

Indeed TouchGFX Stock was only added from v. 4.21.0.

The only way to modify the color of your SVG images in TouchGFXDesigner is to add them inside the "C:\TouchGFX\4.21.1\designer\Themes\icon_theme\images" folder. Then, you can choose in which subfolder your want to put your icon in. Your svg image as to be pretty simple, without much color/fill data. For example, I downloaded this "bird in a cage" image from internet and added it into the "home" subfolder.

Then, when I reopened TouchGFX 4.21.0, I added an image widget to my application and I was able to select this icon in the "Material Icons" theme of TouchGFX Stock, and also to modify the color of it :

 

I understand your memory issue, but I don't think it is possible to modify the color of an SVG or PNG image on runtime though, for the moment.

Sorry for the inconvenience,

/Yoann