Chronwaas

Ok, Folks here is what I have been albe to decipher from the talks that Enok and I had to originally get this to work. This is going to be a long post so get some coffee or Coke and have a seat. Also not sure if this will all fit in a single post either so I may have to have multiple posts to get this all in.

First let me say the gauge that this is being used for this is of the following size in the UI itself:

<CX>123</CX>
<CY>50</CY>

That being said I will attempt to explain each part as I go along with the code to review for reference.

The first thing you will need to do is re-calculate your gauge size for the X part (horizontally). In this case, and this is my suggestion so as to make the math easier on yourselves, I used a multiplier of 100 so the size now becomes:

<CX>12300</CX>
<CY>50</CY>

The reason for this is so that later when we actually place the gauge in the UI it will more or less adjust with in the actually gauge size to make that color appear when we want it to.

The gause will actually be made up of three parts for the three colors I used. Red, Green and Yellow

>>>>>>
The following are the three gauge parts. I will explain each part as I go.

<Ui2DAnimation item = "SAL_LGaugeBackground_Enok_x100">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>0</X>
<Y>0</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This is the section that defines the primary/Full Health color section of the Gauge. As you can see the gauge size is 100x larger than the gauge will actually be.

>>>>>>
Here is the second gauge section for the yellow/warning section of the gauge.

<Ui2DAnimation item = "SAL_LGaugeFill_Enok3">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>-6150</X>
<Y>58</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This section defines the point at which the gauge changes to Yellow/warning color. As you can see the offset has been adjusted to -6150. The reason for this is so as to deal with the percentage I wanted to be at when the gauge changed color, in this case at 50% the gauge will change from Green to Yellow. You get this value by finding 50% of 12300 which is the Horizontal length of the Gauge. Then you offset to the negative so that it shows up as the gauge empties.

>>>>>>
Here is the Thrid section for the Gauge for the Red/Critical part of the Gauge.

<Ui2DAnimation item = "SAL_LGaugeFill_Enok1">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces051.tga</Texture>
<Location>
<X>-4059</X>
<Y>58</Y>
</Location>
<Size>
<CX>12300</CX>
<CY>50</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>

This section defines the point at which the gauge changes to Red/Critical color. As you can see the offset has been adjusted to -4059. The reason for this is so as to deal with the percentage I wanted to be at when the gauge changed color, in this case at 33% the gauge will change from Yellow to Red. You get this value by finding 33% of 12300 which is the Horizontal length of the Gauge. Then you offset to the negative so that it shows up as the gauge empties.

Ok that takes care of the Gauge Fill definition information. The next section I will explain presenting this info on the UI so that it works correctly.

I hope this has made at least some sense so far. If not it may make a little more sense when you add the next senction to the mix.

__________________
ChronWaas: 33 Bard, Saryrn
Chronania: 44 Necromancer, Saryrn

Chronwaas

Ok folks, Here is where things may get a little confusing. In order to actually make your gauge there are 5 total parts that have to be placed on the UI. One for the Background/Least Health gauge in this Case the Red for almost dead and two for each of the other colors that I used in this case Yellow for lower than half health and Green for full health. Now just to preface this I am not entirely sure nor was I able to get the full valid reason from Enok on why the partial gauge fills needed two sections each but I have my guesses as I will try to explain them as we go along.

Also as I stated before I am not entirely sure why this works or how but I am mearly giving my interpretation from my talks with Enok on the whole subject since there does not seem to be anyone else out there right now. But I do know that I have been able to replicate the process for all the UI's I have worked on regardless of the size or shape of the Gauge in question. So I know my understanding does work.

Also, as I go along in this installment notice in the code the references for which piece of the Definition codes from the last installment are being called for, for each section of the gauge.

First we have the background color of the Least Health Gauge part. This is the only part of the Gauge that is actually made like your original gauge. In fact in this case this is the Gauge as it was before Enok and I started work on getting it to change color. So as most of you already have the gauge for the full health the way you want it that will be this part. The only difference between this gauge part and your original gauge is that this is that last part of the gauge you want the user to see. So in my case since the last part before death on my gauge is red, this gauge part will be red.

