Piddle Graphics Online

by Michal Wallace
06/28/2001

In Generating Graphics With Piddle we generated a gantt chart using piddle and the Python Imaging Library. Now we'll extend this concept to generate graphics in real time on the Web. We'll build on the code from the previous article, making references to it as we go along.

Our original script contained a hardcoded data structure that controlled what tasks were displayed, so changing the image required changing the code. That approach works fine for creating images one at a time, but if we want our drawings to respond to input from our users, we'll have to separate the code and data.

Python offers dozens of data storage options as well as a huge variety of web modules, but to keep things simple, we'll stick to the basics: python's bundled shelve and cgi modules. With these tools in hand, we're ready to build an HTML interface for customizing our chart.

The Interface

We'll use a model-view-controller design pattern for our program. The model is the data stored in a shelf file. The view will show the rendered gantt chart and lists individual tasks. Each task will have a link to the controller page, to let us add, edit, and delete tasks. The following diagram illustrates this design:

This translates to four files:

view.cgi
chart.cgi
controller.cgi
model.shelf

(Because space prohibits us from discussing every line of code, we have packaged the full source in a zip file.)

So What's a Shelf?

A shelf is basically a python dictionary stored on disk. The shelve module uses pickle to convert objects to and from strings, and stores those strings in Unix-style database files via anydbm. But we don't have to worry about all that. All we do is tell shelve where to store the data.

We'll prepopulate our shelf with some variables using the same data structures from last time. To set it up, we'll need some throwaway code. You can run the following as a script or just type it into the python interpreter interactively:

import shelve

# open the shelf (and create it if it's not there):
s = shelve.open("model.shelf")

s["now"]=3
s["titles"]=["apr","may","jun","jul","aug","sep"]
s["tasks"]=[{"label":"a task", "boxes":[( 3, 10, "crimson"),
                                        (12, 13, "teal")]}]

# save the data to disk and close the shelf
s.close()

You can verify that this worked by opening the shelf interactively and examining its contents:

>>> import shelve
>>> s = shelve.open("model.shelf")
>>> s.keys()
['now', 'tasks', 'titles']
>>> s["now"]
3

We can now start coding a CGI script to use our data model.

CGI

The CGI protocol defines how a web server and script communicate. The server defines some environment variables and makes data from the browser available to the script. The script responds with the type of the content it generates, the content itself, and any other information the browser needs.

Python's cgi module takes care of the server side, but we have to create a well-formed response ourselves. A simple example looks like this:

#!/path/to/python
print "content-type: text/html"
print
print "hello, world!"

Note that every python CGI script must print at least a "content-type" header followed by a blank line, but not every script needs the cgi module. We'll use cgi later, to examine form submissions on the controller page.

To run the script above, you'll need to configure your web server to handle CGI. On Unix-likesystems, this often only requires setting the read and execute bits on your script. On some systems, CGI may work only in certain directories (eg, cgi-bin). Consult your server's documentation for specifics.

Pages: 1, 2