Create Progress Bar in your Netgem application

Posted By : Raman Joshi | 20-Aug-2014

netgem

In this blog I am going to tell you that how we can use the progress bar in our Netgem application. In this we use a simple progress bar with a background and foreground bar, one other simple progress bar with an additionnal loading bar and five other progress bar which are drawn with generic thema.

Now first show you the code in thema.json file which define a pBar member that inherits from "Progress Bar" default member. You can see all the main members of "Progress Bar" (i.e "fg", "bg" and "loading").

The member "bg" is used for the background of the progress bar.
The member "fg" is used for the foreground bar (progressing bar). It has a "padding" property relative to the background bar.
The member "loading" inherits from "fg" and has a "stripes" property (set to true). It is used for the loading bar of the progress bar.

 
"pBars<@progressBar": {  
    "bg": {  
        "rx":8  
    },  
    "fg": {  
        "padding": 2,  
        "rx":8  
    },  
    "loading



The Progress bar are defined by two or more sub-objects (i.e "bars"). First bar is the background bar which object doesn't need a ratio (keep only the custo object).

The second bar object shows a ratio of the progress bar.

For instance, a downloading movie progress bar can show:

A background bar

A download progression stripy bar

A player bar (will appear whithin the download bar)

 
var custo        = this.themaData.pBars,  
    custoBg      = custo.bg,  
    custoLoading = custo.loading,  
    custoFg      = custo.fg,  
    w            = this.width,  
    margin       = pBarData.margin;  
  
// Define the progress bar bounds in pbar thema  
var pbarBounds = new Rect(margin, (margin + 50), (w-(margin*2)), 18); // x, y, w, h  
  
// Draw a simple pbar  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.6, "custo":custoFg}  
);  
  
// Only for animation simulation purpose  
// (the drawPbars function is called every 50 ms with refresh() )  
var ratio = pBarData.curRatio += pBarData.incrementRatio;  
  
if (ratio >= 1)  
    ratio = 1; // 1 is the maximal value  
else if (ratio <= 0)  
    ratio = 0;  // 0 is the minimal value  
  
var ratioFg = ratio * 0.4;  
  
// Draw a pbar with a stripy loading bar  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg}, // bg  
    {"ratio":ratio,   "custo":custoLoading},  
    {"ratio":ratioFg, "custo":custoFg}  
);  
  
// Inverse progress  
if (ratio == 1 || ratio == 0)  
    pBarData.incrementRatio = - pBarData.incrementRatio;

Here are drawn the five generic progress bars with nude thema coming from generic thema.

The fg custo has four defined states:, "download", "free" "warning" and "alert".

 var custo = this.themaData.genPBars,  
    custoBg = custo.bg,  
    custoFg = custo.fg;  
  
// Draw a pbar with default state  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.16, "custo":custoFg}  
);  
  
// Draw a pbar with download state  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.33, "custo":custoFg.getState("download")}  
);  
  
// Draw a pbar with free state  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.50, "custo":custoFg.getState("free")}  
);  
  
// Draw a pbar with warning state  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.66, "custo":custoFg.getState("warning")}  
);  
  
// Draw a pbar with alert state  
pbarBounds.y += margin;  
this.drawNewProgressBar(ctx, pbarBounds,  
    {"custo":custoBg},  
    {"ratio":0.83, "custo":custoFg.getState("alert")}  
);

Thanks