Eckhard M. Jäger

CSSdev for Gimp

Wednesday, 18. June 2008, 13:11:18

GIMP, xhtml, web development, css, HTML, browser, web

So here comes my announced and awaited script "CSSdev for Gimp" that is a remastered and more feature rich Python implementation of the old and buggy Gimp2CSS. After a hacking session at area42 this is a first cool working version was available. Meanwhile i updated this script various times and added more features. The major goals for the future are adding support for floating design and nested layers.

How it work:
* open your designed draft in Gimp
* Goto "Filter > Web > CSSdev"
* select your options and a folder where to export the "gimp_cssdev.html"
* After export you will find an XHTML source in the given directory that includes CSS styles too

What still works:
* Visibility for layers and the options of the CSSdev dialog
* Opacity for layers
* Creating an z-indexed based layout
* Layer positions and layer size
* Default font and alternative faces based on my CSS font matching
* default font, its size and its style
* Link colors
* Background color and forground color are based on the actual background colors and forground color of the toolbox
* optional export of layer height
* optional automatic color picking for DIV background color
* The CSS property Clip is supported via layer masks
* Creating additional CSS code for text layers (requires Gimp 2.5.x +)
* Export content of text layers (requires Gimp 2.5.x +)
* Croping layers to their content on export

All other options did not work at this moment but will coming soon.
Download
Download the CSSdev script and copy it to

/home/#YourProfileName/.gimp-2.6/plug-ins

Make sure the file is marked as executable.

Windows user have to copy it to

C:\Dokumente und Einstellungen\#YourProfileName\.gimp-2.6\plug-ins

Make sure your Gimp-Python is installed and working, Windows users will find more informations about Python and Gimp here. The cssdev.py must be marked at the accessrights as an excutable.

Wine 1.0Firefox download day

Comments

crazybilly # 18. June 2008, 13:56

Awesome. I'm looking forward to giving this a go.

Thanks for your hard work!

Anonymous # 20. June 2008, 11:34

Michael writes:

Well, hello from the guy who has brought you gimp2css...

I wrote this script for Gimp 1.x, that is ages ago, no wonder the produced html+css is not up to date... besides, I'm not really a designer, I work mainly as a backend developer (databases, models etc.) and I needed something pure and simple (well, it doesn't use td tags for layout, now, does it?) for a couple of freelance projects I was involved in at the time. I have posted it online hoping it might be of use.

http://freeyourtech.wordpress.com/2008/06/04/gimp2css/

Now, the fact that you have professional expertise in Design, Bart, raises the stakes - I'm expecting to see great stuff. Good luck with CSSdev!

area42 # 20. June 2008, 14:48

Hi Michael,
i'm on it

Today i fixed a small bug in the "clip" feature and i started thinking about an algorithm to analyze a design with nested layers. That's the next step. After that i will export implement the image export.
I'm a little bit disappointed that there is no access in GIMP to text layer and the font informations

Hopefully this will be better after the GSOC GIMP Python project.

Anonymous # 28. June 2008, 16:58

Tenno writes:

I must be missing something as i can't get it work...

I've installed it in C:\Documents and Settings\Tenno\.gimp-2.4\plug-ins

I've follwed the path filters>web ... but no CSSdev just image map and semi-flatten (grey'd out)

so what am I doing wrong?

area42 # 28. June 2008, 21:23

@Tenno:
Make sure Gimp-Python is working, check the link in the article about Windows and Python.

Anonymous # 30. July 2008, 10:36

micker writes:

hello i discover your script
i am really imprecive !!!
but when i try with gimp 2.4.6 i didn't have the same option with you no div link color
ect
can you help me ?
micker@free.fr
Thanks

area42 # 30. July 2008, 11:35

CSSdev is in development so may there are variations about the options. I planed creating a various range of web tools for Gimp:
- a flash gallery export http://my.opera.com/area42/blog/gimp-flash-gallery
- SuperSlice - a powerfull slicing tool
- CSSdev

Let us talk about bugs when CSSdev 0.5 will be available (soon)

Anonymous # 1. September 2008, 09:19

micker writes:

hello do you have some news ?
i am really impressive !

Anonymous # 18. September 2008, 15:58

Unluckyluke writes:

Hi Eckhard,

I am a professional freelance web developer (php, mostly), definitely a Linux user and a Gimp and Inkscape fan and a Sourceforge project admin (PHP-SmartCSS and DynamiTE4CSS).

I really enjoyed your GIMP script and I made some small changes in its code. I would be really glad to contribute someway to CSSDev grow, and to share my changes with you.

