simple 'loading' circle

[Chris]

I am hoping someone could share the code to produce a small simple circle that is spinning.... like the one when DroidScript starts, or in a ProgressBar popup.

I tried to cheat and use a .gif - HA that didn't work, it didn't animate.

[Chris Hopkin]

Hi Chris

DroidScript can show a spinning progress indicator and message using app.ShowProgress("Loading..."), and app.HideProgress() to hide.

If you want something more configurable, there are existing progress bar HTML controls that can be used within a WebView. See this thread for an example:

https://groups.google.com/d/msg/androidscript/WZR9p-Xfajs/pOlrZsG0BQAJ

Thanks

Chris

[Steve Garman]

Or you can use an image.

This quickly hacked from a progress dialog I wrote to display progress percentage. You will probably want to make changes.

In the demo, touch the circle to stop it.

var prog
//Called when application is started.
function OnStart()
{
    //Create a layout with objects vertically centered.
    var lay = app.CreateLayout( "linear", "FillXY" );    

    //Create a button and add it to layout.
    var btn=app.CreateButton("Start");
    btn.SetOnTouch( btn_OnTouch );
    lay.AddChild(btn);

    //Create an image in its own dialog
    prog = createProgress( 0.3, true );
    prog.noNumbers=true
    prog.SetOnTouchDown(debugExit);

    //uncomment lines below to change settings
    //prog.mainColor="#ff000088";
    //prog.paintColor="#ff88ffff";
    //prog.textSize=10;
    //prog.lineWidth=5
    //////////////
   
    //Add layout to app.    
    app.AddLayout( lay );
}

//makeDialog defaults to false
function createProgress(size,makeDialog)
{
    var width, height;
    var ratio = app.GetDisplayWidth() /
        app.GetDisplayHeight();
    if (ratio >= 1) // landscape
    {
        width = size / ratio;
        height = size;
    }
    else
    {
        width = size;
        height = size * ratio;
    }
    var img = app.CreateImage( null, width, height );
    img.width=width;
    img.height=height;
    img.cl=0.5-width/2;
    img.ct=0.5-height/2;
    //these properties can be set externally.
    img.mainColor= "#00000000"; //transparent
    img.paintColor = "#ffffffff" ;
    img.lineWidth = size * 60;
    img.textSize = size * 60;;
    img.noNumbers=false
    //////////////////
    img.interval=null
    img.intervalcount=0
    img.dialog=null
    img.SetAutoUpdate(false);
    if(makeDialog)
    {
      img.mainColor="#ff000088"; //not transparent
      var progress=app.CreateDialog("","NoTitle,NoxCancel");
      var layprog=app.CreateLayout("Linear","");
      layprog.AddChild(img);
      progress.AddLayout(layprog);
      img.dialog=progress;
    }
    //public function to draw arc and show dialog if needed
    img.setPercent=function(percent)
    { 
      img.Clear();
      img.SetColor(img.mainColor);
      img.SetPaintColor( img.paintColor );
      img.SetPaintStyle( "Line" );
      img.SetLineWidth( img.lineWidth );
      img.DrawArc(.1,.1,.9,.9, 269, percent*3.6);
      img.SetTextSize(img.textSize);
      img.SetLineWidth(1);
      if(percent && ! img.noNumbers)
        img.DrawText(percent.toFixed(0),.35,.55);
      img.Update();
      if(img.dialog && img.dialog.Visibilty != "Show")
          img.dialog.Show();
   }
   //public function to hide the dialog if there is one
   img.hide=function()
   {
       if(img.interval)
          clearInterval(img.interval);
       if(img.dialog) img.dialog.Hide();
       img.Clear();
   }
   //public function to increment
   img.countUp=function()
   {
       var val = (++ img.intervalcount) ;
       val = val % 100;
       img.setPercent(val);
       img.intrervalcount=val;   
   }

   return img;
}

//test the progress dialog
function btn_OnTouch() 
{ 
    clearInterval(prog.interval);
    prog.interval=setInterval (function(){prog.countUp()},10);    
} 

function debugExit()
{
    var msg = "Your app should normally use"+
    "\nprog.hide()\n\nHide it now?"
    if( confirm(msg))
       prog.hide();
}

[Chris]

Steve, THANK YOU. But, few questions. Setting the size to 0.1 or 0.2 throws the 'width' out of whack. It leaves like a space on the side of the image.

Second, how do I place this within a layout (so it isn't floating in the center?)

Thank you

[Steve Garman]

prog = createProgress( 0.3, false );

will give you an image instead of a dialog. You can just put than in a layout.

That may also work a bit smaller.

[Chris]

It works perfect. THANK YOU.

I'm so use to php this custom object in javascript is really making my mind hurt. :)