If you ever wanted to create custom images that are all masked by a surrounding frame, here is a solution using python (using PIL instead of a system call running ImageMagick). This example illustrates, how you use png-transparency. I’m using this within django for creating special thumbnails of uploaded video files. Maybe someone feels like writing a general django template-tag for that.

from PIL import Image, ImageOps, ImageFilter
# the image we want to paste in the transparent mask
background = Image.open("my_background_image.jpg")
# the mask, where we insert our image
mask = Image.open("my_mask.png")
# mask, that we overlay
frame_mask = Image.open("my_frame_mask.png")
# smooth the mask a little bit, if you want
# mask = mask.filter(ImageFilter.SMOOTH)
# resize/crop the image to the size of the mask-image
cropped_image = ImageOps.fit(background, mask.size, method=Image.ANTIALIAS)
# get the alpha-channel (used for non-replacement)
cropped_image = cropped_image.convert("RGBA")
r,g,b,a = mask.split()
# paste the frame mask without replacing the alpha mask of the mask-image
cropped_image.paste(frame_mask, mask=a)
cropped_image.save("my_generated_image.png")

The image for the background

The masks

And here the resulting film strip

The whole idea emerged from Wolfram’s new dojo widget. He created a rating widget, where he uses stars for setting a vote. Because it is using images for each star, you are sticked to the size of your images and also how the images are designed. So I’ve started to code a new widget, that is creating a star as svg/vml/canvas by using the dojox.gfx library. It uses some simple parameters for designing your stars. As I proceeded, I recognized, that there is no javascript-library (or I didn’t saw it :-)), that can create simple (or more complex) geometric forms with just a few input parameters. In my opinion this could be a start to design a general dojox.gfx.geo library, where a base class is defined for common usage (like hovering and basic color schema) and subclasses for each geometric form. I’m thinking of spirals, arrows, stars, hearts and emoticons.

Here some usage examples of this star dojo widget.

First the pretty result

And here the sample code

<div dojoType="dojox.gfx.geo.Star" borderColor="black" borderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,6,12" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,5,10,5" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="3" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="4" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,4" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="5" radiuses="20,17,14,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

A big star! (Try the mouseover)

Sample code for big star

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="30" radiuses="250,200,250,150,200" specialHoverColor='{type: "radial", r:250, cx: 250, cy: 250, colors: [{offset: 0, color: "#FFFFFF"}, {offset: 1, color: "#FF5A00"}]}’ color=”#F1F3E9″ borderWidth=”1″ hoverBorderWidth=”1″></div>

The next step would be using this star widget within the above mentioned rating-engine. Maybe someone else has a better recommendation, where to use this kind of geometric forms within other widgets.

Here you can download an early version of this star widget:

First draft of the geometric star widget

I’m planning to start my own blog since about 3 years. Now I’ve found the time to do so and I hope it will soon be filled with several helping issues concerning software engineering. At the moment I’m concentrating on python and javascript development, using the server framework django and the client-side framework dojo. At times there also will be some recommendations of netlabel music (mainly electronic). Maybe there are some geeks out there, who appreciate that.