chapter 12 a display model - c-jump: computer programming ... · pdf filechapter 12 a display...
TRANSCRIPT
Chapter 12Chapter 12A display modelA display model
Bjarne StroustrupBjarne Stroustrup
www.stroustrup.com/Programmingwww.stroustrup.com/Programming
OverviewOverview
Why graphics?Why graphics? A graphics modelA graphics model ExamplesExamples
33Stroustrup/ProgrammingStroustrup/Programming
Why bother with graphics and GUI?Why bother with graphics and GUI?
ItIt’’s very commons very common If you write conventional PC applications, youIf you write conventional PC applications, you’ll have to do it’ll have to do it
ItIt’’s usefuls useful Instant feedback Instant feedback Graphing functionsGraphing functions Displaying resultsDisplaying results
It can illustrate some generally useful concepts and techniquesIt can illustrate some generally useful concepts and techniques
44Stroustrup/ProgrammingStroustrup/Programming
Why bother with graphics and GUI?Why bother with graphics and GUI?
It can only be done well using some pretty neat language features It can only be done well using some pretty neat language features
Lots of good (small) code examplesLots of good (small) code examples It can be non-trivial to “get” the key conceptsIt can be non-trivial to “get” the key concepts
So itSo it’’s worth teachings worth teaching If we donIf we don’’t show how it’s done, you might think it was “magic”t show how it’s done, you might think it was “magic”
Graphics is fun!Graphics is fun!
55Stroustrup/ProgrammingStroustrup/Programming
Why Graphics/GUI?Why Graphics/GUI?
WYSIWYGWYSIWYG What you see (in your code) is what you get (on your screen)What you see (in your code) is what you get (on your screen)
Direct correspondence between concepts, code, and outputDirect correspondence between concepts, code, and output
66Stroustrup/ProgrammingStroustrup/Programming
Display modelDisplay model
Objects (such as graphs) are Objects (such as graphs) are ““attached toattached to”” a window. a window.
The The ““display enginedisplay engine”” invokes display commands invokes display commands(such as (such as ““draw line from x to ydraw line from x to y””) for the objects in a window) for the objects in a window
Objects such as Square contain vectors of lines, text, etc. for the Objects such as Square contain vectors of lines, text, etc. for the window to drawwindow to draw
77
Shape
Square
“window”
DisplayEngine
attach()
attach()
draw()
Stroustrup/ProgrammingStroustrup/Programming
Display modelDisplay model An example illustrating the display modelAn example illustrating the display model
int main()int main(){{
using namespace Graph_lib;using namespace Graph_lib; // // use our graphics interface libraryuse our graphics interface library
Point tl(100,200);Point tl(100,200); // // a point (obviously)a point (obviously)
Simple_window win(tl,600,400,"Canvas"); Simple_window win(tl,600,400,"Canvas"); // // make a simple windowmake a simple window
Polygon poly;Polygon poly; // // make a shape (a polygon, obviously)make a shape (a polygon, obviously)
poly.add(Point(300,200));poly.add(Point(300,200)); // // add three points to the polygonadd three points to the polygonpoly.add(Point(350,100));poly.add(Point(350,100));poly.add(Point(400,200));poly.add(Point(400,200));
poly.set_color(Color::red);poly.set_color(Color::red); // // make the polygon red (obviously)make the polygon red (obviously)
win.attach(poly);win.attach(poly); // // connect polyconnect poly to the windowto the window
win.wait_for_button();win.wait_for_button(); // // give control to the display enginegive control to the display engine}}
88Stroustrup/ProgrammingStroustrup/Programming
Graphics/GUI librariesGraphics/GUI libraries
You’ll be using a few interface classes we wroteYou’ll be using a few interface classes we wrote Interfacing to a popular GUI toolkitInterfacing to a popular GUI toolkit
GUI == Graphical User InterfaceGUI == Graphical User Interface FLTK: www.fltk.orgFLTK: www.fltk.org // // Fast Light Tool KitFast Light Tool Kit
Installation, etc.Installation, etc. See piazza.com, Appendix D and ask instructor/friendSee piazza.com, Appendix D and ask instructor/friend
FLTKFLTK Our GUI and graphics classesOur GUI and graphics classes Project settingsProject settings
This model is far simpler than common toolkit interfacesThis model is far simpler than common toolkit interfaces The FLTK (very terse) documentation is 370 pagesThe FLTK (very terse) documentation is 370 pages Our interface library is <20 classes and <500 lines of codeOur interface library is <20 classes and <500 lines of code You can write a lot of code with these classesYou can write a lot of code with these classes
And you can build more classes on themAnd you can build more classes on them1010Stroustrup/ProgrammingStroustrup/Programming
Graphics/GUI libraries (cont.)Graphics/GUI libraries (cont.)
The code is portableThe code is portable Windows, Unix, Mac, etc.Windows, Unix, Mac, etc.
This model extends to most common graphics and GUI usesThis model extends to most common graphics and GUI uses
The general ideas can be used with any popular GUI toolkitThe general ideas can be used with any popular GUI toolkit Once you understand the graphics classes you can easily learn any Once you understand the graphics classes you can easily learn any
GUI/graphics libraryGUI/graphics library Well, relatively easily – these libraries are hugeWell, relatively easily – these libraries are huge
1111Stroustrup/ProgrammingStroustrup/Programming
Graphics/GUI librariesGraphics/GUI libraries
Often called Often called ““a layered architecturea layered architecture””
1212
Our code
The operating system (e.g. Windows or Linux) Our screen
Our interface library
A graphics/GUI library (here FLTK)
Stroustrup/ProgrammingStroustrup/Programming
CoordinatesCoordinates
Oddly, y-coordinates “grow downwards” // Oddly, y-coordinates “grow downwards” // right, downright, down Coordinates identify pixels in the window on the screenCoordinates identify pixels in the window on the screen You can resize a window (changing You can resize a window (changing x_max()x_max() and y and y_max())_max())
1313
0,0
0,99
199,0
50,50
199,99
Stroustrup/ProgrammingStroustrup/Programming
Interface classesInterface classes
An arrow means An arrow means ““is a kind ofis a kind of”” Color, Line_style, and Point are Color, Line_style, and Point are ““utility classesutility classes”” used by the other classes used by the other classes Window is our interface to the GUI library (which is our interface to the screen)Window is our interface to the GUI library (which is our interface to the screen)
1414
Window
Simple_window
Shape
Lines Polygon Rectangle Text
Point
ColorLine_style
Line …
Stroustrup/ProgrammingStroustrup/Programming
Interface classesInterface classes CurrentCurrent
Color, Line_style, Font, Point,Color, Line_style, Font, Point, Window, Simple_windowWindow, Simple_window Shape, Text, Polygon, Line, Lines, Rectangle, …Shape, Text, Polygon, Line, Lines, Rectangle, … AxisAxis
Easy to add Easy to add (for some definition of “easy”)(for some definition of “easy”)
Grid, Block_chart, Pie_chart, etc.Grid, Block_chart, Pie_chart, etc. Later, GUILater, GUI
Button, In_box, Out_box, …Button, In_box, Out_box, …
1515Stroustrup/ProgrammingStroustrup/Programming
Demo code 1Demo code 1
// // Getting access to the graphics system (donGetting access to the graphics system (don’’t forget to install):t forget to install):#include "Simple_window.h" #include "Simple_window.h" // // stuff to deal with your systemstuff to deal with your system’’s windowss windows#include "Graph.h" #include "Graph.h" // // graphical shapesgraphical shapes
using namespace Graph_lib;using namespace Graph_lib; // // make names availablemake names available
// // in main():in main():
Simple_window win(Point(100,100),600,400,"Canvas");Simple_window win(Point(100,100),600,400,"Canvas");// // screen coordinate (100,100) is top left corner of windowscreen coordinate (100,100) is top left corner of window// // window size(600 pixels wide by 400 pixels high)window size(600 pixels wide by 400 pixels high)// // title: Canvastitle: Canvas
win.wait_for_button();win.wait_for_button(); // // Display! Display!
1616Stroustrup/ProgrammingStroustrup/Programming
Demo code 2Demo code 2
Axis xa(Axis::x, Point(20,300), 280, 10, "x axis");Axis xa(Axis::x, Point(20,300), 280, 10, "x axis");
// // make an Axismake an Axis
//// an axis is a kind of Shapean axis is a kind of Shape
//// Axis::x means horizontal Axis::x means horizontal
//// starting at (20,300) starting at (20,300)
//// 280 pixels long 280 pixels long
//// 10 10 ““notchesnotches”” (“tick marks”) (“tick marks”)
//// text text ““x axisx axis””
win.set_label("Canvas #2"); win.set_label("Canvas #2");
win.attach(xa);win.attach(xa); // // attach axis xa to the windowattach axis xa to the window
win.wait_for_button();win.wait_for_button();
1818Stroustrup/ProgrammingStroustrup/Programming
Demo code 3Demo code 3
win.set_label("Canvas #3");win.set_label("Canvas #3");
Axis ya(Axis::y, Point(20,300), 280, 10, "y axis");Axis ya(Axis::y, Point(20,300), 280, 10, "y axis");ya.set_color(Color::cyan);ya.set_color(Color::cyan); // // choose a color for the axischoose a color for the axisya.label.set_color(Color::dark_red);ya.label.set_color(Color::dark_red); // // choose a color for the textchoose a color for the text
win.attach(ya);win.attach(ya);win.wait_for_button();win.wait_for_button();
2020Stroustrup/ProgrammingStroustrup/Programming
Add a Y-axis (colored)Add a Y-axis (colored)
2121Yes, it’s ugly, but this is a programming course, not a graphics design course
Stroustrup/ProgrammingStroustrup/Programming
Demo code 4Demo code 4
win.set_label("Canvas #4"); win.set_label("Canvas #4");
Function sine(sin,0,100,Point(20,150),1000,50,50); Function sine(sin,0,100,Point(20,150),1000,50,50); // // sine curvesine curve
//// plot sin() in the range [0:100)plot sin() in the range [0:100)
//// with (0,0) at (20,150) with (0,0) at (20,150)
//// using 1000 pointsusing 1000 points
//// scale x values *50, scale y values *50scale x values *50, scale y values *50
win.attach(sine);win.attach(sine);
win.wait_for_button();win.wait_for_button();
2222Stroustrup/ProgrammingStroustrup/Programming
Demo code 5Demo code 5win.set_label("Canvas #5"); win.set_label("Canvas #5");
sine.set_color(Color::blue);sine.set_color(Color::blue); // // I changed my mind about sineI changed my mind about sine’’s colors color
Polygon poly;Polygon poly; // // make a polygon (a kind of Shape)make a polygon (a kind of Shape)poly.add(Point(300,200));poly.add(Point(300,200)); // // three points make a trianglethree points make a trianglepoly.add(Point(350,100));poly.add(Point(350,100));poly.add(Point(400,200));poly.add(Point(400,200));
poly.set_color(Color::red);poly.set_color(Color::red); // // change the colorchange the colorpoly.set_style(Line_style::dash);poly.set_style(Line_style::dash); // // change the line stylechange the line style
win.attach(poly);win.attach(poly);win.wait_for_button();win.wait_for_button();
2424Stroustrup/ProgrammingStroustrup/Programming
Add a triangle Add a triangle (and color the curve)(and color the curve)
2525Stroustrup/ProgrammingStroustrup/Programming
Demo code 6Demo code 6
win.set_label("Canvas #6"); win.set_label("Canvas #6");
Rectangle r(Point(200,200), 100, 50);Rectangle r(Point(200,200), 100, 50); // // top left point, width, heighttop left point, width, height
win.attach(r);win.attach(r);
win.wait_for_button();win.wait_for_button();
2626Stroustrup/ProgrammingStroustrup/Programming
Demo code 6.1Demo code 6.1
Add a shape that looks like a rectangleAdd a shape that looks like a rectangle
Closed_polyline poly_rect;Closed_polyline poly_rect;
poly_rect.add(Point(100,50));poly_rect.add(Point(100,50));
poly_rect.add(Point(200,50));poly_rect.add(Point(200,50));
poly_rect.add(Point(200,100));poly_rect.add(Point(200,100));
poly_rect.add(Point(100,100));poly_rect.add(Point(100,100));
win.set_label("Canvas #6.1");win.set_label("Canvas #6.1");
2828Stroustrup/ProgrammingStroustrup/Programming
Add a shape that looks like a Add a shape that looks like a rectanglerectangle
2929
But is it a rectangle?But is it a rectangle?
Stroustrup/ProgrammingStroustrup/Programming
Demo code 6.2Demo code 6.2
We can add a pointWe can add a point
poly_rect.add(Point(50,75);poly_rect.add(Point(50,75); // // nownow poly_rect poly_rect has 5 pointshas 5 points
win.set_label("Canvas #6.2");win.set_label("Canvas #6.2");
““looking likelooking like”” is not the same as is not the same as ““isis””
3030Stroustrup/ProgrammingStroustrup/Programming
Add fillAdd fill
r.set_fill_color(Color::yellow);r.set_fill_color(Color::yellow); // // color the inside of the rectanglecolor the inside of the rectangle
poly.set_style(Line_style(Line_style::dash,4));poly.set_style(Line_style(Line_style::dash,4)); // // make the triangle fatmake the triangle fat
poly_rect.set_fill_color(Color::green);poly_rect.set_fill_color(Color::green);
poly_rect.set_style(Line_style(Line_style::dash,2));poly_rect.set_style(Line_style(Line_style::dash,2));
win.set_label("Canvas #7");win.set_label("Canvas #7");
3232Stroustrup/ProgrammingStroustrup/Programming
Demo Code 8Demo Code 8
Text t(Point(100,100),"Hello, graphical world!"); Text t(Point(100,100),"Hello, graphical world!"); // // add textadd text
// point is lower left corner on the baseline// point is lower left corner on the baseline
win.set_label("Canvas #8");win.set_label("Canvas #8");
3434Stroustrup/ProgrammingStroustrup/Programming
Demo Code 9Demo Code 9
Modify text font and sizeModify text font and size
t.set_font(Font::times_bold);t.set_font(Font::times_bold);
t.set_font_size(20); //t.set_font_size(20); // height in pixelsheight in pixels
3636Stroustrup/ProgrammingStroustrup/Programming
Add an imageAdd an image
Image ii(Point(100,50),"image.jpg");Image ii(Point(100,50),"image.jpg"); // // open an image fileopen an image file
win.attach(ii);win.attach(ii);
win.set_label("Canvas #10");win.set_label("Canvas #10");
3838Stroustrup/ProgrammingStroustrup/Programming
Oops!Oops!
The image obscures the other shapesThe image obscures the other shapes Move it a bit out of the wayMove it a bit out of the way
ii.move(100,200);ii.move(100,200); // // move 100 pixels to the right (-100 moves left)move 100 pixels to the right (-100 moves left)
// // move 200 pixels down (-200 moves up)move 200 pixels down (-200 moves up)
win.set_label("Canvas #11");win.set_label("Canvas #11");
win.wait_for_button();win.wait_for_button();
4040Stroustrup/ProgrammingStroustrup/Programming
Move the imageMove the image
4141
Note how the parts of a shape that donNote how the parts of a shape that don’’t fit in the window are t fit in the window are ““clippedclipped”” away away
Stroustrup/ProgrammingStroustrup/Programming
Demo Code 12Demo Code 12Circle c(Point(100,200),50);Circle c(Point(100,200),50); // // center, radiuscenter, radius
Ellipse e(Point(100,200), 75,25); Ellipse e(Point(100,200), 75,25); // // center, horizontal radius, vertical radiuscenter, horizontal radius, vertical radius e.set_color(Color::dark_red);e.set_color(Color::dark_red);
Mark m(Point(100,200),'x');Mark m(Point(100,200),'x');
ostringstream oss;ostringstream oss;oss << "screen size: " << x_max() << "*" << y_max()oss << "screen size: " << x_max() << "*" << y_max()
<< "; window size: " << win.x_max() << "*" << win.y_max();<< "; window size: " << win.x_max() << "*" << win.y_max();Text sizes(Point(100,20),oss.str());Text sizes(Point(100,20),oss.str());
Image cal(Point(225,225), "snow_cpp.gif");Image cal(Point(225,225), "snow_cpp.gif"); // // 320*240 pixel gif320*240 pixel gifcal.set_mask(Point(40,40),200,150);cal.set_mask(Point(40,40),200,150); // // display center of imagedisplay center of image
win.set_label("Canvas #12");win.set_label("Canvas #12");win.wait_for_button();win.wait_for_button();
4242Stroustrup/ProgrammingStroustrup/Programming
Boiler plateBoiler plate#include "Graph.h"#include "Graph.h" // // header for graphsheader for graphs#include #include ““Simple_window.h"Simple_window.h" // // header containing window interfaceheader containing window interface
int main ()int main ()trytry{{
// // the main part of your codethe main part of your code } } catch(exception& e) {catch(exception& e) {
cerr << "exception: " << e.what() << '\n';cerr << "exception: " << e.what() << '\n';return 1;return 1;
}}catch (...) {catch (...) {
cerr << "Some exception\n";cerr << "Some exception\n";return 2;return 2;
}}
4444Stroustrup/ProgrammingStroustrup/Programming
Primitives and algorithmsPrimitives and algorithms
The demo shows the use of library primitivesThe demo shows the use of library primitives Just the primitivesJust the primitives Just the useJust the use
Typically what we display is the result ofTypically what we display is the result of an algorithm an algorithm reading datareading data
Next lecturesNext lectures 13: Graphics Classes13: Graphics Classes 14: Graphics Class Design14: Graphics Class Design 15: Graphing Functions and Data15: Graphing Functions and Data 16: Graphical User Interfaces16: Graphical User Interfaces
4545Stroustrup/ProgrammingStroustrup/Programming