Create a progress bar depending on a var's value

[cybercoco 16]

I'm interested in creating a progress bar. At the moment I'm using this simple loop to display a countown.

_counter = 21;
     while { _counter > 1} do { 
     hint "";
     _counter = _counter - 1;
     hint format ["%1", _counter];
     sleep 1;
     hint "";
     };
hint "finished";

The progress bar would fill up as the value would approach the value 0.

I don't understand a thing on this page from the wiki.

 

Thank you,

 

C.Coco

[seed 11]

Here are couple links that can help you out.

 

The first link contains an actual example of a progress bar made by Ranwer135

1. https://forums.bistudio.com/topic/183514-is-custom-gui-element-creation-possible/?hl=progress#entry2896366

 

The second link is all about dialogs and stuff, made by Iceman77

2. https://forums.bistudio.com/topic/136734-dialog-tutorial-for-noobs-by-a-noob/

 

Hope those two links can help you out.

 

Regards

 

Seed

 

[cybercoco 16]

Thank you Seed, I'll try to do it as soon as I can.

[R3vo 2654]

description.ext

class RscProgress
{
    type = 8;
    style = 0;
    colorFrame[] = {0,0,0,1};
    colorBar[] = {1,1,1,1};
    texture = "#(argb,8,8,3)color(1,1,1,1)";
    w = 1;
    h = 0.03;
};
class myProgressBar//dialogue name
{
    idd = 10;
    onLoad = "uiNamespace setVariable ['my_awesome_progressBar',_this select 0]"; //Save the display in the uiNamespace for easier access
    class Controls
    {
        class Progress: RscProgress
        {
            idc = 11;
            x = 0;
            y = 0.3;
        };
    };
};

script.sqf

createDialog "myProgressBar"; //open dialogue with dialogue name
_control = (uiNamespace getVariable "my_awesome_progressBar") displayCtrl 11;//save the control into a variable for easier use 

_counter = 21;
while { _counter > 1} do {
    _counter = _counter - 1;

    _progress = progressPosition _control;
    _control progressSetPosition (_progress + (1/_counter));
    hint format ["%1", _counter];
    sleep 1;
};
hint "finished";

 

[cybercoco 16]

Thank you R3vo for taking the time !

 

Do I test/debugg it with this :

cutRsc ["MyProgressBar","PLAIN"];

[Lala14 135]

actually you could just use ctrlCreate, that will save you with the entries in the description.ext and also people should be able to still move and such.

[cybercoco 16]

-snip-

 

Doesn't work, it says :

 

Variable '_control' does not support serialization. Call 'disableSerialization' in current script

[R3vo 2654]

Doesn't work, it says :

 

Strange that I didn't get that error.

Add

disableSerialization;

at the top of the script

 

Do I test/debugg it with this :

cutRsc ["MyProgressBar","PLAIN"];

 

 

That's for RscTitles, use createDialog instead, or try the method lala14 explained.

[cybercoco 16]

Strange that I didn't get that error.

Add

disableSerialization;

at the top of the script

 

 

That's for RscTitles, use createDialog instead, or try the method lala14 explained.

 

Working fine now, thanks.

 

actually you could just use ctrlCreate, that will save you with the entries in the description.ext and also people should be able to still move and such.

 

Do I need to delete something from R3vo's code snip ?

[cybercoco 16]

I realise that it's only doing it for 12 sec and not 20... Why is that ?

Also is there a way to change the size of the progress bar, and can I make the intervals between the loops smaller (for a more fluid animation) ?

[Lala14 135]

Here is an example of my method

-script-

