PDA

View Full Version : [UPDATED v0.2][3.0] tool, Original xtheme-blue.css Theme Color Changer



syscobra
22 Apr 2009, 9:13 AM
Hi all.
I would like to share my Color Theme Changer for ExtJS 3.0.

This is the version v0.3
http://playground.ideashs.com/themescolor/

With this tool you can now change the Hue(colors), Saturation(intensity of colors) and Lighting(brightness of colors) of the current xtheme-blue.css for ExtJS 3.0.3 version.

The ranges are for hue -360 to 360 Saturation -100 to 100 and lightness -100 to 100.

Take care with the lightness because more than +10 looks awful, i just added the posibility because is what the color charts says :D

Just change the hue saturation and lightness to whatever you want then press "Preview Colors". You will see a palette of colors to compare with the original blue from Ext.
[Update v0.3] I added the Human (Ubuntu) theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805) i asked him permission with a private message but i have not received the reply yet, but as it is free i used it, if he has any problem with it then i will have to change this.

[Update v0.2] Now you can view an not exact change of an image from window to preview colors.

If you like the colors then put the name (according to the colors you change) of the theme and click "Generate Theme". It will generate the xtheme-"yourtheme".css file change the gif's and png's from the original blue ones, make the ZIP file to download and then Change the theme of the tool to watch your newly generated theme.

For example if i put a hue of -59 and click preview i then see that the colors has changed to green ones. then i put the theme name "green" and click on "Generate Theme" and voala i got the zip with green theme.

If you ask how it is done, i use a lot of preg_matches and string replacements to get the colors from the file, then preg_matches to get the images and i made a Color changer with a conversion utility called color.php from PHP classes. (Just make the other functions to adapt to this tool, image changer from gif etc)

Its made in PHP with ExtJS 3.0 RC1 :>

Any feedback about the tool is welcome.

Have Fun

ToDo:
-Include an editor of the Titles and all Fonts colors used by the theme.

LOG:
v0.3
- Now we are using the 3.0.3 version of the theme.
- I added the hability to use as source the Human (Ubuntu) Theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805)
v0.2
- Fixed the examples panels and windows. Thanks Shea!
- Use of a preview image of a window to see better what it will look like, Its slow but better than generating all the theme.
v0.1
- Created the Color Theme Changer
- Added to the xtheme-blue.css the normal link colors for anchors (a)
- Zip file download of the generated theme

mschwartz
22 Apr 2009, 9:22 AM
I messed around with the controls and it messed up, making the page look like this:

