AI2 Progress Bar

[SteveJG]

Build an AI2 Progress Bar

AI 2 does not have a progress bar.  In other programming languages, a moving line display is usually called a Progress Bar and is a standard control; AI2 has no Progress Bar tool.

When a compiler does not have a specific tool, it is frequently possible to “build” one using the components in the compiler.  This Progress Bar tip demonstrates three ways to  build and use a ‘progress bar.’  There are certainly other ways a developer can do something similar. There is very little explanation.  If you understand basic coding you will have no issues

Three Progress Bar examples shown on one Project app:

Use a timer, set the width of the progress bar to the Screen1.Width and allow the timer determine the bar’s progress.   The top example uses the red bar and is time driven.

Place a Button on your screen (Button1).  Set the text of the button to nothing.

Make the button VERY thin, set Button.Height to 10.

Make the Button.Width to 1.

Set the Button.BackGroundColor to red.

With a clock.timer     set the timeinterval = 600 ms (just less than a second).   You set this interval to anything you want.  600 ms provides animation of the progress bar in real time.

Put the following into the clock event handler:

While Button.Width < 320 do     (320 is the width of the screen in this instance) or as shown in the example, set < Screen1.Width

set Button.Width to Button.Width + 1

or something similar.  What you do with this in your app is up to you  Every time the clock ‘fires,’ the button advances.  The label records the pixel ‘number’ (or expressed another way, width of the ‘bar’ in pixels.    Note, you also need the Screen1.Initialize blocks shown below.

The following two images show the bar building up  and completed.  The numbers are the number of pixels so far traversed (from 1 to x) and will stop at the limit of the screen.   In this case, when 320 is reached, the line is at 100%.  START/STOP  starts and pauses the bar progress.  The red line is actually Button1 in disguise.

The second example is event driven.  Three buttons demonstrate a project’s progress.  Button4 is the #1 button.  The third button (Button6) tests for a Boolean event to be true before it allows progress to be displayed.  (check the check button in the app to set the event to true).  The display Button7 is the blue bar.  The length of the blue bar is set by a global variable ProgressBarWidth, as shown in the blocks. Here it is set to 50.

The last example is also timer driven.  This is the first example using a Progress Bar that does not occupy the entire screen. It uses a separate Clock component (to avoid confusion with respect to the first example)..  The bar here is green (it is Button9).  The green line is Button9.  Button8 is the Start 2 button; it enables Clock2

The following blocks go in the Screen.Initialize .. where you place them in your app is up to you.

There are many other ways to display progress of an event.  A developer can trigger a segment of progress based on the system clock; the percent of activity between two time intervals (where one represents start and the other stop); on a game score (as the score increases, so does the line).

NOTES:

The Reset button is common to all three examples.

The Screen1.Initialize event handler contains instructions for all three examples. Your project will not need all the extra code.

The width of the green Progress Bar is set using the global ProgressBarWidth and set initially to 50.

OTHER IDEAS

Please do post other ways of doing this.  In app development, there are frequently many ways to accomplish a goal and developers can do lots of things with AI2.

Regards,

SteveJG

[René Ooms]

Sorry to ask, but i'm having some trouble with the first step :-(   can you please show me what you mean with:  It's probably really basic

[SteveJG]

The text means what it says ..the example assumes the screen width is 320 pixels, so the button, when showing an operation complete has to reach 320 pixels width.  As you recall, the button is (sans text and made a pretty color) is used as the display bar.  " Or something similar"... well, if your screen is wider, you might want to assume the screen width is say 480 pixels and make appropriate adjustments...in that case, 320 pixels is not appropriate; or instead of hard coding the width of the screen, code   Screen.Width instead..it is up to the developer to decide what he wants to do with this stuff.   There are several examples showing directionally how the code could be used with slightly different 'progress bar' configurations.   

Code the example project, run the Project and you will probably understand as you watch how the screen changes depending on input.

[René Ooms]

Ok, i will run the code, probably overthinking something :-) that is allready in the code

[Justin Sweat]

One bar I noticed wasn't mentioned was a an indefinite loading bar for when you don't know how far along something is.  This design I made will keep looping until stopped and doesn't need to know how far along to be.

Indefinite Progress Bar

For the progress bar itself, set up a horizontal arrangement set to fill the whole screen, and then put 10 (or number of choice) labels in it with a height of about 10 pixels and a width set to about 32 pixels.  Then change all their text colors to 'None', and then change the background colors to a repeating pattern (at least 3 colors is needed to give the user the perception of movement) as shown below.  Also add a timer with a small interval (like 333ms).

Once you have done so, go to the blocks editor and set up the following.  Note:  The collapsed list under the Clock1.Timer block is the same list as the one under the Screen1.Initialize block.

The way this works:  The initialize block chunk sets all the labels in the horizontal arrangement to the width of the screen divided by the number of labels (NOTE, in the math block, change the number 10 to however many labels you put in the loading bar).  Then, each time the clock timer (which you can start/stop by an event of your choice) triggers, it will change each of the labels in the bar of color 1 (light grey) to color 2 (gray), all of the labels of color 2 to color 3 (dark gray) to color 1.  You can modify/add/remove colors to suit your wishes, just make sure that you have an 'If then else' block set up to read the color and change it to the next one (just keep in mind that if you use less than 3 colors the person will not be able to detect motion, it will just look like it's flashing).  When the event is complete, you can set it up to stop the timer and hide the entire horizontal arrangement all at once.

The result will be a bar of colors that looks like it's moving from one side to the other.

[Taifun]

very nice Justin, great solution!

Taifun