REU 2005 FLTK

1
FLTKThe 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. Flfoo() 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
• Flcheck() checks for events queue
• Flwait() waits for an event to appear
• Flrun() 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-gtend()
• Display the window
  window-gtshow(argc, argv)
• Start the event loop return Flrun()

5
FLTK Example - Hello World
include ltFL/Fl.Hgt include ltFL/Fl_Window.Hgt inc
lude ltFL/Fl_Box.Hgt 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-gtbox(FL_UP_BOX) box-gtlabelsize(36)
box-gtlabelfont(FL_BOLDFL_ITALIC)
box-gtlabeltype(FL_SHADOW_LABEL)
window-gtend() window-gtshow(argc, argv)
return Flrun()
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-gtposition(x, y)
• widget-gtresize(x, y, width, height)
• widget-gtsize(width, height)
• widget-gtcolor(color) (e.g. FL_BLUE)
• widget-gtlabelcolor(color)
• widget-gtwhen(event)
• widget-gtcallback(static function, data)

9
FLTK Callbacks

• Callbacks link functions to events
• widget-gtwhen(event) determines for which event
  the callback function is executed. E.g.
• widget-gtwhen(FL_WHEN_ENTER_KEY)
• widget-gtwhen(FL_WHEN_RELEASE)
• widget-gtcallback(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-gtmy_callback(w)
• ...
• Provide the callback with a pointer to the
  instance of your class
• widget-gtcallback(my_static_callback,
  this)

11
FLTK Example - Buttons
include ltstdlib.hgt include ltstdio.hgt include
ltFL/Fl.Hgt include ltFL/Fl_Window.Hgt include
ltFL/Fl_Button.Hgt 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, "Exit")
b1-gtcallback(beepcb,0) b3-gtcallback(exitcb,0)
window-gtend() window-gtshow(argc,argv)
return Flrun()
12
Drawing

• Drawing in a widget is achieved using the virtual
  method Fl_Widgetdraw()
• 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
Int main(int argc, char argv) Fl_Window
window(300,300) Drawing drawing(10,10,280,280)
window.end() window.show(argc,argv)
return Flrun()
include ltFL/Fl.Hgt include ltFL/Fl_Window.Hgt incl
ude ltFL/fl_draw.Hgt 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)
14
Events

• Events are passed as an argument to the
  Fl_Widgethandle() 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
  Flevent_() methods. E.g.
• Flevent_button()
• Flevent_x()
• Flevent_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
FLUIDThe 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
FLUIDThe 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
  newcodeclass

20
FLUID - Hello World with Switch

• Create the constructor method for the window
  class to build the window
  newcodemethod/function

21
FLUID - Hello World with Switch

• Create the main window inside the constructor
  method
  newgroupwindow

22
FLUID - Hello World with Switch

• Create a tile widget
  newgrouptile

23
FLUID - Hello World with Switch

• Create a toggle button with callback and color
  initialization newgroupbutton

24
FLUID - Hello World with Switch

• Create the main function
  newcodemethod/function

25
FLUID - Hello World with Switch

• Create code to create a window class and display
  the window
  newcodecode

26
FLUID - Hello World with Switch

• Save the fluid specification file
  filesave
• Generate the C code for the program
  filewrite code
• Compile the application and run it