(no, I didn't ramp all the controls all the way)

syscobra
22 Apr 2009, 9:26 AM
yes the examples controls looks awful, i dont know why, i just took from the examples and i am looking into getting this fixed, don't know if its a viewport thing about getting the align to the left, or that the viewport have a fixed width. But the generated theme is always good, just that the examples looks awful. You can download the theme you made and try it yourself in your projects.
My server is not that good so maybe the images of the new generated theme comes slowly.
Try some of it and you will see if its ok.

I see the theme you made its almost white. Try not to use a lot of lightness. start changing only the hue to look what it make.

You can review the colors first with the "Preview Colors" if a lot of them are #ffffff then you get a white theme.

pcrombach
22 Apr 2009, 9:58 AM
Great work!!

I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..

syscobra
22 Apr 2009, 10:07 AM
Great work!!

I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..

Thanks,

It doesn't work with Ext 2.2.1 because it use another button aproach. and some other components from 2.2.1 that were really changed in this new css version. As is automated i can make any css i want, but then i have to separate the colors and all the images from main theme on 2.2.1 and thats some work. Maybe i will change it in next version.

About the 2 colors yes, i like too that aproach, but i have to make the theme (i am making some others) then i can use this tool to select what type of theme you want and generate it with the color you want. I just posted this now because i finish this work and want to share until i make the other stuff. But it takes time.:-?

Thanks for your feedback

jay@moduscreate.com
22 Apr 2009, 10:12 AM
Javier,

This has serious potential. Obviously, you have a lot of bugs to work through. going to watch this progress.

syscobra
22 Apr 2009, 10:20 AM
Javier,

This has serious potential. Obviously, you have a lot of bugs to work through. going to watch this progress.

Thanks

Share any bugs you encounter. I am only working in the examples page, its all messed up. and i now look into IE and the slider bars goes more to the right.
About the generated theme file its ok because the script only change the colors tags to the new hue saturation and lighting, and the images/default path to the images/theme path, it doesn't mess with any, absolutely any other stuff, only the colors and the paths. Some of the generated images are bad, but if you don't like that image you can replace with the original one, or just repair it yourself. I looked when i make this and found that shadow was bad, and eliminated the generation of those images. also the loading gif are animated so i cant change the colors from the script. So if someone make a theme here, he only needs to check the images and change what they want, but the colors of borders and all backgrounds etc are OK.

Thanks for the feedback.
I am just waiting for more time to finish reading your book and found this horrible awful examples fault. \:D/

galdaka
22 Apr 2009, 10:45 AM
Awesome!!

May be in future can we create in-pallete based themes.

Good work!!!

syscobra
22 Apr 2009, 10:54 AM
Awesome!!

May be in future can we create in-pallete based themes.

Good work!!!

Yes i was thinking about that, but its too much of a work to have a theme editor, lol.

For next version i am planing to put a "Color Text Editor" too, because if you put for example a very dark blue on the theme the title font and other titles looks bad cause you cant read them. So first i will do that.

But in other version i will have some other themes from start, and i am thinking about using, inside and outside controls to change the colors. For example the borders of windows are outside but the grids are inside. I just have to clasify what is what.

Then, if i have time i will move to per component editor. And let people put their own images, but thats too far away. So i just share what we can do now.

Maybe i will add theme editor for 2.2.1 too because a lot of people still uses it. I am just waiting for more feedback on what people would like, so thanks for your feedback.

galdaka
22 Apr 2009, 11:01 AM
You can use my theme if you want: http://extjs.com/forum/showthread.php?t=65694

There are some excellent color controls in forums:

http://extjs.com/forum/showthread.php?t=65538

http://extjs.com/forum/showthread.php?t=65537

Greetings,

syscobra
22 Apr 2009, 11:09 AM
You can use my theme if you want: http://extjs.com/forum/showthread.php?t=65694

There are some excellent color controls in forums:

http://extjs.com/forum/showthread.php?t=65538

http://extjs.com/forum/showthread.php?t=65537

Greetings,

Great! haven't seen that before, thats a must use for the font color selection tool for next version, thanks so much.

About your theme, its a great work, but i cant use it because is a non coloured theme. To change the colors you need colors, grayscale are always the same, so you can make it lighter or darker but you cant change the hue of that!

For example if you enter in my tool and put a saturation of -100 you will obtain your theme. Gray one. but if you want to change the colors after that you cant. Its in the same RGB space (the Red, Green, Blue values are the same)

syscobra
22 Apr 2009, 11:14 AM
Maybe a moderator can move this thread to 3.0 forums. Didn't see the new forums when i start the thread.

Thanks!

mjlecomte
22 Apr 2009, 1:33 PM
Nice. Are you aware of the prior tool that did this? I'd have to look it up in the forums. I'm not suggesting any diversion of your work, merely another point of reference / inspiration, etc.

syscobra
22 Apr 2009, 1:43 PM
Nice. Are you aware of the prior tool that did this? I'd have to look it up in the forums. I'm not suggesting any diversion of your work, merely another point of reference / inspiration, etc.
Well i don't know, i am almost new in the forums, i registered a lot of time ago but after making one or two projects i decided to come here more to learn and help others with anything i can.

I make this tool because when i try to get my themes done http://www.extjs.com/forum/showthread.php?t=56304 it was quite a big job getting all the images in fireworks then applying the new style and then closing and saving them. And i was using the find/replace of dreamweaver for every single color of the theme. In that post someone suggested if i use a preg script or if i use any script to do that, and then i realize that i can make that easier with an script, so this is the result.

I will look into the forum to see if i find something like this, but i had never read or view it.

If you find it please let me know. That would be cool to know someone has the same idea as me.

mjlecomte
22 Apr 2009, 2:44 PM
I don't know if it's the "same" idea. Here's the thread I was thinking of:
http://extjs.com/forum/showthread.php?p=149049

I don't know if Eric's caught on or not. Even if it didn't that itself might give hints what to do or not to do.

I wasn't sure with the date you registered if you knew of this link or not. Again, not my intent to distract your efforts, only offer more information...

syscobra
22 Apr 2009, 4:19 PM
I see its the same with some other features as colorize and invert as i can see in the screenshot in their page.
And this is a plugin for their IDE so you have to install the IDE to make it available.
At least i make it stand alone and online so no one has to install nothing. Also i plan to have some other themes as well so maybe i can look further on them, but i have to download the ide and i don't like eclipse i use netbeans lol.

Anyways thanks for the information. As i use this for my work, i will continue the developing of this until its perfect for me. I will share it of course.

Thanks

wm003
23 Apr 2009, 1:09 AM
Great stuff! =P~Thanks for sharing!

bt_bruno
23 Apr 2009, 3:54 AM
Awesome! Really big deal to the comunity! =D>

Brendan Carroll
24 Apr 2009, 5:07 AM
I agree this has some great potential and after Ext 3.0 is released, the team should take a hard look at refactoring and building out this component, with your blessing of course Javier. Great work!

steffenk
25 Apr 2009, 9:54 AM
hey Javier,

really nice work!

Some notes from my side for inspiration:
* a live preview while playing with slider would help a lot. One control having some elements in would be enough. I don't know how difficult it is to change skin on the fly
* would be nice to switch between HSL and RGB mode

syscobra
25 Apr 2009, 11:06 AM
hey Javier,

really nice work!

Some notes from my side for inspiration:
* a live preview while playing with slider would help a lot. One control having some elements in would be enough. I don't know how difficult it is to change skin on the fly
* would be nice to switch between HSL and RGB mode

Thanks for the feedback.
1.- a live preview is almost imposible because the script has to change the hue saturation and lighting of the images. If you run the project and created a new theme you must have seen the log of the script and it says you it makes 182 new gif's and other png's so if i am going to get it live when someone move the hue one by one i will have to regenerate all the images and the colors of the theme to make that available so if you move hue by 1 you then have to wait like 60-120 secs to get the preview (maybe more depends on how is the current cpu charge on my server). But i am thinking on making another aproach to this and maybe in the future i can have it done (i will try to make an small file with only (lets say) the window control, to make the live preview), thanks for sharing your notes though to make me think on it.

2.- why you want to change to RGB? to change color by color of the file? that would be in a future version of the tool. (Maybe a too far future)

steffenk
25 Apr 2009, 1:30 PM
Hi,


Thanks for the feedback.
1.- a live preview is almost imposible because the script has to change the hue saturation and lighting of the images. If you run the project and created a new theme you must have seen the log of the script and it says you it makes 182 new gif's and other png's so if i am going to get it live when someone move the hue one by one i will have to regenerate all the images and the colors of the theme to make that available so if you move hue by 1 you then have to wait like 60-120 secs to get the preview (maybe more depends on how is the current cpu charge on my server). But i am thinking on making another aproach to this and maybe in the future i can have it done (i will try to make an small file with only (lets say) the window control, to make the live preview), thanks for sharing your notes though to make me think on it.
yes, that's really impossible. For me it's difficult to know how the result is whicle playing with the sliders. May be a simulate view could help, the color chart doesn't give the impression how the skin will look after.

2.- why you want to change to RGB? to change color by color of the file? that would be in a future version of the tool. (Maybe a too far future)

yes, it's a bit future. May be some more for future: define a base color and generate other colors in relation - would make it possible to create a blue, orange, green skin etc.

Don't understand it as critic, i really like it ;)

mystix
26 Apr 2009, 6:40 PM
Thanks for the feedback.
1.- a live preview is almost imposible because the script has to change the hue saturation and lighting of the images. If you run the project and created a new theme you must have seen the log of the script and it says you it makes 182 new gif's and other png's so if i am going to get it live when someone move the hue one by one i will have to regenerate all the images and the colors of the theme to make that available so if you move hue by 1 you then have to wait like 60-120 secs to get the preview (maybe more depends on how is the current cpu charge on my server).

there is, actually, another way to do this.
since the set of colours, hues and saturation is limited, you could simply cache each generated theme on the server i.e. you end up generating each permutation only once, but only on-demand, leading to less overhead overall (requires disk space though).

with that in place, a buffer on the slider controls for hue / saturation + a modal loadmask while the theme is being generated should take care of trigger-happy users.

just a thought ;)

