FLTK The Fast Light Toolkit A C graphical

FLTK The Fast Light Toolkit �A C++ graphical user interface toolkit � Can be used under X, Windows, Mac. OS � Supports Open. GL � Provides: �Interactive user interface builder program (fluid) �Compatibility headers for XForms and GLUT �Support for Open. GL overlay hardware June 2003 1

FLTK Basics and Naming � FLTK provides a library (and associated header files) containing: �Window and Widget classes (buttons, boxes, sliders, etc. ) Fl_Foo �Basic methods for creation, displaying, drawing, etc. Fl: : foo() or fl_foo() �A set of constants for types, events, etc. FL_FOO June 2003 2

FLTK Operation � FLTK applications are based on a simple event processing model. �User actions (keystrokes, mouse klicks, etc. ) cause events that are sent to the active window �Idle, timer, and file events are triggered internally. � Applications have to actively listen for and process events from the event queue �Fl: : check() checks for events queue �Fl: : wait() �Fl: : run() June 2003 loop waits for an event to appear sets up an event processing 3

Basic FLTK Application � Basic steps to create an FLTK application: �Create the main window new Fl_Window(width, height, title) �Create the desired widgets new Fl_Widget(x, y, width, height, label) �Set the appropriate widget properties �Close the widget tree associated with the main window->end() �Display the window->show(argc, argv) �Start the event loop return Fl: : run(); June 2003 4

FLTK Example - Hello World #include <FL/Fl. H> #include <FL/Fl_Window. H> #include <FL/Fl_Box. H> 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(); } June 2003 5

FLTK Example - Hello World June 2003 6

FLTK Widget Types � Buttons: � Text � Valuators (sliders, counters, dials) � Boxes June 2003 7

FLTK Widget Methods � Each widget class provides a set of methods to change widget properties. E. g. : �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) June 2003 8

FLTK Callbacks � Callbacks link functions to events �widget->when(event) determines for which event the callback function is executed. E. g. : �idget->when(FL_WHEN_ENTER_KEY) w �idget->when(FL_WHEN_RELEASE) w �widget->callback(callfnc, data) sets what function to call and what data to pass to it. �allback functions have to be static C Callback functions are sent a Fl_Widget pointer of � the widget that changed and the data spcified. void callfnc(Fl_Widget *w, void *data) June 2003 9

FLTK Callbacks � Using static class methods for callback: �Define a static method in your class that accepts a pointer to the class: class foo { void my_callback(Widget *); static void my_static_callback(Widget *w, foo *f) { f->my_callback(w); }. . . } �Provide the callback with a pointer to the instance of your class: widget->callback(my_static_callback, this); June 2003 10

FLTK Example - Buttons #include <stdlib. h> #include <stdio. h> #include <FL/Fl. H> #include <FL/Fl_Window. H> #include <FL/Fl_Button. H> void beepcb(Fl_Widget *, void *) { printf("07"); fflush(stdout); } void exitcb(Fl_Widget *, void *) { exit(0); } int main(int argc, char ** argv) { Fl_Window *window = new Fl_Window(320, 65); Fl_Button *b 1 = new Fl_Button(20, 80, 25, "&Beep"); new Fl_Button(120, 80, 25, "&no op"); Fl_Button *b 3 = new Fl_Button(220, 80, 25, "E&xit"); b 1 ->callback(beepcb, 0); b 3 ->callback(exitcb, 0); window->end(); window->show(argc, argv); return Fl: : run(); }June 2003 11

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, x 1, y 1) �Polygons fl_polygon(x, y, x 1, y 1, x 2, y 2) �Ellipses fl_arc(x, y, w, h, a 1, a 2) �Text June 2003 fl_draw(text, x, y) 12

Drawing Example - A Circle #include <FL/Fl. H> Int main(int argc, char** argv) { #include <FL/Fl_Window. H> Fl_Window window(300, 300); #include <FL/fl_draw. H> Drawing drawing(10, 280, 280) window. end(); class Drawing : public Fl_Widget { window. show(argc, argv); void draw() { fl_color(FL_WHITE); return Fl: : run(); } fl_arc(140, 70, 0, -360); fl_end_line(); } public: Drawing(int X, int Y, int W, int H) : Fl_Widget(X, Y, W, H) {} }; June 2003 13

Events � Events are passed as an argument to the Fl_Widget: : handle() virtual method. �Mouse Events: FL_PUSH, FL_RELEASE, FL_MOVE, . . . �Focus Events: FL_FOCUS, FL_LEAVE, . . . �Keyboard Events: FL_KEYDOWN, FL_KEYUP, . . . � Event type and content are available via the Fl: : event_*() methods. E. g. : �Fl: : event_button() �Fl: : event_x() �Fl: : event_key() June 2003 14

Using Open. GL � FLTK provides the Fl_Gl_Window class to generate Open. GL applications. �The draw method in this class has to be implemented using Open. GL calls. E. g. : gl_draw(text, x, y) � gl_rect(x, y, width, height) � June 2003 15

FLUID The Fast Light User Interface Designer � FLUID is a graphical interface to create FLTK applications �Graphical design of widgets �Display of widget tree structure �Integrating basic interface code �Automatic code generation June 2003 16

FLUID The Fast Light User Interface Designer � Generate the main windows class �Generate the window �Generate the widgets Insert callbacks if required � � Generate the methods for the main class �Insert code June 2003 17

FLUID - Hello World with Switch � Generat a window class that generates a window with a text display and a button that lets a user toogle between two labels. June 2003 18

FLUID - Hello World with Switch � Generate Hello. World class Hello. World. UI new®code®class June 2003 19

FLUID - Hello World with Switch � Create the constructor method for the window class to build the window new®code®method/function June 2003 20

FLUID - Hello World with Switch � Create the main window inside the constructor method new®group®window June 2003 21

FLUID - Hello World with Switch � Create a tile widget new®group®tile June 2003 22

FLUID - Hello World with Switch � Create a toggle button with callback and color initialization new®group®button June 2003 23

FLUID - Hello World with Switch � Create the main function new®code®method/function June 2003 24

FLUID - Hello World with Switch � Create code to create a window class and display the window new®code June 2003 25

FLUID - Hello World with Switch � Save the fluid specification file®save � Generate the C++ code for the program file®write code � Compile June 2003 the application and run it 26