chapter 12 a display model - c-jump: computer programming ... 12 a display model bjarne stroustrup...

Download Chapter 12 A display model - c-jump: computer programming ...  12 A display model Bjarne Stroustrup ... FLTK:   // Fast Light Tool Kit ... 14 Window Simple_window

Post on 24-Mar-2018

218 views

Category:

Documents

2 download

Embed Size (px)

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?

    ItIts very commons very common If you write conventional PC applications, youIf you write conventional PC applications, youll have to do itll have to do it

    ItIts 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 its worth teachings worth teaching If we donIf we dont show how its done, you might think it was magict show how its 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

    Youll be using a few interface classes we wroteYoull 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

  • 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 (dont 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 systems 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 windowwin.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_

Recommended

View more >