jay@moduscreate.com
26 Apr 2009, 6:51 PM
technically you could also just create a script that goes through all the possible permutations and save them for caching. one such job can run for a few minutes

mystix
26 Apr 2009, 6:59 PM
technically you could also just create a script that goes through all the possible permutations and save them for caching. one such job can run for a few minutes

+1

definitely better. :)

and yes, i'm finally back home. only flew back last friday. woot. :D

jay@moduscreate.com
27 Apr 2009, 4:16 AM
I was going to ask you about that.

Glad you got home safely marc! :)

jay@moduscreate.com
27 Apr 2009, 4:20 AM
I was thinking about this last night when going to bed (i think a lot about programming when i'm not in front of the computer) and my post earlier reminded me of the 'rainbow tables', which hackers use.

Read up here:
http://en.wikipedia.org/wiki/Rainbow_table

jay@moduscreate.com
27 Apr 2009, 4:22 AM
One last bit, if you need help automagically creating sprites with Image magik, i've been able to do it with the famfamfam by using a simple shell script.

http://tdg-i.com/57/tdg-iiconmgr-updated-with-sprites-for-iconviewer

syscobra
27 Apr 2009, 5:33 AM
there is, actually, another way to do this.
since the set of colours, hues and saturation is limited, you could simply cache each generated theme on the server i.e. you end up generating each permutation only once, but only on-demand, leading to less overhead overall (requires disk space though).

with that in place, a buffer on the slider controls for hue / saturation + a modal loadmask while the theme is being generated should take care of trigger-happy users.

just a thought ;)


