mark dixon, socce soft 131page 1 03 – debugging, sound, and graphics

Mark Dixon, SoCCE SOFT 131

03 – Debugging, Sound,and Graphics


Session Aims & Objectives• Aims

– introduce you to the fundamentals of:• debugging• sound, and• graphics

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

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


Testing & Debugging: Errors• 3 error types :

– syntax: computer unable to understand your instructions (program does not execute), e.g.

• variable not defined (probably most common)

– run-time: program can't execute instruction and exits (future lecture)

• Device unavailable (e.g. floppy drive)

– logical: program executes but does not not match specification (do what was intended), e.g.

• clicking on button does nothing, when you thought you attached code to it

• clicking on blue button changes colour to red (when it should change to blue)


• Computer – just symbol matching– No intelligence

Example: Hello Errors

Sub Command1_Cluck LabelL.Caption = "Hello"End Sub

L instead of 1: causes syntax error (variable not defined)

u instead of i: causes logical error (Command1 button does nothing)


Exercise: Errors

• The following example is from lecture 1,– Spot the errors (you should find 6), and– decide whether they are syntax or logical

Private Sub btnBlue_Cluck() lblResult.BackColor = vbRedEnd Sub

Private Sub btnRed_lick() lblResult.BackColor vbRedEnd Sub

Private Sub lb1Result_DblClick() lblResult.BackColour = vbWhiteEnd Sub


Debugging: Testing

• Functional Decomposition– break it into logical chunks

• Incremental Development– type a bit– test it

• Testing– test all/most combinations

• Regression Testing– repeat all previous tests


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: 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


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: 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

mark dixon, socce soft 131page 1 03 – debugging, sound, and graphics

Documents

socce soft

mark dixon

graphics slide

picview slide

file slide

blue slide

vbwhite end sub slide

types of graphics