There are several possible ways of sprucing up our "Milo" lottery number generator. One would be to display the numbers in a 'dialog', which is a quick way of getting the Psion to format everything itself and border the numbers in a nice 3D-effect box. We'll touch on dialogs in a future session, but for now we'll concentrate on a different technique - graphics.
Using Do-It-Yourself graphics just to display a few numbers is a little
bit over the top, but it's also great fun and you'll pick up a lot about
drawing information onto the Psion's screen in the process. You'll remember
that in the last tutorial we used the "PRINT" command to display information
on the screen. Useful though this is, PRINT is limited to text-based
information and I want to introduce you to its close cousin, gPRINT. The
lower-case "g" stands (of course) for graphics, though you don't have to
write it like that. "gprint" or "GPRINT" work just as well.
There are many other useful members of the "g" family, each
drawing something useful, like a box, line or pattern etc. We'll use a few of
them below as we build a pretty interface for the program. Type in the
following lines near the top of your code:
DEFAULTWIN 1 rem Enables use of greyscale on 3a/3c
gGREY 1
gAT 0,0
gFILL gWIDTH,gHEIGHT,0
...leaving your screen looking something like this:
Let's go over each line in detail. DEFAULTWIN 1 is one of those handy things
you need to know if you're programming on the 3a/3c, as without it the screen
is limited to just black and white. The "1" tells the Psion to use Grey as
well. Although not needed on the Series 5, the line doesn't do any harm, so you
can put it in or ignore it as you wish.
gGREY 1 sets the current graphics 'pen' colour to Grey, so that
everything drawn afterwards appears in grey rather than black (or white). gAT
0,0 tells the 'pen' to go to coordinates 0,0 on the screen. On the Psion
machines, 0,0 is always top-left, with the first number describing the 'x'
coordinate (across the screen) and the second describing the 'y' coordinate
(down the screen).
gFILL gWIDTH,gHEIGHT,0 tells the Psion to fill the screen with a filled-in rectangle.
I've used gWIDTH and gHEIGHT instead of specific numbers because I want this
to work whether you've got a Series 3 or Series 5 computer. For example,
whenever the Psion sees gWIDTH it substitutes the actual width of the screen.
The "0" on the end of the command means to draw in mode '0', turning pixels
'on'. OPL's use of 'modes' isn't the most intuitive system in the world, so
you'll just have to learn it as-is. Mode '0' means that pixels get turned 'on',
mode '1' means they get cleared and mode '2' inverts them (i.e. if they were
on, they are turned off, and vice-versa).
It's fine to translate and run what we've written so far, and you should see something like this:
All that we've so far achieved is to turn the background from white to
grey, the next step is to replace our "PRINT" statements with the graphical
equivalents. Here's the first section. Add to and modify the PRINT lines as
listed below and in the screen-shot:
gGREY 0
gSTYLE 41 rem Bold, Double height, Italic
gAT 50,40
gPRINT "Milo v0.1 (C) Fred Bloggs 1998"
gSTYLE 33 rem Bold, Italic
gAT 50,65
gPRINT "Here are the numbers for the next lottery:"
gAT 50,80
gFILL 300,70,1
gGREY 1 :gFILL 300,70,1 :gGREY 0
Stop press: note the last line. This is needed on 3a/3c machines, to clear the 'grey' plane of the screen. Thanks for those who pointed this out by email. Serve me right for only writing on the '5'!
A few notes about these lines of code. gGREY 0 switches the 'pen' back
to drawing in black, ready for the text. gSTYLE is a command that can change
the style of font that text gets drawn in. There are full lists of all the
different numbers and effects in the OPL manual, but just take my word for it
for now. Note lastly that the gFILL command has "1" after it this time,
specifying that we want the filled rectangle drawn in mode 1 (clearing pixels,
i.e. turning them white).
Again, it won't do any harm to translate and run this. You'll see that we've successfully drawn some nice artistic text on the grey backdrop and have cleared a white area in which to print the 'winning' numbers. Don't worry about the other lines PRINTed on top, we're going to deal with them next.
Go to the PRINT section inside the main loop and change it to read:
gSTYLE 41
gAT 60+(i%-1)*50,130
gPRINT numbers%(i%)
Note that we've added a couple of lines before the main PRINT line,
setting up a graphics style again with gSTYLE and setting the pen position
with gAT to a point that reflects the ball number being chosen. Thus, the
first ball appears on the left, the second number further to the right, and so
on. Note also that we're changed the final PRINT line to a BUSY command.
BUSY is a very useful way of putting up a message in a corner of the screen.
Translate and run the code and you should see something like this:
A bit more striking than the plain output we had in tutorial 3, isn't it!
In session 5, we'll look at breaking up your code into more manageable chunks that can be easily worked with and understood. It's amazing how quickly you can forget how your own code works and the more you do to structure and prettify it the more chance you'll have of understanding it in 6 months time! 8-)
Go to next lesson | Programming index