Milestone 2 Overview

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. 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 (libcurlQuick 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. Graphics APIs myProg.exe Low level APIs Different for different platforms win32 / Direct3D PostScript x11

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

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 ezglexample #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 Names of functions you write • 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

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_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) screen (0, 0) world: (-2000,4000.3) screen (900, 619)

25. Panning & Zooming: EZGL Transforms world: (-1960,4026.5) EZGLchanges 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 world: (-1960,4026.5) • You can draw everything • But will only see the part that maps to the screen 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 Electric Avenue My Street AYour Street E. Street Sesame 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 rectangleget_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)?