FLTK – Flash Light Tool Kit

Introduction

GUI Widget vs. Toolkit

In computer programming, a widget (or control) is an element from GUI (Graphical Unit Interface) that shows information (data) and can be changed, modified, or added by user. Example window to showing data and text box to input or modifying data.

Characteristic to define the widget is to provide interaction from the user to the data, the widget is a simple form which, if implemented in an application program holds all the data processed by the application and felt the interaction with the data.

On the other hand, the Toolkit is a library that holds the widget that is usually developed in classes and can be run in a particular language by connecting the libraries of the toolkit with the language, eg C + +.

FLTK History

The Flash Light Tool Kit (“FLTK”, read as “fulltick”) is cross-platform GUI Toolkit from C++ language that can be run on UNIX/LINUX, Windows, and MacOS X. FLTK allows modern GUI function that support 3D graphic with OpenGL. FLTK was developed first by Bill Spitzak and still being developed by developers from all around the world.

FLTK widgets encompasses all that is usually used to create programs that will be developed. In addition, FLTK can also receive new widgets that can be made easily through the C++ class .

Fl_Button is  possible to perform a usual keystrokes, check box , radio button, even those that support a toggle function. All those possibilities can be operated directly in a single widget only by its own mode .

To capture an input from user, Fl_input allows us to make a textbox that receive data from user with many various needed modes and settings to be wanted widget. Besides text box, Fl_valuator possible to receive input in the form of number. Fl_Valuator can be formed a scroll bar or slider.

Fl_Menu allows to give menu function like menu bar and combo box. Fl_Browser give widget that support list control too, and there many other widget which we can use.

Beside for making UI (User Interface), FLTK also give easiness to give an alert message box, yes/no/cancel option message box, file chooser, help, and prompt window that ask user for text and password.

For the better UI appearance, FLTK 1.1.x offer 2 kind of UI, “standard” and “plastic”. FLTK 2.0 allow users to choose what is the better UI appearance that their wanted according to the setting.

FLTK installation

FLTK toolkit can be downloaded in it’s official home page in http://www.fltk.org. There are 2 versions of FLTK. The one that still being developed but stable is 1.3.x version. The one that still being developed is version 2. So, for stability, I will explain FLTK 1.3.x-r6530 version.

FLTK Basic

To use FLTK, we have to put <FL/Fl.H> in the beginning of the program. Beside that, we have to put other header files depend on what widget we will use.

Example:

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

}

This is the description of the code above :

Fl_Window *window = new Fl_Window(300,180);

First, we create a window with size  300 x 180.

Fl_Box *box = new Fl_Box(20,40,260,100,”Hello, World!”);

Then we create a box with text “Hello Word” in the middle of it. As the default, FLTK will insert it in a group of active widget.

box->box(FL_UP_BOX);

box->labelsize(36);

box->labelfont(FL_BOLD+FL_ITALIC);

box->labeltype(FL_SHADOW_LABEL);

In that part of code, we modify the properties of that box.

window->end();

The code above is to give statement that we’ve done with the window.

window->show(argc, argv);

return Fl::run();

And we show the window and insert it the main loop of FLTK.

You can see the output of the program like this:

The program will end whether you click close or press ESC button.

Using Widget

A widget created by using  new operator in C++. The parameter that usually used in the constructor is :

Fl_Widget(x, y, width, height, label)

X and y parameter determine where the widget or the window will appear on the screen. In FLTK, the coordinates (0,0) pixel is on the left top the screen. The next parameter are width and height the widget in pixels.

Making widget hierarchy

Usually, widgets are combined to a single group and can be grouped again, to form a hierarchy from all widget. FLTK allow to fill this group with put a widget by putting it between myGroup->begin() and myGroup->end(). In this example, myGroup will be an active group.

Get/Set Function

We can change the type of Fl_Box, example, box->box(FL_UP_BOX). So, we change the box from it’s default FL_NO_BOX (box without image). In the “Hello World” example above, we use FL_UP_BOX that make the border of the box looks like bevels.

To get the current type of the box, we can use box->box(). FLTK use function name that overload the get/set function. “set” usually like “void name(type)”, and  “get” usually like “type name() const”.

Redraw

After changing the type with “set”, we need to redraw the widget. Why? because the widget not immediately updated. So, after made any changes, we have to call redraw() function.

Label

Every single widget can use a label. Inside of widget window, label used to make a title bar. In the example program above, we change property of label such as font, size, and it’s type.

Labelfont function changes the font that used and also it’s typefaces, with FL_BOLD and FL_ITALIC. Labelsize function is to set the height of the font in pixels. Labeltype function to determine the type of label.

Main Event Loop