technically you could also just create a script that goes through all the possible permutations and save them for caching. one such job can run for a few minutes

hehe, thanks for your feedback guys, but thats almost impossible. Why? well you have this:
-360 .. 360 of hue values = 720 possible values
-100 .. 100 of saturation = 200 possible values
-100 .. 100 of lightness = 200 possible values
That means that i can have 720*200*200 possible values, its 28.800.000 possible permutations. So for 90kb (the zip) file and like 65kb(in windows it takes 500kb) (the images)+38kb (the css) of the theme file, for the whole theme in disk...that said i must have a 5.300 GB disk. or a 6TB/:) disk lol, So this aproach sorry but i dont think so. Can you imagine caching all that up?

What i am thinking is about to have an small control, like a window, with an small css and only 2 or 3 image files, so when people move the hue saturation and lighting only change on the fly that small css and files. that will end up in like a 3 or 5 secs after moving. Guess i will have to try that before i implement it.


I was thinking about this last night when going to bed (i think a lot about programming when i'm not in front of the computer) and my post earlier reminded me of the 'rainbow tables', which hackers use.

Read up here:
http://en.wikipedia.org/wiki/Rainbow_table

Well i look into it and it looks like space science to me... lol, i am intelligent but i can't see the point to use on this. Anyways thanks for that info.

P.D.(I think a lot about programming not in front of computer too, just last night i end up sleeping at 2:00am because i couldn't get my brain out of thinking about the future of this application and others i am making)


One last bit, if you need help automagically creating sprites with Image magik, i've been able to do it with the famfamfam by using a simple shell script.

http://tdg-i.com/57/tdg-iiconmgr-updated-with-sprites-for-iconviewer

Don't worry i have looked into a lot of this image editing stuff. Before i make this tool i read about HSL HSV spaces and also all the formulas, of course i knew some image related operations with php (the language i use) but i think i have this controlled. At least for this app.

Thanks all for the feedback and ideas. I will take care of them and look into it.

Foggy
27 Apr 2009, 5:59 AM
A nice addition will be colorizing. For images you could use http://ch2.php.net/manual/de/function.imagefilter.php with IMG_FILTER_COLORIZE to perform that. CSS Values you have to recalculate...
With 3 slider for Red/Green/Blue, that would be really nice ;)

But anyway, that is a damn hot tool ;)

