Getting Started with Milestone 2. From Lat Lon, to Cartesian, and back again

Transcription

1 Getting Started with Milestone 2 From Lat Lon, to Cartesian, and back again

2 Initial Steps 1. Download m2 handout 2. Follow the walkthrough in Section 4 3. Read the EZGL QuickStart Guide 4. Modify main.cpp 5. Begin implementing the draw_map function

3 Modifying Your Main Function #include "m1.h" #include "m2.h Don t forget to include m2.h int main(int argc, char** argv) { //Other code goes here You only need to add one line in the function. Make sure you call draw_map after you call load_map. Make sure you call draw_map before you call close_map. //Load the map and related data structures bool load_success = load_map(map_path); if(!load_success) { std::cerr << "Failed to load map ' << map_path << "'\n"; return 2; draw_map(); close_map(); return 0;

4 Goal #1: Creating an Empty Window

5 Goal #1: An Empty Window

6 Implementing draw_map Make sure to include m2.h #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp void draw_map () { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas"; ezgl::application application(settings); application.run(nullptr, nullptr, nullptr, nullptr);

7 Implementing draw_map Include EZGL headers Read these headers in detail, they describe all the features of EZGL #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp void draw_map () { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas"; ezgl::application application(settings); application.run(nullptr, nullptr, nullptr, nullptr);

8 Implementing draw_map Setup EZGL Configuration main.ui file defines window layout #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp void draw_map () { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas"; ezgl::application application(settings); application.run(nullptr, nullptr, nullptr, nullptr);

9 Implementing draw_map Create the EZGL application #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp void draw_map () { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas"; ezgl::application application(settings); application.run(nullptr, nullptr, nullptr, nullptr);

10 Implementing draw_map Finally we run the application Passes control to EZGL Graphics window will open Will not return until graphics closed #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp void draw_map () { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas"; ezgl::application application(settings); application.run(nullptr, nullptr, nullptr, nullptr);

11 Our Newly Created Window Pan Buttons Zoom buttons Close window and continue

12 Drawing on a Canvas #include "m2.h #include "ezgl/application.hpp #include "ezgl/graphics.hpp Need to define a Canvas (area to draw upon), requires: Named location in main.ui ( MainCanvas ) Co-ordinate system (initial_world) Drawing callback function (draw_main_canvas) application.run() will call draw_main_canvas() void draw_main_canvas (ezgl::renderer &g); void draw_map_blank_canvas() { ezgl::application::settings settings; settings.main_ui_resource = "libstreetmap/resources/main.ui"; settings.window_identifier = "MainWindow"; settings.canvas_identifier = "MainCanvas; ezgl::application application(settings); ezgl::rectangle initial_world({0, 0, {1000, 1000); application.add_canvas("maincanvas", draw_main_canvas, initial_world); application.run(nullptr, nullptr, nullptr, nullptr);

