Radial / Circular progress bar

[miguel93041 0]

Hello people. I've been wondering if it is possible to make a circular progressbar.

I've struggled on a circular icon and make a progress  bar that fills it but its not possible because the bar its a rectangle, any idea or advice?

[pierremgi 4944]

Sure, you can do that with displays. I don't use any progress bar, only icons or IGUI paa:

like "A3\ui_f\data\IGUI\cfg\TankDirection\gun_gs.paa"

  or "A3\ui_f\data\IGUI\cfg\HelicopterHUD\altimeter_value_ca.paa" (for a vertical bar).

 

You have to display or draw on each frame , and along with your current value from 0 (start) to 1 (completed).

 

There are plenty of methods; So here is a simple code to display a part of red ring depending on a value MGI_progress (global variable) to pass inside the event handler:

I'm drawing one dot per degree, 180° for half ring , for 0.5 state value:

0 = [] spawn {
  progress = 0.5;
  addMissionEventHandler ["Draw3D", {
    for "_i" from 0 to progress*360 do {
      drawIcon3D ["A3\ui_f\data\map\VehicleIcons\iconexplosiveat_ca.paa", [1,0,0,1], (player modelToWorld [0 + 2* sin (_i),100,0+ 2* cos (_i)]) ,1,1,360,"",0, 0.1,"EtelkaMonospacePro"]
    }
  }]
};

Test it in debug console. Read drawIcon3D

[miguel93041 0]

1 hour ago, pierremgi said:

Sure, you can do that with displays. I don't use any progress bar, only icons or IGUI paa:

like "A3\ui_f\data\IGUI\cfg\TankDirection\gun_gs.paa"

  or "A3\ui_f\data\IGUI\cfg\HelicopterHUD\altimeter_value_ca.paa" (for a vertical bar).

 

You have to display or draw on each frame , and along with your current value from 0 (start) to 1 (completed).

 

There are plenty of methods; So here is a simple code to display a part of red ring depending on a value MGI_progress (global variable) to pass inside the event handler:

I'm drawing one dot per degree, 180° for half ring , for 0.5 state value:

0 = [] spawn {
  progress = 0.5;
  addMissionEventHandler ["Draw3D", {
    for "_i" from 0 to progress*360 do {
      drawIcon3D ["A3\ui_f\data\map\VehicleIcons\iconexplosiveat_ca.paa", [1,0,0,1], (player modelToWorld [0 + 2* sin (_i),100,0+ 2* cos (_i)]) ,1,1,360,"",0, 0.1,"EtelkaMonospacePro"]
    }
  }]
};

Test it in debug console. Read drawIcon3D

 

Thank you but is there any method to make it 2D like a dialog? because i want to do a HUD.

[pierremgi 4944]

49 minutes ago, miguel93041 said:

 

Thank you but is there any method to make it 2D like a dialog? because i want to do a HUD.

Did you test it? 3D doesn't imply moving on the screen. With this kind of coordinate (modelToWorld) your display is as an HUD.

One other method is to use some displays declared in class rscTitles in description.ext (mission) or config.cpp (addon)  then cutRsc command + ctrlSetText / ctrlSetPosition...

I used both methods for mine. The first one is far easier for what you want.

[miguel93041 0]

28 minutes ago, pierremgi said:

Did you test it? 3D doesn't imply moving on the screen. With this kind of coordinate (modelToWorld) your display is as an HUD.

One other method is to use some displays declared in class rscTitles in description.ext (mission) or config.cpp (addon)  then cutRsc command + ctrlSetText / ctrlSetPosition...

I used both methods for mine. The first one is far easier for what you want.

Yes i have tested it but what i wanted to say its that it isn´t STATIC, if you move your screen from up to down it stays where you have set the position, i´m going to test the second way.

 

UPDATE: Never mind, positionCameraToWorld solve it.

[pierremgi 4944]

46 minutes ago, miguel93041 said:

UPDATE: Never mind, positionCameraToWorld solve it.

Yep, sorry for that. I let modeToWorld instead of positionCameraTo world... You need some far distance to avoid distortion, but it's OK.

0 = [] spawn {progress = 0.5; addMissionEventHandler ["Draw3D", {for "_i" from 0 to progress*360 do { drawIcon3D ["A3\ui_f\data\map\VehicleIcons\iconexplosiveat_ca.paa", [1,1,0,1], (AGLToASL positionCameraToWorld [0 + 1000* sin (_i),0+ 1000* cos (_i),50000] ) ,1,1,360,"",0, 0.1,"EtelkaMonospacePro"]}}]}

[pierremgi 4944]

You can also rotate an icon like this little bar: "A3\ui_f\data\IGUI\cfg\TankDirection\gun_gs.paa" , giving it a direction f(_i) instead of 360 of 6th parameter of drawIcon3D.

So you can imagine several colored radius instead of a part of ring.

[miguel93041 0]