with uiNamespace do { 
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1]; 
    my_awesome_progressBar ctrlSetPosition [ 0, 0.3 ]; 
    my_awesome_progressBar progressSetPosition 0; 
    my_awesome_progressBar ctrlCommit 0; 
}; 
_counter = 21; 
for "_i" from 1 to _counter do { 
    (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition (_i/_counter); 
    hint format ["%1", _i]; 
    sleep 1; 
}; 
ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

[R3vo 2654]

I realise that it's only doing it for 12 sec and not 20... Why is that ?

Also is there a way to change the size of the progress bar, and can I make the intervals between the loops smaller (for a more fluid animation) ?

The 12 secs is caused by a mathematical mistake on my side. Check out lala14's example above. He used a for loops which makes it way easier.

 

Easiest way to make the animation more fluid is probably to increase the counter, for example, use counter 42 instead of 21 and set sleep to 0.5. Time stays the same but the steps are doubled.

[Larrow 2828]

Another option..

with uiNamespace do {
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1];
    my_awesome_progressBar ctrlSetPosition [ 0, 0.3 ];
    my_awesome_progressBar progressSetPosition 0;
    my_awesome_progressBar ctrlCommit 0;

    [ "TIMER", "onEachFrame", {
        params[ "_start", "_end" ];
        _progress = linearConversion[ _start, _end, time, 0, 1 ];
        (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition _progress;
        if ( _progress > 1 ) then {
            [ "TIMER", "onEachFrame" ] call BIS_fnc_removeStackedEventHandler;
        };
    }, [ time, time + 20 ] ] call BIS_fnc_addStackedEventHandler;
};

[cybercoco 16]

 

Here is an example of my method

-script-

with uiNamespace do { 
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1]; 
    my_awesome_progressBar ctrlSetPosition [ 0, 0.3 ]; 
    my_awesome_progressBar progressSetPosition 0; 
    my_awesome_progressBar ctrlCommit 0; 
}; 
_counter = 21; 
for "_i" from 1 to _counter do { 
    (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition (_i/_counter); 
    hint format ["%1", _i]; 
    sleep 1; 
}; 
ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

Thank you all for the help, this snip goes in the sqf file, right ?

 

Do I need this

class RscProgress
{
    type = 8;
    style = 0;
    colorFrame[] = {0,0,0,1};
    colorBar[] = {1,1,1,1};
    texture = "#(argb,8,8,3)color(1,1,1,1)";
    w = 1;
    h = 0.03;
};
class myProgressBar//dialogue name
{
    idd = 10;
    onLoad = "uiNamespace setVariable ['my_awesome_progressBar',_this select 0]"; //Save the display in the uiNamespace for easier access
    class Controls
    {
        class Progress: RscProgress
        {
            idc = 11;
            x = 0;
            y = 0.3;
        };
    };
};

in description.ext ?

 

I have notived that the dialog can be closed, is there a way to avoid that ?

 

C.Coco

[R3vo 2654]

For larrows way to don't need to put my snippet into the description.ext. You basically create a dialog on the fly.

 

If you don't want a player do be able to close the dialogue, I'd suggest you use RscTitles.

class RscTitles
{    
    class Default
    {
        idd = -1;
        fadein = 0;
        fadeout = 0;
        duration = 0;
    };
    class myProgressBar//dialogue name
    {
        idd = 10;
        onLoad = "uiNamespace setVariable ['my_awesome_progressBar',_this select 0]"; //Save the display in the uiNamespace for easier access
        movingEnable = 0;
        name = "my_awesome_progressBar";
        fadein = 0;
        fadeout = 0;
        duration = 99999;
        enableSimulation = 1;
        enableDisplay = 1;
        class Controls
        {
            class Progress: RscProgress
            {
                idc = 11;
                x = 0;
                y = 0.3;
            };
        };
    };
};

Or you use larrow's way and remove the last line, which deletes the control after the progress bar is full.

[cybercoco 16]

 

Another option..

with uiNamespace do {
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1];
    my_awesome_progressBar ctrlSetPosition [ 0, 0.3 ];
    my_awesome_progressBar progressSetPosition 0;
    my_awesome_progressBar ctrlCommit 0;

    [ "TIMER", "onEachFrame", {
        params[ "_start", "_end" ];
        _progress = linearConversion[ _start, _end, time, 0, 1 ];
        (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition _progress;
        if ( _progress > 1 ) then {
            [ "TIMER", "onEachFrame" ] call BIS_fnc_removeStackedEventHandler;
        };
    }, [ time, time + 20 ] ] call BIS_fnc_addStackedEventHandler;
};

 

Thank you Larrow, this is working nicely.

 

Do you know how to center it ? I tried to center it by changing the values of the start corrdinates and succeeded but if I use this snip for another countdown timer it will need some modifications...

 

I have noticed that the color of the bar matches the color theme of the game (set in profile preferences).

Is it possible to change the color and add a border line ?

 

 

For larrows way to don't need to put my snippet into the description.ext. You basically create a dialog on the fly.

 

Or you use larrow's way and remove the last line, which deletes the control after the progress bar is full.

 

I can't get the thing to disappear after it's full. Even after removing "[ time, time + 20 ] ] call BIS_fnc_addStackedEventHandler;"...

You mean Lala14's code snip : "ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");" ?

-EDIT- Bar is deleted after completion with the ctrlDelete command.

ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

However, I didn't make R3vo's code work...

[cybercoco 16]

Easiest way to make the animation more fluid is probably to increase the counter, for example, use counter 42 instead of 21 and set sleep to 0.5. Time stays the same but the steps are doubled.

Yes indeed, I made a small modification to Lala14's code to find the best multiplier for a fluid animation :

// Quickly and easily testing different multiplier 
_master = 15;
_timer = 20*_master;
_interval = 1/_master;

with uiNamespace do { 
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1]; 
    my_awesome_progressBar ctrlSetPosition [ 0.345, 0.3 ]; 
    my_awesome_progressBar progressSetPosition 0; 
    my_awesome_progressBar ctrlCommit 0; 
}; 
_counter = _timer; 
for "_i" from 1 to _counter do { 
    (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition (_i/_counter); 
    // hintsilent format ["%1", _i];
    sleep _interval; 
}; 
ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

Maybe Larrow's solution is more optimized than this loop, what do you think ?

[R3vo 2654]

Use Larrow's or lala14's version. For the one I posted you'll needer further gui knowledge which is a huge topic.

[cybercoco 16]

Thank you for the help R3vo, Larrow and Lala14 !

 

 

I have noticed that the color of the bar matches the color theme of the game (set in profile preferences).

Is it possible to change the color and add a border line ?

[R3vo 2654]

You can use https://community.bistudio.com/wiki/ctrlSetTextColorto change the fill colour. Not sure if you can change the colour of the frame on the fly. I do that by changing

colorFrame[] = {0,0,0,1};
colorBar[] = {1,1,1,1};

in the progress bar defines.

[cybercoco 16]

I managed to change the color of the progress bar. Will try your method for the colorframe.

[cybercoco 16]

Adding this to the description.ext file doesn't work

class RscProgress
{
    type = 8;
    style = 0;
    colorFrame[] = {0,0,0,1};
    colorBar[] = {0,0,0,1};
    texture = "#(argb,8,8,3)color(1,1,1,1)";
    w = 1;
    h = 0.03;
};

Edited January 2, 2016 by cybercoco

[cybercoco 16]

I can't get the bar to be more fluid. Looks like the sleep command doesn't work bellow 1...

with uiNamespace do {
    my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1];
    my_awesome_progressBar ctrlSetPosition [ 0.345, 0.3 ];
    my_awesome_progressBar progressSetPosition 0;
    my_awesome_progressBar ctrlCommit 0;
    my_awesome_progressBar ctrlSetTextColor [0.4,0.804,0,1];
};

