mark dixon, socce soft 131page 1 03 – user interface design, and sound and graphics

Mark Dixon, SoCCE SOFT 131

03 – User Interface Design, and Sound and Graphics


Session Aims & Objectives• Aims

– introduce you to the fundamentals of:• good user-interface design,• sound, and• graphics

• Objectives, by end of this week’s sessions, you should be able to:

– put bitmap (raster) graphics into your applications– draw simple vector graphics in your applications– play MP3 and WAV files in your applications


Example: disks & files


Human-Computer Interaction‘Human-Computer Interaction (HCI) is about designing computer systems that support people so that they can carry out their activities productively and safely.’ Preece et al, 1994 (p. 1)

• three main concerns:– usefulness: is software functionality of use to user– usability: is software easy to use– learnability: is software easy to learn

• software may be:– ‘simple to use, but of no value to me’– ‘really helpful, but awkward to use’– ‘really helpful, if only I could figure out how’


HCI – why bother?

• ‘The Day the Phones Stopped’

(Preece et al, 1994 p. 25)


HCI - Design Guidelines• Some issues:

– Consistency– Fast feedback– Manage errors– Reduce cognitive load– User variety– User testing with actual users– …– …


Question: Address BookWhich is best?


HCI - Direct Manipulation

• Direct Manipulation Interfaces (Shneiderman 1998, p. 205)

– ‘Continuous representation of the objects and actions [information] of interest with meaningful visual metaphors’

– ‘Physical actions or presses of labelled buttons, instead of complex syntax’

– ‘Rapid incremental reversible operations whose effect on the object of interest is visible immediately’


Example: Ball v2 - Design

• User interface design:

• Functional design:Trigger (when) Actions (what)click event of Right button move ball character right

click event of Left button move ball character left

click event of Up button move ball character up

click event of Down button move ball character down

click event of Centre button move ball character to centre of form

BallChar


Example: Ball v2 - Code

Option Explicit

Private Sub btnCentre_Click() picBallChar.Left = Me.ScaleWidth / 2End Sub

Private Sub btnRight_Click() picBallChar.Left = picBallChar.Left - 200End Sub

• Properties (setting at run-time)– use code, assignment operator (=)– can change while program is running

BallChar


Example: Holiday

• User Requirement– ‘I want a cheap holiday, so I need to know times

and prices of ferries and flights’

• Can solve this by– visit company offices– phone– www, compare the following:

• Brittany Ferries• EasyJet

http://www.brittany-ferries.co.uk

http://www.easyjet.co.uk


Types of Graphics: Raster

• Raster graphics – made of dots (pixels – picture elements)– stored in .jpg, .bmp, and .gif files– suitable for complex, static pictures (e.g. photos)– difficult to change programmatically– loses quality when enlarged:


Types of Graphics: Vector

• Vector graphics – made of objects (lines, circles, etc.)– suitable for simple, dynamic pictures (diagrams)– No loss of quality when enlarged


Example: PicView - AnalysisSPECIFICATION

• User Requirements – display photos quickly and easily one after another

• Software Requirements– Functional:

–change current folder and drive–display list of picture files in current folder–display picture (*.jpg, *.bmp, and *.gif) from files

in current folder– Non-functional

should be quick and easy to use PicView


Controls

• Picture Box: display pictures

• Drive List Box: allow user to select disk drive

• Directory List Box: allow user to select folder

• File List Box: allow user to select file


Controls' Properties• Picture Box (pic)

– Picture: allows display of bitmap (raster graphic) as background

• Drive List Box (drv)– Drive: the currently selected disk drive

• Directory List Box (dir)– Path: the currently selected directory (folder)

• File List Box (fil)– Path: the currently selected folder/directory– Pattern: only display this type of file (e.g. .jpg)– FileName: the currently selected file


Example: PicView - Design

• User interface design:

• Functional design:

Trigger (when) Actions (what)click event of Drive Box make drive current (directory box

points to this drive)

click event of Directory Box make folder current (file box points to this folder)

click event of File Box display selected picture in picture box


Example: PicView - Code

Option Explicit

Private Sub drvMain_Change() dirMain.Path = drvMain.DriveEnd Sub

