Piddle Graphics Online
by Michal Wallace06/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
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 |