Can I contact you via e-mail?

Greetings.

area42 # 18. September 2008, 17:54

Hi Unluckyluke,

just drop me a line "bart neeneenee de"

Thanx!

Anonymous # 24. September 2008, 16:14

micker writes:

do you have some happy news ?
thank for your work !

Anonymous # 6. November 2008, 16:46

ajabogado writes:

I will eagerly wait for this. I tried it on 2.6, the menu on "Filter > Web > CSSdev" doesn't show up.

BTW, super slice will also be a big blast for GIMP.

area42 # 9. November 2008, 10:34

Hi ajabogado,

make sure the file is marked as executable.

Anonymous # 5. January 2009, 05:21

bsbodden writes:

On Max OS/X (Tiger). Got Gimp 2.6 running and the script in the plug-ins directory, it is marked as executable but still no Filters | Web | CSSDev shows. Any clues?

Anonymous # 9. January 2009, 13:16

apowell writes:

bsbodden,
In Terminal: chmod +x filename
In Finder: remove the .py form the name
In Gimp: refresh scripts list and it should show up.

Andre

Anonymous # 12. February 2009, 15:13

Lari H writes:

Is there a new version of cssdev available? I'm interested in the image export functionality (similar to gimp2css).

Cool tool.

Regards,

Lari

Anonymous # 12. February 2009, 16:26

Lari H writes:

I've just ported the image export code from gimp2css (perl) to python.

Here's a version of cssdev that supports image export to png:
http://pastebin.com/f45b407ae

Anonymous # 12. February 2009, 16:30

Lari H writes:

minor bug fix to the previous version.
http://pastebin.com/f632560b

Anonymous # 13. February 2009, 03:28

Lari H writes:

Improvements:
* cleaner code: refactoring (extracting methods, etc.), cleaning code, migrating to OOP
* features: image export support
selection that has been saved as channel can be exported too
supports "slicing" any shapes (saved selections) with alpha channel support.

view code & download:
http://pastebin.com/f67aea139

area42 # 16. February 2009, 10:49

Hey Lari,

thank you for all this work. I have to review it but at the moment there is no time for me going on with it. This will hopefully changed in some weeks

Your improvements sounds great!

Luca Zanchetta made some improvements to that aren't integrated yet

Anonymous # 26. February 2009, 16:52

MJL writes:

I just installed this on windows and it dont see the option in Gimp. Python is installed(in path) and working, tried removing the .pl and made sure the permissions were ok. Please Advise

area42 # 26. February 2009, 19:10

MJL at the moment i can't help but i will try it as sson as i can on a wondows pc.

Anonymous # 26. February 2009, 19:14

MJL writes:

Ok i got it installed. I am getting this when I hit ok to export

Traceback (most recent call last):
File "C:\Program Files\GIMP-2.0\lib\gimp\2.0\python\gimpfu.py", line 692, in response
dialog.res = run_script(params)
File "C:\Program Files\GIMP-2.0\lib\gimp\2.0\python\gimpfu.py", line 353, in run_script
return apply(function, params)
File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 552, in python_cssdev
cssdev.execute()
File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 461, in execute
self.create_css_for_drawables(drawables, do_position, do_layerbg, do_height, do_bold, do_italic, do_crop, xpos, ypos, valid_layer, layer_text, image_width, image_height, this_font, file)
File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 325, in create_css_for_drawables
layer_bg = drawable.get_pixel(xpos, ypos)
error: could not get pixel (30, 30) on drawable (ID 286)

area42 # 26. February 2009, 19:46

What kind of Python and Gimp version you have installed?

Anonymous # 26. February 2009, 19:57

MJL writes:

gimp 2.6.4
Python 2.5.2 (r252:60911, Feb 21 2008, 13:11:45) [MSC v.1310 32 bit (Intel)] on
win32

Anonymous # 3. March 2009, 16:21

Tim writes:

Hi all
believe it's great and helpful plugin ....
but have a same problem as MJL descibed on ubuntu :(

regards, man ...

area42 # 19. March 2009, 21:53

Hello MJL, hello Tim,

today i installed Gimp 2.6.6 and tried out CSSdev again. Anything works fine here on Ubuntu Hardy 8.04. Are you sure you have Python support in Gimp and the "cssdev.py" in "~/.gimp-2.6/plug-ins" is marked as an executable at the file properties?

Anonymous # 13. April 2009, 15:30

Gamegoofs2 writes:

I'm a bit confused. Does CSSDiv work on Windows computers?

area42 # 13. April 2009, 18:46

It should run, Make sure your Windows-Gimp installation supports Python.

Anonymous # 21. April 2009, 09:35

Theirishkiwi writes:

Hi,

Have installed cssdev.py /Gimp 2.6.6 on Hardy. Getting following error on export?

Traceback (most recent call last):
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response
dialog.res = run_script(params)
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script
return apply(function, params)
File "/home/chris/.gimp-2.6/plug-ins/cssdev.py", line 231, in python_cssdev
layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos)
error: could not get pixel (30, 30) on drawable (ID 2)

