Milestone 2 Overview

Milestone 2 Interactive map visualization Open ended Specification is loose  you fill in the details Taught: basics of graphics, data structures and using OSM data For best solution: must learn more & come up with own ideas Different than (most) labs Labs: apply what you have learned in lecture Design: go beyond what you have been taught

FeatureType = Building Milestone 2: API Layers Two layers of database interface Layer 2: used in milestone 1 Must visualize all data in this layer Streets, street names, one-way, points-of-interest, features, … FeatureType = Park FeatureType = Building

Layer 1 API New layer 1 API All OSM data Less structure Optionally can use to visualize more E.g. subway stations Requires reading OSM docs & experimentation

M2 Basic Requirements Visualize everything in the layer 2 (StreetsmapDatabaseAPI.h) API Click on an intersection for extra data Find button to locate intersections by name Load any map without recompilation Graphics must be fast & interactive Detail must not overwhelm user  key info understandable at each zoom / option level Challenge: user can find all the detailed info (somehow in some view) and the big picture is still clear

M2 Grading Code style: 1/13 Basic features: 5/13 Responsiveness, usability, aesthetics: 4/12 Sample challenge: display street names well Which streets to label at which zoom? How often to label along the street? Extra feature(s): 3/12 Display more information from layer 1 API? More “clickable” features (streets, parks, …)? Find with partial name matches? (e.g. Yonge  Yonge) Your ideas? Don’t hard-code: we will test many maps

Good Extra Feature? Change colour scheme? Pinkify button Difficulty matters!

Graphics Proposal & Milestone 2 Starting a new project  make a proposal Survey the landscape Background research How do others make GIS’ interactive and usable yet detailed? What makes user interfaces intuitive? How fast must a UI be to feel interactive? Make a plan What will you do? How will you use or differ from the background research? How will you measure success? Goals / Testing Does the background research give you ideas here? Never skip this step! Use credible research

Intro to Graphics

Different for different platforms Graphics APIs myProg.exe Low level APIs Different for different platforms win32 API x11 & cairo APIs PostScript

Graphics APIs myProg.exe Solution: another layer Higher level API Can target multiple low-level APIs win32 API X11 & cairo APIs PostScript

(simple, cross-platform graphics) Graphics APIs myProg.exe This course: EasyGL (simple, cross-platform graphics) win32 API x11 & cairo APIs PostScript

EasyGL Overview #include “graphics.h” In any file where you want to make graphics calls Add remaining .cpp/.h files in your project, and some libraries in your build step See EasyGL quick start guide and example code/makefile First call: set up window init_graphics (“Some example graphics”, WHITE); Second call: choose your coordinate system set_visible_world (xleft, ybottom, xright, ytop); Window title Background colour

EasyGL Overview Draw primitives Set drawing attributes setcolor (int color_index); // E.g. BLUE (== 9) setcolor (red, green, blue); // red, green and blue are 8-bit integers // e.g. (0, 0, 255) is also blue setcolor (red, green, blue, alpha); // alpha of 255 is opaque (default), 0 is transparent setlinewidth (3); // 3 pixels wide setlinestyle (DASHED); sticky: affect all subsequent drawing until changed Draw primitives drawline (x1, y1, x2, y2); fillrect (lower_left_pt, upper_right_pt); ...

Issue: Interaction? myProg.exe How to pass this information to myProg.exe? This course: EasyGL (simple, cross-platform graphics) Graphics drawing: myProg.exe calls functions Hardware receives the input and X11 knows there is an event x11 API User resizes window or User clicks on a button

Solution: Callbacks EasyGL checks the event queue and calls the appropriate callback  now myProg.exe can handle it. myProg.exe This course: EasyGL (simple, cross-platform graphics) myProg.exe registers callback functions for various events Hardware receives the input and X11 inserts event into event queue x11 API Then hands control to EasyGL User resizes window or clicks on a button …

Handing Control to EasyGL Optional callbacks: not using here Callback function to redraw the screen. int main () { ... event_loop (NULL, NULL, NULL, draw_screen); void draw_screen (void) { // Your screen redraw function. clearscreen (); // Erase old graphics. // Should always be first line setcolor (RED); fillpoly (...); my_drawing_func1 (); } Any name you want, but must have the right function prototype

Your drawing calls (drawline etc.) render here (graphics area) event_loop () EasyGL made and manages these buttons Zooming & Panning: EasyGL adjusts how your drawing appears on screen to zoom & pan

event_loop () calling event_loop()  hands control to EasyGL event_loop () does not return until you hit the Proceed button Use update_message (string) to put text here

Other Callbacks: Mouse Button Presses Called when a mouse button pressed in the graphics area int main () { ... event_loop (act_on_mouse_button, NULL, NULL, draw_screen); void act_on_mouse_button (float x, float y, t_event_buttonPressed buttonPressed) { cout << “Mouse press at (“ << x << “,” << y << “)\n”; if buttonPressed.ctrl_pressed cout << “Ctrl was held down too!\n”; } mouse button callback must have this function signature where did the user click? In world coordinate system

More Optional Callbacks Optional callbacks for when a keyboard key is hit (keypress) and when the mouse is moved in the graphics area int main () { ... event_loop (act_on_mouse_button, act_on_mousemove, act_on_keypress, draw_screen); void act_on_mousemove (float x, float y) { // x and y are the coordinates of the cursor in // world coordinates . . . // Do something ... } void act_on_keypress (char key_pressed, int keysym) { // This key was just pressed. Do something! . . . Regular characters, e.g. ‘q’ Special characters, e.g. left arrow

Notes Graphics can be buffered Nothing guaranteed to appear until you call event_loop () or flushinput () You can make your own buttons with create_button () Give each a callback function for when it is pressed ECE 244 Used a simplified wrapper to EasyGL This course: all routines available

Cleaning Up Last call: close down window close_graphics (); Some systems (e.g. vnc) don’t properly restart graphics after a close_graphics call Safest to call init_graphics () once at start of program And call close_graphics () once at end