Overview Chapter 12 A display model Why graphics? A graphics model Examples Bjare Stroustrup www.stroustrup.com/programmig 3 Why bother with graphics ad GUI? Why bother with graphics ad GUI? It s very commo If you write covetioal PC applicatios, you ll have to do it It s useful Istat feedback Graphig fuctios Displayig results It ca illustrate some geerally useful cocepts ad techiques It ca oly be doe well usig some pretty eat laguage features J Lots of good (small) code examples It ca be o-trivial to get the key cocepts So it s worth teachig If we do t show how it s doe, you might thik it was magic Graphics is fu! 4 5 1
Why Graphics/GUI? Display model Shape WYSIWYG What you see (i your code) is what you get (o your scree) Direct correspodece betwee cocepts, code, ad output Square attach() attach() widow draw() Display Egie Objects (such as graphs) are attached to a widow. The display egie ivokes display commads (such as draw lie from x to y ) for the objects i a widow Objects such as Square cotai vectors of lies, text, etc. for the widow to draw 6 7 Display model A example illustratig the display model The resultig scree it mai() { usig amespace Graph_lib; Poit tl {100,200}; // use our graphics iterface library // a poit (obviously) Simple_widow wi {tl,600,400,"cavas }; // make a simple widow Polygo poly; // make a shape (a polygo, obviously) poly.add(poit{300,200}); // add three poits to the polygo poly.add(poit{350,100}); poly.add(poit{400,200}); poly.set_color(color::red); wi.attach(poly); // make the polygo red (obviously) // coect poly to the widow } wi.wait_for_butto(); // give cotrol to the display egie 8 9 2
Graphics/GUI libraries You ll be usig a few iterface classes we wrote Iterfacig to a popular GUI toolkit GUI == Graphical User Iterface FLTK: www.fltk.org // Fast Light Tool Kit Istallatio, etc. Already istalled o Departmetal machies (erdos, LL612 lab machies) To istall o your persoal computer: See Appedix D ad ask istructor/fried FLTK Our GUI ad graphics classes Project settigs This model is far simpler tha commo toolkit iterfaces The FLTK (very terse) documetatio is 370 pages Our iterface library is ~20 classes ad ~500 lies of code You ca write a lot of code with these classes Ad you ca build more classes o them 10 Graphics/GUI libraries (cot.) The code is portable Widows, Uix, Mac, etc. This model exteds to most commo graphics ad GUI uses The geeral ideas ca be used with ay popular GUI toolkit Oce you uderstad the graphics classes you ca easily lear ay GUI/graphics library Well, relatively easily these libraries are huge 11 Graphics/GUI libraries 0,0 Coordiates 200,0 Our code Our iterface library 50,50 A graphics/gui library (here FLTK) The operatig system (e.g. Widows or Liux) Our scree Ofte called a layered architecture 0,100 200,100 Oddly, y-coordiates grow dowwards // right, dow Coordiates idetify pixels i the widow o the scree You ca resize a widow (chagig x_max() ad y_max()) 12 13 3
Iterface classes Widow Color Lie_style Shape Poit Simple_widow Lie Lies Polygo Rectagle Text A arrow meas is a kid of Color, Lie_style, ad Poit are utility classes used by the other classes Widow is our iterface to the GUI library (which is our iterface to the scree) Curret Iterface classes Color, Lie_style, Fot, Poit, Widow, Simple_widow Shape, Text, Polygo, Lie, Lies, Rectagle, Axis Easy to add (for some defiitio of easy ) Grid, Block_chart, Pie_chart, etc. Later, GUI Butto, I_box, Out_box, 14 15 Demo code 1 A blak cavas // Gettig access to the graphics system (do t forget to istall): #iclude "Simple_widow.h" // stuff to deal with your system s widows #iclude "Graph.h" // graphical shapes usig amespace Graph_lib; // make ames available // i mai(): Simple_widow wi {Poit{100,100},600,400,"Cavas"}; // scree coordiate (100,100) is top left corer of widow // widow size(600 pixels wide by 400 pixels high) // title: Cavas wi.wait_for_butto(); // Display! 16 17 4
Demo code 2 Add a X-axis Axis xa {Axis::x, Poit{20,300}, 280, 10, "x axis"}; // make a Axis // a axis is a kid of Shape // Axis::x meas horizotal // startig at (20,300) // 280 pixels log // 10 otches ( tick marks ) // text x axis wi.set_label("cavas #2"); wi.attach(xa); // attach axis xa to the widow wi.wait_for_butto(); 18 19 Demo code 3 Add a Y-axis (colored) wi.set_label("cavas #3"); Axis ya {Axis::y, Poit{20,300}, 280, 10, "y axis"}; ya.set_color(color::cya); // choose a color for the axis ya.label.set_color(color::dark_red); // choose a color for the text wi.attach(ya); wi.wait_for_butto(); 20 Yes, it s ugly, but this is a programmig course, ot a graphics desig course 21 5
Demo code 4 Add a sie curve wi.set_label("cavas #4"); Fuctio sie {si,0,100,poit{20,150},1000,50,50}; // sie curve // plot si() i the rage [0:100) // with (0,0) at (20,150) // usig 1000 poits // scale x values *50, scale y values *50 // actually, it s a bit more complicated tha this, will explai later wi.attach(sie); wi.wait_for_butto(); 22 23 Demo code 5 Add a triagle (ad color the curve) wi.set_label("cavas #5"); sie.set_color(color::blue); Polygo poly; poly.add(poit{300,200}); poly.add(poit{350,100}); poly.add(poit{400,200}); // I chaged my mid about sie s color // make a polygo (a kid of Shape) // three poits make a triagle poly.set_color(color::red); // chage the color poly.set_style(lie_style::dash); // chage the lie style wi.attach(poly); wi.wait_for_butto(); 24 25 6
Demo code 6 Add a rectagle wi.set_label("cavas #6"); Rectagle r {Poit{200,200}, 100, 50}; // top left poit, width, height wi.attach(r); wi.wait_for_butto(); 26 27 Demo code 6.1 Add a shape that looks like a rectagle Add a shape that looks like a rectagle Closed_polylie poly_rect; poly_rect.add(poit{100,50}); poly_rect.add(poit{200,50}); poly_rect.add(poit{200,100}); poly_rect.add(poit{100,100}); wi.set_label("cavas #6.1"); But is it a rectagle? 28 29 7
We ca add a poit Demo code 6.2 Obviously a polygo poly_rect.add(poit{50,75}); // ow poly_rect has 5 poits wi.set_label("cavas #6.2"); lookig like is ot the same as is 30 31 r.set_fill_color(color::yellow); Add fill // color the iside of the rectagle Add fill poly.set_style(lie_style{lie_style::dash,4}); // make the triagle fat poly_rect.set_fill_color(color::gree); poly_rect.set_style(lie_style{lie_style::dash,2}); wi.set_label("cavas #7"); 32 33 8
Demo Code 8 Add text Text t {Poit{100,100},"Hello, graphical world!"}; // add text // poit is lower left corer o the baselie wi.set_label("cavas #8"); 34 35 Demo Code 9 Text fot ad size Modify text fot ad size t.set_fot(graph_lib::fot::times_bold); t.set_fot_size(20); // height i pixels 36 37 9
Add a image Add a image Image ii {Poit{100,50},"image.jpg"}; // ope a image file wi.attach(ii); wi.set_label("cavas #10"); 38 39 Oops! Move the image The image obscures the other shapes Move it a bit out of the way ii.move(100,200); // move 100 pixels to the right (-100 moves left) // move 200 pixels dow (-200 moves up) wi.set_label("cavas #11"); wi.wait_for_butto(); Note how the parts of a shape that do t fit i the widow are clipped away 40 41 10
Circle c {Poit{100,200},50}; Demo Code 12 // ceter, radius Ellipse e {Poit{100,200}, 75,25}; // ceter, horizotal radius, vertical radius e.set_color(color::dark_red); Mark m {Poit{100,200},'x'}; ostrigstream oss; oss << "scree size: " << x_max() << "*" << y_max() << "; widow size: " << wi.x_max() << "*" << wi.y_max(); Text sizes {Poit{100,20},oss.str()}; Image cal {Poit{225,225}, "sow_cpp.gif"}; cal.set_mask(poit{40,40},200,150); // 320*240 pixel gif // display ceter of image Add shapes, more text wi.set_label("cavas #12"); wi.wait_for_butto(); 42 43 Boiler plate Primitives ad algorithms #iclude "Graph.h" #iclude Simple_widow.h" it mai () try { // the mai part of your code } catch(exceptio& e) { cerr << "exceptio: " << e.what() << '\'; retur 1; } catch (...) { cerr << "Some exceptio\"; retur 2; } // header for graphs // header cotaiig widow iterface The demo shows the use of library primitives Just the primitives Just the use Typically what we display is the result of a algorithm readig data Next lectures 13: Graphics Classes 14: Graphics Class Desig 15: Graphig Fuctios ad Data 16: Graphical User Iterfaces 44 45 11