UI Color Theme Builder for SWGEmu

tatwi

Member
Joined
May 31, 2012
Messages
66
Description:
This is a browser based javascript tool designed to help people create ui color themes more easily (than manually changing the values). It also gives the user the ability to save their variables (to a text file on their computer and load them in again another day).

Purpose:
To make choosing UI colors easier, faster, and more visual.

Function:
Generates theme code that can be pasted into one's ui_palette_ground.inc file. Does not effect the space UI theme.

Requires:
I can verify that it works in Google Chrome 72!

UPDATE: 2019.03.14
I finally got around to updating this tool! I know it's not great, but it's better than nothing and it gets the job done.

New for version 19.0:
  • Accepts input of the standard SWG XML palettes (from ui_styles.inc / ui_palette_ground.inc), one at a time.
  • Preloaded with all the default SWG palettes, plus 4 of mine, and one all grey one for testing.
  • Uses a simple table to store/load preloaded palettes (in themes.js).
Download it here,

https://github.com/Tatwi/swgemu_ui_color_theme_builder

You're welcome to submit feedback on GitHub for it.
 
Last edited:

DavinFelth

Administrator
Staff member
Administrator
Joined
Aug 29, 2010
Messages
165
RE: [Tool] UI Color Theme Builder for SWGEmu

Very, very nice, seems simple and easy to use and it should make creating themes a lot more accessible to everyone, good work! :)

One suggestion for the future: Would it be possible to have a graphic representation of the ui that shows what the changes would look like in-game? That would truly make this tool complete IMO though it could perhaps be quite fiddly and difficult to pull off... I know little about web programming :)

Great to see a new tool though and I particularly like that it's web based! :D
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [Tool] UI Color Theme Builder for SWGEmu

DavinFelth said:
Very, very nice, seems simple and easy to use and it should make creating themes a lot more accessible to everyone, good work! :)

One suggestion for the future: Would it be possible to have a graphic representation of the ui that shows what the changes would look like in-game? That would truly make this tool complete IMO though it could perhaps be quite fiddly and difficult to pull off... I know little about web programming :)

Great to see a new tool though and I particularly like that it's web based! :D
Thank you for your kind words!

I just uploaded a major revamp of the layout. My goal was to show all the colors in an easier to use manner, with all of them on the screen at the same time. I also added in a drop down for 5 theme templates to help people get started (I can add more easily and the all grey one is great for testing, as it is playable and it shows how the game darkens some colors by adding grey to the value entered - 14 shades darker for the skillAquiredSelected field, for instance). The field names now show in the tooltips when you mouse over the color and the font of the color changes in size to help you know which one you're looking at. It's a lot more intuitive and should show up nicely on any screen 1024x768 or larger.

As far as having a graphic preview feature, I am working on it, but it is going to take a while for me to learn what all the 190 ish values do. Without that knowledge, I can't really emulate the UI. It may be a while before that is completed. I do have an idea about how to learn the ui elements quickly, which will hopefully work out as nicely in reality as it does in my imagination... :)
 

Tonberry

Inactive Staff
Joined
Aug 30, 2010
Messages
372
RE: [Tool] UI Color Theme Builder for SWGEmu

From someone who is working on web dev coursework this very second this is a nice submission. The only thing I was going to comment on was what davin mentioned. I think to really make this tool convenient an image representation of at least a chatbox or some other common window from the UI is needed.

Though based on how I'm thinking about it, I imagine that could be a lot of work. :p
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [Tool] UI Color Theme Builder for SWGEmu

Tonberry said:
From someone who is working on web dev coursework this very second this is a nice submission. The only thing I was going to comment on was what davin mentioned. I think to really make this tool convenient an image representation of at least a chatbox or some other common window from the UI is needed.

