Hello There, Guest! Login Register


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tool] UI Color Theme Builder for SWGEmu
#1
Wink 
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:
A web browser is required to use this tool. I have verified it to function correctly in Opera 12.12, Firefox 17.0.1, Google Chrome 23.0.1271.97m, and Internet Explorer 9.0.8112.16421. However, the output in IE9 is not formated with new line after each element, which is hard to look at, but otherwise works fine. I personally use Opera, because it's awesome.

Note:
This tool is a work in progress, in that I have not populated the description of each ui element name, as I have yet to figure out what all them actually DO in SWGEmu UI. I am also working on making a simple visual preview overlay for the screen shot area, which is why that area exists. All in good time! Big Grin

Hosted at:
https://onedrive.live.com/?cid=B3E6CE064...ee8%214716

Download the latest version here and view previous versions here.


Quote: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=B3E6CE064...ee8%214716

themebuilder.zip

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

- Tatwi
http://www.tpot.ca
 
Reply
#2
Very, very nice, seems simple and easy to use and it should make creating themes a lot more accessible to everyone, good work! Smile

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 Smile

Great to see a new tool though and I particularly like that it's web based! Big Grin
"Look, sir, droids!" -- Davin Felth
 
Reply
#3
(2013-01-04, 04:14 PM)DavinFelth Wrote: Very, very nice, seems simple and easy to use and it should make creating themes a lot more accessible to everyone, good work! Smile

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 Smile

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

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... Smile
 
Reply
#4
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. Tongue
 
Reply
#5
(2013-01-06, 05:49 PM)Tonberry Wrote: 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. Tongue

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! Wink

Anyhow, most of the description tool tips should be updated before Tuesday and they are quite verbose, like me. Smile Certainly better than nothing until I work out the visual preview.
 
Reply
#6
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. Tongue

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. Smile
 
Reply
#7
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
 
Reply
#8
I posted this on the emu boards, looks very nice thank you
 
Reply
#9
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. Smile

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
 
Reply
#10
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. Smile
Legend of Hondo - A Single Player SWGEmu based ... science project? Smile
My SWGs Files - https://mega.nz/#F!nUMwRSAI!S35daVC46CcEX9PQKmWr-g
http://www.tpot.ca - SWG Mods and Information

 
Reply
  



Forum Jump:


Browsing: 1 Guest(s)