1. Milestone 2 Overview

2. 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

3. 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

4. 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

5. 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
Need a main.cpp, not just unit tests now
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

6. M2 Grading (15% of course mark)
Code style & project management: 2/15
Basic features: 5/15
Responsiveness, usability, aesthetics: 4/15
Sample challenge: display street names well
Which streets to label at which zoom?
How often to label along the street?
Extra feature(s): 4/15
Display more information from layer 1 API?
More “clickable” features (streets, parks, …)?
Add data from the web (libcurl Quick Start)?
Your ideas?
Don’t hard-code: we will test many maps

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

8. WD1 Graphics Proposal & Milestone 2
Starting a new project  make a proposal
Survey the landscape
Background research
How do others make GIS’ responsive and usable yet detailed?
What makes user interfaces intuitive?
How fast must a UI be to feel responsive?
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

9. Concrete Goal / Test
Usability?
Responsiveness?

10. Intro to Graphics

11. Different for different platforms
Graphics APIs
myProg.exe
Low level APIs
Different for different platforms
win32 / Direct3D
x11
PostScript

12. Graphics APIs myProg.exe Solution: another layer Higher level API
Can target multiple low-level APIs
Win32 / Direct3D
X11
PostScript

13. Graphics APIs myProg.exe All students use this layer This course: EZGL
(simple, cross-platform graphics)
Can add code to this layer for extra UI elements
gtk
Win32/Direct3D
X11 & cairo
PostScript

14. EZGL Overview > ece297init 2
Adds the ezgl source code to your repository
Read basic_application.cpp in the ezgl example
#include “ezgl/application.hpp”
#include “ezgl/graphics.hpp”
In any file where you want to make graphics calls

15. Opening the graphics window
In draw_map ( ) {
// Create our EZGL application, using our predefined UI // layout and main drawing window
ezgl::application::settings settings;
settings.main_ui_resource = "main.ui"; // UI layout
settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas";
ezgl::application application(settings);
application.add_canvas("MainCanvas", draw_main_canvas, initial_world);
Name of callback function that will redraw your MainWindow
Coordinate system (xlow, ylow) to (xhigh, yhigh) you want to draw in

16. Specify callbacks and hand control to ezgl
In draw_map ()
application.run (initial_setup, act_on_mouse_press, act_on_mouse_move, act_on_key_press);
initial_setup: called as soon as window created
act_on_mouse_press: called when mouse button pressed
act_on_mouse_move: called when mouse moves
act_on_key_press: called when a keyboard key pressed
Names of functions you write

17. draw_main_canvas draws here (“MainWindow”)
EZGL made and manages these buttons
application.run only returns when you press Proceed

18. Issue: Interaction? myProg.exe
How to pass this information to myProg.exe?
EZGL
Graphics drawing:
myProg.exe calls functions
Hardware receives the input and gtk knows there is an event
gtk
User resizes window or
User clicks on a button

19. Solution: Callbacks
EZGL calls the appropriate callback  now myProg.exe can handle it.
myProg.exe
EZGL
myProg.exe registers callback functions for various events
Hardware receives the input and EZGL examines it
gtk
Then hands control to EZGL
(application.run)
User resizes window
or clicks on a button …

20. draw_main_canvas Draw primitives Set drawing attributes
draw_main_canvas (ezgl::renderer &g) {
Set drawing attributes
g.set_color (ezgl::BLACK);
g.set_color (0, 0, 0, 255); // 8-bit r, g, b, alpha
// alpha of 255 is opaque, 0 is transparent
g.set_line_width (3); // 3 pixels wide
g.set_line_dash (ezgl::line_dash::asymmetric_5_3);
sticky: affect all subsequent drawing until changed
Draw primitives
g.draw_line (x1, y1, x2, y2);
g.fill_rectangle (lower_left_pt, upper_right_pt);
...

21. Other Callbacks: Mouse Button Presses
Called when a mouse button pressed in the graphics area
void act_on_mouse_button (ezgl::application *app, GdkEventButton *event, double x, double y) { cout << “Mouse press at (“ << x << “,” << y << “)\n”; cout << “Button number was “ << event->button); }
mouse button callback must have this function signature
where did the user click?
In world coordinate system

22. More features
You can make your own buttons with application->create_button ()
Give each a callback function for when it is pressed
You can put a message at window bottom with application->update_message (“my message”)
Advanced:
Can modify the UI layout
Can add dialogs and other “widgets”
See EZGL quick start guide

23. World Coordinate System: You Choose!
E.g., use km from Prime Meridian & Equator
initial_world (-2000, 4010, -1950, 4025)
world: (-1950,4034.7)
world: (-2000,4000.3)
Maintains aspect ratio

24. Screen (Pixel) Coordinates: Fixed
world: (-1950,4034.7)
world: (-2000,4000.3)
screen (900, 619)

25. Panning & Zooming: EZGL Transforms
world: (-1960,4026.5)
EZGL changes the mapping from world  screen pixels
Calls your drawscreen ()
Only a part of your picture shows up on screen
world: (-1990,4007.8)

26. Panning & Zooming: EZGL Transforms
You can draw everything
But will only see the part that maps to the screen
world: (-1960,4026.5)
world: (-1990,4007.8)

27. Pan & Zoom (Transform) Implications
Your draw_main_canvas() callback can always draw the whole map (world)
Only proper part will show up on screen
Some CPU time to draw objects that aren’t on screen, but less than you might expect (pre-clipped by EZGL)

28. Screen Coordinates for Fixed Overlays
What if I want to draw a scale in the upper-left?
Don’t want it to move / resize with pan & zoom
g.set_coordinate_system (ezgl::SCREEN);
// All drawing in screen (pixel) coords until you call g.set_coordinate_system (ezgl::WORLD)
0 1 km

29. Level of Detail
Zoomed way in  can show small details (street names, small streets, …)
Zoomed way out  draw every detail:

30. Level of Detail Utilities
g.set_font_size (10); // 10 point font  10/72 inch high point2d center (-1970, 4020); g.draw_text (center, “Awesome street”); float strtLen = 0.2; // 200 m long. g.draw_text (center, “Awesome street”, strtLen, strtLen);
Fonts are in screen coordinates, not world coordinates. What if this text is much longer than the street?
Awesome Street
My Street
Electric Avenue
AYour Street
Sesame Street
E. Street
Easy Street
Text won’t be drawn if it is wider or higher than these numbers, in world coordinates
g.draw_text (point2d loc, string text, bound_x = FLT_MAX, bound_y=FLT_MAX)
Last two parameters optional: default to huge boundary (always draw)

31. Level of Detail Utility
rectangle get_visible_world();
Returns the world coordinates of the screen edges
Use to decide if you’re zoomed in or not

32. Hit Testing
Mouse clicked here
What did I click on?

33. Hit Testing EZGL does not know what you drew
“Immediate mode” graphics
Draws the pixels for a line, etc.
Does not remember the line!
Hit testing: you must code
act_on_mouse_button (application, event, x, y)
What is closest to that (x,y)?