progress.bar

Home > Experiments: Project status bar

Displaying Progress Bar in your wiki
You can include into your wiki pages a simple progress bar, such as, to indicate status of your projects. The progress bar itself is a dynamically generated image from external source. There are two ways to accomplish this task.



1. Simple Way
The simplest way to use progress bar in your wiki is via external reference. The tag for your wiki will be code format="html4strict"

Here: http://www.slipak.com/misc/pypg?p=15 is external reference to the script which will generate the image for you ?p=15 is an argument which indicates percentage of progress (15% in this case) code


 * Example**

To insert progress bar into your wiki with 70% code format="html4strict" code The output in your wiki will be

2. Enthusiastic Way
If you would like to setup progress bar generation from your domain(server), here are few components required.


 * Server software requirements**

[|Python] [|Python Imaging Library] [|mod_python] or alternative software to run python and your web server software Simple python script to generate progress bar images

code format="python" ''' Created on Jan 26, 2010

@author: Dmitriy Slipak

@summary: the script to generate progress bar image '''

import os, Image, ImageDraw from mod_python import util

def create_corner(radius, color):

corner = Image.new("RGBA", (radius, radius), (0, 0, 0, 0)) draw = ImageDraw.Draw(corner) draw.pieslice((0, 0, radius * 2, radius * 2), 180, 270, fill=color)

return corner

def create_bar(pct, size, radius, color):

w, h = size bar = Image.new("RGBA", size, color)

complete_color = "lightgreen" complete_w = pct * w / 100

if complete_w < radius and pct != 0: complete_w = radius if complete_w > w - radius: bar_w = w - radius

pct_im = Image.new("RGBA", (complete_w, h), complete_color) bar.paste(pct_im, (0, 0))

r_corner = create_corner(radius, color) l_corner = create_corner(radius, complete_color)

if pct == 0: l_corner = create_corner(radius, color)

bar.paste(l_corner, (0, 0)) bar.paste(l_corner.rotate(90), (0, h - radius)) bar.paste(r_corner.rotate(180), (w - radius, h - radius)) bar.paste(r_corner.rotate(270), (w - radius, 0))

return bar

def create_image(pct, w, h):

size = (w, h)   im = create_bar(pct, (w, h), 3, "lightgrey") draw = ImageDraw.Draw(im) wc = (len(str(pct)) * 3) + 1

text_pos = ((w / 2) - wc, (h / 2) - 5) text = str(pct) + '%'

draw.text(text_pos, text, fill="white")

del draw

im.save(os.path.dirname(__file__) +           "/images/" + str(pct) + ".png")

def index(req):

args = util.parse_qs(req.args) pct = args.get("p", [''])[0]

if int(pct) < 0 or int(pct) > 100: return

if not os.path.exists(os.path.dirname(__file__) +                         "/images/" + pct + ".png"): create_image(int(pct), 140, 14)

util.redirect(req,                 "http://www.slipak.com/misc/images/" +                  pct + ".png") code Modify the script according to your domain name, path for generated images and color preferences. The rest is to use external reference in your wiki as explained in "Simple Way" section.