Every FLTK application and GUI application generally based on event-processing. so if the user moves the mouse, press a button, and using the keyboard, it will call an event that can be captured by the application.

FLTK also supports specific event like idle, timer, and file pseudo-events that will be run if met requirement. Idle called when user don’t act or input anything. Timer called after specified count of time has been passed, can be used to show time or a running process. File called when we need read and write file process.

FLTK application need periodic checks (Fl::check()) or wait function (Fl::wait()) to respond an event and Fl::run() to run a loop. Fl::run() equals while. Fl::run() do not return any value until all FLTK control has been closed by user or program.

Common Widget

Buttons

Fl_Button – Button standard

Fl_Check_Button – Button with Checkbox

Fl_Light_Button – Button with toggle function

Fl_Repeat_Button – Button with repeat function

Fl_Return_Button – Button with functioning when ENTER button pressed.

Fl_Round_Button – Button with  Radio

All Button need appropriate header file (example Fl_light_Button). After adding the header, we can create button with appropriate constructor.

Example: Fl_Button *button = new Fl_Button(x, y, width, height, “label”);

For Light Button and Round, method value() returns it’s status  ( 0 = off, 1 = on). Set() and clear() to set the status. Setonly() function needed by  Round in order to just 1 that can be chosen.

Text

Fl_Input – Text Input 1 line

Fl_Output – Text Output 1 line

Fl_Multiline_Input – Text Input multi line

Fl_Multiline_Output – Text Output multi line

Fl_Text_Display – Text Display multi line

Fl_Text_Editor – Text Editor multi line

Fl_Help_View – HTML Help

Method value() used to get/set string from  Text In/Output.

Example:

Fl_Input *input = new Fl_Input(x, y, width, height, “label”);

input->value(“Now is the time for all good men…”);

Valuators

Method value() used to get/set value from each widget. Minimum() and maximum() used to set top and bottom value limit.

Colors

To set colors, we can use the constants or by RGB value. The constants from  FLTK are FL_BLACK, FL_RED, FL_GREEN, FL_YELLOW, FL_BLUE, FL_MAGENTA, FL_CYAN, FL_WHITE

To set color from RGB values combination we use:

Fl_Color c = fl_rgb_color(85, 170, 255);

To set color to a widget, we use the color() method and for a label we use labelcolor().

Example : button->color(FL_RED);

button->labelcolor(FL_WHITE);

Callbacks

After understanding how to show the widget on the screen, now we will learn how to create an event that will happen when a widget receive a specified input. That’s called callback, a function that called when a value of widget has been changed.

void xyz_callback(Fl_Widget *w, void *data) {

…

}

To connect the widget and the callback :

int xyz_data;

button->callback(xyz_callback, &xyz_data);

Shortcuts

To accelerate, FLTK allows to make widget shortcut, that will be activated after certain button pressed.

Example:

button->shortcut(FL_Enter);

button->shortcut(FL_SHIFT + ‘b’);

button->shortcut(FL_CTRL + ‘b’);

button->shortcut(FL_ALT + ‘b’);

button->shortcut(FL_CTRL + FL_ALT + ‘b’);

button->shortcut(0); // no shortcut

FLTK Class Reference

