Customized circle progress

[KNara.2]

Hi,

I'm looking at customising the circle progress.

I was able to add this as the background image 

and added a single dot as the image to rotate.

Any idea on how to rotate the dots and make it disappear?

[Mohammad MORADI ESFAHANIASL]

Hello @KNara.2 ,

There is a Progress Indicator example on TouchGFX which contains a circular indicator similar to the one you desire.

Progress Indicator Example

Please consider checking it for inspiration and if you still need help, don't hesitate to ask.

[KNara.2]

@Mohammad MORADI ESFAHANIASL 

Thanks that was useful.

I'm looking at implementing a circle progress where in at the first iteration I have one background image and one progress image, in the next iteration I want to swap these two images.

Any leads on how this can be achieved?

Should I use 2 circle progress and call them in loop one after another?
Is there a feature called reverse for circle progress, just like the animated images have?

Please guide.

Thanks.

[Mohammad MORADI ESFAHANIASL · Accepted solution]

You are very welcome.

I think having two different circle progresses would be easier to handle. However, if you prefer to do it in code, you can use these two functions:

// To change the background
circleProgress.setBackground(touchgfx::Bitmap( /* Bitmap ID of the background */ ));

// To change the progress image
circleProgressPainter.setBitmap(touchgfx::Bitmap( /* Bitmap ID of the progress image */));

Keep in mind that you need to change the attributes of the progress to show it properly. 
You can read more circle progress here .

I hope this helps

[KNara.2]

Thanks for all the guidance @Mohammad MORADI ESFAHANIASL 

I used touchgfx_printf() calls (needs <touchgfx/Utils.hpp>) and was able to debug in simulator.

Thanks again.

[KNara.2]

Hi @Mohammad MORADI ESFAHANIASL 

There is a slight flicker that is seen when the images are swapped.

Any solution for this?

This is how my code looks

void Screen1View::setupScreen()
{
tickCounter = 0;
Screen1ViewBase::setupScreen();

flag = true;
}

void Screen1View::handleTickEvent()

{

     int n;

    tickCounter++;

    updateProgress(tickCounter);

    updateDirection(tickCounter);

    n = circleProgress1.getValue();

    if (circleProgressMax-1 == n)

    {

    if(flag)

    {

       circleProgress1.setBackground(touchgfx::Bitmap(BITMAP_FULL_ID));

        circleProgress1Painter.setBitmap(touchgfx::Bitmap(BITMAP_VACANT_ID));

        circleProgress1.invalidate();

        flag = false;

    }

    else

    {

         circleProgress1.setBackground(touchgfx::Bitmap(BITMAP_VACANT_ID));

          circleProgress1Painter.setBitmap(touchgfx::Bitmap(BITMAP_FULL_ID));

          circleProgress1.invalidate();

          flag = true;

    }

[KNara.2]

I got the fix for flickering issue.

Posting the solution here, in the hope that it might help someone.

I used 

circleProgress1.invalidate();
circleProgress1.invalidateContent();

and the flickering issue/redraw issue is fixed.

Thanks & Regards,

Keerthi.A.N

[Mohammad MORADI ESFAHANIASL]

You're very welcome :D
Glad to hear you got it working