8 Bitmaps and icons, cursors and other resources
Previous: 7 Graphical interaction – early steps
Next: 9 Toolbars
In this section:
- 8 Bitmaps and icons, cursors and other resources
- 8.1 Resources
- 8.2 Drawing bitmaps
- 8.3 Back to the About box with a bitmap
- 8.4 Using thematic colours
- 8.5 Icons
- 8.6 Graphic images in a dialog box
8 Bitmaps and icons, cursors and other resources
You already used one of ClearWin’s standard icons with the very first dialog for Example_01, and your own icons will need you, or someone else, to draw them. The word icon is a little confusing, as any pictorial representation in Windows is an icon, but there is a special image format called an icon that has the extension .ICO. Most icons for ClearWin+ are not .ICO icons, but usually just simple bitmaps in one of a variety of formats, including .BMP and .JPG. The .ICO variant has transparent parts.
To use any image in your program you need to give it a local name, which you do in a RESOURCES section or separately-compiled resources file.
You can also use custom cursors and sound clips.
Fortunately, you can create the bitmaps in the Windows Accessory Paint program, but cursors and icons cannot be created using Paint, and instead need custom software.
8.1 Resources
When you come to use things like pre-drawn bitmaps and icons, custom cursors and suchlike, you have got into the realms of defining those resources. There are two ways of defining resources, and one of them is to put a resources section into one of your Fortran source code files. The other way is to put all your resources definitions into a separate source code file, preferably with an extension .RC, and then compile it independently using the Silverfrost resource compiler, SRC to create an object file with the extension .OBJ, which can be linked to the rest of the program’s .OBJ files.
The entries in a resources section or file take the following form:
Local name Resource type File name
an example of an in-line resources section using the card image format (i.e. with the leading 6 space characters) is as follows:
RESOURCES
About_BMP bitmap “Help_About_Logo.bmp”
About_IMG image “Help_About_Logo.bmp”
Help_icon icon “Main_Help.ico”
GrabberHand cursor “Hand.cur”
Note that I defined the same bitmap twice with different names and types. To do this double naming is perfectly legitimate, and allows the same bitmap to be used in different ways. I have always found it useful to give the file names in quotes, although this isn’t strictly necessary, but it helps avoid the error if the file name (and path) contains blank characters.
8.2 Drawing bitmaps
Windows comes with an accessory called Paint that is ideal for drawing bitmaps. Recent versions of Windows have made the default file type when you save an image from Paint as a portable network graphics or .PNG file, but it is a simple matter to save a file in .BMP format by choosing that type when you save.
It is possible to import a bitmap into any sort of dialog box, or into a graphics area, with the appropriate code for a dialog box:
IW = WINIO@ ('%bm[Local name]&')
In this case, the local name would be About_BMP. For a graphics area:
IW = IMPORT_IMAGE@ (Local name, IX, IY)
and the local name would be About_IMG, with the pixel coordinates to the top lefthand corner of the bitmap set by (IX, IY).
One important thing about placing an image on a graphic is that you have to be careful not to obscure important parts of the graphic, and another thing is to possibly have more than one version of the image to cope with low and high resolution screens. You will definitely need a larger version of an image if you are going to place it on a hardcopy output because even the lowest resolution printers are much higher resolution than typical monitor screens. I will come to hardcopy output in due course, but this is an important thing to remember when drawing certain types of image. IMPORT_IMAGE@ will also manage other types of graphic, for example JPG, PNG, GIF and PCX. As GIF images can be animated, importing one will animate on your screen. All you have to do is to include the file in your RESOURCES section declared as an IMAGE.
There are also several IMPORT_ functions described in the online help for importing specific files, i.e. those that haven’t been listed in a RESOURCES section. If you use those routines, be careful to check the return code to see if the import has been successful.
An interesting feature of a bitmap when used in a dialog box is that you can make it clickable. To do so you need to put a qualifier into the %bm format code and provide a callback function that is executed when the bitmap is clicked. The requisite modifier is ^, which as in other contexts means that a callback is necessary and has been provided.
8.3 Back to the About box with a bitmap
A really good place to put a bitmap is in your program’s About box. Here’s one I designed for a program I wrote to help students on a topographic survey residential field course:
I know that I used ‘OK’ instead of ‘Dismiss’, but you should also look at the icon in the button. The point is that this program is used once per year, and every possible help has to be given to its users, for example staff who are new to supervising that particular course. The About box has a bitmap, in this case a bit of a screen grab from the Internet. The program name is SCAMPS, which is an acronym of a full description of what the program is about and coincidentally is the name of a cartoon dog. This particular program is tailored to one set of users’ needs and is certainly never distributed, as it is not a commercial product. The use of part of a graphic downloaded from the Internet could therefore be seen as ‘fair use’, but I would certainly not ever do such a thing with a program intended for widespread distribution or that was intended to be a commercial product. In any case I had to clean up the image, and added my initials into the dog’s collar!
We actually learn far more from our mistakes than from our successes, and so here is an example About box that does not include a bitmap.
What is wrong with this particular one? Several things. One of them is that use of ‘OK’, and another is the fact that the button is centred which is not the current style. However, the worst mistake appears on the caption bar where a ‘minimise icon’ has been used. The minimise icon should only be used on the master window, because it is intended to be shown on the taskbar when the application has been minimised, and dialog boxes such as this one which inhibit the program until they are dismissed should never be minimised to the taskbar. You might ask how could you minimise it, because at the top right on the taskbar there is only a close box. What you are perhaps missing is that the minimise icon is dual purpose and is always provided so that users gain access to this system menu, a hangover in part from earlier versions of Windows but which contains within itself options to minimise or maximise the particular window. If you maximise an About box then the layout will change!
Therefore, the rule has to be that minimise and maximise icons are for the master window only, and therefore that an icon on the caption bar cannot be allowed as it is an entry into the system menu where minimise and maximise lurk!
8.4 Using thematic colours
Thematic colours make your application stand out, but they can have undesirable side effects. For example, it is possible to set the background colour in any dialog box to whatever you want, or even to fill the background with bitmap images. At first, it may seem a good idea to colour code the dialogs. In practice, it makes your entire application seem cartoonish and childlike. It may also provide a set of colours that clash with the theme of a future update to the whole Windows system and make your application anything from clownish through irritating to being downright non-functional . In fact anything that is intentionally non-standard has the potential to do any one of these things. For example, my favourite application CorelDRAW! has a version X5 that uses white text for the menu items. The current version of Windows as I write this has a white background for the menu bar and therefore the top-level menu commands are invisible.
Well, it was a good way of prising more money out of me for a later version that works very little better and took me a very long time to get accustomed to.
My advice is to stick as far as possible to the defaults because of the possible side effects of going your own way. One of those side effects is to make various Windows visual clues far less evident, so that if you choose for example a grey background to your dialogs, you make it far more difficult to see things that have been disabled or ‘greyed out’.
A more proper use of thematic colours is to use them in a logo and in the About box. You can also use those colours in a compiled help file. Finally, it may be a good idea to use thematic colours in a toolbar. Here, for example, is the toolbar from my StationMaster program, where the thematic colours of the program are used for toolbar icons:
I’ve shown the toolbar and the caption and menu bars. The minimise icon is a survey target. I suppose that a more complete use of thematic colours might well have been to use red instead of blue on the toolbar icons. One lives and learns. However, as producing this software was effectively a labour of love, it might have been a deliberate choice of mine a decade or more ago not to put the effort in to recolour the toolbar icons. This particular application does not use data files but instead performs simple calculations using angles and distances to locate a particular survey point. The File menu is therefore limited to a print option and the graphics client area (drawing surface) shows the respective coordinates, angles, distances on a gridded plan. Nevertheless, there is a complete online help file and also inevitably the About box although as we have seen immediately above that About box is far from sophisticated.
There is a set of thematic colours linked to Windows. A list of the names for these colours is given at item 108 in CWPLUS.ENH, the ‘enhancements’ file for ClearWin+. If you use these colours, your application will change colours in a subtle way if you run it in different versions of Windows, but it will always look highly compatible and fit in well with the theme. Using these colours is something that I recommend highly.
8.5 Icons
The standard Windows application Paint.exe is capable of saving its images in a variety of formats but the icon format is not one of those. Instead, if you intend to draw icons, then you must invest in an icon editor, or download one of the many freeware or public domain icon editors. To be frank there is not much difference between a bitmap and an icon except that the latter may have transparent areas and so the image does not appear necessarily to be bounded by a rectangle. Your choice of icon editor will bring with it a bit of a steep learning curve, with which I can’t really help. Out of interest, I have a registered version of IcoFX for my work.
For an application that is intended for your own personal use, then it is possible to do screen captures of icons and bitmaps from commercial applications, but to do so is absolutely forbidden for use in applications that may be distributed widely or commercially because of copyright issues. That does not prevent you from looking at them and getting ideas. For example, the use of an icon representing 3.5 inch floppy disk to represent file saving is not a copyrighted idea although its implementation may well be. You may well wish to draw your own. Something similar applies to an icon for a printer. In both cases the most recognisable format for the icon is of items that are obsolete and probably your computer does not have a floppy disk drive and your printer does not look anything like the printer in the icon!
You will certainly see very many different interpretations for an icon representing undo and its mate, representing redo. Once again, close inspection of what other people have done and using their efforts as inspiration is probably the best way to go - but only if you have a certain amount of artistic ability. If you are no artist or clumsy with the relevant application, then you may well find it much more convenient to download some free icons from the Internet or pay for some commercial icons. The downside of this is that what icons are on offer are generally not what you require. Paying an icon artist to draw them for you is usually an expensive affair.
You will notice in the credits for SCAMPS in the About box reproduced as Figure 8.1 that there is a credit for the use of icons in the ’Fugue set’ released into the public domain by Yusuke Kamiyamane and Smooth set cursors by Vlastimil Milér. In that program I did not use many of those icons, but I certainly used the tick and cross icons which I incorporated into some of the buttons. You may find yourself doing something similar, and if you do then I think it is both right and proper for you to give some credit to the original artist as I have done in the About box that probably almost nobody will ever read for my program SCAMPS.
Icons, incidentally, are also clickable in a dialog if you set up the format code %bm or %ic with the appropriate ^ qualifier and a callback function.
Vlastimil Milér has a website: http://www.rw-designer.com/software where he maintains all sorts of useful free software, including cursor and icon editors. The ‘rw’ stands for ‘real world’.
8.6 Graphic images in a dialog box
If your dialog has a picture, and you know what picture to include when you open the dialog, then you can use a pre-drawn image, perhaps a bitmap drawn with MS Paint or some other drawing app, which is listed in your RESOURCES section and incorporated with %bm. The approach is similar if you want to incorporate your own icon, using %ic, a GIF file, using %gi, or any one of the acceptable image formats using %im (PNG, JPG, BMP or PCX).
In order to make the image file you may need to measure the size of some feature in the dialog and prepare the image for that size. I use Ruler by George! for my measurements. On screen bitmaps are low resolution, and won’t make your EXE file too big.
If your dialog needs a picture, and that picture changes according to selections made by the user, the method is to include a %gr drawing surface of the right size in the right place. You then have the choice of actually drawing the contents, using the ClearWin+ graphics primitives, or of including pre-drawn images. A variety of image formats can be imported using one of the standard routines that is listed in the Library Reference, namely: IMPORT_IMAGE@.
Once again, those images would need to be listed in the RESOURCES section and be referred to by its local name. As the image file is loaded into the %gr drawing surface with offsets, it is possible to use only one image file and load it with different offsets according to relevance, which may be a preferred route to simplify redrawing the images if some future change to the Windows ‘look and feel’ makes it necessary to change colours or backgrounds etc. Note that if you do use several drawing surfaces in your application you do need a User ID for each one, and remember to switch to the correct one each time before drawing.
In the same way as using a standard icon (with %si) makes information and warning dialogs more relevant, if you use an icon in a dialog that (say) matches with the image used in a toolbar, you will make the user more familiar with how the dialog and toolbar button relate to each other. It is possible to also use icons in the menu system using some of the enhanced menu options, but the icons for that have to be a lot smaller than is useful in a toolbar or dialog, and thus need many more things drawn for RESOURCES.
FORTRAN and the ART of Windows Programming, Copyright © Eddie Bromhead, 2023.