GUI Graphics Chris North cs3724: HCI

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

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

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

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

Pixels

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

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)

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)

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

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

VB: drawing program

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

MyApp

Open WinExplorer

Close WinExplorer MyApp window receives Expose event

MyApp Repaints

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

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

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

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

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