progress bar tutorial

Warning:
This tutorial covers only Tiny Mobile Widgets versions.
On Mobile Widgets, use Loader, LoaderMini or ProgressBar prototype.

This chapter present the Tiny Mobile Widgets propress bar.
Tiny Mobile Widgets provide a progress bar component. Developer can display this progress bar into popup.

example

Note:
Progress bar require popup.
See popup tutorial to display and use popup.

Tiny Mobile Widgets progress bar is displayed via a Message on the "Board" channel.

Browser.sendMessage ('Board', 'PROGRESS', progress);

progress: progression value (between 0 and 100)
See "Board" channel chapter for more information about parameters.

Note:
Popup is required to display progress bar (see popup tutorial).

We create a popup to ask if user would quit widget.
We close popup after 5 seconds.
A progress bar displays the time left before closing popup.

Note:
We use a TimeSensor node.

Add TimeSensor node

Define TimeSensor node. TimeSensor interval is 5 secondes.

DEF TIMER_HIDE TimeSensor { cycleInterval 5 isActive FALSE }

And declare TimeSensor node in script node.

DEF SCRIPT Script {
  ...
  field SFNode TIMER_HIDE USE TIMER_HIDE
  ..
}

Use TimeSensor to close the popup

Link TimeSensor node and hide popup function.

ROUTE TIMER_HIDE.cycleTime TO SCRIPT.hidePopup

Modify hide popup function to use the time sensor

"cycleTime" event return a SFTime value.
Change hidePopup event type to SFTime.

eventIn SFTime hidePopup

Start TimeSensor

Launch TimeSensor when popup is opened.
To launch TimeSensor, we active the TimeSensor and we define the start time to current time.

Note:
current time is a "data_changed" function parameter

//Function of 'data changed' event
function data_changed (val,now) {
  ...
  if (key == 'RSK') {
    //Right softkey: Close widget, display confirmation popup
    Browser.sendMessage ('Board', 'POPUP', 'Quit', 'Close the widget?', 'Yes', 'No', 'warning');
    //Wait for 5000ms (5 secondes) before hide popup
    TIMER_HIDE.isActive = true;
    TIMER_HIDE.startTime = now;
  }
  ...
}

Create event to catch progression

TimeSensor return progression with fraction_changed event (return a SFFloat value).
In JavaScript, we add an event to catch fraction_changed.

eventIn SFFloat moveProgressBar

Create function to process event

We would change progress bar when TimeSensor send fraction_changed event.

Note:
fraction_changed return a value between 0 and 1. Progress bar use value between 0 and 100.

//Move progress bar function
function moveProgressBar() {
  //Move progress bar
  var pos = (moveProgressBar * 100);
  Browser.sendMessage ('Board', 'PROGRESS', pos);
}

Link fraction_changed event and moveProgressBar() function

ROUTE TIMER_HIDE.fraction_changed to SCRIPT.moveProgressBar

Group {
    children [

        # Node to read messages on "Board" channel
        DEF MESSAGE Message { url "Board" }

        # Time sensor (to hide the popup)
        DEF TIMER_HIDE TimeSensor { cycleInterval 5 isActive FALSE }

        # Script
        DEF SCRIPT Script {
            # Define 'data changed' event
            eventIn MFString data_changed
            eventIn SFTime hidePopup
            eventIn SFFloat moveProgressBar
            field SFNode TIMER_HIDE USE TIMER_HIDE
            url "
            // Widget initialization
            function initialize () {
              // Initialize widget
              Browser.sendMessage ('Board', 'INIT', 'My Widget', '', 'Quit');
            }

            //Function of 'data changed' event
            function data_changed (val,now) {
              //Read event key
              var key = data_changed[0];
              //Message data are stored in 'data_changed'
              if (key == 'RSK') {
                 //Right softkey: Close widget, display confirmation popup
                 Browser.sendMessage ('Board', 'POPUP', 'Quit', 'Close the widget?', 'Yes', 'No', 'warning');
                 //Wait for 5000ms (5 secondes) before hide popup
                 TIMER_HIDE.isActive = true;
                 TIMER_HIDE.startTime = now;
              } else if (key == 'ANSWER') {
                //Popup response
                var popupResult = data_changed[1];
                if (popupResult == 'LSK') {
                  //'Yes' (left softkey) : Close widget
                  Browser.print('YES - Close the widget');
                  Browser.sendMessage ('Board', 'RESET');
                } else if (popupResult == 'RSK') {
                  //'No' (Right softkey) : Do nothing
                  Browser.print('NO - Do nothing');
                }
              }
            }
            //Hide popup function
            function hidePopup() {
              //Send hide popup message to Manager
              Browser.print ('hidePopup '+hidePopup);
              Browser.sendMessage ('Board', 'POPUP_AUTO_HIDE');
            }
            //Move progress bar function
            function moveProgressBar() {
              //Move progress bar
              var pos = (moveProgressBar * 100);
              Browser.sendMessage ('Board', 'PROGRESS', pos);
            }
            "
        }

        # Link "Board" channel and Javascript event
        ROUTE MESSAGE.data_changed TO SCRIPT.data_changed

        # Link SensorTime and Javascript functions
        ROUTE TIMER_HIDE.fraction_changed to SCRIPT.moveProgressBar
        ROUTE TIMER_HIDE.cycleTime TO SCRIPT.hidePopup

    ]
}