Private Sub dirMain_Change() filMain.Path = dirMain.PathEnd Sub

Private Sub filMain_Click() picMain.Picture = LoadPicture(filMain.Path & "\" & filMain.FileName)End Sub

drvMain

dirMain

picMain

filMain


Vector Graphics: Grid System

• the origin (position 0,0) is at top left– in mathematics it is always bottom left

200010000

0

1000


Picture Box: Drawing Methods

• Methods (vector graphics)– Line: draws a straight line between 2 points– Circle: draws a circle– PSet: draws a dot (point)– Cls: clears (screen) drawing area


Example: Shapes

• Form and Picture Box control support graphics methods:

0 200010000

1000

picDisplayArea.Line (500, 200)-(1900, 800)picDisplayArea.Line -(2600, 600)picDisplayArea.Line -Step(-600, -400)

picDisplayArea.PSet (1500, 1000)picDisplayArea.Circle (700, 900), 300

Shapes


Example: StickMan

• Enabled property (true or false)

StickMan

200010000

0

1000


Example: Face

Face


Example: Door

Private Sub btnDoor_Click() picDoor.Cls picDoor.Line (200, 200)-(1300, 1800), vbRed, BF picDoor.Line (200, 200)-(1300, 1800), vbBlack, B picDoor.Line (300, 300)-Step(300, 600), vbGreen, BF picDoor.Line picDoor.Line picDoor.Line picDoor.FillColor = vbYellow picDoor.FillStyle = vbSolid picDoor.Circle (1150, 900), 100, vbBlueEnd Sub

you need to fillthese lines in


Additional Controls

• VB has hundreds of controls

• To include additional controls in your project:– Project menu– Components item

• Multimedia Control– plays

MP3 & WAV files


Multimedia Controls' Properties

• Multi-media Control– FileName: name of file to play– Command: controls playback


Example: Ball v3 - Code• Properties (setting at run-time)

– use code, assignment operator (=)– can change while program is running

BallChar

Private Sub picBallChar_Click() mmcNoise.Command = "Close" mmcNoise.FileName = "Fart.wav" mmcNoise.Command = "Open" mmcNoise.Command = "Play"End Sub

mmcNoise


Example: Music Player - Analysis

• User Requirement: – to play different music for long time without

interruption, at same location (while working or at party)

• Software Requirements Specificationsoftware should:– allow user to:

• select track (MP3 file) from folder on disk• play selected track

– automatically• move to next track in folder• go back to first after last has played

later lecture


Example: Music Player - Design

• Compare the following User Interface Designs:

V0 V1


Example: Music Player - CodeOption Explicit

Private Sub drvMain_Change() dirMain.Path = drvMain.DriveEnd Sub

Private Sub dirMain_Change() filMain.Path = dirMain.PathEnd Sub

Private Sub filMain_Click() mmcMain.Command = "Close" mmcMain.FileName = filMain.Path & "\" & filMain.FileName mmcMain.Command = "Open"End Sub

drvMain dirMain

filMainmmcMain


• Run your program (F5), or

• Step through line by line (F8)• Immediate

Window:codeexecutedimmediately

VB6 IDE: DebuggerRun

Pause

Stop


VB6 IDE: Help System

• F1 key– when control selected– when code selected

• Gives helpabout whatwas selected

• Not tutorial

• A reference


Tutorial Exercise: PicView• Task 1: Get the BallChar v2 example (from the lecture) working.• Task 2: Get the PicView example (from the lecture) working.• Task 3: Get the StickMan example (from the lecture) working.• Task 4: Get the BallChar v3 example (from the lecture) working.• Task 3: Get the Music Player example (from the lecture)

working.• Task 5: Modify your program to automatically start playing a

track once it is clicked.• Task 6: Modify your program to automatically go the next track

after the current one ends.• Task 7: Modify your program to include a progress bar that

shows the current position in a playing track(You will need to use the help system)

mark dixon, socce soft 131page 1 03 – user interface design, and sound and graphics

Documents

socce soft

mark dixon

graphics slide

centre of form ballchar

good userinterface design

user usability

raster raster graphics

graphics objectives