syscobra
27 Apr 2009, 6:13 AM
A nice addition will be colorizing. For images you could use http://ch2.php.net/manual/de/function.imagefilter.php with IMG_FILTER_COLORIZE to perform that. CSS Values you have to recalculate...
With 3 slider for Red/Green/Blue, that would be really nice ;)

But anyway, that is a damn hot tool ;)
Hey thanks for that, i will look into it. I had a colorize function but i don't put it on the tool cause it looks real ugly when you colorize the theme images. Maybe i have to introduce a color with some brigthness on it or something like that.

Thanks for using the tool.

jay@moduscreate.com
27 Apr 2009, 6:30 AM
5gigs is nothing now-adays. you could create the script and run it on the host, this way you don't have to upload the data yourself.

i think it's the best solution for 'caching' alltogether.

syscobra
27 Apr 2009, 6:33 AM
5gigs is nothing now-adays. you could create the script and run it on the host, this way you don't have to upload the data yourself.

i think it's the best solution for 'caching' alltogether.
its not 5GB its 5300GB, hey my server is a 80GB Disk lol!

Maybe you see that bad cause i use the damn "." on it because in venezuela we take the numbers that way. Sorry to confuse you lol.

mschwartz
27 Apr 2009, 6:33 AM
5gigs is nothing now-adays. you could create the script and run it on the host, this way you don't have to upload the data yourself.

i think it's the best solution for 'caching' alltogether.

The old truism is that you can trade memory (in this case disk space) for speed.

I think it's 5-10G of disk, judging from the math, too.

EDIT: nope, it's terrabytes.

jay@moduscreate.com
27 Apr 2009, 6:38 AM
meh, gzip, etc. it can call be controlled ;)

syscobra
27 Apr 2009, 6:38 AM
ok maybe i get this calculated stuff bad.

720*200*200 = 28800000

28800000 * 193KB = 5558400000KB
5558400000KB /1024 = 5428125MB
5428125MB /1024 = 5300,90GB
5300,90GB /1024 = 5.17TB

i don't know if because i sleep bad last night i came up this morning with a brain off but i think thats the way its calculated no?.

mschwartz
27 Apr 2009, 6:41 AM
ok maybe i get this calculated stuff bad.

720*200*200 = 28800000

28800000 * 193KB = 5558400000KB
5558400000KB /1024 = 5428125MB
5428125MB /1024 = 5300,90GB
5300,90GB /1024 = 5.17TB

i don't know if because i sleep bad last night i came up this morning with a bran off but i think thats the way its calculated no?.

1M x 1K = 1G
1M x 1M = 1T

Your numbers were 29M permutations. At 1K per, it's 29G. 10K per, it's 290G, etc.

Obviously terabytes.

mschwartz
27 Apr 2009, 6:43 AM
A trick that might work is to take a screenshot of some Ext window with widgets in it. Then you just tweak the color palette of that one image and reshow it to see what the effect would be.

All for 100K or so, maybe less :)

syscobra
27 Apr 2009, 6:43 AM
meh, gzip, etc. it can call be controlled ;)

Ok the theme in zip gets 90kb.
It is still 2.4TB of data. I don't think that gzip its that lot of a better of zip to get this down lo 1.5TB of data.

