Computing for Engineers

An introduction to GUIs and Computer Graphics

Peter Lockyer, 2005

Computing for Engineers

An Introduction to GUIs and Computer Graphics

Introduction
Graphical User Interfaces (GUIs) are an important aspect of software development because they provide the user with an easy-to-use interface that hides the complexity of the underlying functionality. Good interface design and presentation are essential if the software is to have a pleasant, intuitive feel and be simple to learn. In additional to providing a GUI, many engineering applications require the ability to draw to a particular region of the screen, i.e. graphs, curves, surfaces, etc. This is known as computer graphics. This document provides an introduction to both subjects.

The Graphical User Interface

The windows-style interface has become the norm for most computer applications. Whilst different platforms (Windows, UNIX, Mac OS, etc.) have different appearances, the basic concept is the same - to control the computer by means of a mouse (and keyboard) that interacts with graphical items such as windows, menus, buttons and dialogue boxes. The following picture shows a typical GUI and introduces some standard terminology.

Some Application File Edit View

Menu Bar Pull-down Menu

New Open Close Save Save As Window 1

Window 2

Windows

Question Go

Dialogue Box

Are you sure? Yes NO

Buttons

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

Graphical User Interfaces are intrinsically very complicated to develop from scratch as every component you see on the screen belongs to a window, every window belongs to a program, and the program liaises with the operating system. To write code to create anything on the screen therefore requires a working knowledge of the operating systems API (Application Programming Interface), which is generally very complicated! GUIs do not simply draw components to the screen they interact with the user through the mouse and the keyboard, and the Operating System through the API, to ensure that all the users inputs are handled correctly by the relevant components on the screen.

ClearWin+ Library
Introduction to ClearWin+
To make program development considerably easier, various libraries have been developed that interact with the operating system on the programmers behalf. Salford Software, the authors of the C++ compiler, provide ClearWin+, a toolkit that sits on top of the Microsoft Windows API. ClearWin+ takes the standard tool-kit approach of providing all the usual features (e.g. windows, scroll bars, buttons, dialogue boxes, text editors) in a simple format but at the expense of reduced flexibility. Unlike the Windows programmer, you will not be given complete control over the appearance of a window or have total discretion over the size or position of components within it. Instead, ClearWin+ minimises the number of parameters that you need to specify by making sensible choices on your behalf. It is worth mentioning that the reduction of programmer effort is very significant: directly or indirectly, a typical Windows window has roughly 100 parameters associated with it, whereas ClearWin+ may ask you for just 5 or 6.

The ClearWin+ Interface Function

ClearView+ windows, the components they contain, and the values they return to an application program are all manipulated through a single function, winio(). To access this function and its associated options, you must #include <windows.h>. winio() was designed to follow the style set by the scanf() and printf() library functions. In these, the first argument is always a text string that acts as a template to specify the general pattern of input/output and the remaining arguments specify variables that match place-markers embedded in the template. Recall that place-markers all start with a % which is followed by one or more characters defining the exact nature of the required input/output.
winio() commands will be introduced by a series of simple examples. Additional

examples can be found on WebCT.

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

Creating a Simple Window

Consider the following example, which comprises a window with the caption Simplest Example and contains the text Hello World:

The window, and all its contents, was created by a single call to winio():
#include <windows.h> int main() { winio("%ca[Simplest Example]Hello World..."); }

The caption format, %ca, was used to place a title (or caption) in the bar at the top of the window, the caption text being delimited by square brackets. The contents of the window (i.e. the message Hello World) were included winio()s text string, just as they would if printf() were being used to produce output on the text screen. If your template string becomes too long, it is possible to break it down into two or more winio() calls by simply adding an & as the last character to indicate you will continue the winio() call with another function. So the previous winio() function call have been broken down into these two lines:
winio("%ca[Simplest Example]&"); winio("Hello World..."); // use & to continue // Finishing, so no &

