Chapters 12 and 13 A Display Model and Graphics Classes
Goal of this
Display model
Display model
The resulting screen
Graphics/GUI libraries
Graphics/GUI libraries (cont.)
Graphics/GUI libraries
Interface classes
Interface classes
Coordinates
Demo code 1
A “blank canvas”
Demo code 2
Add an X-axis
Demo code 3
Add a Y-axis (colored)
Demo code 4
Add a sine curve
Demo code 5
Add a triangle (and color the curve)
Demo code 6
Add a rectangle
Demo code 6.1
Add a shape that looks like a rectangle
Demo code 6.2
Obviously a polygon
Add fill
Add fill
Demo Code 8
Add text
Demo Code 9
Text font and size
Add an image
Add an image
Oops!
Move the image
Demo Code 12
Add shapes, more text
Boiler plate
Primitives and algorithms
Display model
Code organization
Source files
Design note
Point
Line
Line example
Line example
Line example
Lines
Lines Example
Lines example
Implementation: Lines
Draw Grid (Why bother with Lines when we have Line?)
Grid
Color
Draw red grid
Line_style
Example: colored fat dash grid
Polylines
Open_polyline
Closed_polyline
Closed_polyline
Text
Add text
Implementation: Text
Color matrix
Color Matrix (16*16)
3.39M
Category: informaticsinformatics

A Display Model and Graphics Classes

1. Chapters 12 and 13 A Display Model and Graphics Classes

John Keyser’s
Modifications of Slides by
Bjarne Stroustrup
www.stroustrup.com/Programming

2. Goal of this

• Graphics library allows us to explore some
core object-oriented concepts.
– Interesting language features
– What you see is what you get
– Direct relation between concepts, code, output
• Graphics can be both fun and useful
– Lets you make more interesting output,
potentially
– Warning: this is not a “real” graphics course!
Stroustrup/Programming
2

3. Display model

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 from x to y”) for the objects in a window
• Objects such as Square contain vectors of lines, text, etc. for the
window to draw
Stroustrup/Programming
3

4. Display model

• An example illustrating the display model
int main()
{
using namespace Graph_lib; // use our graphics interface library
Point tl(100,200);
// a point (obviously)
Simple_window win(tl,600,400,"Canvas");
// make a simple window
Polygon poly;
// make a shape (a polygon, obviously)
poly.add(Point(300,200));
poly.add(Point(350,100));
poly.add(Point(400,200));
// add three points to the polygon
poly.set_color(Color::red);
// make the polygon red (obviously)
win.attach(poly);
// connect poly to the window
win.wait_for_button();
// give control to the display engine
}
Stroustrup/Programming
4

5. The resulting screen

Stroustrup/Programming
5

6. Graphics/GUI libraries

• 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
– Installation, etc.
• See Appendix D and ask instructor/friend
– FLTK
– GUI and graphics classes developed for this course
– 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 you can build more classes on them
Stroustrup/Programming
6

7. Graphics/GUI libraries (cont.)

• 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
GUI/graphics library
• Well, relatively easily – these libraries are huge
Stroustrup/Programming
7

8. Graphics/GUI libraries

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
8

9. Interface classes

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
9

10. Interface classes

• Current




Color, Line_style, Font, Point,
Window, Simple_window
Shape, Text, Polygon, Line, Lines, Rectangle, …
Axis
• Easy to add (for some definition of “easy”)
– Grid, Block_chart, Pie_chart, etc.
• Later, GUI
– Button, In_box, Out_box, …
Stroustrup/Programming
10

11. Coordinates

Demo code 1
// Getting access to the graphics system (don’t forget to install):
#include "Simple_window.h"
// stuff to deal with your system’s
windows
#include "Graph.h"
// graphical shapes
using namespace Graph_lib;
// make names available
// in main():
Simple_window win(Point(100,100),600,400,"Canvas");
// screen coordinate (100,100) is top left corner of window
// window size(600 pixels wide by 400 pixels high)
// title: Canvas
win.wait_for_button(); // Display!
Stroustrup/Programming
12