<Gauge item = "Target_PlayerHP">
<ScreenID>TargetHP</ScreenID>
<Font>3</Font>
<TextColor>
<R>240</R>
<G>240</G>
<B>240</B>
</TextColor>
<RelativePosition>true</RelativePosition>
<Location>
<X>104</X>
<Y>30</Y>
</Location>
<Size>
<CX>123</CX>
<CY>50</CY>
</Size>
<GaugeOffsetY>0</GaugeOffsetY>
<TextOffsetX>-300</TextOffsetX>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference/>
<FillTint>
<R>240</R>
<G>0</G>
<B>0</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>A_GaugeBackground</Background>
<Fill>A_GaugeFill</Fill>
</GaugeDrawTemplate>
</Gauge>

As you can see in this code the Gauge size is the original size of 123 x 50 and the color has been set to Red. But because of the rest of the gauge parts this part of the gauge is not actually seen until the health gets to 33% or less. Prior to that one of the other sections of the Gauge is visible. Also notice that the GaugeOffset is set to 0 in this section of the gauge. This will be important later on. Other than the color of this gauge there is no difference (or at least there shouldn't be any difference) from your original Gauge. Notice the Background and Fill tags are the original gauge tags. I had gotten rid of the End caps and lines so that in my case it was just the bacground and fill parts. You may or may not be using those other parts of the gauges but I did not. If you are though you will have already taken that in to account with your offsets for example: if you used the end caps then your code should already be accounting for the fact that the end caps take up a certain amount of space in the gauge. So as to make this easier to explain I have removed those parts of the gauge so as not to confuse anyone even more than this may already be doing.

What this all means is that if you did not have the follow two sets of gauge parts the gauge would be red all the time.

>>>>>>
Here is the code for the Yellow section of the Gauge. Now for some reason as I stated earlier there are actually two parts to this gauge piece. My guess is that one is for the gauge start percentage and the other is for the point at which the gauge stops. What I do know is that both parts are needed for this to work right.

<Gauge item = "Target_PlayerHP_Enok1">
<Font>3</Font>
<TextColor>
<R>240</R>
<G>240</G>
<B>240</B>
</TextColor>
<RelativePosition>true</RelativePosition>
<Location>
<X>104</X>
<Y>30</Y>
</Location>
<Size>
<CX>40</CX>
<CY>50</CY>
</Size>
<GaugeOffsetX>-4059</GaugeOffsetX>
<GaugeOffsetY>0</GaugeOffsetY>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference/>
<FillTint>
<R>240</R>
<G>240</G>
<B>0</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>SAL_LGaugeBackground_Enok_x100</Background>
<Fill>SAL_LGaugeFill_Enok1</Fill>
</GaugeDrawTemplate>
</Gauge>

<Gauge item = "Target_PlayerHP_Enok2">
<Font>3</Font>
<TextColor>
<R>240</R>
<G>240</G>
<B>240</B>
</TextColor>
<RelativePosition>true</RelativePosition>
<Location>
<X>144</X>
<Y>30</Y>
</Location>
<Size>
<CX>83</CX>
<CY>50</CY>
</Size>
<GaugeOffsetX>-40</GaugeOffsetX>
<GaugeOffsetY>0</GaugeOffsetY>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference/>
<FillTint>
<R>240</R>
<G>240</G>
<B>0</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>A_GaugeBackground</Background>
<Fill>A_GaugeFill</Fill>
</GaugeDrawTemplate>
</Gauge>

I have highlighted the sections to take note of. Notice in the First part of the Code Piece the size of the Gauge part. In this case the Gauge piece is 40 in size which is 33% of the total gauge size. This is also the point at which the gauge changes from Red to yellow, which I will explain shortly. Also in the first part the GaugeOffsetX is the -4059 from the definition section explained in the last installment.

Notice in the second part of this code that the Location the gauge is to start at is now 144. This is over 40 from what the original part was and what the first part of this section of code was which was 104. This is to account for the Start of the Yellow part of the Code which is 33%. The size in the second part of this section of Code is 83 which is the rest of the fill pattern. You will notice that all of the code sections contain in some fashion the whole gauge. But since the only part of the gauge that is visible at the time is the correct color it does not matter. But the parts must add up to the whole. Now for theGaugeOffsetx for the second part of this section. The GaugeOffsetX is -40 which is the 33% mark.

What all this means so far is that if you did not have the next set of code pairs the gauge would start out yellow at full health and once the health got to 33% the gauge will change to Red. But because of the offsets and the placements of the pieces it works.

Also of note is that this last part of the code uses the same regular Background and fill parts that the original part used, the same as the Red piece did.

>>>>>>
This Next installment will explain the Green section of the Gauge.

Chronwaas

Here is teh third installment of the explaination of how this works. At least as best I can explain it anyway. Iam sure there are others out there that can do a far better job than I and perhaps after reading this will be able to.

>>>>>>
Here is the final set of Pieces. This is the set of pieces that shows the Green section of the Gauge. Again I have highlighted the parts to take note of.

<Gauge item = "Target_PlayerHP_Enok3">
<Font>3</Font>
<TextColor>
<R>240</R>
<G>240</G>
<B>240</B>
</TextColor>
<RelativePosition>true</RelativePosition>
<Location>
<X>104</X>
<Y>30</Y>
</Location>
<Size>
<CX>62</CX>
<CY>50</CY>
</Size>
<GaugeOffsetX>-6150</GaugeOffsetX>
<GaugeOffsetY>0</GaugeOffsetY>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference/>
<FillTint>
<R>0</R>
<G>240</G>
<B>0</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>SAL_LGaugeBackground_Enok_x100</Background>
<Fill>SAL_LGaugeFill_Enok3</Fill>
</GaugeDrawTemplate>
</Gauge>

<Gauge item = "Target_PlayerHP_Enok4">
<Font>3</Font>
<TextColor>
<R>240</R>
<G>240</G>
<B>240</B>
</TextColor>
<RelativePosition>true</RelativePosition>
<Location>
<X>166</X>
<Y>30</Y>
</Location>
<Size>
<CX>61</CX>
<CY>50</CY>
</Size>
<GaugeOffsetX>-62</GaugeOffsetX>
<GaugeOffsetY>0</GaugeOffsetY>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>false</Style_Transparent>
<TooltipReference/>
<FillTint>
<R>0</R>
<G>240</G>
<B>0</B>
</FillTint>
<DrawLinesFill>false</DrawLinesFill>
<EQType>1</EQType>
<GaugeDrawTemplate>
<Background>SAL_LGaugeBackground</Background>
<Fill>SAL_LGaugeFill</Fill>
</GaugeDrawTemplate>
</Gauge>


Since this is the top level section it is the green section for when your health is 50% or higher.

Notice in the first part of this section of code that the Gauge location is back to the 104 which is where it should be. Also the Size of this first part is 62 which is the 50% point for the gauge. Again that will be more significant in the second section of this part of the code. Also of note if the GaugeOffsetX of -6150 which is the value from before for the 50% mark of the 100X version of the gauge.

Notice in the second section of this code that the location is now 166 which is the original 104 plus 62 for the Gauge offset for the 50% mark. this is because the Green runs from 50% to 100%. Also the size of this part of this section is 61 which is the size of the green bar from 50% to the end at 123.

What all this means now that all three parts of the Full gauge have been define is that the Red gauge is the full par but is only seen from 33% down. The Yellow is the length from 33% to full but is only seen until 50% is hit and the Green is the length from 50% to 100%. So as the health goes down each of the different section will come into play as the section above them is no loger visible.

The last part of the entire process is the order in which the Pieces are placed in the Screen Item section of the code (which is the last section of the XML file where you list all the pieces in the order you want them placed. For this gauge to work correctly you have to make sure you place the pieces in the right order. In this case since the Red is the last part seen and therefore the bottom piece it goes first and then the yellow and finally the Green on top. The followin gis the listing from the Screen Item section of this window XML file in the correct order.

<Pieces>Target_PlayerHP</Pieces>
<Pieces>Target_PlayerHP_Enok1</Pieces>
<Pieces>Target_PlayerHP_Enok2</Pieces>
<Pieces>Target_PlayerHP_Enok3</Pieces>
<Pieces>Target_PlayerHP_Enok4</Pieces>


>>>>>>>>>>>>>>>>>>

As I stated in the first installment of this explaination this may or may not be exactly how Enok would have explained it, but since he is not around anymore I have explained it as best I could from all the talks that Enok and I had getting this code to work. As I said I have used this code in all the personal UI's I have created as well as in a couple UI's I created and placed in the download section many months ago. So I know the code works and I know my math works because I have used different sizes for the gauges as well. Some I used custom gauge graphics others I used the default graphics with the custom fill pattern I created here. If any one has a specific question on any part of this code I will be happy to answer it.

Also if anyone has a gauge graphic and they fell that this is above their head and would like I would be more than happy to give you a hand with the code for you gauge graphic to make is work for you.

I am sorry it has taken me so long to get this up but as you can see there was a lot of typing and code to go through to make sure I didn't leave anything out and that I made sure that it was understandable at least on some level.

And for those out there that might be wondering I am a math wiz and have been programming in many lagualges and styles for well over 20 years now. So while this makes sense to me and I have tried to explain it as best I could I know that at times I can be very high level in my explainations so don't hesitate to ask me a question I will be more than happy to try and explain it another way that might make more sense to you.

Chronwaas

Well since things are so quiet in here I will assume everyone is still trying this out.

If you have tried this and it worked then let me know. I did try it out before I wrote this up just to make sure I had it all right so I know it works. But I know my writing and I am looking to make sure I didn't leave anything out that might make it not work. Or if I did not explain a part well enough or clearly enough.

So if there is something that is not making sense then let me know.

Fyste

That's an incredibly good writeup, thank you! I'll try it tonight on my UI and let you know how I fare

Thanks again for ALL the work!

__________________

( My Interfaces ) ( RETIRED )

Nitefang

I'm new to xml and have been a bit intimidated by working with guages - as a result I have different guages all over my UI lol - this goes a long way to helping me understand how/why they work - I'll be digging into this and playing around with it for days now lol

Thanks again

Chronwaas

I am dieing to find out if you all had success or not? Let me know if I can help at all.

Turlo

Haven't quite gotten around to trying it yet. Got bombarded by some special requests, and had some requests by my guild leader to work on some web projects as well. I'll try to get my preliminary work done this week. I definitely look forward to trying it out.

scaevola

after a rest I'm back for more pain with renewed vigor. Any idea why Soes 1.6 opens in sidlwidl but only has access to 2 files? ExtraAnimations and Templates?

__________________

Scaevola Minderaser - Coercer of the 65th Season
Sceptered Isle
E70.500/Ve 5.8khp 8.0km ft25 G++++ e+++(++++) T+++++ o+ t++++ L-- H+(+++) f++(+++) g b+ c++++ D+ X

Haliken

I gotta say Chronwaas, that's a really good write-up. I followed your instructions and it worked like a charm.

The reason you use 2 gauges per color (except for the final color which is basically a normal gauge) is because one gauge covers up the "final color gauge" while the other actually slowly moves down like a normal gauge. In other words, one gauge for yellow covers up from 0% to 33% while the other goes from 33% to 100%.

The reason there are huge gauges (the yellow gauge that covers from 0% to 33%) is you only want a 1% cross-section of a gauge to actually cover that distance (from 0% to 33%), so that when that percent is passed, the whole thing vanishes at once and the gauge underneath is revealed.

Ask questions, I'd be happy to answer them, and if what I just explained wasn't clear, say so. I'll try to come up with a different perspective of explanation.

I'm gonna go stop by Elezibeth's threads to say hello and apologize for having been gone so long. I'm considering writing a follow-up guide to this one to explain how I use the default gauge graphics in a color changing gauge; if anyone would want that, leave something saying so.

Enok

Chronwaas

Glad to see you are back. I hope I did justice to your original coding. Course I made a few changes to it for this right up to make it a little simpler. Glad to see you are still around and I hope I gave you enough credit since you were the one that did all the explaining to me in the first place.

scaevola

I just spent the last 4 hours with iffy results of retroviting the soes mod to fit my group window.. yet I'm getting errors I can't seem to fix. Any suggestions or ideas?

Its driving me off the wall!!

Attached Files

equi_groupwindow.xml (71.9 KB, 5 views)

scaevola

I'm also thinking people trying to use soes to retro fit maybe not the best one to use. Soes modified the eqgui.xml


here are my errors. any help appreciated.

Attached Files

uierrors.txt (11.5 KB, 9 views)

Feebbwin

Excellent tutorial. However, can't seem to get it to work. Would it be possible for yu to add the gauge to the default Target of Target window and post the xml so hopefully I could copy and paste it into mine without a lot of changes?
Thanks,
Feebb