Jump to content
nark0t1k

Create Custom Progress Bar With Mark

Recommended Posts

Hey

I'm looking for making a custom progress bar with special part 

Somethink like this
winning.png

I already know how create progress bar and make it progress.
But i don't know how show a "custom color area" on it :/

Any help are welcome!

Share this post


Link to post
Share on other sites

You can change the colours in your base defines.

colorFrame[] = {0, 0, 0, 1};
colorBar[] =
{
		"(profileNamespace getVariable ['GUI_BCG_RGB_R', 0.13])",
		"(profileNamespace getVariable ['GUI_BCG_RGB_G', 0.54])",
		"(profileNamespace getVariable ['GUI_BCG_RGB_B', 0.21])",
		"(profileNamespace getVariable ['GUI_BCG_RGB_A', 0.8])"
};

I think you know this already but want to have the colour of the progress bar not fill the whole bar from the left. I don't think RscProgress supports that. You will have to make your own. You can use RscFrame and RscPicture and move it using ctrlSetPosition command.

Share this post


Link to post
Share on other sites

Quick example, probably needs cleaning up a little!

disableSerialization;

cutRsc ["RscTitleDisplayEmpty", "PLAIN"];
_display = uiNamespace getVariable "RscTitleDisplayEmpty";

_bar = _display ctrlCreate ["RscPicture", 100];
_bar ctrlSetPosition [(0.3 * safezoneW + safezoneX), (0.04 * safezoneH + safezoneY), (0.4 * safezoneW), (0.04 * safezoneH)];
_bar ctrlSetText "#(argb,8,8,3)color(0,0,0,0.75)";
_bar ctrlCommit 0;

_progress = _display ctrlCreate ["RscPicture", 200];
_progress ctrlSetPosition [(0.3 * safezoneW + safezoneX), (0.04 * safezoneH + safezoneY), (0.05 * safezoneW), (0.04 * safezoneH)];
_progress ctrlSetText "#(argb,8,8,3)color(1,1,1,1)";
_progress ctrlCommit 0;

_progressPosition = ctrlPosition _progress;
_progressPosition set [0, 0.86];
_progress ctrlSetPosition _progressPosition;
_progress ctrlCommit 1;

 

  • Like 1

Share this post


Link to post
Share on other sites

That look good :o but i need somethink like adjust a part of background color and keep using progress bar progress.


Main idea was:

Make a mini game, progress bar start to the left go to the right then come back to left side.


I'm ok about progress bar and move.
People need to press space barre to stop progress bar on the right place !
Then i need to modify a part of background color to tell to people "Try to stop here"

Look like your système use the active progress bar :/

Share this post


Link to post
Share on other sites

What? Sorry, I am not understanding you... The example in the video isn't a real progress bar (RscProgress) - see the code above.

Share this post


Link to post
Share on other sites

Yeah sorry for my poor english :/ try to do my best.

I saw your example but with this i can't use progressPosition (because it's not a progress bar ^^)

I need to have a progress bar with a small zone in different color like this
winning.png

 

Then i use basic progressbar systeme to move cursor from left to right then right to left and user need to press space bar to stop cursor in the small zone in different color.

But i also need to get start/end position from small zone in different color to check if user stop cursor in the right small zone.

I already do the progressbar, with moving cursor and press space to stop systeme but ... at the moment user just need to reach right side to "win"

When progress bar is stoped i use progressPosition to check where is stoped the bar and if he was more than 0.95.

Hope you understand :$

Share this post


Link to post
Share on other sites

You can create your own function using ctrlPosition  and ctrlSetPosition commands, etc... If you are a little lost / stick on how to do this, let me know. I am currently on my way home (typing on mobile) so can't give you anything 'code' yet.

Share this post


Link to post
Share on other sites

Just make the progress bar transparent (no background fill) and then use RscPictures behind it with a procedural texture of a solid color, one the whole length color orange and then another on top of that which is the blue bit.

@HazJ I think he is talking about something like, for example, Tiger Woods where the swing meter goes up and down but you have to stop the meter in the blue area. So, not shown in his image, the progress would go up and down separately above what he has shown, with just images behind (coloured areas) to mark where the user has to stop the progress.

