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

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

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

4. 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();

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

6. FLTK Example - Hello World

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

8. 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)

9. 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)

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

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

12. 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)

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

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

15. 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)

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

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

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

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

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

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

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

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

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

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

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