11 hours ago, pierremgi said:

You can also rotate an icon like this little bar: "A3\ui_f\data\IGUI\cfg\TankDirection\gun_gs.paa" , giving it a direction f(_i) instead of 360 of 6th parameter of drawIcon3D.

So you can imagine several colored radius instead of a part of ring.

Every time you spawn a draw3D it lags more and more... and when i want to use 3 and other for interactions its not a way. You know why?

[killzone_kid 1333]

you can rotate picture control with https://community.bistudio.com/wiki/ctrlSetAngle

[pierremgi 4944]

9 hours ago, miguel93041 said:

Every time you spawn a draw3D it lags more and more... and when i want to use 3 and other for interactions its not a way. You know why?

Be sure to avoid stacking same EH. For example a loop with a framed EH inside. You'll always have a loss of FPS with your own displays but not drastically if you manage the EHs.

I, or someone, could perhaps help if you post your code.

[fn_Quiksilver 1636]

19 hours ago, killzone_kid said:

you can rotate picture control with https://community.bistudio.com/wiki/ctrlSetAngle

 

rotation =/= progress

[killzone_kid 1333]

13 hours ago, fn_Quiksilver said:

 

rotation =/= progress

 

you will need one to make progress bar

[Larrow 2828]

Depends what you want the actual display to look like.

If you have a background then its quite easy, as KK says use ctrlSetAnge to rotate something that reveals an image for your circular progress bar. Sorry but its easier to show than explain download see player action prog_rotate.

 

If you want it transparent on the screen (like BIs holdAction) than you need multiple ctrls or images for each percentage completed (hence the reason BIs holdAction has 24 steps, as there are 24 different images to represent percentage complete) see player action prog_images.

[miguel93041 0]

Yep i find a way out, with a circle splited into 45 parts

 

but now i have this problem everything work fine but it don´t set the text for the hud

 

private ["_hud","_vidabar","_vida","_vidaceil","_vida45"];

//

_vida = (1 - (damage player));
_vida45 = _vida * 45;

_vidaceil = ceil _vida45;

disableSerialization;

_hud = uiNameSpace getVariable "hud";

_vidabar = _hud displayCtrl 93105;

//

_vidabar ctrlSetText format ["dialog\textures\hud_%1.paa",_vidaceil];

//

hint format ["VIDA %1",(_vidaceil)]; // DEBUG MODE

 

If you test the debug mode it shows the correct number and everything but the hud don´t update when i call it.

I think it is because of disableSerialization but i have tested findDisplay with uiNameSpace do etc and i can´t get it to work.

 

Here´s the dialog.

 

class hud
{
	idd = 93048;
	duration = 10e10;
	movingEnable = 0;
	enableSimulation = 1;
    fadein = 0;
    fadeout = 0;
    name = "hud";
    onLoad = "with uiNameSpace do { hud = _this select 0 }";
	
	class controls
	{
		class vida_imagen: RscPicture
		{
			idc = 93049;

			text = "dialog\textures\vida.paa";
			x = 0.799062 * safezoneW + safezoneX;
			y = 0.896 * safezoneH + safezoneY;
			w = 0.04125 * safezoneW;
			h = 0.0594 * safezoneH;
		};
		class vida_bar: RscPicture
		{
			idc = 93105;

			text = "";
			x = 0.799062 * safezoneW + safezoneX;
			y = 0.896 * safezoneH + safezoneY;
			w = 0.04125 * safezoneW;
			h = 0.066 * safezoneH;
		};
	};
};

 

It sets the bar when i inicializate it via this script so it´s not the picture.

//setup

cutRsc ["hud", "PLAIN", 2, false];

And yeah i included it in RscTitles

[miguel93041 0]

same issue with another dialog i´ve created i need help

[Larrow 2828]

How are you actually calling your code from above? You show the ui and your cutRsc for dispaying the hud but you do not show how you call your update code.

Can you provide a test mission so we can see where you maybe going wrong?

[miguel93041 0]

16 minutes ago, Larrow said:

How are you actually calling your code from above? You show the ui and your cutRsc for dispaying the hud but you do not show how you call your update code.

Can you provide a test mission so we can see where you maybe going wrong?

 

here it is: http://www.mediafire.com/file/xz7muhtu4q1xf4x/Testmission.Stratis.zip

 

You can check in the init i have done a EH and it works perfect, it refresh the life in the hud, but not the hunger and thirst

[miguel93041 0]

Still error

[Larrow 2828]

Check your IDC numbers in fn_hudUpdate.sqf you have errors in them. e.g 930104 instead of 93104

 

Here is a version I have moved around to cleaned up the logic a bit.

[miguel93041 0]

1 hour ago, Larrow said:

Check your IDC numbers in fn_hudUpdate.sqf you have errors in them. e.g 930104 instead of 93104

 

Here is a version I have moved around to cleaned up the logic a bit.

 

Thank you now it works, it was that little mistake.