Module 8: Adding the icons
Copyright: C Wragg 2000

Progress so far

The purpose of this series is to enable anyone with little or no knowledge of Basic to learn the essentials of the language, and to be able to write a simple program to run in the desktop. Unfortunately, running a program in the desktop requires an extensive use of the Wimp that has little to do with Basic! We have therefore had to spend some time talking about the Wimp, and we need to do so a little more now before we can return to Basic itself.

All (well virtually all) the boxes and buttons that appear in a window are referred to as icons, and these are created using Wimp calls rather similar to those used to create the windows themselves. All such icons are created using the same SWI, and in Basic this is called in the form SYS"Wimp_CreateIcon", but like the windows, there are various parameters needed to specify the position, size, and nature of the icon required. For example, we must define the colour, whether they are flat or wedge-shaped, how they respond to clicks from the mouse, whether you can write in them, and so on.

Because this series is about Basic rather than the Wimp, we shall skate over some of the details, but hopefully provide enough to be useful in your own programming.

Revisiting the Run file

In Module 4 of this series we defined a Boot file and a Run file, but we kept them very simple at that stage. At this point we need to refine them a little.

In the Boot file we had the line

    Set Secrets$Dir <Obey$Dir>

A problem might arise if we have more than one copy of Secrets because the program will soon make use of this definition for Secrets$Dir, and if you are using a different copy of the program then it will be looking at the wrong version. In general, you should make sure that lines like this are repeated in the Run file, thus overriding any declarations of this sort that were made at an earlier point in time.

Open your Run file, and add the line

Set Secrets$Dir <Obey$Dir>

immediately before the 'Wimpslot' line.

Creating icons

Before we go any further, there are a number of useful strings that will be used in various parts of our program that need to be defined. To be generally available, and to maintain a clear structure, these need to be defined together at the start of PROCinit. To save time later, we will set all these up even though we won't be using some them in this Module.

Open RunImage in Edit and find the four lines at the start of PROCinit which read:

DIM block% 255,message% 255
DIM R5% 2
DIM texta% 12,textb% 20,textc% 20,textd% 20
$R5%="R5"

Replace these four lines with the following:

DIM block% 255,mess% 255,path% 255
$path%="<Secrets$Dir>.Data0"
DIM texta% 12,textb% 20,textc% 20,textd% 20
DIM M2% 6,R2% 6,hideR2% 8,R3% 2,R5% 2,nul% 2,ok% 2
$M2%="R2;L32":$R2%="KAR;R2":$hideR2%="KR;D*;R2"
$R5%="R5":$R3%="R3":$nul%=" ":$ok%="OK"
n%=1

You will see that we have fallen to temptation here, and we have made a number of statements on one line that might have been written one line at a time. This is excusable where you are making a simple list of statements. Note that in Basic the colon is used as the separator between individual statements so, for example,

$M2%="R2;L32":$R2%="KAR;R2"

is saying in one line what would be written on two lines as

$M2%="R2;L32"
$R2%="KAR;R2"

Apart from this, there is nothing new in these lines, although you may wish to refer back to Module 5 to refresh your memory about the DIM statement, and how strings are inserted into memory locations.

Don't worry about the significance of all these definitions; all will be revealed in due course.

Now move down RunImage a few lines to where we define the main window and find the statements:

DIM title% 18
$title% = "Secrets"

These now need to be expanded to read as follows:

DIM title% 18,text0% 14,text1% 30,text2% 20
DIM keyleft% 2,keylast% 4,keynext% 4,keyright% 2
DIM loaddata% 9,add% 3,del% 6,savedata% 9
$title%="Secrets"
$text0%="Secret number"
$text1%="Description of item"
$text2%="Special number"
$keyleft%="|<":$keylast%="back":$keynext%="next":$keyright%=">|"
$loaddata%="load data":$add%="add":$del%="delete":$savedata%="save data"

We have now set up 12 different phrases that we are going to use in our icons. There are two ways in which icons can be created. Many programmers like to use templates, and there is software available such as Templed that helps to do the job without too much number work. I have always preferred to do mine the hard way, using Library functions to make the process easier. I suggest it is worth working at this nuts and bolts level to begin with because it gives a better understanding of what is going on, even if it only makes you appreciate the template methods all the more later!

