Date post: | 26-Mar-2015 |
Category: |
Documents |
Upload: | alexandra-owens |
View: | 246 times |
Download: | 4 times |
Chapter 12Chapter 12A display modelA display model
Bjarne StroustrupBjarne Stroustrupwww.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?
It’s very commonIt’s very common If you write conventional PC applications, you’ll have to do itIf you write conventional PC applications, you’ll have to do it
It’s usefulIt’s useful Instant feedback Instant feedback Graphing functionsGraphing functions Displaying resultsDisplaying results
It can illustrate some generally useful concepts and It can illustrate some generally useful concepts and techniquestechniques
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 It can only be done well using some pretty neat language featuresfeatures
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 it’s worth teachingSo it’s worth teaching If we don’t show how it’s done, you might think it was “magic”If we don’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 direct correspondence between concepts, code, and outputoutput
66Stroustrup/ProgrammingStroustrup/Programming
Display modelDisplay model
Objects (such as graphs) are “attached to” a window.Objects (such as graphs) are “attached to” a window.
The “display engine” invokes display commands (such as “draw line The “display engine” invokes display commands (such as “draw line from x to y”) for the objects in a windowfrom x to y”) 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 pointsadd three pointspoly.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
The resulting screenThe resulting screen
99Stroustrup/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 Appendix D and ask instructor/friendsee 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 what you can build on themAnd what you can build on them
1010Stroustrup/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 “a layered architecture”Often called “a 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 re-size a window (changing You can re-size a window (changing x_max()x_max() and y and y_max())_max())
1313
0,0
0,100
200,0
50,50
200,100
Stroustrup/ProgrammingStroustrup/Programming
Interface classesInterface classes
An arrow means “is a kind of”An arrow means “is a kind of” Color, Line_style, and Point are “utility classes” used by the other classesColor, 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)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 (don’t forget to install):Getting access to the graphics system (don’t forget to install):#include “Simple_window.h" #include “Simple_window.h" // // stuff to deal with your system’s stuff to deal with your system’s
windowswindows#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) top left of windowscreen coordinate (100,100) top left of window// // window size(600*400)window size(600*400)// // title: Canvastitle: Canvas
win.wait_for_button();win.wait_for_button(); // // Display! Display!
1616Stroustrup/ProgrammingStroustrup/Programming
A “blank canvas”A “blank canvas”
1717Stroustrup/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 “notches” 10 “notches”
//// text “x axis text “x 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
Add an X-axisAdd an X-axis
1919Stroustrup/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 choose a color for
the textthe 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
Add a sine curveAdd a sine curve
2323Stroustrup/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 sine’s colorI changed my mind about sine’s color
Polygon poly;Polygon poly; // // a polygon, a Polygon is a kind of Shapea polygon, a Polygon is a kind of Shapepoly.add(Point(300,200));poly.add(Point(300,200)); // // three points makes a trianglethree points makes 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);
win.attach(r);win.attach(r);
win.wait_for_button();win.wait_for_button();
2626Stroustrup/ProgrammingStroustrup/Programming
Add a rectangleAdd a rectangle
2727Stroustrup/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 like” is not the same as “is”looking like” is not the same as “is”
3030Stroustrup/ProgrammingStroustrup/Programming
Obviously a polygonObviously a polygon
3131Stroustrup/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 make the triangle fattriangle 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
Add fillAdd fill
3333Stroustrup/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
win.set_label("Canvas #8");win.set_label("Canvas #8");
3434Stroustrup/ProgrammingStroustrup/Programming
Add textAdd text
3535Stroustrup/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);
3636Stroustrup/ProgrammingStroustrup/Programming
Text font and sizeText font and size
3737Stroustrup/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
Add an imageAdd an image
3939Stroustrup/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);
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 don’t fit in the window is “clipped” awayNote how the parts of a shape that don’t fit in the window is “clipped” away
Stroustrup/ProgrammingStroustrup/Programming
Demo Code 12Demo Code 12Circle c(Point(100,200),50);Circle c(Point(100,200),50);
Ellipse e(Point(100,200), 75,25); Ellipse e(Point(100,200), 75,25); 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
Add shapes, more textAdd shapes, more text
4343Stroustrup/ProgrammingStroustrup/Programming
Boiler plateBoiler plate#include "Graph.h"#include "Graph.h" // // header for graphsheader for graphs#include “Simple_window.h"#include “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