for "_i" from 1 to 20 do {
  (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition (_i/20);

  hintsilent format ["%1%2", round(5*_i), "%"]; //debugg
  sleep 1; //interval
};

ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

If I set _counter = 20*100 and sleep 0.01 it won't work.

Edited January 10, 2016 by cybercoco

[R3vo 2654]

with uiNamespace do {
  my_awesome_progressBar = findDisplay 46 ctrlCreate ["RscProgress", -1];
  my_awesome_progressBar ctrlSetPosition [ 0.345, 0.3 ];
  my_awesome_progressBar progressSetPosition 0;
  my_awesome_progressBar ctrlCommit 0;
  my_awesome_progressBar ctrlSetTextColor [0.4,0.804,0,1];
};

_counter = 200;
for "_i" from 1 to _counter do {
  (uiNamespace getVariable "my_awesome_progressBar") progressSetPosition (_i/_counter);

  hintSilent format ["%1%2", _i * 100 /_counter, "%"]; // debugg //shows 0-100% now ;)
  sleep 0.01; // interval
};

ctrlDelete (uiNamespace getVariable "my_awesome_progressBar");

Works fine for me.

[cybercoco 16]

I get the counter from 0 to 100 % in ~46 secs

Then if I do it again without restarting the scenario, I get 20sec ???!!!