Interactive web image using Python

[Paul Boddie]

Michael Palm <msp at tpg.com.au> wrote in message news:<3BB01440.5E6EE94 at tpg.com.au>...
> I want to have a web image where you can change the color of parts of
> the image by clicking on it.
> e.g. <click on color selector> <click on the guy's hat to change its
> color>. This is for a clothing
> manufacturer. I am (of course) using Python on the client side.

Don't you mean server side?

> Any ideas on the best way to do this from Python (PIL, PIDDLE, OpenGL
> etc...). Or should I
> be using a Java applet or Shockwave file instead? The shading program
> will need to know
> about the component shapes so that it can fill each one. Somewhere on
> the web I saw a duck
> whose clothing you could change in this way, but I can't find it again
> or recall what they used.

I also played with that demo. In fact, I'm sure I have an image saved
somewhere of a strangely dressed duck from that site. ;-)

> I guess I could use their method and just store a library of each
> compoment shaded in all
> possible colors, then overlay the pieces.

Well, you could use the various imaging toolkits to render and colour
the pieces and combining them into a single image. The challenge then
is to make different parts of the image selectable - you could either
implement a server-side imagemap, or instead generate a client-side
imagemap when you generate the image. The latter would be preferable,
I think, especially for vector-based images, but you would need to
have some way of generating the image (of course), generating area
details for the imagemap, producing the imagemap definition,
incorporating the imagemap into a dynamically generated Web page and
incorporating the image into the Web page.

The last thing could, I suppose, be done by either saving the image
somewhere which is accessible from the user's browser (so that the
"img" tag can pick the generated image up from a static resource), by
generating the image independently of the Web page (and imagemap) (so
that the image is only generated when the browser attempts to load the
"src" of the "img" tag), or by sending the image with the Web page to
the browser. I must admit that I haven't looked too much into the
latter, but it might be an elegant solution.

I'm clearly rambling here, but I hope this is helpful in its own small
way. :-)

Paul