This above example can be found on WebCT its named hello.cpp. The files hello2.cpp and hello3.cpp give examples of how formatting commands (\n, \t, etc) can be used to organise text across several lines of a window. The examples also demonstrate the %ww, %sp and %sz format codes which can be used to add Windowsstyle functionality to a ClearWin+ window (e.g. maximise and minimise buttons) and to prescribe its initial position and size.

Numerical Output
Executing the program in file numbout.cpp will produce the following window, which includes some examples numerical output:

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

The windows caption and the text How to output numerical values were generated using the same procedures described in the previous example. The line Value of n is 12 was produced by the following fragment of program:
winio("Value of n is %wd\n&", n);

where the text string acts as a template to define the overall appearance of the output. The %wd format code is a place-marker that stands for write an integer (the w is for write, the d corresponds to printf()s integer output which is %d). The variable (in this case, n) whose value is to replace the place-marker is typed after the template. There are different format codes for each type of variable, as shown in the following table.
Format Code %wd %ws %wf %we Description

Integer output for use with int or types String output for use with char[] types (i.e. strings) Floating point output in decimal form for use with float or double types Floating point output in exponent form for use with float or double types

Note: An optional field size parameter of the form <number> for ints or <number>.<number> for doubles may follow the % in each format code. For example:
int num=1239; winio(->%6wd<-, num); double num=123.456789; winio(%6.2wf, num);

Note the spaces added to pad the result out to 6 characters. Note the accuracy has been truncated to 2 d.p.

Numerical Input
Executing the program in file numbin.cpp produces the following window, which includes two examples of numerical input.

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

The windows caption and the top and bottom lines of text were produced in exactly the same manner as discussed in previous examples. The centre of the window contains two lines that involve input from the keyboard, the first involves an integer and the second involves a real (i.e. decimal) number. The first of these was produced by the winio call:
winio("Type the value of n (an integer) %3rd\n&", &n);

Again, observe that winio has two arguments: a text string that acts as a template for the complete input line, followed by the address of a variable, &n, showing where the input value should be stored. This is the same as the scanf() function whenever we read in a value we must precede the variable name with an &. The %3rd is a format code indicating that an input box, at least 3 characters long, should be created so that an integer can be read-in. The box size may be adjusted to suit the application. If it is omitted, ClearWin+ will assign the default size of 10 characters. The format codes for other types of input are given in the table below. Note that all real (i.e. decimal) number must be input into a double, not a float.
Format Code %rd %rf %rs Description

Reads an integer number into int variable Reads a real number (i.e. one with a decimal point) into a double variable. Reads a character string into a char[] string variable

Remember, when we read data into a GUI, the program has to first display a value before the user changes it to that which they want. This means we must initialise the value before we pass the address to winio().

Buttons
Push buttons, which cause something to happen when they are pressed, are a standard feature of the windows interface. Actions are associated with a button by means of the callback mechanism, which allows the programmer to specify which functions should be called when the button is pressed. It is up to the programmer to design the functions so that they accomplish the required tasks. We will illustrate buttons and callbacks by two examples. The first is a trivial example that shows how to define a button that exhibits the ClearWin+ default behaviour. The second example is much more general and shows how to write your own callback function, and how to associate it with a button The examples are programmed in files button.cpp and button2.cpp. Example 1: A button with the default behaviour. Executing button.cpp produces the following window:

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

The window, its caption and the text within it were created using procedures discussed in previous examples. The Press to Quit button was produced by the following call to winio:
winio("%bt[Press to Quit]");

where the %bt format code indicates that a button should be created and the text within the square brackets specifies the label that is to be written on the button. Observe that no callback function has been associated with the button and so it assumes its default behaviour, which is to close its parent window when it is pressed. Stupid as this may sound, it is quite a convenient way of closing windows when required! Example 2: Buttons with callback functions. Executing button2.cpp produces the following window:

Again, the window, its caption, the text within it and the Quit button were created using previously discussed procedures. The Message 1 button was produced by the following call to winio:
winio("%`^bt[Message 1]&", show_msg_1);

