EQ2Interface

EQ2Interface (https://www.eq2interface.com/forums/index.php)
-   UI Developer Discussion (https://www.eq2interface.com/forums/forumdisplay.php?f=3)
-   -   Circular progress meters, the hard way (https://www.eq2interface.com/forums/showthread.php?t=1713)

ger 03-03-2005 11:08 AM

Circular progress meters, the hard way
 
4 Attachment(s)
Be very afraid of the things I decide to do to kill time at work. ;) Very (VERY) large circular health meter as a proof of concept for circular progress bars. In order to try it out you'll need to add an include to your eq2ui_mainhud.xml for the eq2ui_mainhud_health.xml, then just /show_window MainHUD.Health. The alignment of the progress bars isn't perfect, but it's good enough to show that the idea works in practice. Enjoy!

P.S. I may, at some point, turn this into a player window mod...I've got an idea for the layout, but after doing all the math required to get this thing working right I'm in no hurry to do it again. ;)

Edit: Special thanks to Perdition for pointing me in the right direction with the progress bar styles and Deathbane27 for helping me rid myself of the annoying overhang problem I was having.

perdition 03-03-2005 11:38 AM

Great job :)

Would like to make some tests with bigger health (smaller hole in the middle)

ger 03-03-2005 12:51 PM

1 Attachment(s)
The math would be different, and you'd need more "foreground" images to block overlapping portions of the progressbars, but the theory remains the same.

For myself, my end goal is something like the mockup image attached to this message.

Jerry 03-03-2005 01:12 PM

Wow!
 
This looks really cool!

I am impressed that you did it! I imagine this will be in high demand once it gets to looking like your mock-up!

Talyns 03-03-2005 01:36 PM

2 Attachment(s)
Here's another proof of concept.. Empty's Differnt and doesn't use a overlay..



Install it the same way as the first post if you want to check it out..

ger 03-03-2005 01:53 PM

Ah...very interesting approach, Talyns. I was thinking of how to do it with resizable progress bars, but I think I like your approach better. :)

Drumstix42 03-03-2005 02:08 PM

so does it only update every 25% or does it still slowly deplenish as you take damage?

Talyns 03-03-2005 02:42 PM

It slowly empties..

Talyns 03-03-2005 03:06 PM

Quote:

Originally Posted by ger
Ah...very interesting approach, Talyns. I was thinking of how to do it with resizable progress bars, but I think I like your approach better. :)

Missed this b4.. Hmm Can you make progress bars resizible in game? I never tried.. If you can you might be able to make my configuration resizable.. Not sure though, lol..

Glad ya like it.. I started looking into this a week ago when another post metioned it.. But couldn't get it working, I didn't think it was possible.. Your post convinced me otherwise :)

Kosmos 03-03-2005 03:16 PM

Pretty Cool ger!

Are you using the the code for the HO's Window?

That has ciruclar progress bar also. doesn't it?

ger 03-03-2005 03:20 PM

I didn't mean resizeable in-game so much as in the underlying code. If I understand your code correctly, each guage would have to be coded at actual size, meaning you'd have to define image and progressbar sets for every size. I was shooting for a model where the image and progressbar definitions are only done once but the code for the rest of the objects changes. I think in the long run your method saves on a lot of really annoying math.

ger 03-03-2005 03:30 PM

Quote:

Originally Posted by Kosmos
Pretty Cool ger!

Are you using the the code for the HO's Window?

That has ciruclar progress bar also. doesn't it?

It's hard to explain in text, but I'll give it a shot. What I did was to arrange 5 progress bars in a square pattern, each one displaying a portion of its total range. So bar1 (0 degrees to -45 degrees, empties from right to left, top-left segment) displays the top 12.5% of a full health progressbar, the rest is set transparent in the DDS. Bar2 (-45 degrees to -135 degrees, empties from top to bottom, left segment) displays the next 25% of a health progressbar with the first 12.5% and the last 62.5% transparent. Bar3 (-135 degrees to -225 degrees, empties from left to right, bottom segment) displays the next 25% of a health progressbar, with the first 37.5% and the last 37.5% transparent. Bar4 (-225 degrees to -315 degrees, empties from bottom to top, right segment) displays the next 25% of a health progressbar with the first 62.5% transparent and the last 12.5% transparent. The last bar, bar5 (-315 degrees to 0 degrees, empties from right to left, top-right segment) displays the final 12.5% of a health progressbar, with the rest set transparent.

As each individual bar moves out of its own visible areas the next one moves into it, giving the illusion of one continuous bar instead of the 5 individual bars it actually is. Each bar is a rectangular area, but the masked overlay only displays a semi-circular portion of each progressbar, again giving the illusion of a single, circular progressbar.

Hope that made some kind of sense.

Drumstix42 03-03-2005 03:53 PM

The 2nd paragraph makes most sense to me :)

Kosmos 03-03-2005 04:11 PM

Quote:

Originally Posted by ger
It's hard to explain in text, but I'll give it a shot. What I did was to arrange 5 progress bars in a square pattern, each one displaying a portion of its total range. So bar1 (0 degrees to -45 degrees, empties from right to left, top-left segment) displays the top 12.5% of a full health progressbar, the rest is set transparent in the DDS. Bar2 (-45 degrees to -135 degrees, empties from top to bottom, left segment) displays the next 25% of a health progressbar with the first 12.5% and the last 62.5% transparent. Bar3 (-135 degrees to -225 degrees, empties from left to right, bottom segment) displays the next 25% of a health progressbar, with the first 37.5% and the last 37.5% transparent. Bar4 (-225 degrees to -315 degrees, empties from bottom to top, right segment) displays the next 25% of a health progressbar with the first 62.5% transparent and the last 12.5% transparent. The last bar, bar5 (-315 degrees to 0 degrees, empties from right to left, top-right segment) displays the final 12.5% of a health progressbar, with the rest set transparent.

As each individual bar moves out of its own visible areas the next one moves into it, giving the illusion of one continuous bar instead of the 5 individual bars it actually is. Each bar is a rectangular area, but the masked overlay only displays a semi-circular portion of each progressbar, again giving the illusion of a single, circular progressbar.

Hope that made some kind of sense.


Yes, I understand what you are saying.

The Heroic Oportunity window that pops up has a circular progress bar on it.
I haven't even looked to see if we even have a file for that window.
But seems like you might be able to use something in there.
That's a pretty neat idea the way you worked it thouugh.
I was thinking something like that might be possible for the compass also, but decided there was not enough demand for a round compass.

not to mention the other issues involed with that.
I'll stick to the stuff I think people can use on a daily bases.

Your a real glutten for punishment with this project!!
lol

Zonx 03-03-2005 05:00 PM

Quote:

Originally Posted by Talyns
Hmm Can you make progress bars resizible in game?

Yes, progress bars can be dynamically stretched ingame. My XPExtreme mod has this capability.

My upcoming release includes a WAY slicker version of the XP window, though its not round ;)

Talyns 03-03-2005 06:37 PM

Quote:

Originally Posted by ger
I didn't mean resizeable in-game so much as in the underlying code. If I understand your code correctly, each guage would have to be coded at actual size, meaning you'd have to define image and progressbar sets for every size. I was shooting for a model where the image and progressbar definitions are only done once but the code for the rest of the objects changes. I think in the long run your method saves on a lot of really annoying math.

Hmm I'm not 100% sure you would need different styles and images for different sizes..

It uses 3 images for Horizontal PBs that are 480x120

and 2 images for Vertical PBs that are 120x480..

as long as you kept the ratios for the sizes 1/4 and 4/1 the same and reposistioned it corectly it should work..

What I mean is if you change the Size of all the vertical PBs to say 60x240 and reposistion it correctly.. Then change the sizes of the horizontal PBs to 240x60 and reposistioned them correctly.. They should look ok..

However if you wanted one to empty clockwise and another to empty counter clockwise you would need another set of images and styles..

Again not 100% sure.. I will check it out if I get a chance..

Talyns 03-03-2005 06:39 PM

Quote:

Originally Posted by Zonx
Yes, progress bars can be dynamically stretched ingame. My XPExtreme mod has this capability.

Good to know, thanks.. I thought I read somewhere it wasn't possible.. Never tried myself..

Quote:

Originally Posted by Zonx
My upcoming release includes a WAY slicker version of the XP window, though its not round ;)

Inter-resting : ponders :

Deathbane27 03-03-2005 06:52 PM

Quote:

Originally Posted by Kosmos
The Heroic Oportunity window that pops up has a circular progress bar on it.
I haven't even looked to see if we even have a file for that window.
But seems like you might be able to use something in there.

Don't bother. The HO window doesn't use any actual progress bars, it's just a bunch of image segments with a Visible property change.

Talyns 03-03-2005 07:29 PM

1 Attachment(s)
Quote:

Originally Posted by Talyns
Hmm I'm not 100% sure you would need different styles and images for different sizes..

It uses 3 images for Horizontal PBs that are 480x120

and 2 images for Vertical PBs that are 120x480..

as long as you kept the ratios for the sizes 1/4 and 4/1 the same and reposistioned it corectly it should work..

What I mean is if you change the Size of all the vertical PBs to say 60x240 and reposistion it correctly.. Then change the sizes of the horizontal PBs to 240x60 and reposistioned them correctly.. They should look ok..

However if you wanted one to empty clockwise and another to empty counter clockwise you would need another set of images and styles..

Again not 100% sure.. I will check it out if I get a chance..

Here's an example:
I shrunk the actual images in half (The sizes above).. I made 2 different sized gauges from one set of images and PB styles..

Installed like first post again:

ger 03-03-2005 08:56 PM

2 Attachment(s)
Well, it seems this is going to be a bit of a bloatpost since I made 2 styles (one for health, one for power) when I only needed one. Oh well. Ladies and gentlemen, to my knowledge, the first fully functional circular-progress mod. (I don't think I'll be using it personally, but it was a lot of fun to make it)

Talyns, I ended up using your version since it's just so much easier to manipulate than mine. :D

Edit: Oops, ignore the ammo window shown in the screenshot--that's Sunthas' ammo window overlaid on the player window. I forgot to Photoshop it out when I cropped the screenshot.


All times are GMT -5. The time now is 07:28 AM.

vBulletin® - Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.
© MMOUI