syscobra
27 Apr 2009, 6:46 AM
A trick that might work is to take a screenshot of some Ext window with widgets in it. Then you just tweak the color palette of that one image and reshow it to see what the effect would be.

Thats what i was thinking of. The problem with this is when i go further and get the Font-color change on the tool, it will not look for the correct Font color edited in the tool.
So i will have to make this as i say, an small css that represents a window on ext and use that instead, so when i change the hue saturation and all that as the font color too i can get a better preview of the theme.

Thanks for helping me with your feedback and ideas people!.

benmclendon
27 Apr 2009, 6:58 AM
Cool!

syscobra
28 Apr 2009, 7:10 PM
Just updated to a new version added this:

v0.2
- Fixed the examples panels and windows. Thanks Shea!
- Use of a preview image of a window to see better what it will look like, Its slow but better than generating all the theme.

To use the image preview just change the slider values and wait 3-5 secs for the image to update.

mandrack
28 Apr 2009, 7:50 PM
Very nice, man.. good work and thanks for sharing ...

stever
30 Apr 2009, 11:44 AM
Nice! I had done something similar (but didn't package things up since it was just for us). After you do your grep for color codes, it is helpful to group them. Most are blue, but some are not (we are talking the redish ones here) and they should get exempted from the hue change calc. There is also a couple of images that ought to get exempted as well (the html toolbar sprite, for example). Anyhow, good work! Makes me want to go back and hack at it again too!

syscobra
30 Apr 2009, 6:48 PM
Stever thanks for the feedback.
The 2 red colors i know about it. Just i didn't want to change it. anyways i am going to make the other version with the titles and text color's changeable in the tool and maybe i add that to that function.

About the html toolbar and other, i just used it because the html toolbar sprite has some lite blue pixels in some corners and when you use a darker color it just get bad and looks really ugly. Whats the other sprite you think i have to get away?, the tool gets automatic all colors and sprites from a css file and change them. I think if someone use the tool he can change the sprite or other image they don't like when it change for the defaults one. That is always an option on a css theme :D

I am working on the text color tool and i am making another theme right now so maybe next version get's only better than this one.

dawesi
5 May 2009, 2:31 AM
sweet... a 3.0 version... I made one of these for ext 1.0 with ColdFusion... it's sitting on the back of my server somewhere...

chh
7 Jul 2009, 6:34 AM
This is brilliant. Great work!

lorezyra
11 Jul 2009, 11:13 PM
Dude, this is excellent!

You just saved me about 6 hours of work going through all the pics and CSS stuff. My hats off to you.

syscobra
12 Jul 2009, 9:24 AM
Dude, this is excellent!

You just saved me about 6 hours of work going through all the pics and CSS stuff. My hats off to you.
Your welcome, this is the ExtJS 3.0 RC1 version, didn't have the time right now to update to the release version, maybe in a week or two.

You can donate something if was helpfull ;-) lol.

joeri
7 Aug 2009, 1:01 AM
Great tool. One issue I notice is that the old theme is getting cached when you click generate theme twice with different settings and the same theme name.

Lobos
13 Aug 2009, 10:43 AM
Great tool. One issue I notice is that the old theme is getting cached when you click generate theme twice with different settings and the same theme name.

yeah I noticed that as well, didn't even know you could change the name until I saw this post, so that can probably confuse users.

Syscobra, I would have to say this is one of the most useful things I have found in a long time. Anyone that has had to change the colors of a theme for ext would know that this is an extremely tedious task - I had to do this a awhile back, but next time I will be using your solution and giving a good donation as well!

Kudos

syscobra
21 Nov 2009, 5:24 PM
Just updated the tool and included the Human (Ubuntu) theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805) as source too for the generated themes.

I hope you guys like it the way it is now!.

Cya Around. :)

inishi01
7 Dec 2011, 12:38 PM
Hi, I have a color in Hex format, I have sought in various converters, and all throw me hsl format, but in the ranges that can accept your page as I can out of this problem quickly?

sorry for my english