1. 1 Chapter 12 GUI C/C++ Language Programming Wanxiang Che

2. What is GUI? Graphical User Interface (GUI) It’s useful and fun –Displaying results –Instant feedback –Graphing functions Systems –Windows –Gnome –KDE –… 2

3. FLTK The Fast Light ToolKit (http://www.fltk.org/)http://www.fltk.org/ A C++ GUI toolkit, can be used under *nix, Windows, MacOS, Supports OpenGL Besides FLTK –TCL/TK, QT 3

4. Layers of Software 4 Our code The operating system (e.g. Windows or Linux) Our screen A graphics/GUI library (here FLTK) Device driver

5. FLTK Installing *nix –./configure && make && make install Windows (with Mingw) –make Visual Studio –Open fltk-source/visualc/fltk.dsw and build –In fltk-source copy FL folder to vc/include –In fltk-source/lib copy all files to vc/lib –Add fltk.lib, wsock32.lib, comctl32.lib,fltkgl.lib, fltkforms.lib, and fltkimages.lib to linker input 5

6. How to use in NetBeans? Add include path 6

7. How to use in NetBeans? Add lib path and additional libs 7

8. Additional libs 8

9. FLTK 1.3.x Hello World #include #include #include int main(int argc, char **argv) { Fl_Window *window = new Fl_Window(300, 180); Fl_Box *box = new Fl_Box(20, 40, 260, 100, "Hello, World!"); box->box(FL_UP_BOX); box->labelsize(36); box->labelfont(FL_BOLD + FL_ITALIC); box->labeltype(FL_SHADOW_LABEL); window->end(); window->show(argc, argv); return Fl::run(); } 9

10. Coordinates Oddly, y-coordinates “grow downwards” // right, down Coordinates identify pixels in the window on the screen 0,0 0,100 200,0 50,50 200,100 10

11. FLTK Widget Types • Buttons: • Text • Valuators (sliders, …) • Boxes 11

12. FLTK Widget Methods Each widget class provides a set of methods to change widget properties. –widget->position(x, y) –widget->resize(x, y, width, height) –widget->size(width, height) –widget->color(color) (e.g. FL_BLUE) –widget->labelcolor(color) –widget->when(event) –widget->callback(static function, data) 12

13. FLTK Callbacks Callbacks link functions to events widget->when(event) determines for which event the callback function is executed. –widget->when(FL_WHEN_ENTER_KEY) –widget->when(FL_WHEN_RELEASE) widget->callback(callfnc, data) sets what function to call and what data to pass to it. –Callback functions are sent a Fl_Widget pointer of the widget that changed and the data specified. –void callfnc(Fl_Widget *w, void *data) 13

14. Callback Example (1) void hellocb(Fl_Widget *, void *data) { std::cout << "Hello World!" << std::endl; static int color = 10; Fl_Box *box = (Fl_Box *)data; box->labelcolor(color += 3); box->redraw_label(); } int main(int argc, char **argv) { Fl_Window *window = new Fl_Window(300, 180); Fl_Box *box = new Fl_Box(20, 40, 260, 100, "Hello, World!"); Fl_Button *b = new Fl_Button(20, 20, 80, 25, "&Hello"); b->callback(hellocb, box); window->end(); window->show(argc, argv); return Fl::run(); } 14

15. Drawing Drawing in a widget is achieved using the virtual method Fl_Widget::draw() Create the widget as a subclass of an existing widget class and implement the draw method Various drawing routines are provided: –Lines fl_line(x, y, x1, y1) –Polygons fl_polygon(x, y, x1, y1, x2, y2) –Ellipses fl_arc(x, y, w, h, a1, a2) –Text fl_draw(text, x, y) –Circle fl_circle(x, y, r) –Rect fl_rect(x, y, w, h) 15

16. Drawing a Circle class Drawing : public Fl_Widget { public: Drawing(int X, int Y, int W, int H, const char *L) : Fl_Widget(X, Y, W, H, L) { } void draw() { fl_color(FL_RED); fl_circle(w(), h(), w() / 2); } }; int main(int argc, char **argv) { Fl_Window *window = new Fl_Window(200, 200); Drawing *draw = new Drawing(100, 100, 100, 100, "Test"); window->end(); window->show(argc, argv); return Fl::run(); } 16

17. Drawing Images void draw() { Fl_PNG_Image *p = new Fl_PNG_Image("Koala.png"); p->draw(10, 10); } 17

18. More Examples: Clock #include #include #include int main(int argc, char **argv) { Fl_Window window(220, 220, "Fl_Clock"); Fl_Clock c1(0, 0, 220, 220); c1.color(2, 1); window.resizable(c1); window.end(); window.show(argc, argv); return Fl::run(); } 18

19. More Examples: Custom Clock #include #include #include #include #include #include #include #define BG_COLOR 45 #define TICK_COLOR 50 #define CIRC_COLOR 0 19

20. More Examples: Custom Clock class MyTimer : public Fl_Box { void draw() { // COMPUTE NEW COORDS OF LINE static long start = time(NULL); long tick = time(NULL) - start; char secs[80]; sprintf(secs, "%02ld:%02ld", tick / 60, tick % 60); float angle = 3.14 - (((tick % 60) / 60.0) * 6.28); int radius = h() / 2; int x1 = (int) (x() + w() / 2), y1 = (int) (y() + h() / 2), x2 = (int) (x1 + (sin(angle) * radius)), y2 = (int) (y1 + (cos(angle) * radius)); // DRAWING …… } 20

21. More Examples: Custom Clock // TELL BASE WIDGET TO DRAW ITS BACKGROUND Fl_Box::draw(); // DRAW 'SECOND HAND' OVER WIDGET'S BACKGROUND fl_color(TICK_COLOR); fl_line(x1, y1, x2, y2); fl_color(CIRC_COLOR); fl_pie(x1 - 10, y1 - 10, 20, 20, 0.0, 360.0); // DRAW TIMER TEXT STRING fl_color(TICK_COLOR); fl_font(FL_HELVETICA, 16); fl_draw(secs, x() + 4, y() + h() - 4); 21

22. More Examples: Custom Clock static void Timer_CB(void *userdata) { MyTimer *o = (MyTimer*) userdata; o->redraw(); Fl::repeat_timeout(1, Timer_CB, userdata); } public: MyTimer(int X, int Y, int W, int H, const char*L = 0) : Fl_Box(X, Y, W, H, L) { box(FL_FLAT_BOX); color(BG_COLOR); Fl::add_timeout(1, Timer_CB, (void*) this); } 22

23. More Examples: Custom Clock int main() { Fl_Window win(220, 220); MyTimer tim(10, 10, win.w() - 20, win.h() - 20); win.show(); return (Fl::run()); } 23