13 Draw Callback Called by application.run() to paint the canvas The renderer object supports many drawing operations (shapes, text): See ezgl/graphics.hpp void draw_main_canvas (ezgl::renderer &g) { g.draw_rectangle({0, 0, {1000, 1000); ; For now, we just draw a rectangle around the world coordinates draw_rectangle takes two arguments: Bottom-left corner Top-right corner

14 Our Window s Coordinate System Top-Right Corner (1000.0, ) Bottom-Left Corner (0.0, 0.0)

15 Goal #2: Drawing Intersections

16 Loading Intersection Data struct intersection_data { LatLon position; std::string name; ; std::vector<intersection_data> intersections; void draw_map () { intersections.resize(getnumintersections()); for (int id = 0; id < getnumintersections(); ++id) { intersections[id].position = getintersectionposition(id); intersections[id].name = getintersectionname(id); Write your code to initialize intersections //Other setup code not shown... application.run(nullptr, nullptr, nullptr, nullptr);

17 Use fill_rectangle to draw all the intersections struct intersection_data { LatLon position; std::string name; ; void draw_main_canvas(ezgl::renderer &g) { g.draw_rectangle({0, 0, {1000, 1000); std::vector<intersection_data> intersections; for (size_t i = 0; i < intersections.size(); ++i) { float x = intersections[i].position.lon(); float y = intersections[i].position.lat(); Write your code to draw each intersection float width = 10; float height = width; g.fill_rectangle({x, y, {x + width, y + height);

18 Attempt #1 at Drawing Intersections

19 Are x and y correct? What are the possible values of the longitude and latitude? void draw_main_canvas(ezgl::renderer &g) { g.draw_rectangle({0, 0, {1000, 1000); for (size_t i = 0; i < intersections.size(); ++i) { float x = intersections[i].position.lon(); float y = intersections[i].position.lat(); What coordinate system did we setup as initial_world? float width = 10; float height = width; g.fill_rectangle({x, y, {x + width, y + height);

20 Finding Map bounds double max_lat = getintersectionposition(0).lat(); double min_lat = max_lat; double max_lon = getintersectionposition(0).lon(); Write your code here double min_lon = max_lon; intersections.resize(getnumintersections()); for (int id = 0; id < getnumintersections(); ++id) { intersections[id].position = getintersectionposition(id); intersections[id].name = getintersectionname(id); max_lat = std::max(max_lat, intersections[id].position.lat()); min_lat = std::min(min_lat, Write your intersections[id].position.lat()); code here max_lon = std::max(max_lon, intersections[id].position.lon()); min_lon = std::min(min_lon, intersections[id].position.lon());

21 Updating World Coordinates ezgl::rectangle initial_world({min_lon, min_lat, {max_lon, max_lat); application.add_canvas("maincanvas", draw_main_canvas_xy_fixed_world, initial_world); application.run(nullptr, nullptr, nullptr, nullptr);

22 Attempt #3 A corrected visible world

23 Modifying the draw size Intersection width and height were set to big! I played around and got it right with Should the width and height change based on the zoom level?

24 Attempt #4 Eureka! Is this correct?

25 Converting Lat/Lon to Cartesian X/Y Should project Lat/Lon to Cartesian X/Y See M1 handout for details Need average latitude of map Should use functions to do the conversion: float x_from_lon(float lon); float y_from_lat(float lat); Inverse also useful: float lon_from_x(float x); float lat_from_y(float y);

26 Convert x and y into Cartesian Coordinates void draw_main_canvas(ezgl::renderer &g) { for (size_t i = 0; i < intersections.size(); ++i) { float x = x_from_lon(intersections[i].position.lon()); float y = y_from_lat(intersections[i].position.lat()); float width = 0.001; float height = width; g.fill_rectangle({x, y, {x + width, y + height);

27 Attempt #5 Corrected Projection

28 Projection Comparison

29 Reacting to Mouse Clicks

30 Reacting to Mouse Clicks application.run(nullptr, act_on_mouse_click, nullptr, nullptr); void act_on_mouse_click(ezgl::application* app, GdkEventButton* event, double x, double y) { std::cout << "Mouse clicked at (" << x << "," << y << ")\n"; Find the closest intersection to (x, y) LatLon pos = LatLon(lat_from_y(y), lon_from_x(x)); int id = find_closest_intersection(pos); Write your code to find the closest intersection to (x, y) std::cout << "Closest Intersection: << intersections[id].name << "\n";

31 Stateful Graphics

32 Highlighting Closest Intersection How can we draw the closest intersection differently? void act_on_mouse_click(ezgl::application* app, GdkEventButton* event, double x, double y) { std::cout << "Mouse clicked at (" << x << "," << y << ")\n"; Find the closest intersection to (x, y) LatLon pos = LatLon(lat_from_y(y), lon_from_x(x)); int id = find_closest_intersection(pos); std::cout << "Closest Intersection: << intersections[id].name << "\n";

33 Storing & Modifying State Set state based on mouse click struct intersection_data { LatLon position; std::string name; bool highlight = false; ; void act_on_mouse_click(ezgl::application* app, GdkEventButton* event, double x, double y) { std::cout << "Mouse clicked at (" << x << "," << y << ")\n"; Find the closest intersection to (x, y) LatLon pos = LatLon(lat_from_y(y), lon_from_x(x)); int id = find_closest_intersection(pos); std::cout << "Closest Intersection: << intersections[id].name << "\n"; intersections[id].highlight = true;

34 Drawing State Draw based on state struct intersection_data { LatLon position; std::string name; bool highlight = false; ; void draw_main_canvas(ezgl::renderer &g) { for (size_t i = 0; i < intersections.size(); ++i) { float x = x_from_lon(intersections[i].position.lon()); float y = y_from_lat(intersections[i].position.lat()); float width = 0.001; float height = width; if (intersections[i].highlight) { g.set_color(ezgl::red); else { g.set_color(ezgl::grey_55); g.fill_rectangle({x, y, {x + width, y + height);

35 Forcing a Redraw When state changes graphics will not update Can force a refresh void act_on_mouse_click(ezgl::application* app, GdkEventButton* event, double x, double y) { std::cout << "Mouse clicked at (" << x << "," << y << ")\n"; LatLon pos = LatLon(lat_from_y(y), lon_from_x(x)); int id = find_closest_intersection(pos); std::cout << "Closest Intersection: << intersections[id].name << "\n"; intersections[id].highlight = true; app->refresh_drawing();

36 Modifying GUI

37 Modifying GUI The GUI window layout is specified in: libstreetmap/resources/main.ui You can modify the GUI by editing this file Easiest way is to use the glade GUI editor tool: $ glade libstreetmap/resources/main.ui Can re-name components Move positions Add new components (text boxes etc.)