Mark Dixon, SoCCE SOFT 131Page 1 03 – User Interface Design, and Sound and Graphics

Mark Dixon, SoCCE SOFT 131Page 2 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

Mark Dixon, SoCCE SOFT 131Page 3 Example: disks & files

Mark Dixon, SoCCE SOFT 131Page 4 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’

Mark Dixon, SoCCE SOFT 131Page 5 HCI – why bother? ‘The Day the Phones Stopped’ ( Preece et al, 1994 p. 25)

Mark Dixon, SoCCE SOFT 131Page 6 HCI - Design Guidelines Some issues: –Consistency –Fast feedback –Manage errors –Reduce cognitive load –User variety –User testing with actual users –…

Mark Dixon, SoCCE SOFT 131Page 7 Question: Address Book Which is best?

Mark Dixon, SoCCE SOFT 131Page 8 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’

Mark Dixon, SoCCE SOFT 131Page 9 Example: Ball v2 - Design User interface design: Functional design: Trigger (when)Actions (what) click event of Right buttonmove ball character right click event of Left buttonmove ball character left click event of Up buttonmove ball character up click event of Down buttonmove ball character down click event of Centre buttonmove ball character to centre of form BallChar

Mark Dixon, SoCCE SOFT 131Page 10 Example: Ball v2 - Code Option Explicit Private Sub btnCentre_Click() picBallChar.Left = Me.ScaleWidth / 2 End Sub Private Sub btnRight_Click() picBallChar.Left = picBallChar.Left End Sub Properties (setting at run-time) –use code, assignment operator (=) –can change while program is running BallChar

Mark Dixon, SoCCE SOFT 131Page 11 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

Mark Dixon, SoCCE SOFT 131Page 12 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:

Mark Dixon, SoCCE SOFT 131Page 13 Types of Graphics: Vector Vector graphics – made of objects (lines, circles, etc.) –suitable for simple, dynamic pictures (diagrams) –No loss of quality when enlarged

Mark Dixon, SoCCE SOFT 131Page 14 Example: PicView - Analysis SPECIFICATION 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

Mark Dixon, SoCCE SOFT 131Page 15 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

Mark Dixon, SoCCE SOFT 131Page 16 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

Mark Dixon, SoCCE SOFT 131Page 17 Example: PicView - Design User interface design: Functional design: Trigger (when)Actions (what) click event of Drive Boxmake drive current (directory box points to this drive) click event of Directory Boxmake folder current (file box points to this folder) click event of File Boxdisplay selected picture in picture box

Mark Dixon, SoCCE SOFT 131Page 18 Example: PicView - Code Option Explicit Private Sub drvMain_Change () dirMain.Path = drvMain.Drive End Sub Private Sub dirMain_Change () filMain.Path = dirMain.Path End Sub Private Sub filMain_Click () picMain.Picture = LoadPicture(filMain.Path & "\" & filMain.FileName) End Sub drvMain dirMain picMain filMain

Mark Dixon, SoCCE SOFT 131Page 19 Vector Graphics: Grid System the origin (position 0,0) is at top left –in mathematics it is always bottom left

Mark Dixon, SoCCE SOFT 131Page 20 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

Mark Dixon, SoCCE SOFT 131Page 21 Example: Shapes Form and Picture Box control support graphics methods: 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

Mark Dixon, SoCCE SOFT 131Page 22 Example: StickMan Enabled property (true or false) StickMan

Mark Dixon, SoCCE SOFT 131Page 23 Example: Face Face

Mark Dixon, SoCCE SOFT 131Page 24 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.FillColor = vbYellow picDoor.FillStyle = vbSolid picDoor.Circle (1150, 900), 100, vbBlue End Sub you need to fill these lines in

Mark Dixon, SoCCE SOFT 131Page 25 Additional Controls VB has hundreds of controls To include additional controls in your project: –Project menu –Components item Multimedia Control –plays MP3 & WAV files

Mark Dixon, SoCCE SOFT 131Page 26 Multimedia Controls' Properties Multi-media Control –FileName: name of file to play –Command: controls playback

Mark Dixon, SoCCE SOFT 131Page 27 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

Mark Dixon, SoCCE SOFT 131Page 28 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 Specification software 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

Mark Dixon, SoCCE SOFT 131Page 29 Example: Music Player - Design Compare the following User Interface Designs: V0 V1

Mark Dixon, SoCCE SOFT 131Page 30 Example: Music Player - Code Option Explicit Private Sub drvMain_Change() dirMain.Path = drvMain.Drive End Sub Private Sub dirMain_Change() filMain.Path = dirMain.Path End Sub Private Sub filMain_Click() mmcMain.Command = "Close" mmcMain.FileName = filMain.Path & "\" & filMain.FileName mmcMain.Command = "Open" End Sub drvMaindirMain filMainmmcMain

Mark Dixon, SoCCE SOFT 131Page 31 Run your program (F5), or Step through line by line (F8) Immediate Window: code executed immediately VB6 IDE: Debugger Run Pause Stop

Mark Dixon, SoCCE SOFT 131Page 32 VB6 IDE: Help System F1 key –when control selected –when code selected Gives help about what was selected Not tutorial A reference

Mark Dixon, SoCCE SOFT 131Page 33 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)