12. Demo code 1

A “blank canvas”
Stroustrup/Programming
13

13. A “blank canvas”

Demo code 2
Axis xa(Axis::x, Point(20,300), 280, 10, "x axis");
// make an Axis
// an axis is a kind of Shape
// Axis::x means horizontal
// starting at (20,300)
// 280 pixels long
// 10 “notches” (“tick marks”)
// text “x axis”
win.set_label("Canvas #2");
win.attach(xa);
// attach axis xa to the window
win.wait_for_button();
Stroustrup/Programming
14

14. Demo code 2

Add an X-axis
Stroustrup/Programming
15

15. Add an X-axis

Demo code 3
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
ya.label.set_color(Color::dark_red); // choose a color for the text
win.attach(ya);
win.wait_for_button();
Stroustrup/Programming
16

16. Demo code 3

Add a Y-axis (colored)
Yes, it’s ugly, but this is a programming course, not a graphics design course
Stroustrup/Programming
17

17. Add a Y-axis (colored)

Demo code 4
win.set_label("Canvas #4");
Function sine(sin,0,100,Point(20,150),1000,50,50); // sine curve
// plot sin() in the range [0:100)
// with (0,0) at (20,150)
// using 1000 points
// scale x values *50, scale y values *50
win.attach(sine);
win.wait_for_button();
Stroustrup/Programming
18

18. Demo code 4

Add a sine curve
Stroustrup/Programming
19

19. Add a sine curve

Demo code 5
win.set_label("Canvas #5");
// I changed my mind about sine’s color
sine.set_color(Color::blue);
Polygon poly;
// make a polygon (a kind of Shape)
poly.add(Point(300,200)); // three points make a triangle
poly.add(Point(350,100));
poly.add(Point(400,200));
poly.set_color(Color::red);
poly.set_style(Line_style::dash);
// change the color
// change the line style
win.attach(poly);
win.wait_for_button();
Stroustrup/Programming
20

20. Demo code 5

Add a triangle (and color the curve)
Stroustrup/Programming
21

21. Add a triangle (and color the curve)

Demo code 6
win.set_label("Canvas #6");
Rectangle r(Point(200,200), 100, 50);
height
// top left point, width,
win.attach(r);
win.wait_for_button();
Stroustrup/Programming
22

22. Demo code 6

Add a rectangle
Stroustrup/Programming
23

23. Add a rectangle

Demo code 6.1
• 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
24

24. Demo code 6.1

Add a shape that looks like a rectangle
But is it a rectangle?
Stroustrup/Programming
25

25. Add a shape that looks like a rectangle

