1. GUI Graphics
Chris North
cs3724: HCI

2. Quiz First 2 things? 3 types of API procs for components? Users!
Tasks!
3 types of API procs for components?
Properties
Methods
Events

3. Presentations
bruce billian
nick meyers
Vote: UI Hall of Fame/Shame?

4. Project 1: VB Due Thurs Feb 7 Visual Basic
Virtual VCR: scheduling, reviewing recordings
50% UI design: direct manip?
50% program: advanced feature
1 page report: design decisions

5. Graphics Window is like a painter’s canvas Components paint themselves
Anything else: Programmer

6. Pixels

7. Coordinate System Upside-down Cartesian Yscreen = height - Ycartesian
(0,0)
(width,0)
(0,height)
(width, height)

8. Component Hierarchy Container components
Each component has its own window
“Window” = invisible rectangle
Components have own coordinate system
(0,0)
form
button
(0,0)
(wb, hb)
(wf, hf)

9. Graphics Primitives Point (x,y) Line (pt1,pt2) Circle (pt, rad)
oval
Rectangle (ul, w,h)
Polygon (pt list)
Image (file, x,y)
Erase
Text (string, x,y)

10. Graphics Parameters Line width Line style Line color Fill color
Fill pattern …

11. Color
Combinations of Red, Green, Blue
Each [0, 255]
VB: RGB(r, g, b)

12. VB: drawing program

13. Repaint Screen is like a painter’s canvas
All windows paint on the same surface!
Windows don’t “remember” whats under them
Need to repaint on Expose events
Open, resize, bring to front
When other windows in front move, resize, close

14. MyApp

15. Open WinExplorer

16. Close WinExplorer
MyApp window receives Expose event

17. MyApp Repaints

18. Typical program structure
Store data structure of window contents
Expose event:
Erase window (draw background color)
Draw data structure
2 methods to store window contents:
Store logical contents in a data structure
E.g. drawing program: lines, shapes, colors, …
Store visual contents as an off-screen image (bitmap)
E.g. pixels

19. What good are windows? Own coordinate system
Don’t need repaint when moving
Clipping: hides drawing behind a window
Directs mouse input to correct component
Some windows remember whats under them:
Popup menus

20. Visual Basic Using Paint event Using AutoRedraw
implements off-screen image storage
Using line and shape controls
ScaleMode
Twips = Screen.TwipsPerPixelX * pixels

21. Drag-n-Drop
VB DragMode
OLE drag-n-drop
Direct manip

22. Next Presentations: Thurs: taylor mitchell, chris henry
Next Tues: john charonko, jaime spicciati
Next Thurs: terrence witt, mohamed hassoun