Fl	The Fl is the FLTK global (static) containing state information and global methods for the current application
Fl_Adjuster	Was stolen from Prisms, and has proven to be very useful for values that need a large dynamic range
Fl_Bitmap	Supports caching and drawing of mono-color (bitmap) images
Fl_BMP_Image	Supports loading, caching, and drawing of Windows Bitmap (BMP) image files
Fl_Box	This widget simply draws its box, and possibly it’s label
Fl_Browser	Displays a scrolling list of text lines, and manages all the storage for the text
Fl_Browser_	This is the base class for browsers
Fl_Button	Buttons generate callbacks when they are clicked by the user
Fl_Cairo_State	Contains all the necessary info on the current cairo context
Fl_Cairo_Window	This defines a pre-configured cairo fltk window
Fl_Chart	Fl_Chart displays simple charts
FL_CHART_ENTRY	For internal use only
Fl_Check_Browser	Displays a scrolling list of text lines that may be selected and/or checked by the user
Fl_Check_Button	A button with an “checkmark” to show its status
Fl_Choice	A button that is used to pop up a menu
Fl_Clock	This widget provides a round analog clock display
Fl_Clock_Output	This widget can be used to display a program-supplied time
Fl_Color_Chooser	Standard RGB color chooser
Fl_Counter	Controls a single floating point value with button (or keyboard) arrows
Fl_Device	All graphical output devices and all graphics systems
Fl_Device_Plugin	This plugin socket allows the integration of new device drivers for special window or screen types
Fl_Dial	Circular dial to control a single floating point value
Fl_Display_Device	A display to which the computer can draw
Fl_Double_Window	The Fl_Double_Window provides a double-buffered window
Fl_End	This is a dummy class that allows you to end a Fl_Group in a constructor list of a class:
Fl_File_Browser	Displays a list of filenames, optionally with file-specific icons
Fl_File_Chooser	Displays a standard file selection dialog that supports various selection modes
Fl_File_Icon	Manages icon images that can be used as labels in other widgets and as icons in the FileBrowser widget
Fl_File_Input	This widget displays a pathname in a text input field
Fl_Fill_Dial	Draws a dial with a filled arc
Fl_Fill_Slider	Widget that draws a filled horizontal slider, useful as a progress or value meter
Fl_Float_Input	Subclass of Fl_Input that only allows the user to type floating point numbers (sign, digits, decimal point, more digits, ‘E’ or ‘e’, sign, digits)
Fl_Font_Descriptor	This a structure for an actual system font, with junk to help choose it and info on character sizes
Fl_FormsBitmap	Forms compatibility Bitmap Image Widget
Fl_FormsPixmap	Forms pixmap drawing routines
Fl_Free	Emulation of the Forms “free” widget
Fl_GDI_Graphics_Driver	The MSWindows-specific graphics class
Fl_GIF_Image	Supports loading, caching, and drawing of Compuserve GIFSM images
Fl_Gl_Window	Sets things up so OpenGL works
Fl_Glut_Bitmap_Font	Fltk glut font/size attributes used in the glutXXX functions
Fl_Glut_Window	GLUT is emulated using this window class and these static variables (plus several more static variables hidden in glut_compatability.cxx):
Fl_Graphics_Driver	A virtual class subclassed for each graphics driver FLTK uses
Fl_Group	FLTK container widget
Fl_Help_Dialog	Displays a standard help dialog window using the Fl_Help_View widget
Fl_Help_Font_Style	Fl_Help_View font stack element definition
Fl_Help_Link	Definition of a link for the html viewer
Fl_Help_Target	Fl_Help_Target structure
Fl_Help_View	Displays HTML text
Fl_Hold_Browser	The Fl_Hold_Browser is a subclass of Fl_Browser which lets the user select a single item, or no items by clicking on the empty space
Fl_Image	Fl_Image is the base class used for caching and drawing all kinds of images in FLTK
Fl_Input	This is the FLTK text input widget
Fl_Input_	This class provides a low-overhead text input field
Fl_Input_Choice	A combination of the input widget and a menu button
Fl_Int_Input	Subclass of Fl_Input that only allows the user to type decimal digits (or hex numbers of the form 0xaef)
Fl_JPEG_Image	Supports loading, caching, and drawing of Joint Photographic Experts Group (JPEG) File Interchange Format (JFIF) images
Fl_Label	This struct stores all information for a text or mixed graphics label
Fl_Light_Button
Fl_Menu_	Base class of all widgets that have a menu in FLTK
Fl_Menu_Bar	This widget provides a standard menubar interface
Fl_Menu_Button	This is a button that when pushed pops up a menu (or hierarchy of menus) defined by an array of Fl_Menu_Item objects
Fl_Menu_Item	The Fl_Menu_Item structure defines a single menu item that is used by the Fl_Menu_ class
Fl_Menu_Window	Window type used for menus
Fl_Multi_Browser	Subclass of Fl_Browser which lets the user select any set of the lines
Fl_Multiline_Input	This input field displays ‘ ‘ characters as new lines rather than ^J, and accepts the Return, Tab, and up and down arrow keys
Fl_Multiline_Output	This widget is a subclass of Fl_Output that displays multiple lines of text
Fl_Native_File_Chooser	This class lets an FLTK application easily and consistently access the operating system’s native file chooser
Fl_Output	This widget displays a piece of text
Fl_Overlay_Window	This window provides double buffering and also the ability to draw the “overlay” which is another picture placed on top of the main image
Fl_Pack	This widget was designed to add the functionality of compressing and aligning widgets
Fl_Paged_Device	Represents page-structured drawing surfaces
Fl_Pixmap	Supports caching and drawing of colormap (pixmap) images, including transparency
Fl_Plugin	Fl_Plugin allows link-time and run-time integration of binary modules
Fl_Plugin_Manager	Fl_Plugin_Manager manages link-time and run-time plugin binaries
Fl_PNG_Image	Supports loading, caching, and drawing of Portable Network Graphics (PNG) image files
Fl_PNM_Image	Supports loading, caching, and drawing of Portable Anymap (PNM, PBM, PGM, PPM) image files
Fl_Positioner	This class is provided for Forms compatibility
Fl_PostScript_File_Device	To send graphical output to a PostScript file
Fl_PostScript_Graphics_Driver	PostScript graphical backend
Fl_PostScript_Printer	Print support under Unix/Linux
Fl_Preferences	Fl_Preferences provides methods to store user settings between application starts
Fl_Preferences::Name	‘Name’ provides a simple method to create numerical or more complex procedural names for entries and groups on the fly
Fl_Printer	OS-independent print support
Fl_Progress	Displays a progress bar for the user
Fl_Quartz_Graphics_Driver	The Mac OS X-specific graphics class
Fl_Repeat_Button	The Fl_Repeat_Button is a subclass of Fl_Button that generates a callback when it is pressed and then repeatedly generates callbacks as long as it is held down
Fl_Return_Button	The Fl_Return_Button is a subclass of Fl_Button that generates a callback when it is pressed or when the user presses the Enter key
Fl_RGB_Image	Supports caching and drawing of full-color images with 1 to 4 channels of color information
Fl_Roller	“dolly” control commonly used to move 3D objects
Fl_Round_Button	Buttons generate callbacks when they are clicked by the user
Fl_Round_Clock	A clock widget of type FL_ROUND_CLOCK
Fl_Scroll	This container widget lets you maneuver around a set of widgets much larger than your window
Fl_Scrollbar	Displays a slider with arrow buttons at the ends of the scrollbar
Fl_Secret_Input	Subclass of Fl_Input that displays its input as a string of asterisks
Fl_Select_Browser	The class is a subclass of Fl_Browser which lets the user select a single item, or no items by clicking on the empty space
Fl_Shared_Image	This class supports caching, loading, and drawing of image files
Fl_Simple_Counter	This widget creates a counter with only 2 arrow buttons
Fl_Single_Window	This is the same as Fl_Window
Fl_Slider	Sliding knob inside a box
Fl_Spinner	This widget is a combination of the input widget and repeat buttons
Fl_Surface_Device	A surface that’s susceptible to receive graphical output
Fl_Sys_Menu_Bar	A class to create, modify and delete menus that appear on Mac OS X in the menu bar at the top of the screen
Fl_System_Printer	Print support under MSWindows and Mac OS X
Fl_Table	A table of widgets or other content
Fl_Table_Row	A table with row selection capabilities
Fl_Tabs	“file card tabs” interface that allows you to put lots and lots of buttons and switches in a panel, as popularized by many toolkits
Fl_Text_Buffer	This class manages unicode displayed in one or more Fl_Text_Display widgets
Fl_Text_Display	This is the FLTK text display widget
Fl_Text_Display::Style_Table_Entry	This structure associates the color,font,size of a string to draw with an attribute mask matching attr
Fl_Text_Editor	This is the FLTK text editor widget
Fl_Text_Editor::Key_Binding	Simple linked list associating a key/state to a function
Fl_Text_Selection	This is an internal class for Fl_Text_Buffer to manage text selections
Fl_Tile	Lets you resize the children by dragging the border between them:
Fl_Tiled_Image	This class supports tiling of images over a specified area
Fl_Timer	This is provided only to emulate the Forms Timer widget
Fl_Toggle_Button	The toggle button is a push button that needs to be clicked once to toggle on, and one more time to toggle off
Fl_Tooltip	Tooltip support for all FLTK widgets
Fl_Tree	Tree widget
Fl_Tree_Item	Tree item
Fl_Tree_Item_Array	Manages an array of Fl_Tree_Item pointers
Fl_Tree_Prefs	Tree widget’s preferences
Fl_Valuator	Controls a single floating-point value and provides a consistent interface to set the value, range, and step, and insures that callbacks are done the same for every object
Fl_Value_Input	Displays a numeric value
Fl_Value_Output	Displays a floating point value
Fl_Value_Slider	Fl_Slider widget with a box displaying the current value
Fl_Widget	Fl_Widget is the base class for all widgets in FLTK
Fl_Widget_Tracker	This class should be used to control safe widget deletion
Fl_Window	This widget produces an actual window
Fl_Wizard	This widget is based off the Fl_Tabs widget, but instead of displaying tabs it only changes “tabs” under program control
Fl_XBM_Image	Supports loading, caching, and drawing of X Bitmap (XBM) bitmap files
Fl_Xlib_Graphics_Driver	The Xlib-specific graphics class
Fl_XPM_Image	Supports loading, caching, and drawing of X Pixmap (XPM) images, including transparency

References

FLTK homepage         http://www.fltk.org

Originally written by Michael MX072.RDT.SLC