Automatic gradient generation

8 views

Skip to first unread message

Aaron Torres

unread,

Nov 16, 2006, 5:27:05 PM11/16/06

to Django users

Hi everybody,

Since I still don't have a website to post a tutorial on, I thought I'd
share an idea I worked on today that automatically generates gradient
backgrounds of any color for your django sites!

I got the idea from 2 website tutorials based on similar subjects

http://www.alistapart.com/articles/supereasyblendys

and

http://www.jacobian.org/writing/2006/jun/30/improved-text-image-view/

This program is a simple python-based proof of concept, in order for
you to use it with your website you'll need to follow the two guides
above along with using this (modified) function. The program will run
standalone for testing purposes and so you can get a gist of the idea.

--------------------------------------

import Image, ImageDraw

#note in Django this will be a view to which we'll pass the parameters
(maybe as GET parameters?) as well as a request
def gradient(height = 100, width = 100, r=0, g=0, b=0, fill=100,
orientation="fadedown"):
#convert our fill to a percentage
fill = float(fill)/100

#the image MUST be RGBA for the transparency to work
img = Image.new("RGBA", (width, height), color=(r, g, b, 255))

draw = ImageDraw.Draw(img)

#begin with no tranparencty
a = 255

if orientation == "fadedown" or orientation == "fadeup":
amount = height
if orientation == "fadeleft" or orientation == "faderight":
amount = width

for i in range(amount):
a -= (255/(amount*fill))
if (orientation == "fadedown"):
draw.line((0,i,width,i), fill=(r, g, b, int(a)))
elif (orientation == "fadeup"):
draw.line((0,height-i,width,height-i), fill=(r, g, b, int(a)))
elif (orientation == "faderight"):
draw.line((i,0,i,height), fill=(r, g, b, int(a)))
elif (orientation == "fadeleft"):
draw.line((width-i,0,width-i,height), fill=(r, g, b, int(a)))
#for the example, save the image to our hardrive
img.save("img.png", "PNG")

if __name__ == "__main__":
#simple example
gradient(height = 400, width = 100, r = 40, g = 40, b = 40, fill =
100, orientation = "fadedown")

--------------------------------------

Note that "amount" refers to the percentage fill-color of the gradient
you are generating. You may have to try it to completely understand
what I mean. The cool thing is, this allows you to make images of any
size you want! so you can skip the portions of:

http://www.alistapart.com/articles/supereasyblendys

in which we are forced to used a resized image as a background and
instead use the css background property.

Just as in:

http://www.jacobian.org/writing/2006/jun/30/improved-text-image-view/

we use

response = HTTPResponse(mimetype="image/png")
im.save(response, "PNG")
response["e-tag"] = etag
return response

so no messy temp images!

Hope you enjoy.

-Aaron