cancel
Showing results for 
Search instead for 
Did you mean: 

How to create a custom triangular progress bar?

UZbin.1
Associate II

Hi

I'm working since a couple of days with TouchGFX and a custom SPI-Display.

Until here everything works fine. Even togheter with an RTOS.

Now I would like to customize some sliders, progress bars and Icons.

For me the most important question is, how to create a progress bar with a triangle look.

Is there a kind of an example?

Or generally how I must proceed to build such custom specific elements?

Thanks in advance

Greetings

Urs

2 ACCEPTED SOLUTIONS

Accepted Solutions
Yoann KLEIN
ST Employee

Hello @UZbin.1​,

There is unfortunately no example for that in TouchGFX.

If you want to add a progress bar with a special look, you need to create your own .png image and set it as the background image of your widget.

Moreover, you also might have to modify the Framework code if you want to fill the progress bar by a different way that simply the classic one, where we use with a rectangle or a circle shape on top of the background image.

This code is contained inside Middlewares>ST>TouchGFX>framework>source>touchgfx>containers>progress_indicators.

Hope that helps you 🙂

/Yoann

Yoann KLEIN
ST Software Developer | TouchGFX

View solution in original post

So
Finally I was able to compile the library...
I just removed the library in the MCU settings and I added the touchgfx folder into my project.
The problem here is only to take the correct library files and not also some other hal-stuff:
...\Middlewares\ST\touchgfx\framework\source\touchgfx
Also important is to update the include path.

But at the end it was even not necessary to compile the library.
For my triangular progress bar I just created my own image (.png) for the active and inactive case.
I added these two images into the TouchGFX as the new images and compiled everything.
It works pretty well now!

View solution in original post

5 REPLIES 5
JTP1
Lead

Hello Urs. Could you describe more what you mean with triangular progress bar ? For example, draw a picture 👍

Yoann KLEIN
ST Employee

Hello @UZbin.1​,

There is unfortunately no example for that in TouchGFX.

If you want to add a progress bar with a special look, you need to create your own .png image and set it as the background image of your widget.

Moreover, you also might have to modify the Framework code if you want to fill the progress bar by a different way that simply the classic one, where we use with a rectangle or a circle shape on top of the background image.

This code is contained inside Middlewares>ST>TouchGFX>framework>source>touchgfx>containers>progress_indicators.

Hope that helps you 🙂

/Yoann

Yoann KLEIN
ST Software Developer | TouchGFX

Hi

Finally I found some time to continue my tests with the own defined progress bar.
You mentioned the framework with the progress_indicators...
For a simple test I tried to modify the corresponding progress bar (in my case BoxProgress.cpp -> setValue())
But nothing changed in the behaviour of my display.
Even when I did this modifications the compiler in the CubeIDE was never rebuilding the modified file.
Is this Middleware with the progress indicators some kind of library?
Do I have to recompile the Middleware stuff?
Thanks for some hints

Hi

I found out on Friday late evening that there is a library linked to the TouchGFX code:
libtouchgfx-float-abi-hard.a
Now I'm trying to modify somehow this library. 
What is the best way to do my own modified library?
Is it better to recompile the library stuff or is it better to include the whole code into my project?
Thanks in advance
Greetings
Urs

So
Finally I was able to compile the library...
I just removed the library in the MCU settings and I added the touchgfx folder into my project.
The problem here is only to take the correct library files and not also some other hal-stuff:
...\Middlewares\ST\touchgfx\framework\source\touchgfx
Also important is to update the include path.

But at the end it was even not necessary to compile the library.
For my triangular progress bar I just created my own image (.png) for the active and inactive case.
I added these two images into the TouchGFX as the new images and compiled everything.
It works pretty well now!