UNIT II

Graphical User Interface

1

Graphical User interface

• Program interface which takes the advantage of computer graphics to make program easier

• Text-keyboard oriented interface

• Command line interface

• Non graphical menu based interface

• Graphical user interface

2

GUI-Introduction

• Elements of GUI- windows, pull down menu, buttons, scroll bar, iconic images, wizards, mouse etc.

• A systems GUI with its input devices is also said as ‘look and feel’

3

GUI as class widget

• A class widget can create object instances for any application

• A widget (or control) is a graphical user component that a computer user interacts with such as a window,

• Widgets are the virtual buttons which can be clicked from mouse

4

GUI basic components

• Pointer- small angled arrow on screen or I beam in text application

• Pointing device- Mouse or trackball to select the objects

• Icons-Pictures that represent commands, files or windows. They can be moved

• Desktop-Area on the display screen where icons represent real objects on real desk

5

• Windows-Screen is divided into different areas, different programs or files can run in different windows, their size and shape can be changed.

• Menus-choice to select the commands are placed on screen in menus

6

GUIs vs CLIs

• Command line interface is the text only interface which requires text strings to cause the computer to take some action.

• CLIs makes all options accessible but invisible and not easily remembered

• Users with vision or motion disabilities prefer CLIs over GUIs.

7

Interactive input methods

• Request mode- program sends the request to the device and waits for its response.

• Sample mode- program and device work independently.

When program requires any value it takes the value from that device as per its status at that instant. Ex –numeric pad.

Event mode- device drives the program. Any action by the mouse is identified and action is taken.

8

Design of GUI

To fulfill a given requirement designing an interface is

• Part discipline (following platform conventions and good design principle)

• Part science (usability testing)

• Part art (creating screen layouts that are informative, intuitive and visually pleasing)

9

• Tax returns can be filed without reading manuals

• Car can be driven without knowing the Working of automobile

10

• Effective GUI requires functionality and interface

• Functionality is what program actually does

• Interface is how user interacts with program

11

Application development

• Visual basic, Delphi and visual C++ are the commonly used tools for GUI application development.

• They simplify the process of writing an application while creating its visual interface.

• The factors that work against creating a successful GUI are: user centered design, event driven programming

12

Programming

Event driven Programming• Tasks are performed in ordered fashion.

The user can enter data only when directed

User driven programming• User controls the program execution via

GUI events like entries using keystroke, mouse click, light pen, voice command etc.

13

GUI examples (Dialog box)

14

Good program vs great program

Early days• Good program: one that works• Great program: one that worked with

fewest resourcesTodayGood program: one that works and is easy

to learnGreat program: one that works, user friendly

and need not be learnt15

Principles for good GUI design

1. User must be able to anticipate a widget’s behaviour from its visual properties-

Principle of consistency at widget level.Widgets are visual controls like menus

checkbox, scroll bars etc.Delphi software helps in creating widgets

16

17

Anticipate the behavior

2. User must be able to anticipate the behavior of program using knowledge gained from other program-

Principle of consistency at performance level.

Consistency of cross platform with host platform

Placement of menus icons and toolbars.

18

19

Warnings and error dialog

3. User should view warnings and error dialog so as to improve the program interface-

Good GUI rarely uses or needs warnings and error dialogs.

Signal hardware problem like loose connection or disk failure

Warnings that asks user consent to perform irreversible or erroneous step.

Design your program for user to enter appropriate data and disable the dependent steps.

20

Error window

21

Warning messages

22

Feedback

4. Provide adequate user feedback-

Principle of user feedback applies to widgets and program activity.

Ex. Click a button it suggests it is depressed.

Ex. Appearance of check box suggests that it is selected.

Ex. User should know that a program is in progress by hourglass or progress bar

Novice user should tell what steps are already performed.

23

24

Multimedia clips

5. Use sound, colour, animation and multimedia clips sparingly-

Appropriate for education or entertainment.

Platforms have written convention that describes the usage.

Include them only if user’s ability is improved.

Colour and sound should not be the sole means of communication.

25

Customize

6. Help user customize and preserve their preferred work environment-

Depends whether the program is single user or multi user.

Issues like size, location of a window.

Video issues like screen size, video resolution, contrast.

Ex. Full screen interface looks good on 14 inch VGA display but not in 17 inch display.

User should be permitted to customize and set defaults

26

27

28

Interface

7. Design an interface so that user can accomplish their task without being aware of interface-

Principle of transparency

Interface transparency occurs when user’s attention is drawn away from interface and directed at the task.

29

Program window

30

GUI programming examples

• A program that represents an application of object windows. It creates a main window with caption TEST that can be resized, moved, minimized and closed

#include<ow1\applicat.h>Int OwlMain(int/*argc*/,char*/*argv*/[ ])

{Return TApplication (“TEST”).Run( );

}

31

TEST

_ X

32

GUI programming examples

• Program to display a window with the title TEST; message HELLO and an OK button

#include<window.h>Int_stdcall WinMain(HINSTANCE hIstance,

HINSTANCE HPrevInstance, LPSTR)Lpsz(Cmdline, intnCmdShow){

Messagebox (0, “Hello!”, “TEST”, 0);Return(0);

}

33

GUI programming examples

34

Integration of graphics standard

Three essential system interfaces are:

• Application interface

• Device interface

• User interface

35

36

37

Computer Graphics software

• The application programmer interface is represented by four standard efforts:

1. GKS (Graphics Kernel system)

2. GKS 3D

3. PHIGS (Programmers Hierarchical Interactive Graphics System)

4. PHIGS +

38

GKS• It is an international standard

• Portability of software among different hardware is possible.

• It has ability to write device independent graphics program.

• Program can fully exploit all the facilities offered by the hardware.

• Initially developed for 2D but came up with 3D support as well.

39

PHIGS• Extension of GKS.

• Defines a set of functions and data structures to manipulate 3D objects

• Increased capability of modeling, rendering and manipulation.

• Provides the programmer with complete environment containing hierarchical buffers;

• To store scene description

• And to modify interactively40

Device interface

• Software concerned with storage and transmission of data

• Between graphics system and CAD/CAM are

• IGES,DXF,STEP,PDES etc.

• IGES and DXF are widely used standards

41

DXF

• Drawing interchange format developed by AutoCAD developers.

• CAD/CAM software can import or export this file format.

• DXF file is normally an ASCII readable text file.

• Easy to read, to understand and to manually manipulate.

42

IGES• Initial Graphics Exchange Specification is

designed to exchange engineering characteristics.

• Exchange between CAD software, Reverse Engineering, RP machines, CAM systems etc.

• Fundamental unit of data in this file is entity.

• Entities can be geometric or non geometric

43

• Geometric entities represent physical shapes like points, curves, surfaces, solids etc.

• Non geometric entities serve to enrich the model by providing viewing perspective.

• The file format treats the product definition as a file of entities.

44

Thank you

45