Bitmaps

Advanced topics

1. Introduction
2. Web mechanics
3. Cache issues
4. Examples
5. The sources of the examples


1. Introduction
Bitmaps, or in other words, pictures can also be created within an Aptilis programm. You can then save them as GIF files, or output them as GIF pictures to the standard output. This last option is the one needed when you want to create pictures on the fly in web pages.


2. Web mechanics
A lot of HTMLer think that a web page is just one block, composed of text and graphics. The reality is a bit different.
The text of the page, which also contains references to the pictures, is first loaded by the browser. Then, if there are pictures, the browser establishes new connections with the web server in order to retrieve the pictures, one at a time.
That means that the process (for example an Aptilis script) that serves the text of the page, cannot deliver the pictures as well. Although it might be the same piece of code that is responsible of both text and pictures, it's not going to be the same instance of the programm that is going to be involved. In other words, the server is going to run the code several times, once for the text and once for each picture.
Pictures need a special magic line:
Content-Type: image/gif
That means we are going to output pictures in the GIF format. Aptilis cannot output pictures in other formats so far. Have a look at the source of the examples at the bottom of the page, to how this is implemented. It is recommended that you output the header just before the outputGIFBitmap sub, so that if there is any error message, you will see it properly.
Note that if you call a picture from a link, you will not see error messages, but a 'broken image' icon instead. To check what's happening, run your script from the command line. (That's in a DOS box for Windows users: aptilis your_script.e.txt)
The problem seems to be more acute when you're trying a script locally, from your own machine, but in any case, check your script several times.


3. Cache issues
The browser's cache brings problems when playing with pictures. You will probably be confronted to that problem in section a of the next paragraph.
What happens is that when the return of a form is a picture, the browser takes the result from its cache rather than from the network. The problem seems to solved when calling the script from a link, as in 4.b below, but that's just apparent. The browser indexes its cached element by their URLs. So that
/cgi-bin/aptilis.exe?file=shapes.e.txt&corners=5
and
/cgi-bin/aptilis.exe?file=shapes.e.txt&corners=6
are completly different altogether if only by a letter. Unfortunately, if you are working on a script, and you want to try a graphic generating script, even if you call your script from a link, you might not see the changes you've just made. To see them, you will need to reload the frame in which your graphic sits.


4. Examples
Try these example online!

a. Straightforward picture

    <FORM action="/cgi-bin/aptilis.exe" method="GET">
    <INPUT type="hidden" name="file" value="/home/scripts/shapes.e.txt">
    Which geometric shape do you want?<BR>
    <INPUT type=radio name=corners value=0> Circle<BR>
    <INPUT type=radio name=corners value=3> Triangle<BR>
    <INPUT type=radio name=corners value=4> Square<BR>
    <INPUT type=submit value="Go!">
    </FORM>

b. calling a picture generating script from links

    <A href="/cgi-bin/aptilis.exe?file=/home/scripts/shapes.e.txt&corners=4">Square</A><BR>
    <A href="/cgi-bin/aptilis.exe?file=/home/scripts/shapes.e.txt&corners=5">Pentagon</A><BR>
    <A href="/cgi-bin/aptilis.exe?file=/home/scripts/shapes.e.txt&corners=6">Hexagon</A><BR>

c. Generating the page and the graphics.

    <A href="/cgi-bin/aptilis.exe?file=/home/scripts/shape_wrapper.e.txt">List shapes</A>
    

5. The sources of the examples
The shape generator:

sub main

        if corners < 3 and corners <> 0

                // For the error message, we will output text.
                print("Content-type: text/plain\n\n")
                print("You specified an incorrect number of corners. Please don't cut corners. Please try again.")

        else

                b = Createbitmap(150, 150)
                if b = -1
                        print("Content-type: text/plain\n\n")
                        print("Sorry, it was not possible to create a bitmap.")
                else

                        print("Content-type: image/gif\n\n")

                        white = RGB(255, 255, 255)
                        black = RGB(0, 0, 0)
                        clearBitmap(b, white)

                        if corners = 0
                                ellipse(b, 75, 75, 60, 60, black)

                        else
                                twoPi = 3.141592654 * 2
                                ox = 75 + 60
                                oy = 75

                                for i=1 to corners
                                        x = 75 + cos(twoPi * i / corners) * 60
                                        y = 75 - sin(twoPi * i / corners) * 60
                                        line(b, ox, oy, x, y, black)
                                        ox = x
                                        oy = y
                                end for
                        end if
                        outputGIFBitmap(b)

                end if

        end if

end main

The wrapper script:
sub main

        print("Content-type: text/html\n\n")

        print("<HTML><BODY bgcolor=#FFFFFF>\n")

        for i=0 to 10
                if i=1 or i=2
                        continue
                end if

                // This is the line that will cause the browser to load the pictures
                print("<P><IMG src=\"http://localhost/cgi-bin/aptilis.exe?")
                print("file=f:/aptilis/scripts/shapes.e.txt&corners=", int(i)$, "\"><BR>\n")
                print(int(i)$, " corners\n")
        end for

        print("</BODY></HTML>")

end sub