CGI/BMP Sample

This demonstration shows the reliable way to generate BMP graphics files in a CGI program, and get the correct version displayed by a web browser.

The program draws simple "Spirograph"-like pictures; you can run it from this link to see what it is like, and look at the source files. There are there source files: spirograph.cpp (the main program), bmplib.cpp (the BMP generation library), and bmplib.h (the associated .h file).

Most of spirograph.cpp is exactly as you would expect. When first run, with a URL of spirograph.cgi?step=1 or just spirograph.cgi?, it displays a form requesting the parameters for the drawing, with pre-set default values. When the DRAW button is pressed, the program is run again with a URL ending in >?step=2.

When run for the second time, the program parses the input parameters, creates a 400x400 pixel empt picture, and draws the appropriate shape. Don't worry about the way it is drawn (although I'm sure you can work out how it does the job) (and it is quite possible that I have got the formula wrong, and this isn't a correct spirograph simulation) as it isn't relevant, you could use any other combination of drawing methods (see the .h file for a complete list). After the drawing is complete, the program saves the drawing as spirograph.bmp, and this is where the one slight complication arises.

If we did the obvious thing, and just included the HTML tag <img src=spirograph.bmp> in the output, most browsers would display the wrong file. The problem is that web browsers keep a "cache" of recently viewed files. If told to display an image from a file called "spirograph.bmp", a browser that has recently shown a picture from a file with the same name will display the asme file again, without re-down-loading it. The average browser doesn't even check that the file has not changed.

So, if we always create the image in a file with the same name, a browser will just download that file once, then it will keep showing the same old picture over and over again, even after it has been completely redrawn by the CGI program.

The solution (as demonstrated in this sample program) is to make the CGI program responsible for sending the picture too. The image tag becomes <img src=spirograph.cgi?picture>, which is a reference to the same CGI program. When the CGI program notices "?picture" at the end of its URL, it simply sends the contents of the .BMP file (with the correct HTTP header). This is exactly what the web server would normally do if the image tag said "src=spirograph.bmp". The difference is that the browser is not quiet stupid enough to get it wrong this time. Even a web browser knows that CGI programs don't always produce exactly the same results, so whenever a URL requests a CGI program, it really is downloaded again, and thus we see the correct picture.

REMEMBER:
When the web server is running your CGI program, it is not logged in as you. It will not have the right to create files in your public_html directory. After deciding the name that your .BMP file will have, you must create an empty file with that name, and make it "world-write"able. That way the web server will be able to overwrite it each time your CGI program is run. For the spirograph file, the commands that I typed to create an empty .BMP file, then de-protect it were:
    touch spirograph.bmp
    chmod 666 spirograph.bmp
Remember also that your .cgi program should be chmodded to 755.