[INTRO] Progress Bars With Canvas!

:computer: Introduction

I saw @TIMAI2's METRIC RAT AI2 - Percentage Progress Bar, so I am inspired to make my own one, but instead of labels, I used the Canvas as a progress bar.


:notebook: Explanations:

  • We have an X variable to check the progress.

  • When the screen initializes, we set some properties of components. The height of the canvas is 10 pixels, but the line width is 7, which means that we allow at least 10 - 7 = 3 pixels of space between the canvas and the components below it.

  • When the clock has refreshed, if the progress is done or nearly done, we draw a little segment of progress. Label1 is used to record the percentage of the progress bar drawn. If the progress is now done, we disable the Clock so that it is finished.

  • When Button1 is clicked, we clear the canvas, set the X variable back, set the Label1's text to 0%, and start over again.

:movie_camera: Demo video


test.aia (3.3 KB)

:heavy_check_mark: Tests

Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite.

:+1: Rate my tutorial! :-1:

  • Good tutorial!
  • Bad tutorial.

0 voters

Kindly :email: PM me if you have any questions! Also, if you like my tutorial, please :heart: like it! It takes some effort for me to make it...

Votes and likes tell me the general user feedback of my tutorial. If you read this tutorial, please take 20 seconds to drop by and give a vote / like!

If you have any features that you want to add to this tutorial, PM me.

Gordon Lu

:speech_balloon: Message :earth_africa: Website :e-mail: E-mail


This makes no sense.
Make the interval as between 50 to 100 will be enough.


Ok, I'll try.


I tested, it would be slower if I did that. So, I chose 1.


thank you for this tutorial !


set the interval as 1, which will not let the clock timer for 1000 times in one second. On my cell phone, maximal 60 times in one second.


So if I make it 1, it will not refresh every millisecond, but will make it the highest speed.

1 Like

A One millisecond Timer interval would translate to a frame rate of 1,000 fps.
Do hummingbirds play video games?

1 Like

No of course, why?

this then also is the answer to the question "does a timer interval of 1 millisecond make sense?"

1 Like

Then should I set it to something else?

read the previous answers... start again from #post2

He means that hummingbirds (very fast birds) will need this fast speet, not humans.

Here you can see how sluggish the timer is:

So it makes no sense to set TimerInterval less than 20-30 (ms).

1 Like

Should be updated by now. Thank you all for your feedback. :grin: