I spent several hours on replacing all gradients from my clock control to SVG gradients.
The SVG gradients, used as highlights and shadows were created in Inkscape and then edited by hand to contain minimal required information, no application specific tags and metadata.
Here's one example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0" gradientUnits="objectBoundingBox">
<stop style="stop-color: #ffffff; stop-opacity:0;" offset="0" />
<stop style="stop-color: #ffffff; stop-opacity:1;" offset="1" />
</linearGradient>
</defs>
<rect style="fill:url(#gradient)" x="0" y="0" width="152px" height="152px" />
</svg>
This is a simple gradient white at the top and transparent white at the bottom.
I have several of similar gradients composed in my custom container. In Designer they look exactly like the bitmap gradients. They look identical in Simulator. Then I run the app on my STM32U599 board and there's complete mess on the screen. Position, sizes and compositing of the gradients is all wrong, scattered all over.
I switched the "Vector Rendering" option in my IOC from "Hardware" to "Software". It kind of helped, because the gradients were displayed correctly, however, the performance of the control was just horrible, the fluent animation turned into a stuttering slide show, also weird visual artifacts present.
Finally I moved all my gradients to the separate custom containers and marked "Cacheable" checkboxes on them. I would expect that would make rendering my decorations containing gradients only once, then using the thing as a bitmap. Well, it didn't help at all. My custom control is a date time setter that contains 6 scroll wheels. Each of the wheel animates without slightest stuttering, perfectly fluently. However, when I call animate to set the clock to a specific value - I get stuttering and artifact on the animation. I believe it started since I converted my gradients to SVG. With bitmap gradients it worked without issues, artifacts and stuttering.
I changed the "Vector Rendering" option to "Hardware" and it seemed to solve the performance issue, also artifacts from the scroll wheels disappeared, but the gradients were rendered wrong.
It seems like the "Vector Rendering" feature in TouchGFX doesn't play well with gradients, or maybe it's just the implementation for STM32U599 buggy.
If my SVG files were incorrect - why do they render correctly in Designer and Simulator?