This is very similar to the previous example. There are two differences: the appearance of accents between the % and the bt, and the show_msg_1 argument which the follows the template. The first accent (the acute symbol `) means that the button has focus, i.e. if the RETURN key is pressed, this button will be act as if it has been pressed. The TAB key moves focus on to the other buttons. The second accent (the caret symbol ^) means that the button has a callback function, which should be called when the button is pressed. The name of the callback (in this case, show_msg_1) is given as the second of winios arguments, just after the template (no brackets). Callback functions are functions like any other (they may do graphics, calculations or whatever you require), except for two inflexible rules: They never have arguments i.e. the () after the functions name inits definition is always empty; They always return an int, which should either be 0 or 1. If the function returns 0, the window containing the button is closed automatically when the callback has completed its task; if it returns 1, then the window remains open, thus allowing further interaction to take place.

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

The callbacks in the sample program adhere to these rules. In fact, both functions just create a dialogue box stating which button has been pressed. The show_msg_1 callback looks like:
// Note the empty argument list int show_msg_1() { winio("You have just pressed the 'Message 1' button\n\n&); winio(%cn%bt[OK]"); // Note the use of %cn to centre // everything on the line return 1; }

The fact that the ClearWin+ callback functions can not take arguments is very restrictive, and occasionally forces us to break our Golden Rule which is to always use local variables. However, just because we sometimes need to use a FEW global variables is no excuse for using them when we dont need to!

GUI Exercises
1. Download the GUI Examples referred to in this document. Compile and run them to get a feel for the ClearWin+ library. Change a few things, experiment! 2. Create a winio dialogue box to read in a test score out of 60. Add a button that simply closes the window. Calculate the percentage. Create another winio dialogue to display the percentage, and use conditional logic to suggest how good it is (<40 Poor, <55 Acceptable, <70 Good, <=100 Excellent).

3. Create the following simple stats program. The program should read in 5 double values (use a globally defined array to store the numbers), and present the user with three buttons. One should use a callback function to calculate and display the mean, one should use a callback function to calculate the min and max values, and the last should quit the program (no callback required).

Peter Lockyer, 2006

Computing for Engineers

An Introduction to GUIs and Computer Graphics

Extra ClearWin+ features and getting help

ClearWin+ can be used to build quite complicated GUIs. The C++ IDE (Integrated Development Environment) that you use in class (Salford Plato) was created using ClearWin+. The Help menu is the best place to find additional help on how to do things using the ClearWin+ library. In Plato, go to Help: Salford C ClearWin+ and then click Index. This will give you a list of all the ClearWin+ % codes which allow you to specify the functionality you want. To give you bit of an overview of what you can do, heres an example of some useful functionality, and the ClearWin+ codes. Look at the help files for guidance and examples of use. This example is called LotsOfFeatures.cpp on WebCT.
Drop Down Menu Minimise/Maximise Buttons

winio(%mn[&File[&Open, &Save, &Quit]]

winio(%ww&);

Spinner arrows on Number Input Box

winio(%dd%rd&); winio(%dd%rd
Tick Box

winio("%`rb[Tick]

Change Colour of Background

winio(%bg[grey]&);
Grouped Radio Buttons

winio("%2`ga%rb[Option 1]\n%rb[Option 2]

The majority of the above features can have associated callbacks by simply adding the caret (^) after the % sign. This means your program can automatically update anything that needs to be changed after the user changes something, e.g. a number, or a check box. One use of this is to ensure the user doesnt enter a number that is out of range. The callback could check the number, and change it if it was invalid. There are a few standard callbacks that you can incorporate into your program. A very useful one is one that creates the windows standard File Open Dialogue box. Search in the help for FILE_OPENR, or see the FileOpen.cpp on WebCT. Another useful standard callback is the CONFIRM_EXIT callback. Also see the above example. Note that all standard callbacks should be specified as string-literals, and many take additional arguments. Peter Lockyer, 2006 9