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