Demo code 6.2
• We can add a point
poly_rect.add(Point(50,75);
// now poly_rect has 5 points
win.set_label("Canvas #6.2");
• “looking like” is not the same as “is”
Stroustrup/Programming
26

26. Demo code 6.2

Obviously a polygon
Stroustrup/Programming
27

27. Obviously a polygon

Add fill
r.set_fill_color(Color::yellow); // color the inside of the rectangle
poly.set_style(Line_style(Line_style::dash,4));
// make the triangle fat
poly_rect.set_fill_color(Color::green);
poly_rect.set_style(Line_style(Line_style::dash,2));
win.set_label("Canvas #7");
Stroustrup/Programming
28

28. Add fill

Stroustrup/Programming
29

29. Add fill

Demo Code 8
Text t(Point(100,100),"Hello, graphical world!"); // add text
// point is lower left corner on the baseline
win.set_label("Canvas #8");
Stroustrup/Programming
30

30. Demo Code 8

Add text
Stroustrup/Programming
31

31. Add text

Demo Code 9
Modify text font and size
t.set_font(Font::times_bold);
t.set_font_size(20); // height in pixels
Stroustrup/Programming
32

32. Demo Code 9

Text font and size
Stroustrup/Programming
33

33. Text font and size

Add an image
Image ii(Point(100,50),"image.jpg");
win.attach(ii);
win.set_label("Canvas #10");
// open an image file
Stroustrup/Programming
34

34. Add an image

Stroustrup/Programming
35

35. Add an image

Oops!
• 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 down (-200 moves up)
win.set_label("Canvas #11");
win.wait_for_button();
Stroustrup/Programming
36

36. Oops!

Move the image
Note how the parts of a shape that don’t fit in the window are “clipped” away
Stroustrup/Programming
37

37. Move the image

Demo Code 12
Circle c(Point(100,200),50);
// center, radius
Ellipse e(Point(100,200), 75,25);
e.set_color(Color::dark_red);
// center, horizontal radius, vertical radius
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"); // 320*240 pixel gif
cal.set_mask(Point(40,40),200,150);
// display center of image
win.set_label("Canvas #12");
win.wait_for_button();
Stroustrup/Programming
38

38. Demo Code 12

Add shapes, more text
Stroustrup/Programming
39

39. Add shapes, more text

Boiler plate
#include "Graph.h"
#include “Simple_window.h"
interface
// header for graphs
// header containing window
int main ()
try
{
// the main part of your code
}
catch(exception& e) {
cerr << "exception: " << e.what() << '\n';
return 1;
}
catch (...) {
cerr << "Some exception\n";
return 2;
}
Stroustrup/Programming
40

40. Boiler plate

Primitives and algorithms
• The demo shows the use of library primitives
– Just the primitives
– Just the use
• Typically what we display is the result of
– an algorithm
– reading data
• Now we will look a bit more at how some of this is
implemented.
Stroustrup/Programming
41

41. Primitives and algorithms

Display model
Open_polyline
draw()
attach()
attach()
Rectangle
draw()
“window”
Display
Engine
draw()
• Objects (such as graphs) are “attached to” (“placed in”) a window.
• The “display engine” invokes display commands (such as “draw line
from x to y”) for the objects in a window
• Objects such as Rectangle add vectors of lines to the window to draw
Stroustrup/Programming
42

42. Display model

Code organization
FLTK headers
Point.h:
struct Point { … };
FLTK code
GUI.h:
Window.h:
Graph.h:
// Graphing interface:
struct Shape { … };

// window interface:
class Window {…};

Graph.cpp:
// GUI interface:
struct In_box { … };

Window.cpp:
Graph code
Window code
chapter12.cpp:
#include "Graph.h"
#include "Window.h"
int main() { … }
Stroustrup/Programming
GUI.cpp:
GUI code
43

43. Code organization

Design note
• The ideal of program design is to represent concepts
directly in code
– We take this ideal very seriously
• For example:
– Window – a window as we see it on the screen
• Will look different on different operating systems (not our business)
– Line – a line as you see it in a window on the screen
– Point – a coordinate point
– Shape – what’s common to shapes
• (imperfectly explained for now; all details in Chapter 14)
– Color – as you see it on the screen
Stroustrup/Programming
45

44. Source files

Point
namespace Graph_lib
// our graphics interface is in Graph_lib
{
struct Point
// a Point is simply a pair of ints (the coordinates)
{
int x, y;
Point(int xx, int yy) : x(xx), y(yy) { }
};
// Note the ';'
}
Stroustrup/Programming
46

45. Design note

Line
struct Shape {
// hold lines represented as pairs of points
// knows how to display lines
};
struct Line : Shape
// a Line is a Shape defined by just two Points
{
Line(Point p1, Point p2);
};
Line::Line(Point p1, Point p2)
// construct a line from p1 to p2
{
add(p1);
// add p1 to this shape (add() is provided by Shape)
add(p2);
// add p2 to this shape
}
Stroustrup/Programming
47

46. Point

Line example
// draw two lines:
using namespace Graph_lib;
Simple_window win(Point(100,100),600,400,"Canvas");
// make a window
Line horizontal(Point(100,100),Point(200,100));
// make a horizontal line
Line vertical(Point(150,50),Point(150,150)); // make a vertical line
win.attach(horizontal);
win.attach(vertical);
// attach the lines to the window
win.wait_for_button();
// Display!
Stroustrup/Programming
48

47. Line

example
Stroustrup/Programming
49

48. Line example

• Individual lines are independent
horizontal.set_color(Color::red);
vertical.set_color(Color::green);
Stroustrup/Programming
50

49. Line example

Lines
struct Lines : Shape {
// a Lines object is a set of lines
// We use Lines when we want to manipulate
// all the lines as one shape, e.g. move them all
// together with one move statement
void add(Point p1, Point p2); // add line from p1 to p2
void draw_lines() const;
// to be called by Window to draw Lines
};
• Terminology:




Lines “is derived from” Shape
Lines “inherits from” Shape
Lines “is a kind of” Shape
Shape “is the base” of Lines
• This is the key to what is called “object-oriented programming”
– We’ll get back to this in Chapter 14
Stroustrup/Programming
51

50. Line example

Lines Example
Lines x;
x.add(Point(100,100), Point(200,100));
x.add(Point(150,50), Point(150,150));
win.attach(x);
win.wait_for_button();
// horizontal line
// vertical line
// attach Lines object x to Window win
// Draw!
Stroustrup/Programming
52

51. Lines

example
• Looks exactly like the two Lines example
Stroustrup/Programming
53

52. Lines Example

Implementation: Lines
void Lines::add(Point p1, Point p2) // use Shape’s add()
{
Shape::add(p1);
Shape::add(p2);
}
void Lines::draw_lines() const
// to somehow be called from Shape
{
for (int i=1; i<number_of_points(); i+=2)
fl_line(point(i-1).x, point(i-1).y, point(i).x, point(i).y);
}
• Note
– fl_line is a basic line drawing function from FLTK
– FLTK is used in the implementation, not in the interface to our classes
– We could replace FLTK with another graphics library
Stroustrup/Programming
54

53. Lines example

Draw Grid
(Why bother with Lines when we have Line?)
// A Lines object may hold many related lines
// Here we construct a grid:
int x_size = win.x_max();
int y_size = win.y_max();
int x_grid = 80;
// make cells 80 pixels wide
int y_grid = 40;
// make cells 40 pixels high
Lines grid;
for (int x=x_grid; x<x_size; x+=x_grid)
grid.add(Point(x,0),Point(x,y_size));
for (int y = y_grid; y<y_size; y+=y_grid)
grid.add(Point(0,y),Point(x_size,y));
// veritcal lines
// horizontal lines
win.attach(grid); // attach our grid to our window (note grid is one object)
Stroustrup/Programming
55

54. Implementation: Lines

Grid
Oops! Last column is narrow, there's a grid line on top of
the Next button, etc.—tweaking required (as usual)
Stroustrup/Programming
56

55. Draw Grid (Why bother with Lines when we have Line?)

Color
struct Color {
// Map FLTK colors and scope them;
// deal with visibility/transparency
enum Color_type { red=FL_RED, blue=FL_BLUE, /* … */ };
enum Transparency { invisible=0, visible=255 }; // also called Alpha
Color(Color_type cc) :c(Fl_Color(cc)), v(visible) { }
Color(int cc) :c(Fl_Color(cc)), v(visible) { }
Color(Color_type cc, Transparency t) :c(Fl_Color(cc)), v(t) { }
int as_int() const { return c; }
Transparency visibility() { return v; }
void set_visibility(Transparency t) { v = t; }
private:
Fl_Color c;
char v;
};
Stroustrup/Programming
57

56. Grid

Draw red grid
grid.set_color(Color::red);
Stroustrup/Programming
58

57. Color

Line_style
struct Line_style {
enum Line_style_type {
solid=FL_SOLID,
dash=FL_DASH,
dot=FL_DOT,
dashdot=FL_DASHDOT,
dashdotdot=FL_DASHDOTDOT,
};
// ------// - - - // .......
// - . - .
// -..-..
Line_style(Line_style_type ss) :s(ss), w(0) { }
Line_style(Line_style_type lst, int ww) :s(lst), w(ww) { }
Line_style(int ss) :s(ss), w(0) { }
int width() const { return w; }
int style() const { return s; }
private:
int s;
int w;
};
Stroustrup/Programming
59

58. Draw red grid

Example: colored fat dash grid
grid.set_style(Line_style(Line_style::dash,2));
Stroustrup/Programming
60

59. Line_style

Polylines
struct Open_polyline : Shape {
// open sequence of lines
void add(Point p) { Shape::add(p); }
};
struct Closed_polyline : Open_polyline {
// closed sequence of lines
void draw_lines() const
{
Open_polyline::draw_lines(); // draw lines (except the closing one)
// draw the closing line:
fl_line( point(number_of_points()-1).x,
point(number_of_points()-1).y,
point(0).x,
point(0).y
);
}
void add(Point p) { Shape::add(p); }
// not needed (why?)
};
Stroustrup/Programming
61

60. Example: colored fat dash grid

Open_polyline
Open_polyline opl;
opl.add(Point(100,100));
opl.add(Point(150,200));
opl.add(Point(250,250));
opl.add(Point(300,200));
Stroustrup/Programming
62

61. Polylines

Closed_polyline
Closed_polyline cpl;
cpl.add(Point(100,100));
cpl.add(Point(150,200));
cpl.add(Point(250,250));
cpl.add(Point(300,200));
Stroustrup/Programming
63

62. Open_polyline

Closed_polyline
cpl.add(Point(100,250));
• A Closed_polyline is not a polygon
– some closed_polylines look like polygons
– A Polygon is a Closed_polyline where no lines cross
• A Polygon has a stronger invariant than a Closed_polyline
Stroustrup/Programming
64

63. Closed_polyline

Text
struct Text : Shape {
Text(Point x, const string& s)
// x is the bottom left of the first letter
: lab(s),
fnt(fl_font()),
// default character font
fnt_sz(fl_size()) // default character size
{ add(x); }
// store x in the Shape part of the Text object
void draw_lines() const;
// … the usual “getter and setter” member functions …
private:
string lab;
// label
Font fnt;
// character font of label
int fnt_sz;
// size of characters in pixels
};
Stroustrup/Programming
65

64. Closed_polyline

Add text
Text t(Point(200,200), "A closed polyline that isn’t a polygon");
t.set_color(Color::blue);
Stroustrup/Programming
66

65. Text

Implementation: Text
void Text::draw_lines() const
{
fl_draw(lab.c_str(), point(0).x, point(0).y);
}
// fl_draw() is a basic text drawing function from FLTK
Stroustrup/Programming
67

66. Add text

Color matrix
• Let’s draw a color matrix
– To see some of the colors we have to work with
– To see how messy two-dimensional addressing can be
• See Chapter 24 for real matrices
– To see how to avoid inventing names for hundreds of objects
Stroustrup/Programming
68

67. Implementation: Text

Color Matrix (16*16)
Simple_window win20(pt,600,400,"16*16 color matrix");
Vector_ref<Rectangle> vr; // use like vector
// but imagine that it holds references to objects
for (int i = 0; i<16; ++i) {
// i is the horizontal coordinate
for (int j = 0; j<16; ++j) {
// j is the vertical coordinate
vr.push_back(new Rectangle(Point(i*20,j*20),20,20));
vr[vr.size()-1].set_fill_color(i*16+j);
win20.attach(vr[vr.size()-1]);
}
// new makes an object that you can give to a Vector_ref to hold
// Vector_ref is built using std::vector, but is not in the standard library
Stroustrup/Programming
69

68. Color matrix

(16*16)
More examples and graphics classes in the book (chapter 13)
Stroustrup/Programming
70

69. Color Matrix (16*16)

Next lecture
• What is class Shape?
• Introduction to object-oriented programming
Stroustrup/Programming
71
English     Русский Rules