How do I use a Progress Bar?

Learn how to use a progress bar while importing or exporting a file. Sample code is provided.

Introduction

Progress bars are often used to provide a graphical indication of an action measured against time for an ongoing process, such as when transferring files. Here we demonstrate how to implement a progress bar that can be used when importing and exporting a file.

Creating the Interface

Creating the Interface

Create a new main stack with two buttons. One button should be labeled Import, the other button should be labeled Export. Then add the progress bar. In a working application, it may be more appropriate to add the file selection dialog, rather than the Import and Export buttons.

The properties of the progress bar are widely configurable. By default the range is set from 0 to 100, with the current value set to 50. For the purpose of this lesson, set the current value to 0. This allows the progress bar to be updated with percentiles.

Note: A range from 0 to 100 is convenient if the percentage values are to be displayed in numerical terms next to the progress bar.

The Import Button

Much of the code in this example is used to determine the size of the file. The repeat loop then reads in the file in 1024 character chunks until the end of file (eof) marker is reached. As the file is read, a counter is incremented to keep track of the amount of data transferred. That value is then used to update the current value of the progress bar.

on mouseUp
   global gFileContents
   # the location of the source file
   # update this line as required
   local tPath, tFileName, tFiles, tFileSize, tImportFileName = "import_me.txt"
   put empty into gFileContents
   set the thumbPosition of scrollbar "Progress Scrollbar" to 0
   # this section of code is used to find the file size and track
   # the progress while reading in the file
   set the itemDel to slash
   put item 1 to -2 of the filename of this stack into tPath
   put (tPath & slash & tImportFileName) into tFileName
   set the directory to tPath
   put the detailed files into tFiles
   # the file name is URL-encoded when using the detailed files 
   # we have to match the encoding here
   filter tFiles with URLEncode(tImportFileName) & "*"
   set the itemDel to comma
   put item 2 of line 1 of tFiles into tFileSize
   
   open file tFileName for read
   put empty into tReadResult
   put 0 into tAmountRead
   repeat while tReadResult is not "eof"
      read from file tFileName for 1024 # read 1k characters
      put the result into tReadResult
      put it after gFileContents
      add length(it) to tAmountRead
      # the following line updates the current position of the progress bar
      set the thumbPosition of scrollbar "Progress Scrollbar" to (tAmountRead/tFileSize)*100
   end repeat
   # if the file uses LF + CR to mark EOL it will be converted to just one of these
   # characters here
   # this means that tAmountRead is slightly smaller than tFileSize
   # compensate for this mismatch by setting the progress bar to 100
   set the thumbPosition of scrollbar "Progress Scrollbar" to 100
   close file tFileName
end mouseUp

The Export Button

As the file is already in memory, it is not necessary to calculate the download size. The export process writes to the file line by line from the internal memory buffer.

on mouseUp
   global gFileContents
   # the location of the target file
   # update this line as required
   local tFileName, tNumLines, tLineCounter, tExportFileName = "export_me.txt"
   set the itemDel to slash
   put item 1 to -2 of the filename of this stack into tPath
   put (tPath & slash & tExportFileName) into tFileName
   open file tFileName for write
   set the thumbPosition of scrollbar "Progress Scrollbar" to 0
   put number of lines of gFileContents into tNumLines
   put 0 into tLineCounter
   repeat for each line tLine in gFileContents
      add 1 to tLineCounter
      write tLine & return to file tFileName
      # the following line updates the current position of the progress bar
      set the thumbPosition of scrollbar "Progress Scrollbar" to (tLineCounter/tNumLines)*100
   end repeat
   
   close file tFileName
end mouseUp

Progress Bar Operation

The progress bar should be working now. Use the Import button to load a file into memory and use the Export button to write the file back out to the file system.

If you get an error something like

button "Import": execution error at line 30 (Operators /: divide by zero), char 1

check that the file exists in the same folder as the stack (or whichever folder you may have changed tPath to).

9 Comments

Regan

This is helpful but the code in the input button doesnt work properly, it keeps telling me to debugg this
" set the thumbPosition of scrollbar "Progress Scrollbar" to (tAmountRead/tFileSize)*100 " im not the greatest at codeing and have just started using live code at school, could you tell me what im doing wrong

Hanson Schmidt-Cornelius

Hi Regan,

you are getting this error message because tFileSize is not set. You need to specify the input file you want to load. You have to change the following lines in the code to point to a text file on your filesystem:

local tImportFileName = "C:/Users/DaveC/Documents/import_me.txt"

The following line has to be updated to point to a file you want to write:

local tExportFileName = "C:/Users/DaveC/Documents/export_me.txt"

Kind Regards,

Hanson

Francis Nugent Dixon

Great Stuff - takes the mystery out of file copies with a progress bar. Allows us to give that professional look to a file copy.

Thanks !

Ross Waumsley

When I test the import button this error comes up in the script window

button "Import": execution error at line 32 (Operators /: divide by zero), char 69

what do i need to do to fix the problem and what is the problem. I am new to coding and am struggling to fix it on my own.

Mark Wieder

See the comment about needing to select a file - what's happening is that the fileSize is 0, and so you're getting an error on the division. There are a few ways to do defensive coding to handle this situation. The easiest is to insert a line
after the line

put item 2 of line 1 of tFiles into tFileSize
-- insert this line
if tFileSize is 0 then exit mouseUp

Torsten Holmer

How can I find out the size of a file which is on the web? I need a classical download indicator like in Firefox

Elanor Buchanan

Hi Torsten

If you use libURLDownloadToFile to download your file you can use libURLSetStatusCallback to set a status message to be sent periodically while the file downloads. This message is sent with a parameter that inlcudes the status, downloaded bytes and total bytes which you can use to update a scrollbar.

Something along the lines of

on mouseUp pMouseButton
libURLSetStatusCallback "downloadUpdate", the long id of me
libURLDownloadToFile , , "DownloadComplete"
end mouseUp

on downloadUpdate pUrl, pStatus
set the endValue of scrollbar "progress" to item 3 of pStatus
set the thumbPosition of scrollbar "progress" to item 2 of pStatus
end downloadUpdate

Kind regards

Elanor

Sean Cole

Is it at all possible to change the colour of the bar?

Elanor Buchanan

Hi Sean

At the moment there is a not a property for the colour of the progress bar. You could add an enhancement request at

https://quality.livecode.com/

You can use the colorOverlay property to change the colour of the bar but it applies to the whole bar, not just the indicator so it might not give exactly the effect you are looking for.

Kind regards

Elanor

Add your comment

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