I think it's to do with python as do not have gimp-python install, but unable to locate appropriate version for 2.6.6. Any pointers?

Chris (Theirishkiwi)

area42 # 23. April 2009, 09:22

The plugin try to get the color on 30 pixel X and 30 pixel Y, but it seems there is nothing. What's the size of the image?

Anonymous # 25. April 2009, 18:38

ivme writes:

thanks for this useful plug in. are there any example document about using ?

area42 # 27. April 2009, 13:52

not yet

Anonymous # 28. April 2009, 17:17

Everett writes:

When I go to reinstall Gimp, it won't let me check the Gimp Python Extention. I'm pretty sure I installed everything properly, but who knows. Any help?

area42 # 28. April 2009, 20:40

Sorry, i can't really help. I'm using Ubuntu Linux. Have you checked this:
http://registry.gimp.org/node/3916

Anonymous # 5. May 2009, 22:20

Ziyaretçi writes:

I'm a bit confused. Does CSSDiv work on Windows computers?
Muhabbet mirc sohbet Thanks You

area42 # 6. May 2009, 21:21

It should work on Windows when you have Python support for GIMP installed .

Anonymous # 8. May 2009, 15:38

Steve writes:

Hi

I am getting exactly the same error message as Theirishkiwi

Traceback (most recent call last):
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response
dialog.res = run_script(params)
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script
return apply(function, params)
File "/home/steve/.gimp-2.6/plug-ins/cssdev.py~", line 231, in python_cssdev
layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos)
error: could not get pixel (30, 30) on drawable (ID 10)

I'm running

Ubuntu Linux 9.04 with Gimp 2.6.6

I'm also getting at the end of the failed export

"Plug-In 'CSSdev' left image undo in inconsistent state, closing open undo groups "

any suggestion??

Anonymous # 9. May 2009, 09:54

Steve writes:

UPDATE ON ABOVE COMMENT

I installed libgimp-perl and now the script seems to work

Anonymous # 19. May 2009, 12:06

kabin writes:

I will eagerly wait for this. I tried it on 2.6, the kabin menu on "Filter > Web > CSSdev" doesn't show su deposu up.

Anonymous # 25. May 2009, 16:34

Gamegoofs2 writes:

I got it installed, but I'm not sure how to use it. When I exported my design it didn't look anything like my design. Is there some sort of how-to-use thing I could read?

Anonymous # 25. May 2009, 16:35

Gamegoofs2 writes:

I got it installed, but I'm not sure how to use it. When I exported my design it didn't look anything like my design. Is there some sort of how-to-use thing I could read?

Anonymous # 25. May 2009, 16:36

Gamegoofs2 writes:

Sorry about the double post. Something must have messed up.

area42 # 26. May 2009, 07:08

Hello guy's,

it seems some of you make the mistake downloading and installing the old, buggy and outstanding Perl-Script Gimp2CSS.
If you like to get much more flavor you have to download and install my script CSSdev!

Anonymous # 30. May 2009, 03:29

Gamegoofs2 writes:

I'm using your code for CSSdev and it's still not working.

Anonymous # 3. June 2009, 07:28

Danilchenko writes:

Hi!
Good idea - save many time to create web pages.
How to recreate existing html and css if my image changed not globally. For example, will changed background color in any blocks or removed old block.

This planned?
Thanks!

Anonymous # 3. June 2009, 07:32

Danilchenko writes:

Find mark in text "Background color and forground color are based on ..." - word "forground" replace to "foreground" please.

Anonymous # 3. June 2009, 08:03

Аноним writes:

I open PSD and AI files (export), but generate empty documnet :-(. Yiou test it?

How to wrk eith this files? Support SVG files?

I create new document with text string. On generate I see next error message:

Traceback (most recent call last):
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response
dialog.res = run_script(params)
File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script
return apply(function, params)
File "/home/anton/.gimp-2.6/plug-ins/cssdev.py", line 231, in python_cssdev
layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos)
error: could not get pixel (30, 30) on drawable (ID 7)