[TW Shrub]

Here is a quick "prototype" player window that I mocked up using the image attached to your post.

To preface this; I didn't spend much time on it so its pretty basic and just a bit "ugly". The graphics definitely need help but if you've got a better rendering of the graphics (which it sounds like you do) then that can be easily fixed.

It only has 3 bars instead of 4 because I couldn't think of what to do with the 4th bar but, again, that can be easily changed.

What you'll need to do to prepare the images is to export them to DDS format (there are plugins available for that). The final DDS image should sized in multiples of 8 (e.g. 128x128, 256x256, 512x512, etc.). I don't know if that's actually required but I find that things behave strangely if isn't.

The UI builder will really be helpful in positioning elements and doing the basic editing but I find that it often adds extra code automatically when you save it, especially if you have "run" the UI in the UI Builder. I always do a quick check of the actual code after saving it in the UI Builder to clear out anything that I don't need/want in the code.

One thing that tripped me up the first time I used the UI Builder is loading the UI right. When you load the UI you have to load the eq2ui.xml file rather than just opening the file you want to edit. That way it loads the whole UI and you get all the default stuff to work with. Then just locate the window you want to change in the element tree and start making changes. Never edit the files in the "default" folder (or "default blue") since they will just get overwritten on updating. Make a copy of the default folder and work from that.

There are probably (most likely) much better ways this could be done but I tried to keep it as straight-forward as possible. If you have any questions about what I did with this just let me know.