Chapter 12 - Chapter 12 Chapter A display model Bjarne...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Chapter 12 Chapter A display model Bjarne Stroustrup www.stroustrup.com/Programming Abstract Abstract This lecture presents a display model (the This output part of a GUI), giving examples of use and fundamental notions such as screen coordinates, lines, and color. Some examples of shapes are Lines, Polygons, Axis, and Text. of Stroustrup/Programming 2 Overview Overview Why graphics? A graphics model Examples Stroustrup/Programming 3 Why bother with graphics and GUI? Why It’s very common It’s useful If you write conventional PC applications, you’ll have to do it Instant feedback Instant Graphing functions Displaying results It can illustrate some generally useful concepts and It techniques techniques Stroustrup/Programming 4 Why bother with graphics and GUI? Why It can only be done well using some pretty neat language It features features Lots of good (small) code examples It can be non-trivial to “get” the key concepts So it’s worth teaching If we don’t show how it’s done, you might think it was “magic” Graphics is fun! Stroustrup/Programming 5 Why Graphics/GUI? Why WYSIWYG What you see (in your code) is what you get (on your screen) direct correspondence between concepts, code, and direct output output Stroustrup/Programming 6 Display model Display Shape attach() draw() “window” Square Display Engine attach() Objects (such as graphs) are “attached to” a window. The “display engine” invokes display commands (such as “draw line The from x to y”) for the objects in a window from Objects such as Square contain vectors of lines, text, etc. for the Objects window to draw window Stroustrup/Programming 7 Display model Display An example illustrating the display model int main() { using namespace Graph_lib; Point tl(100,200); // use our graphics interface library // use // a point (obviously) // point Simple_window win(tl,600,400,"Canvas"); // make a simple window Simple_window make Polygon poly; // make a shape (a polygon, obviously) // make poly.add(Point(300,200)); // add three points // add poly.add(Point(350,100)); poly.add(Point(400,200)); poly.set_color(Color::red); // make the polygon red (obviously) make win.attach(poly); win.wait_for_button(); } // connect poly to the window // connect to // give control to the display engine // give Stroustrup/Programming 8 The resulting screen The Stroustrup/Programming 9 Graphics/GUI libraries Graphics/GUI You’ll be using a few interface classes we wrote Interfacing to a popular GUI toolkit GUI == Graphical User Interface FLTK: www.fltk.org // Fast Light Tool Kit // Fast Installation, etc. see Appendix D and ask instructor/friend FLTK Our GUI and graphics classes Project settings This model is far simpler than common toolkit interfaces The FLTK (very terse) documentation is 370 pages Our interface library is <20 classes and <500 lines of code You can write a lot of code with these classes And what you can build on them Stroustrup/Programming 10 Graphics/GUI libraries (cont.) Graphics/GUI The code is portable Windows, Unix, Mac, etc. This model extends to most common graphics and GUI uses The general ideas can be used with any popular GUI toolkit Once you understand the graphics classes you can easily learn any Once GUI/graphics library GUI/graphics Well, relatively easily – these libraries are huge Stroustrup/Programming 11 Graphics/GUI libraries Graphics/GUI Our code Our interface library A graphics/GUI library (here FLTK) The operating system (e.g. Windows or Linux) Our screen Often called “a layered architecture” Stroustrup/Programming 12 0,0 Coordinates Coordinates 200,0 50,50 200,100 0,100 Oddly, y-coordinates “grow downwards” // right, down Oddly, right, Coordinates identify pixels in the window on the screen You can re-size a window (changing x_max() and y_max()) You x_max() Stroustrup/Programming 13 Interface classes Interface Color Window Line_style Shape Point Simple_window Line Lines Polygon … Rectangle Text An arrow means “is a kind of” Color, Line_style, and Point are “utility classes” used by the other classes Window is our interface to the GUI library (which is our interface to the screen) Stroustrup/Programming 14 Interface classes Interface Current Easy to add (for some definition of “easy”) (for Easy Color, Line_style, Font, Point, Window, Simple_window Shape, Text, Polygon, Line, Lines, Rectangle, … Axis Grid, Block_chart, Pie_chart, etc. Later, GUI Button, In_box, Out_box, … Stroustrup/Programming 15 Demo code 1 Demo // Getting access to the graphics system (don’t forget to install): // Getting #include "simple_window.h" // stuff to deal with your system’s windows #include stuff #include "Graph.h" // graphical shapes #include graphical using namespace Graph_lib; // make names available // make // in main(): // in Simple_window win(Point(100,100),600,400,"Canvas"); // screen coordinate (100,100) top left of window // screen // window size(600*400) // window // title: Canvas // title: win.wait_for_button(); // Display! // Stroustrup/Programming 16 16 A “blank canvas” “blank Stroustrup/Programming 17 Demo code 2 Demo Axis xa(Axis::x, Point(20,300), 280, 10, "x axis"); // make an Axis make // an axis is a kind of Shape an // Axis::x means horizontal // starting at (20,300) // 280 pixels long // 10 “notches” // // text “x axis // win.set_label("Canvas #2"); win.set_label("Canvas win.attach(xa); // attach axis xa to the window win.attach(xa); // attach win.wait_for_button(); Stroustrup/Programming 18 Add an X-axis Add Stroustrup/Programming 19 Demo code 3 Demo win.set_label("Canvas #3"); Axis ya(Axis::y, Point(20,300), 280, 10, "y axis"); ya.set_color(Color::cyan); // choose a color for the axis // choose ya.label.set_color(Color::dark_red); // choose a color for the text // choose win.attach(ya); win.wait_for_button(); Stroustrup/Programming 20 20 Add a Y-axis (colored) Add Yes, it’s ugly, but this is a programming course, not a graphics design course Stroustrup/Programming 21 Demo code 4 Demo win.set_label("Canvas #4"); win.set_label("Canvas Function sine(sin,0,100,Point(20,150),1000,50,50); // sine curve sine // plot sin() in the range [0:100) plot // with (0,0) at (20,150) // using 1000 points // using // scale x values *50, scale y values *50 scale win.attach(sine); win.wait_for_button(); Stroustrup/Programming 22 Add a sine curve Add Stroustrup/Programming 23 Demo code 5 Demo win.set_label("Canvas #5"); win.set_label("Canvas sine.set_color(Color::blue); sine.set_color(Color::blue); // I changed my mind about sine’s color // changed Polygon poly; poly.add(Point(300,200)); poly.add(Point(350,100)); poly.add(Point(400,200)); // a polygon, a Polygon is a kind of Shape // polygon, // three points makes a triangle // three poly.set_color(Color::red); // change the color // change poly.set_style(Line_style::dash); // change the line style // change win.attach(poly); win.wait_for_button(); Stroustrup/Programming 24 Add a triangle (and color the curve) (and Stroustrup/Programming 25 Demo code 6 Demo win.set_label("Canvas #6"); win.set_label("Canvas Rectangle r(Point(200,200), 100, 50); Rectangle win.attach(r); win.wait_for_button(); Stroustrup/Programming 26 Add a rectangle Add Stroustrup/Programming 27 Demo code 6.1 Demo Add a shape that looks like a rectangle 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.set_label("Canvas #6.1"); Stroustrup/Programming 28 Add a shape that looks like a rectangle Add But is it a rectangle? Stroustrup/Programming 29 Demo code 6.2 Demo We can add a point poly_rect.add(Point(50,75); // now poly_rect has 5 points // now has win.set_label("Canvas #6.2"); “looking like” is not the same as “is” Stroustrup/Programming 30 Obviously a polygon Obviously Stroustrup/Programming 31 Add fill Add r.set_fill_color(Color::yellow); // color the inside of the rectangle // color poly.set_style(Line_style(Line_style::dash,4)); // make the triangle fat make poly_rect.set_fill_color(Color::green); poly_rect.set_style(Line_style(Line_style::dash,2)); win.set_label("Canvas #7"); Stroustrup/Programming 32 Add fill Add Stroustrup/Programming 33 Demo Code 8 Demo Text t(Point(100,100),"Hello, graphical world!"); // add text Text add win.set_label("Canvas #8"); Stroustrup/Programming 34 Add text Add Stroustrup/Programming 35 Demo Code 9 Demo Modify text font and size t.set_font(Font::times_bold); t.set_font_size(20); Stroustrup/Programming 36 Text font and size Text Stroustrup/Programming 37 Add an image Add Image ii(Point(100,50),"image.jpg"); // open an image file // open win.attach(ii); win.set_label("Canvas #10"); Stroustrup/Programming 38 Add an image Add Stroustrup/Programming 39 39 Oops! Oops! The image obscures the other shapes Move it a bit out of the way ii.move(100,200); win.set_label("Canvas #11"); win.wait_for_button(); Stroustrup/Programming 40 Move the image Move Note how the parts of a shape that don’t fit in the window is “clipped” away Stroustrup/Programming 41 41 Demo Code 12 Demo Circle c(Point(100,200),50); Ellipse e(Point(100,200), 75,25); Ellipse e.set_color(Color::dark_red); e.set_color(Color::dark_red); Mark m(Point(100,200),'x'); ostringstream oss; oss << "screen size: " << x_max() << "*" << y_max() << "; window size: " << win.x_max() << "*" << win.y_max(); Text sizes(Point(100,20),oss.str()); Image cal(Point(225,225),“snow_cpp.gif"); cal.set_mask(Point(40,40),200,150); // 320*240 pixel gif // 320*240 // display center of image // display win.set_label("Canvas #12"); win.wait_for_button(); Stroustrup/Programming 42 Add shapes, more text Add Stroustrup/Programming 43 Boiler plate Boiler #include "Graph.h" #include “Simple_window.h" // header for graphs // header // header containing window interface // header int main () try { // the main part of your code // the } catch(exception& e) { catch(exception& cerr << "exception: " << e.what() << '\n'; return 1; } catch (...) { cerr << "Some exception\n"; return 2; } Stroustrup/Programming 44 Primitives and algorithms Primitives The demo shows the use of library primitives Typically what we display is the result of Just the primitives Just the use an algorithm an reading data Next lectures 13: Graphics Classes 14: Graphics Class Design 15: Graphing Functions and Data 16: Graphical User Interfaces Stroustrup/Programming 45 ...
View Full Document

Ask a homework question - tutors are online