chapter 12 a display model - c-jump: computer programming ... · pdf filechapter 12 a display...

44
Chapter 12 Chapter 12 A display model A display model Bjarne Stroustrup Bjarne Stroustrup www.stroustrup.com/Programming www.stroustrup.com/Programming

Upload: truongbao

Post on 24-Mar-2018

232 views

Category:

Documents


2 download

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

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 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

A A ““blank canvasblank 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 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

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 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

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 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

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 likelooking like”” is not the same as is not the same as ““isis””

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 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

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

// 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

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); // height in pixelsheight in pixels

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); // // 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

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 #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