The next line in RunImage should now be

main%=FNcreate_mainwindow(350,300,868,548,0,0,&87000012,1,12,&119,title%,-1,18,3,1)

to which we now add the following line, which creates the first of the 12 icons we need:

a%=FNcreate_icon(main%,0,-160,868,160,&1700013D,"",nul%,R5%,2)

This function called FNcreate_icon is in the Library and takes ten parameters as follows:

1: The memory location, often called the handle, that identifies the window in which the icon will appear - in this case, main%

2,3: The x and y coordinates of the bottom left corner of the icon relative to the window, the y-coordinate being measured downwards from the top edge of the window. Thus the y value is always negative.

4,5: The width and height of the rectangular shape of the icon.

6: The icon flags (described below).

7: A string to be written in the icon provided it does not exceed 12 characters, but left blank if it is longer or has to be more closely defined. In the latter case, this will be done in the remaining fields.

8: 0 if parameter 7 is used; otherwise it is said to be indirected by pointing to the string to be inserted. In our case, we point to a string " " located at null%, as defined above at the start of PROCinit.

9: 0 if parameter 7 is used; otherwise it points to a string that defines the type of icon to be used. In our case, R5% points to the string "R5" to make the icon into a 3-dimensional slab.

10: The last parameter tells the wimp how much space to allow for the string - in this case the string at null% is two spaces, so the parameter is '2'.

The icon flags making up the sixth parameter are similar to the window flags described in Module 7, and they are illustrated in the diagram.

Icon flags

Setting the flags for an icon

We now add the remaining 11 icons to complete the main window:

a%=FNcreate_icon(main%,118,-144,640,128,&1A,"banasecret",0,0,0)

Note here that we are inserting a sprite, so the 7th parameter is the name of the sprite to be used.

a%=FNcreate_icon(main%,0,-408,868,248,&1000013D,"",nul%,R5%,2)
a%=FNcreate_icon(main%,16,-240,176,48,&7000211,"Description",0,0,0)
a%=FNcreate_icon(main%,240,-240,592,48,&700F13D,"",text1%,R2%,30)
a%=FNcreate_icon(main%,16,-312,220,48,&7000311,"",text0%,0,14)
a%=FNcreate_icon(main%,240,-312,592,48,&700F13D,"",text2%,R2%,20)
a%=FNcreate_icon(main%,240,-384,148,56,&1700313D,"",keyleft%,R5%,2)
a%=FNcreate_icon(main%,388,-384,148,56,&1700313D,"",keylast%,R5%,2)
a%=FNcreate_icon(main%,536,-384,148,56,&1700313D,"",keynext%,R5%,2)
a%=FNcreate_icon(main%,684,-384,148,56,&1700313D,"",keyright%,R5%,2)
a%=FNcreate_icon(main%,0,-548,868,140,&1000013D,"",nul%,R5%,2)
a%=FNcreate_icon(main%,16,-508,200,56,&1700313D,"",loaddata%,R5%,9)
a%=FNcreate_icon(main%,228,-508,200,56,&1700313D,"",add%,R5%,3)
a%=FNcreate_icon(main%,440,-508,200,56,&1700313D,"",del%,R5%,6)
a%=FNcreate_icon(main%,652,-508,200,56,&1700313D,"",savedata%,R5%,9)

This is a good point at which to run the program. You will need to ensure that this new version is saved as the !RunImage in the working copy of Secrets. The nice thing about this is that although typing in the above lines might have been a little tedious, the outcome is dramatic. We now have a complete window displaying all the main features of the Secrets program.

The Secrets' window

Something to look at, at last

Exploring further

Before we move on to the next module, explore the code you have written above. In particular,

  1. Try changing the 9th parameter to see what effect it has. As the program is set up, you can try varying this between any of the following: R5%, R3% and 0.
  2. Identify each icon in the Secrets window with its corresponding definition in the code above, and determine how each parameter made it appear as it does. Try varying some of these, predicting what will happen when you do.
  3. Explore the icon flags, by changing the colours, borders, and alignment.

Return to the Module Index