July 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

July 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

July 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

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

July FLTK Example - Hello World #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(); }

July FLTK Example - Hello World

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

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

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

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

July FLTK Example - Buttons #include 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(); }

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

July Drawing Example - A Circle #include 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(); }

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

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

July 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

July 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

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

July FLUID - Hello World with Switch  Generate HelloWorld class HelloWorldUI new  code  class

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

July FLUID - Hello World with Switch  Create the main window inside the constructor method new  group  window

July FLUID - Hello World with Switch  Create a tile widget new  group  tile

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

July FLUID - Hello World with Switch  Create the main function new  code  method/function

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

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

July 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