imageProgress Widget--Is the whole progress re-rendered when setValue() is called?

[scottSD]

When it comes to the imageProgress widget, can someone tell me if the entire rectangle is re-rendered (invalidated) when the function setValue() is called? Or only the parts that are changing rendered?

It appears to me that it is. Animation performance would be better if only the parts changing are rendered.

Note that I do have "Anchor progress image at zero" selected.

I did search through the TouchGFX documentation, but did not find an answer to this question.

[Alexandre RENOUX]

Hello,

Indeed, the imageProgress is re-rendered entirely when setValue() is called.

As you say, performance would be better if only the parts changing were updated (like the circle).

So we will see if it is relevant to change this widget to do so.

Thank you for pointing it out.

/Alexandre

[scottSD]

@Alexandre RENOUX​ 

Thanks for the quick reply and for verifying it for me. Hopefully you see the need for it to only render the parts changing and this widget will be updated in a future release. I

It looks like I will need to utilize a different widget for this. I am considering using the Shape widget then changing two of the points to increase and decrease the horizontal size (width) of the shape. Do you know if doing this to the Shape widget will re-render only the parts changing or will it also re-render the entire shape?

Another thing I am considering is placing an image in a container and changing the width of the container to show progress. Would changing the width of a container, cause everything in the container be re-rendered?

[Alexandre RENOUX]

Hello,

I don't think a shape is a good idea. Plus if you don't need a certain pattern on the progress bar, you can use the boxProgress widget. As it's only a box, which is the fastest widget to render, this should not have any impact on performance.

Another thing I am considering is placing an image in a container and changing the width of the container to show progress.

This is exactly how the imageProgress is implemented 😉 . And the entire container will be updated. So the bigger the container, the more area needs to be re-rendered.

But even if the imageProgress re-renders the container inside, if it's a simple image without alpha, the load on the MCU is very low.

/Alexandre

[scottSD]

@Alexandre RENOUX​ 

I appreciate your feedback.

The boxProgress does not have an image painter available for the progress and I need to progress one image over another image.

As far as the imageProgress with no alpha having low MCU load, this will not work for me as I require an image with alpha.

I think I found exactly what I need. I plan on using the "line widget" because it can accommodate an image painter with alpha. I will place background images in a cacheable container behind the line widget so when the line progresses, it will place one image over another.

I conducted an experiment that works well. To appear like a progress bar, I modify the end point of the line with setEnd() to change progress and then use invalidateRect() to only invalidate the part of the line widget's image that has changed since the previous progress. This makes it very efficient as far as animation performance goes.

For anyone trying this, beware that you need to use the "B-U-T-T" Cap Style line because "Round" and "Square" add to the End Position and you won't accurately invalidate what's being changed on the line.

[Alexandre RENOUX]

Hello,

I'm glad you found a solution.

Could you enclose to this thread a small example of your custom line widget ? This might help others in the future 🙂

Thank you in advance.

/Alexandre

[scottSD]

@Alexandre RENOUX​ 

I will do this when I get some time. What files does one need to include when doing this? Should it be zipped, etc? Should it be just the TouchGFX json file?

Or are you saying just include the text of the screen for this in the thread?

[Alexandre RENOUX]

Hello,

You enclose a zip file to your message. You can see a paperclip logo below the message box of your post, that allows you to enclose the zip file.

The only folders that are necessary in the archive are the ones in yellow in the image below. The other folders can be deleted.

/Alexandre

[scottSD]

@Alexandre RENOUX​ 

Sorry about the delay on this. I've been quite busy.

Because I created the project using the Stm32F769i-Discovery template, I ended up adding the STM32F769I_DISCO.ioc file, the STM32CubeIDE directory, and the directories you mentioned placed in a TouchGFX directory.

These are in the attached zip file.

I tried including just the files you listed but when attempting to run it, I needed these extra files.

Hopefully, this way the simulation works for people 😉

 Pressing F2 during simulation shows the invalidated rectangle. And in this case, only the changing part of the line is invalidated.

[Alexandre RENOUX]

Hello,

Thank you very much 🙂

I tried and it works correctly.

/Alexandre