Share this post


Link to post
Share on other sites

Yeah don't really need yellow color (transparent is ok)

But if i use RscPictures to colored a part of progress bar.

How can i  know where is the start/end coordonate?

0.5 was about 50% of progress bar
If i use RscPictures get position of start/end from progress bar coordonate
Example: If RscPictures start at 0.75 and end at 0.80 (THen user need stop cursor between 0.75 and 0.80) 

Share this post


Link to post
Share on other sites

I made this for you yesterday but couldn't post it as the forums were down for me.

disableSerialization;

params
[
	["_display", displayNull],
	["_controls", [controlNull, controlNull]],
	["_progress", 100],
	["_commitDelay", 1]
];

if (((_controls select 0) isEqualTo controlNull) || ((_controls select 1) isEqualTo controlNull) || (_display isEqualTo displayNull)) exitWith {};

_progressBar = _display displayCtrl (_controls select 0);
_progressMark = _display displayCtrl (_controls select 1);

_progressBarPosition = ctrlPosition _progressBar;
_progressMarkPosition = ctrlPosition _progressMark;

_progressBarPosition set [2, ((_progressBarPosition select 2) - (_progressMarkPosition select 2))];
_totalPercentage = (_progressBarPosition select 2);
_newValue = (_progressBarPosition select 0) + _totalPercentage * _progress / 100;
hintSilent format ["%1", _newValue];
copyToClipboard str (_newValue);
_progressMarkPosition set [0, _newValue];

_progressMark ctrlSetPosition _progressMarkPosition;
_progressMark ctrlCommit _commitDelay;
[(uiNamespace getVariable "RscTitleDisplayEmpty"), [100, 200], 25, 1] call TAG_fnc_setProgressPosition;

100 is the bar control IDC

200 is the progress mark control IDC

25 is the position (percentage - out of 100)
1 is the commit delay
No need to change values if you use other position x/y/w/h values, it does all this automatically - providing you supply the correct two control values!
[barIDC, markIDC]

Example mission:

https://1drv.ms/u/s!ArYSs9w5RSIDhD6jf7yVpXTfxOJs

4 hours ago, Larrow said:

Just make the progress bar transparent (no background fill) and then use RscPictures behind it with a procedural texture of a solid color, one the whole length color orange and then another on top of that which is the blue bit.

@HazJ I think he is talking about something like, for example, Tiger Woods where the swing meter goes up and down but you have to stop the meter in the blue area. So, not shown in his image, the progress would go up and down separately above what he has shown, with just images behind (coloured areas) to mark where the user has to stop the progress.

Oh, I see. I'll leave the code and example mission there in case anyone else needs it.

  • Like 1

Share this post


Link to post
Share on other sites
On 11/16/2017 at 3:12 PM, HazJ said:

Quick example, probably needs cleaning up a little!


disableSerialization;

cutRsc ["RscTitleDisplayEmpty", "PLAIN"];
_display = uiNamespace getVariable "RscTitleDisplayEmpty";

_bar = _display ctrlCreate ["RscPicture", 100];
_bar ctrlSetPosition [(0.3 * safezoneW + safezoneX), (0.04 * safezoneH + safezoneY), (0.4 * safezoneW), (0.04 * safezoneH)];
_bar ctrlSetText "#(argb,8,8,3)color(0,0,0,0.75)";
_bar ctrlCommit 0;

_progress = _display ctrlCreate ["RscPicture", 200];
_progress ctrlSetPosition [(0.3 * safezoneW + safezoneX), (0.04 * safezoneH + safezoneY), (0.05 * safezoneW), (0.04 * safezoneH)];
_progress ctrlSetText "#(argb,8,8,3)color(1,1,1,1)";
_progress ctrlCommit 0;

_progressPosition = ctrlPosition _progress;
_progressPosition set [0, 0.86];
_progress ctrlSetPosition _progressPosition;
_progress ctrlCommit 1;

 

Hi,

How to remove the progress bar from the screen after it has run?

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×