EQInterface Forums - Color Changing Gauges

10-12-2006, 04:28 AM	#1
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	Color Changing Gauges How do you make like a gauge that goes from Green(100%) to Yellow(75% to 50%) to Red(25% to Dead)?

10-12-2006, 05:26 AM	#2
Haliken Quintessence of EQUI XML Join Date: Sep 2002 Posts: 773	To do that would require 5 gauges, carefully overlapped with specialized graphic definitions. Your first gauge would be a normal gauge simply colored red. The next two would be for the yellow period. Assuming a full gauge is 100 pixels wide, one would need to be 75 pixels wide (but with a -25 gauge X offset), and be located 25 pixels right of the left edge of the base gauge. The second of these two would be a 25 pixel wide cross-section of a multiple thousand pixel wide gauge; this is so as soon as you drop below 25% this whole segment would vanish revealing the red gauge below. Both of these would be colored yellow. The last 2 would be for the green period. One would need to be 25 pixels wide (but with a -75 gauge X offset), and be located 75 pixels right of the left edge of the base gauge. The second of these two would be a 75 pixel wide cross-section of a multiple thousand pixel wide gauge; this is so as soon as you drop below 75% this whole segment would vanish revealing the yellow gauge below. Both of these would be colored green. Seeing it explained out is likely very confusing sounding, but that's the methodology behind it. The truth of the matter is it's 5 gauges, stacked in 3 layers. Enok

10-12-2006, 05:19 PM	#3
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	lol Geez, a lot of work involved... I've only made very basic mods, and I've love to learn how to make a gauge, the only problem is, I'm not a very artistic person. lol

10-14-2006, 01:05 PM

orthanos

A Ghoul

Join Date: Sep 2002

Server: Bristlebane

Posts: 12

Quote:

Originally Posted by Haliken

To do that would require 5 gauges, carefully overlapped with specialized graphic definitions.

Your first gauge would be a normal gauge simply colored red.

The next two would be for the yellow period. Assuming a full gauge is 100 pixels wide, one would need to be 75 pixels wide (but with a -25 gauge X offset), and be located 25 pixels right of the left edge of the base gauge. The second of these two would be a 25 pixel wide cross-section of a multiple thousand pixel wide gauge; this is so as soon as you drop below 25% this whole segment would vanish revealing the red gauge below. Both of these would be colored yellow.

The last 2 would be for the green period. One would need to be 25 pixels wide (but with a -75 gauge X offset), and be located 75 pixels right of the left edge of the base gauge. The second of these two would be a 75 pixel wide cross-section of a multiple thousand pixel wide gauge; this is so as soon as you drop below 75% this whole segment would vanish revealing the yellow gauge below. Both of these would be colored green.

Seeing it explained out is likely very confusing sounding, but that's the methodology behind it. The truth of the matter is it's 5 gauges, stacked in 3 layers.

Enok

Haliken, Great explaination on how to do it. I was wondering the same thing and your instructions were great and I was able to follow them and here is the result.

I only used 3 gauges though, my gauge is 115 wide and the math was driving me NUTS!!! hehee

I think I got it right.

Attached Images

multicolor_pw.jpg (15.5 KB, 14 views)

10-14-2006, 01:17 PM	#5
Inokis Pale Scrawny Guy Join Date: Sep 2003 Server: Bristlebane // Erollisi Marr Posts: 920	Nice work on implementing your color change, but wouldn't it be just as easy to make a background with the colorations? __________________

10-14-2006, 06:12 PM	#6
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	When you refer to -25 offset what are you meaning? lol I haven't made any gauges or graphics for the UI, so I have NO idea.

10-14-2006, 06:39 PM	#7
Haliken Quintessence of EQUI XML Join Date: Sep 2002 Posts: 773	Gauges have a <GaugeOffsetX> (and Y) value that let's you shift the gauge within its own boundaries. Setting <GaugeOffsetY> to -25 will shift the gauge 25 pixels left outside of its own boundaries, rendering those 25 pixels invisible. Enok

10-14-2006, 06:43 PM	#8
Haliken Quintessence of EQUI XML Join Date: Sep 2002 Posts: 773	Orthanos, by leaving out the 2 gauges I described as cross-sections of a thousand pixel wide gauge, you left the yellow and red colors exposed at all times. While it definitely doesn't look bad, your gauge doesn't change colors, it's simply a multicolored gauge made up of multiple gauges. That is good in its own right though. I guess I need to whip up an XML tutorial for this since just explaining the concept leaves out a lot of the trickier math... Enok

10-14-2006, 07:02 PM	#9
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	Would each gauge have to be the full width of the actual gauge? Hope this makes sense, couldn't think of how to word it.

10-14-2006, 07:50 PM

#10

orthanos

A Ghoul

Join Date: Sep 2002

Server: Bristlebane

Posts: 12

Quote:

Originally Posted by Haliken

Orthanos, by leaving out the 2 gauges I described as cross-sections of a thousand pixel wide gauge, you left the yellow and red colors exposed at all times. While it definitely doesn't look bad, your gauge doesn't change colors, it's simply a multicolored gauge made up of multiple gauges. That is good in its own right though.

I guess I need to whip up an XML tutorial for this since just explaining the concept leaves out a lot of the trickier math...

Enok

Ahhh, I was wondering about that. the x offset is not set in my ui, So I added it. but I was confused with the cross-sections of a thousands pixel wide thing...

10-14-2006, 09:00 PM

#11

Egras

A Lost Soul

Join Date: Mar 2005

Posts: 418

Quote:

Originally Posted by laeadil

Would each gauge have to be the full width of the actual gauge? Hope this makes sense, couldn't think of how to word it.

Stack them atop and just make each color version shorter and shorter. Its what I do on EgrasUI to save me from making a custom colored bar just for the life.

__________________

10-16-2006, 07:48 PM	#12
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	lol Since this thread already has a decent # of posts, I figured I'd ask this question here.. how do I add a button to a window? I tried typing stuff in, etc, but nothing happened.

10-17-2006, 10:18 AM	#13
Inokis Pale Scrawny Guy Join Date: Sep 2003 Server: Bristlebane // Erollisi Marr Posts: 920	Buttons don't work when adding them to other windows, besides the parent window.

10-20-2006, 10:17 PM	#14
laeadil A Hill Giant Join Date: Feb 2003 Posts: 31	Now if I wanted to make a gauge, would the sizes be? Like to replace HP gauge in my group window?

10-21-2006, 07:58 PM	#15
Egras A Lost Soul Join Date: Mar 2005 Posts: 418	Look in windowspieces##.tga files. The default gauge is in there.