FLTK The Fast Light Toolkit A C++ graphical user interface toolkit Can be used under X, Windows, MacOS Supports OpenGL Provides: Interactive user interface builder program (fluid) Compatibility headers for XForms and GLUT Support for OpenGL overlay hardware

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

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() waits for an event to appear Fl::run() sets up an event processing loop

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 window->end() Display the window window->show(argc, argv) Start the event loop return Fl::run();

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(); }

FLTK Example - Hello World

FLTK Widget Types Buttons: Text Valuators (sliders, counters, dials) Boxes

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)

FLTK Callbacks Callbacks link functions to events widget->when(event) determines for which event the callback function is executed. E.g.: 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 have to be static Callback functions are sent a Fl_Widget pointer of the widget that changed and the data spcified. void callfnc(Fl_Widget *w, void *data)

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

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("\007"); 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 *b1 = new Fl_Button(20, 20, 80, 25, "&Beep"); new Fl_Button(120,20, 80, 25, "&no op"); Fl_Button *b3 = new Fl_Button(220,20, 80, 25, "E&xit"); b1->callback(beepcb,0); b3->callback(exitcb,0); window->end(); window->show(argc,argv); return Fl::run(); }

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)

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

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

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

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

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

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.

FLUID - Hello World with Switch Generate HelloWorld class HelloWorldUI new®code®class

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

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

FLUID - Hello World with Switch Create a tile widget new®group®tile

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

FLUID - Hello World with Switch Create the main function new®code®method/function

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

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