CSCE 121: Introduction to Program Design and Concepts Dr. J. Michael Moore Spring 2015 Set 12: A Display Model 1 Based on slides created by Bjarne Stroustrup and Jennifer Welch

CSCE 121: Set 12: A Display Model Advantages of Graphics and GUIs Very common Instant feedback Illustrates some generally useful concepts and techniques – Class inheritance especially Fun! 2

CSCE 121: Set 12: A Display Model Display Model Objects (e.g., text boxes and squares) are attached to a window Display engine invokes commands to draw the objects in the window 3 Text Box Square Window Display Engine attach() draw()

CSCE 121: Set 12: A Display Model Display Model Example 4 // some boilerplate int main() { // make a point at coordinates (100,200) Point t1(100,200); // make a basic window Simple_window win(t1,600,400,”Canvas”); // make a polygon with no points initially Polygon poly; // add (300,200), (350,100), and (400,200) to polygon poly.add(Point(300,200)); poly.add(Point(350,100)); poly.add(Point(400,200)); poly.set_color(Color::red); // make the polygon red win.attach(poly); // connect polygon to window // give control to display engine win.wait_for_button(); }

CSCE 121: Set 12: A Display Model The Result 5

CSCE 121: Set 12: A Display Model Graphics/GUI Libraries You will be using some interface classes that Dr. Stroustrup wrote – They interface to a popular GUI (graphical user interface) toolkit called FLTK ( – Instructions in lab for accessing The Stroustrup interface is much simpler than common ones – < 20 classes and < 500 lines of code vs. 370 pages of documentation alone for FLTK – Yet it is complete enough to be able to do interesting things 6

CSCE 121: Set 12: A Display Model Benefits of Using Stroustrup Graphics Library Focus on essentials, don’t get bogged down with bells and whistles Code is portable – Windows, Unix, Mac: FLTK is available for all of these General ideas can be used with any popular graphics/GUI toolkit 7

CSCE 121: Set 12: A Display Model Layered Software Architecture 8 Our code The operating system (e.g. Windows or Linux) Our screen Our interface library A graphics/GUI library (here FLTK)

CSCE 121: Set 12: A Display Model Coordinates y-coordinates increase going down (not up) Coordinates identify pixels on screen 9 0,0 0,99 199,0 50,50 199,99

CSCE 121: Set 12: A Display Model Interface Classes Organization Arrow means “is a kind of” (inheritance) Color, Line_styleand Point are “utility classes” Window is interface to the GUI library, and hence the screen 10 Window Simple_window Shape LinesPolygon Rectangle Text Point Color Line_style Line …

CSCE 121: Set 12: A Display Model Interface Classes Overview Graphics (drawing on the screen): – Color, Line_style, Font, Point – Window, Simple_window – Shape, Text, Polygon, Line, Lines, Rectangle,... – Axis (for plots) GUI (communicating with user) – Button, In_box, Out_box,… 11

CSCE 121: Set 12: A Display Model Boiler Plate for Graphics Programming 12 #include “Graph.h” // header for graphics #include “Simple_window.h” // header for window interface using namespace Graph_lib; // make names available int main() try { // main part of code – see upcoming examples } catch(exception& e) { cerr << “exception: “ << e.what() << ‘\n’; return 1; } catch(...) { cerr << “Some exception\n”; return 2; }

CSCE 121: Set 12: A Display Model Demo Code 1: A Blank Canvas 13 Simple_window win( Point(100,100), // coordinates of top left corner 600,400, // width and height of window “Canvas”); // title win.wait_for_button(); // Display!

CSCE 121: Set 12: A Display Model Demo Code 2: Add an X-Axis 14 win.set_label(“Canvas #2”); // change window’s label Axis xa(Axis::x, // horizontal Point(20,300), // start at (20,300) 280, // 280 pixels long 10, // 10 notches (tick marks) “x axis”); // label win.attach(xa); // attach axis to window win.wait_for_button(); // display

CSCE 121: Set 12: A Display Model Demo Code 3: Add a Y-Axis 15 win.set_label(“Canvas #3”); Axis ya(Axis::y, Point(20,300), 280, 10, “y axis”); ya.set_color(Color::cyan); // choose axis color ya.label.set_color(Color::dark_red); // choose label color win.attach(ya); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 4: Add a Sine Curve 16 win.set_label(“Canvas #4”); Function sine(sin, // plot sin function 0,100, // range of x-values Point(20,150), // location of the origin 1000, // number of points to plot 50,50); // scaling factors for x and y values win.attach(ya); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 5: Color, Polygons 17 win.set_label(“Canvas #5”); sine.set_color(Color::blue); Polygon poly; poly.add(Point(300,200)); poly.add(Point(350,100)); poly.add(Point(400,200)); poly.set_color(Color::red); poly.set_style(Line_style::dash); win.attach(poly); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 6: Add a Rectangle 18 win.set_label(“Canvas #6”); Rectangle r(Point(200,200), // top left point 100,50); // width, height win.attach(r); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 6.1: Alternate Rectangle 19 win.set_label(“Canvas #6.1”); Closed_polyline poly_rect; poly_rect.add(Point(100,50)); poly_rect.add(Point(200,50)); poly_rect.add(Point(200,100)); poly_rect.add(Point(100,100)); win.attach(poly_rect); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 6.2: Add to poly_rect 20 win.set_label(“Canvas #6.2”); poly_rect.add(Point(50,75)); // now has 5 points win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 7: Fill and Style 21 win.set_label(“Canvas #7”); r.set_fill_color(Color::yellow); Poly.set_style(Line_style(Line_style::dash,4)); Poly_rect.set_fill_color(Color::green); Poly_rect.set_style(Line_style(Line_style::dash,2));

CSCE 121: Set 12: A Display Model Demo Code 8: Add Text 22 win.set_label(“Canvas #8”); Text t(Point(100,100), // lower left corner of baseline “Hello, graphical world!”); // content win.attach(t); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 9: Modify Text 23 t.set_font(Font::times_bold); t.set_font_size(20); // height in pixels win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 10: Add Image 24 win.set_label(“Canvas #10”); Image ii(Point(100,50),”image.jpg”); win.attach(ii); win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 11: Move Image 25 win.set_label(“Canvas #11”); ii.move(100,200); // move 100 pixels right, 200 pixels down win.wait_for_button();

CSCE 121: Set 12: A Display Model Demo Code 12: Miscellaneous 26 win.set_label(“Canvas #12”); // center: specify center point and radius Circle c(Point(100,200),50); // ellipse: specify center pt, horizontal and vertical radii Ellipse e(Point(100,200),75,25); e.set_color(Color::dark_red); // mark: specify point where is goes and character Mark m(Point(100,200),’x’); // make a Text object using an ostringstream ostringstream oss; oss <<“screen size: “ << x_max() << “*” << y_max() << “; window size: “ << win.x_max() << “*” << win.y_max(); Text sizes(Point(100,20),oss.str()); // mask out part of this image Image cal(Point(225,225), “snow_cpp.gif”); cal.set_mask(Point(40,40),200,150); // attach c, e, m, sizes, cal and wait for button //...

CSCE 121: Set 12: A Display Model Result 12 27

CSCE 121: Set 12: A Display Model Acknowledgments Slides are based on those for the textbook: 28