CSE 457 Project 1: GL HelpSession

Project 1 help session : FLTK and FLUID

This page is designed to assist you in completing project 1, Impressionist. This is the basic tutorial for using FLTK and FLUID to create the user interface.

FLTK
FLUID

FLTK tutorial

FLTK is a C++ graphical user interface tookit for X(Unix), OpenGL and Microsoft Windows(Nt 4.0, 95, 98).

We won't cover much about FLTK in here, since we will be using FLUID to generate the FLTK source code. But it is good to learn the basic of FLTK so that you can be more familiar with Fluid later on. You can click here to see the complete FLTK Programming Manual.

Naming

All public symbols in FLTK start with the charaters 'F' and 'L'

Function names examples are Fl::foo() or fl_foo().
Class and type names are capitalized: Fl_foo
Constant enumeration: FL_FOO
All headers start with <FL/...>

SimpleProgram

Here is a simple Hello World program that I get from the FLTK Programming Manual.

	#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->(FL_UP_BOX);
	  box->labelsize(36);
	  box->labelfont(FL_BOLD);
	  box->labeltype(FL_SHADOW_LABEL);
	  window->end();
	  window->show(argc, argv);
	  return Fl::run()
	}

The statement "FL_Window *window = ..." will create a window with the specified size(36). The next statement will create a box with the "Hello World!" string in it. To format the box and string, we can use "labelfont", "labeltype", etc.

FLUID tutorial

Fluid is a graphics editor that is used to produce FLTK source code.

The Simple Hello World program

We will try to create the simple Hello World program (the one in the FLTK tutorial above) using FLUID. Open the FLUID executable in the bin directory (in the lab it will be in d:/local/bin).

Go to File->New. Fill in the name of the file (ex:ui.fl)
New->Code->Class. In the name text box, fill in "SimpleUI"
Create the constructor for this class (New->Code->Function) "SimpleUI()"
Then you can create a window by going to New->Group->Window. You can resize this window or move it around.
To create the box, go to New->Other->Box. In Fl_Box window, fill in the attribute for this box. (Label = "Hello World!", Label Font = "Helvetica Bold", Label Type = "SHADOW_LABEL", Box = "UP_BOX, Size = "36").
To generate the .cxx file, go to File->WriteCode. This will generate a SimpleUI class which you can call from main function (similar to the FLTK tutorial).

FLUID for Impressionist

Open the baseUI.fl file in the skeleton program directory. You will have a pop up window with the specifications of the UI in it.
In the top, we have the "BaseUI" class, which basically create a BaseUI class for us. In the next lines, you see some variable declarations for this class. You can specify the attribute(private, public, etc) for this window by clicking on it.
Try clicking on each of the widgets. For each widget there is a corresponding attribute window, in which you can speciy the properties of the widgets.
For example: Click on the m_mainWindow. Another window will pop up.

You can specify the size, type, etc by filling in the correct fields. In the middle of the attribute window, you will see a text box for "Extra code" and "Callback". You can specify other code such as: include file or declaration in the "Extra code" session. In the "Callback" session, you should put the function that will be called corresponding to this widget. You need to write the callback function. For the m_mainWindow example, you have to write the function cb_exit2 (in this case, we already provide this function for you).
You can write the callback function in the FLUID (by doing New->Code->Function to declare the interface and New->Code->Code to define the function). OR you can implement these functions in MSVC (put it in a file eg: func.cpp and declare them in func.h) and declare them to be extern so that it is visible from the .cxx (FLUID generated) file (remember to include the func.h file in the "Extra Code" text box when you call the callback functions in FLUID).
As for us,we define all of the callback function in FLUID. You can see them at the bottom (getSize, resize_window, getDocument, show, etc). Double click on it to see how these functions are defined.

Other widgets

Other widgets that we use in impressionist are:

Menu bar
You can create a MenuBar in New->Menu->MenuBar.
Submenu
Create the "File" submenu by doing New->Menu->Submenu. When you create the submenu, you have to make sure that the "Menu Bar" is highlighted because you want the submenu to be part of this menu bar.
ValueSlider For the "Size" of the brush, we use ValueSlider. You need to specify the maximum and minimum size of the slider.

You can get more in depth with FLUID from FLTK Manual