Progress Bar Basics

This tutorial describes how to implement a progress bar, updating the status each time a button is pressed.

Introduction

A progress bar provides a graphical representation of an ongoing event that is expected to terminate at some point in time. Although this means of progress representation does not provide a numerical value to the user, it gives a very good indication of the progress in a form that is intuitive to read.

This tutorial demonstrates the use of the progress bar with a button as an event generator to update the progress.

Dragging and Dropping the Controls

Dragging and Dropping the Controls

Start LiveCode and create a new stack by selecting New stack from the File menu. Then drag and drop a button (1) and a progress bar on to the card (2). Right click on the progress bar and select the Property Inspector (3). Make sure that the Basic Properties have been selected in the tabs. You can update the End value and the Current value of the progress bar. Set the end value to 10 (4) and the Current value to something between 0 and 10 (5).

Adding the Code

Once you have created and updated the controls, add code to the button. Open the script editor by right clicking on the button and select Edit Script. Then paste the following code into the script editor.

on mouseUp
   // Create a progress variable for the current progress value.
   local tCurrentProgress

   // Get the current progress value and assign it to the progress variable.
   put the thumbPosition of scrollbar "Progress Scrollbar" into tCurrentProgress

   // Test if the progress variable value is greater than the end value of the
   // progress bar.
   if tCurrentProgress >= the endValue of scrollbar "Progress Scrollbar" then
      // If the progress variable is greater or equal to the end value of the
      // progress bar, then set the progress variable to 0.
      put 0 into tCurrentProgress
   else
      // If the current progress is not greater or equal to the end value of 
      // the progress bar, then add 1 to the progress variable.
      add 1 to tCurrentProgress
   end if

   // Set the progress position of the progress bar to the value of the 
   // progress variable.
   set the thumbPosition of scrollbar "Progress Scrollbar" to tCurrentProgress
end mouseUp

This code creates the variable tCurrentProgress and populates it with the progress value from the progress bar. If the value in the tCurrentProgress is greater or equal to the end value of the progress bar then the tCurrentProgress is reset to 0. If the variable value is not greater or equal to the end value of the progress bar then 1 is added to the tCurrentProgress. After the if condition, the progress bar is updated and the variable value is assigned to the progress bar.

You can update how many times the button has to be pressed to complete an entire progress update cycle by modifying the end value and current value of the progress bar.

Progress in Operation

Progress in Operation

Test the progress bar by switching to run mode and clicking the button. You should see that progress increases with each button click, until the progress bar reaches the end of the progress display. Continued clicks on the button cause the progress bar to reset and progress to start from the beginning.

Further Reading

If you found this example useful but would like to know how to use the progress bar in an environment where it is automatically updated, then have a look at lesson: How do I use a Progress Bar?

4 Comments

Michel Bujardet

Having to click the button to make the Progress Bar move is awkward. It would better with a timer, as it often is done in real programs :

-------------------------
on mouseUp
  // Create a progress variable for the current progress value.
   local tCurrentProgress
    // Start the thumbPosition at 0
put 0 into tCurrentProgress
    // Test if the progress variable value is greater than the end value of the
    // progress bar.
    if tCurrentProgress >= the endValue of scrollbar "Progress Scrollbar" then
        //do nothing
    else
        // If the current progress is not greater or equal to the end value of
        // the progress bar, then add 1 to the progress variable.
        add 1 to tCurrentProgress
    end if
    // Set the progress position of the progress bar to the value of the
    // progress variable.
    set the thumbPosition of scrollbar "Progress Scrollbar" to tCurrentProgress
send "push_thumb" to me in .1 second -- keep the timer going
end mouseUp

command push_thumb
// Create a progress variable for the current progress value.
    put the thumbPosition of scrollbar "Progress Scrollbar" into tCurrentProgress
      // Test if the progress variable value is greater than the end value of the
    // progress bar.
    if tCurrentProgress >= the endValue of scrollbar "Progress Scrollbar" then
        // If the progress variable is greater or equal to the end value of the
        // progress bar, then say its complete
answer "Process complete"
    else
        // If the current progress is not greater or equal to the end value of
        // the progress bar, then add 1 to the progress variable.
        add 1 to tCurrentProgress
send "push_thumb" to me in .1 second -- keep the timer going
    end if
    // Set the progress position of the progress bar to the value of the
    // progress variable.
    set the thumbPosition of scrollbar "Progress Scrollbar" to tCurrentProgress
end push_thumb
--------------------------

Elanor Buchanan

Hi Michel

Thanks for your comment and this code example.

This lesson is just a small example to demonstrate how LiveCode Progress Bars are used. For anyone looking for an example of a more realistic use of a progress bar there is a follow on lesson, How do I use a Progress Bar, http://lessons.runrev.com/s/lessons/m/4071/l/11887-How-do-I-use-a-Progress-Bar-, which might also be useful.

Kind regards

Elanor

anh

I dont know how to make an opening screen pls help

Elanor Buchanan

Hi anh

I am not sure exactly what you need but this lesson might help.

http://lessons.livecode.com/m/4069/l/1276854-how-do-i-add-a-splash-screen-to-my-android-app

Although this is an Android lesson it would still apply on other platforms.

If you are creating an iOS app you can add the splash screen in the iOS Standalone Application Settings.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.