Though based on how I'm thinking about it, I imagine that could be a lot of work. :p
Indeed. I've spent about 9 hours loading in all gray themes with only a handful of colors, to determine what all of the values do, which has definitely added a bit of reality to the thought of recreating the ui for use in a visual preview. They simply have so many elements it would take a long time program the same thing again. At the moment, I really have no idea what the best way to make on would be, especially with the heavy use of gray blending they have on most windows and elements; I am not sure I could get that to be accurate, as I am not an artist or color expert.

What would be infinitely helpful is if someone found a way to force the game to reload the ui_pallette_ground.inc file without having to restart the game. That would be the best way to preview: Run the game in windowed mode, paste code into the file, save file, tell the game to reload the file into, enjoy! Of course, that doesn't help if you can't run the game at the time.

As far as programming the visual preview goes, I am thinking that I will have just one screen shot and it will open to 1024x768 when pressing one of the 8 picture buttons in the title area of the page. The picture buttons will represent one or two UI sections each. I'll put the colors in by using a div that has a white-gray screenshot of the subject ui elements in question and then overlap the areas I want to color with alpha blended div background colors. This would all me to blend colors fairly accurately (conveniently using the color values stored in the array directly) while saving me from having to make a new ui that looks like all of the ui artwork in the game. It would also be an easy solution to the game adding grey blending to so many elements. But... I don't know yet if this would actually work (and I am not looking forward to writing that style sheet!). I am open to suggestions! ;)

Anyhow, most of the description tool tips should be updated before Tuesday and they are quite verbose, like me. :) Certainly better than nothing until I work out the visual preview.
 

Tonberry

Inactive Staff
Joined
Aug 30, 2010
Messages
372
RE: [Tool] UI Color Theme Builder for SWGEmu

Your solution to the visuals using a grayscale cutout of UI elements and then overlaying it with a coloured div is actually what I was thinking as well. It may be worth researching if there is anything out there which is capable of recoloring a grayscale image live, since that would probably be slightly better visually and then you'd save the frustration writing that style sheet will likely come with. :p

I don't know if there's a script of some kind capable of doing this on the fly, but I'm 100% sure the canvas feature in HTML5 can. You may want to look into that if you haven't considered it. :)
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [Tool] UI Color Theme Builder for SWGEmu

Updated

Notes:

13.01.07
- Added new default theme, Midnight Blue.
- Cleaned up the drop down menu html by removing an unused class.
- Added descriptions in the tooltips for all the values I could determine (which took several hours of effort).
- Added a close button to color swath selector pop up by adding {pickerClosable:true} to all the class="color" tags in theme_builder.html.
- Eliminated redundant theme loading function called themeLoader(form)
- theme_builder.js Line 17 - Changed function templateLoader(theme) to function templateLoader(theme, preLTrue, userLoadedTheme) so that it can accept the data sent to it from the Input Variables window to load a theme.
- templateLoader now checks to see if a preloaded theme is being loaded or if the user is inputing one.
- cleaned up the the code that changes the color selector values, which was required to accomodate the close button above (and it's four times more effecient this way).
- Made changes to toop tips
- tooltip/script.js - Changes to prevent the tooltips from going off the viewable area of the screen. Noted in the file comments.
- tooltip/style.css - Changed background, text, and border color. Made formatting consistent with my style.
- theme_builder.css - input: hover now has a 3px red border to match tool tips and make it easier to tell which value one is looking at.
- Created a significantly better help section at the bottom of the page.
- Reduced the file size of the "preview" images by 10 times.
- Declared the tool be GNU Lesser General Public Licensed, the same as the JSColor tool that it is based upon.
- Validated fine as XHTML 1.0 Transitional.
- Tested in Opera 12.12, Firefox 17.0.1, Google Chrome 23.0.1271.97 m, Internet Explorer 9.0.8112.16421.

-----------------

This update is essentially "version 1.0" of the tool. It's completely functional for what I initially intended to create. You can use it make themes with confidence.

The next thing I will be adding is a preloaded theme for all of the default and community generated themes. There will not be any new features until I figure out how I'd like to add the visual preview (or visual building mode).

Take care and thanks for the feedback!

- Tatwi
 

Valkyra

Member
Joined
Aug 31, 2010
Messages
211
RE: [Tool] UI Color Theme Builder for SWGEmu

I posted this on the emu boards, looks very nice thank you
 

Tonberry

Inactive Staff
Joined
Aug 30, 2010
Messages
372
RE: [Tool] UI Color Theme Builder for SWGEmu

Looking great. The latest update has really complimented the layout revamp you did. I'll definitely be waiting around to see how you go about implementing some form of visual aid in the future. :)

I actually just had a look through some of the code and I must say this is the type of thing which inspires me to get off my arse and do something. I am a web/software student after all. xD
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [Tool] UI Color Theme Builder for SWGEmu

So I have decided, after a year and half, that I will update this tool a little bit in the next week or so. I am not going to make any visual pre-view, because it's more work than it's worth, but I will make the following changes:

1. Add all the default color schemes to drop down.
2. Make Rebel Flight Suits the default scheme, as it is the easiest to modify (change orange to something else, BAM new look and feel! lol...)
3. Fill some of the tool tips that are unknown, as I have found out what a few more values actually do.

Not the world's most amazing tool, but still it works. :)
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [Tool] UI Color Theme Builder for SWGEmu

2014.08.04 Updates:
- Removed my custom themes from the preloaded templates.
- Removed unused images.
- Added Rebel Flight Suits, Protean, and Alpha Blue preloaded templates.
- Fixed the broken and old download links.
- Added a date showing the last update.

I'll add more of the default SWG themes to preloaded themes later this month. The default themes are slightly different than the community themes I built the tool to support so there is a bit of fiddling required to add them. Anyhow, I figure having more in the list to choose from will make it easier to build derivative works.
 

tatwi

Member
Joined
May 31, 2012
Messages
66
RE: [NOT MAINTAINED] UI Color Theme Builder for SWGEmu

Sorry folks, I took down my personal server hosting to save some money so this web tool is no longer hosted online. However, you can download it from my OneDrive here,

https://onedrive.live.com/?cid=B3E6CE0644F53EE8&id=b3e6ce0644f53ee8%214716

themebuilder.zip

Just extract it and open the theme_builder.html with a web browser.
 

Viaron

Member
Joined
Jul 13, 2012
Messages
189
RE: [NOT MAINTAINED] UI Color Theme Builder for SWGEmu

tatwi said:
Sorry folks, I took down my personal server hosting to save some money so this web tool is no longer hosted online. However, you can download it from my OneDrive here,

https://onedrive.live.com/?cid=B3E6CE0644F53EE8&id=b3e6ce0644f53ee8%214716

themebuilder.zip

Just extract it and open the theme_builder.html with a web browser.
OP and thread title updated.
 

Kevdo

New Member
Joined
Apr 28, 2012
Messages
6
Does anyone have the most recently updated version of this tool? I have the version 13.01.07, but I'm looking for the one Tatwi updated on 2014.08.04 or newer. In the newer versions, the default templates were changed to the ones in game. That would help figure out what some of these unknown boxes do.
 

Himalayas

Member
Joined
Jan 19, 2016
Messages
106
Have you looked at the one on EQSanctum? I'm not sure what version that is, or try reaching out to some of the community membes on Discord; someone might have it handy!
 

tatwi

Member
Joined
May 31, 2012
Messages
66
I finally got around to updating this tool! I know it's not great, but it's better than nothing and it gets the job done.

New for version 19.0:
  • Accepts input of the standard SWG XML palettes (from ui_styles.inc / ui_palette_ground.inc), one at a time.
  • Preloaded with all the default SWG palettes, plus 4 of mine, and one all grey one for testing.
  • Uses a simple table to store/load preloaded palettes (in themes.js).
Download it here,

https://github.com/Tatwi/swgemu_ui_color_theme_builder

You're welcome to submit feedback on GitHub for it.
 
Top Bottom