[Tutorial]GUI programming with FLTK

dsmith · #1 06-Mar-2004, 09:22

GUi programming with FLTK

Introduction
FLTK stands for Fast Light Tool Kit. It is a gui library/tool-kit that is easy to use, easy to learn and very efficient. I have used several gui tool-kits in my quest to cross over from console programming to gui programming. The problem with most of those, is that they felt gooey. I have used Borland Builder, Delphi, Visual C++, GTK, FOX, QT and probably others that I can't even remember and out of all of these, FLTK is the best tool kit for my needs. Is it the best for your needs? I can't tell you, but this overview should give some reasons of why I like it so much. If this sounds like something that you could use, give it a try.

Advantages

Cross platform portability. Fltk works on Windows, *nix and Macintosh systems.
Speed. This is the fastest gui toolkit that I have ever used.
Simplicity. This is not a complicated toolkit at all.
Code. The code (IMHO) is very understandable and actually looks like C/C++ code!
Structure. The structure of FLTK functions and classes just make sense to me
Easy seperation. It is very easy to seperate your interface from your code. This is very important to me as it makes portability and debugging so much easier.

Disadvanatages

Complicated to use under Visual C++
Lacks some features of fuller (bloated) gui tool kits.
Unthemed. This will change as of fltk 2.0.
Programming process is not very graphically oriented. This is an advantage to me, but may seem like a disadvantage to others. I ussually use fluid to do a dialog layout one time and from there changes are done in the code, not in fluid.

Installation/Usage
First of all you need to get the source code for fltk at http://www.fltk.org. The entire source code is only 1.3Mbytes (compressed with bz2), so it could easily be downloaded over a dialup line. The version that I have is 1.1.4. As of this writing, the 1.2 branch is beta only and the 2.0 branch is alpha. You can download the zip, the gz or the bz2. Extract this archive into a directory. If you are going to install on a dual boot machine with Linux & Windows, make sure that this directory is shared by both.

Linux (GCC)
To install in linux is straightforward to anyone familiar with Linux. Go to the directory with the fltk source code and type:

Code:

./configure
make
su -c make install

This compiles fairly quickly. To verify that the install was okay type fltk-config --version. This should print the current version number that is installed.

To compile a program using the fltk toolkit under gcc, you would call gcc like this:

Code:

g++ main_bid.cpp fl_bid.cpp `fltk-config --ldflags` -o bid

This passes the libraries flags needed for fltk to the linker.

Windows (Visual C++)
I have included only the installation of fltk on Visual C++ as FLTK does work under Visual C++. If you want to build fltk projects for windows, I would highly recommend using dev-c++ as it is easier to setup and much more straightforward. But for those interested, follow these steps for installation:

Open up the project work space called fltk.dsw that is under the visualc subdirectory in the FLTK source directory.
This workspace has many projects in it, which you can build and execute. But in order to install the library, go under the Build menu and set the active configuration to "fltk - Win32 Release"
Build this project.
The installed library is under the lib sub-directory of the FLTK source tree and should be called fltk.lib. Verify that this file is there.

Thats the easy part. I am not giving instructions on how to build with Visual C++, because I never got my project to compile properly under Visual C++. If you really want to use Visual C++ all I can say is that it is possible, but the setup and configuration is so complex and the code is heavy that you really are deviating from the true intent of fltk. If anyone has any insight or comments on building FLTK projects under Visual C++, please let me know.

Windows (dev-c++)
First of all a quick note about the bloodshed dev-c++ IDE for windows. The more that I use this thing, the more impressive it becomes. I have nearly stopped doing anything in Visual C++ except maintenance of existing code. This is an entirely free IDE/compiler for Windows. For those interested, it can be obtained from http://www.bloodshed.net. Strange name; great compiler.

Okay, installation on dev-c++ is a snap. Dev-C++ has what they call a package manager. You can easily download and install a tool-kit with a couple of clicks. To install FLTK, follow these steps:

Under the tools menu, click on "Check for Updates/Packages"
Click on the button for "Check for Updates". You must be connected to the internet.
There will be a fairly lengthy list of updates and packages available. You can scan through this and see if anything else catches your eye, but you need to click the checkbox next to "FLTK DevPak" and then hit download selected when ready.
Once this finishes, you should be able to go the the "Package Manager" under the tools menu and find the package called "fast light toolkit".
That's it!

Now to use fltk under dev-c++, you just need to create a new project and tell dev-c++ that it will be an fltk project. dev-c++ will take care of linking the necessary libraries as well as the include paths. To do this, follow these steps:

Under the file menu, select "New" and then "Project...".
In the "New project" dialog, select the tab called GUI. Under here there should be a button for FLTK. Click on that button.
Once you click on this button, you will need to name your project and give it a filename.
Dev-C++ will automatically give you a small sample "Hello World" program that is about 20 lines long. You can save this file and compile it to make sure that all of your libraries, etc. are okay.
Now either start adding your existing files to this project or start making your new ones.
That's it!

Project Example
For an example project, I have started to build a GIDForum Post editor that can be used off-line. Tutorials such as this one, are much easier to write off-line and currently, I just use a text editor. However, I wanted to be able to write a "text" editor that would be specific for a post on GIDForums. Ultimately, I would like this to be a wysiwyg editor, but that is down the road a ways. The following details some of the steps taken to create a GUI using FLTK

Step 1: fluid
Fluid is a basic dialog editor that can be very useful for setting up dialog positioning, etc. Fluid is automatically installed in both the linux and windows install. The following screen shots show fluid running in both windows and linux with the exact same .fld file.

Fluid running under windows
Fluid running under linux

Step 2: Write out initial files
Once the initial layout of your dialog looks good, you can instruct fluid to write out a basic code file and a basic header file for your project. A sample header file is shown below:

CPP / C++ / C Code:

// generated by Fast Light User Interface Designer (fluid) version 1.0104

#ifndef main_h
#define main_h
#include <FL/Fl.H>
#include <FL/Fl_Double_Window.H>
extern Fl_Double_Window *wd_main;
#include <FL/Fl_Menu_Bar.H>
extern Fl_Menu_Bar *mb_main;
#include <FL/Fl_Group.H>
extern Fl_Group *br_button1;
#include <FL/Fl_Light_Button.H>
extern Fl_Light_Button *bt_bold;
extern Fl_Light_Button *bt_italic;
extern Fl_Light_Button *bt_underline;
extern Fl_Light_Button *bt_right;
extern Fl_Light_Button *bt_center;
extern Fl_Light_Button *bt_left;
#include <FL/Fl_Choice.H>
extern Fl_Choice *ls_font;
extern Fl_Choice *ls_size;
#include <FL/Fl_Button.H>
extern Fl_Button *bt_color;
extern Fl_Group *br_button2;
extern Fl_Button *bt_indent;
extern Fl_Button *bt_unindent;
#include <FL/Fl_Text_Display.H>
extern Fl_Text_Display *tx_indent;
extern Fl_Button *bt_list;
extern Fl_Button *bt_endlist;
extern Fl_Text_Display *ls_list;
extern Fl_Light_Button *bt_quote;
extern Fl_Light_Button *bt_c;
extern Fl_Light_Button *bt_html;
extern Fl_Light_Button *bt_kbd;
extern Fl_Light_Button *bt_php;
extern Fl_Light_Button *bt_code;
#include <FL/Fl_Scroll.H>
#include <FL/Fl_Text_Editor.H>
Fl_Double_Window* main_window();
extern Fl_Menu_Item menu_mb_main[];

This really just gives the basic include files and item descriptions. It is up to the coder to organize/develop this information into your own program. I personnaly do not care for the organization of this file and the accompanying C file, but it will compile and run from both of these files. Compare this file to my attached header file.

Step 3: Make your program
This gives you the basis for your gui. Now you need to write the application code that makes this do something spectacular. I have included two screenshots of my program running in both windows and linux. These are compiled from the exact same source files with absolutely no changes

Post Editor running under windows
Post Editor running under linux

I have include the source code and the executables in the attached file. The executable for windows should run on any windows machine. The linux binary is pretty specific and you may need to build from source to get it working.

Wrap up
This is just a very quick overview of FLTK. Documentation for FLTK can be found in the source tree under a sub-folder called documentation. There is a file called "index.html" there that is, well, the index.

My Post Editor program is very rough and incomplete lacking many features and those that are present are not all working correctly. If there is interest in this program and/or fltk programming in general, I will continue this thread by developing more of this editor. Obviously, feedback is welcome and requested.

Attachments

pedit_src.zip - Source code for Post Editor Program. This also includes a file called mpost that is simply a bash script file for making this program under linux. Not elegant, but simple.
pedit_fld.zip - Fluid files including the original C and H files written by fluid.

External Attachments
These aren't big (about 200k), but there is a limit of 100K on attached files.

pedit_win.zip - Executable for Post Editor Program (Windows)
pedit_lin.zip - Executable for Post Editor Program (Linux)

tay · #2 23-Apr-2004, 21:58

very appreciate ur post
thank you very much

cable_guy_67 · #3 27-Oct-2004, 14:02

Quote:

Originally Posted by dsmith

Linux (GCC)
To install in linux is straightforward to anyone familiar with Linux. Go to the directory with the fltk source code and type:

Generic Code:
./configure
make
su -c make install
This compiles fairly quickly. To verify that the install was okay type fltk-config --version. This should print the current version number that is installed.

I have a few things to add after doing my install of 1.1.5 from the source .zip

This part all worked with 2 small changes. Perhaps I did not preserve the directory when unzipping?

Change 1 : png.h - line # 346

Code:

//existing code:
#include "zlib.h"
//changed code to:
#include "../zlib/zlib.h"

Change 2 : FL_png_image.cxx - line #44

Code:

//existing code:
#include <zlib.h>
//changed code to:
#include <../zlib/zlib.h>

This was of course because the zlib dir was at the same level as the png dir. I also had to use sh not su although I am not certain why. Both live in my cygwin/bin/. Very nice entry instructions though. I unzipped into cygwin/usr/src/fltk1.1.5/ cd /fltk1.1.5/ and ran all commands given from there. Hope this is helpful to anyone. I did take about 30 min to get through but all the errors during the make pointed directly at the culprit.

Mark

dsmith · #4 27-Oct-2004, 16:40

Thanks for the updates cable_guy_67. (BTW - are you a Jim Carrey fan?)

Those may very well come in handy. I beleive the difference may be that zlib is already in the search path in most cases, but you may have had to download it.

Quote:

I also had to use sh not su although I am not certain why.

This confuses me - as these are two very different commands. sh simply tells the shell that the following command should be executed.

su on the other hand allows you to run a program as the super user (which should be necessary unless you are running as root - for shame!)

Coincidentally, am I correct in assuming that you did this through cygwin under windows?

cable_guy_67 · #5 27-Oct-2004, 17:15

Quote:

Originally Posted by dsmith

Thanks for the updates cable_guy_67. (BTW - are you a Jim Carrey fan?)

A Jim Carrey fan. Ohhhh, reeeeeeeeeeeeeelllllly. um yeah, he's ok.

Quote:

Originally Posted by dsmith

Those may very well come in handy. I beleive the difference may be that zlib is already in the search path in most cases, but you may have had to download it.

That one had me confused. I had zlib installed prior to doing this. Maybe I don't have zlib-devel or something along that line. It was an easy fix.

Quote:

Originally Posted by dsmith

This confuses me - as these are two very different commands. sh simply tells the shell that the following command should be executed.

su on the other hand allows you to run a program as the super user (which should be necessary unless you are running as root - for shame!)

Ummm...root no, um better log off my admin acct

I had a similar problem while making a tutorial about how to build a shared pocketC library for palm os. I think there may have been tinkering going on. I really do need to read up more on the core utils. I have been winging it with my cygwin installation for about a year now.

Quote:

Originally Posted by dsmith

Coincidentally, am I correct in assuming that you did this through cygwin under windows?

Yes you are correct. Cygwin v1.5.11-1. gcc 3.3.3 W2Ksp4 etc etc

BTW, I did manage to compile the hello world example and am now tring to compile pedit. Seems like an easy enough exercise to get the environment working correctly. I may just have to set an explicit PATH for FL. So far, So good.

cable_guy_67 · #6 30-Oct-2004, 14:02

Quote:

Originally Posted by dsmith

For an example project, I have started to build a GIDForum Post editor that can be used off-line. Tutorials such as this one, are much easier to write off-line and currently, I just use a text editor. However, I wanted to be able to write a "text" editor that would be specific for a post on GIDForums. Ultimately, I would like this to be a wysiwyg editor, but that is down the road a ways. The following details some of the steps taken to create a GUI using FLTK. My Post Editor program is very rough and incomplete lacking many features and those that are present are not all working correctly. If there is interest in this program and/or fltk programming in general, I will continue this thread by developing more of this editor. Obviously, feedback is welcome and requested.

After some fighting to get FLTK to work correctly (or at least as correctly as I can) and trying to compile pedit from sources I have a problem or two.

When I try to compile with mpost my config for fltk is not used so the build fails miserably. Here is the output.

Code:

$ mpost

***************************************
***************************************
**** START POST EDITOR COMPILATION ****
***************************************
***************************************

In file included from main.cpp:1:
main.h:7:19: FL/Fl.H: No such file or directory
main.h:8:33: FL/Fl_Double_Window.H: No such file or directory
main.h:9:28: FL/Fl_Menu_Bar.H: No such file or directory
main.h:10:25: FL/Fl_Group.H: No such file or directory
main.h:11:32: FL/Fl_Light_Button.H: No such file or directory
main.h:12:26: FL/Fl_Choice.H: No such file or directory
main.h:13:26: FL/Fl_Button.H: No such file or directory
main.h:14:26: FL/Fl_Output.H: No such file or directory
main.h:15:26: FL/Fl_Scroll.H: No such file or directory
main.h:16:32: FL/Fl_File_Chooser.H: No such file or directory
In file included from main.h:19,
                 from main.cpp:1:
post_edit.h:3:32: FL/Fl_Text_Editor.H: No such file or directory
In file included from main.h:19,
                 from main.cpp:1:
post_edit.h:6: error: parse error before `{' token
post_edit.h:9: error: type specifier omitted for parameter `Fl_Text_Editor'
post_edit.h:9: error: parse error before `*' token

The errors go on and on...

From now on I will compile from the command line with some additions to the command line. In the single quotes --cxxflags has been added.

USING:
$ g++ main.cpp post_edit.cpp `fltk-config --ldflags --cxxflags` -o pedit

Code:

$ g++ main.cpp post_edit.cpp `fltk-config --ldflags --cxxflags` -o pedit
In file included from main.cpp:1:
main.h:20:19: list1.h: No such file or directory
In file included from main.cpp:1:
main.h:162: error: syntax error before `*' token
main.cpp: In function `void add_tracking(tstruct*)':
main.cpp:128: error: 'struct pedit' has no member named 'track'
main.cpp:129: error: 'struct pedit' has no member named 'track'
main.cpp:131: error: 'struct pedit' has no member named 'track'
main.cpp:133: error: 'struct pedit' has no member named 'track'
main.cpp:135: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void find_flags()':
main.cpp:234: error: 'struct pedit' has no member named 'track'
main.cpp:242: error: 'struct pedit' has no member named 'track'
main.cpp:244: error: 'struct pedit' has no member named 'track'
main.cpp:251: error: 'struct pedit' has no member named 'track'
main.cpp:253: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void set_format(int)':
main.cpp:261: error: 'struct pedit' has no member named 'track'
main.cpp:263: error: 'struct pedit' has no member named 'track'
main.cpp:270: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void cb_main_new(Fl_Widget*, void*)':
main.cpp:351: error: 'struct pedit' has no member named 'track'
main.cpp:352: error: 'struct pedit' has no member named 'track'
main.cpp:352: error: parse error before `;' token
main.cpp: In function `void cb_main_exit(Fl_Widget*, void*)':
main.cpp:393: error: 'struct pedit' has no member named 'track'
main.cpp:395: error: 'struct pedit' has no member named 'track'
main.cpp:402: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void cb_modify(int, int, int, int, const char*, void*)':
main.cpp:532: error: 'struct pedit' has no member named 'track'
main.cpp:534: error: 'struct pedit' has no member named 'track'
main.cpp:543: error: 'struct pedit' has no member named 'track'
main.cpp:556: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void main_window()':
main.cpp:571: error: 'struct pedit' has no member named 'track'
main.cpp:571: error: parse error before `;' token

That is the full list of errors. Much better, I no longer have to stop the console output with ctrl-c.

If instead I comment out line 20 of main.h

Code:

line 18: //Custom include files
line 19:#include "post_edit.h"
line 20://#include "list1.h"

Then my output changes slightly:

Code:

$ g++ main.cpp post_edit.cpp `fltk-config --ldflags --cxxflags` -o pedit
In file included from main.cpp:1:
main.h:162: error: syntax error before `*' token
main.cpp: In function `void add_tracking(tstruct*)':
main.cpp:128: error: 'struct pedit' has no member named 'track'
main.cpp:129: error: 'struct pedit' has no member named 'track'
main.cpp:131: error: 'struct pedit' has no member named 'track'
main.cpp:133: error: 'struct pedit' has no member named 'track'
main.cpp:135: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void find_flags()':
main.cpp:234: error: 'struct pedit' has no member named 'track'
main.cpp:242: error: 'struct pedit' has no member named 'track'
main.cpp:244: error: 'struct pedit' has no member named 'track'
main.cpp:251: error: 'struct pedit' has no member named 'track'
main.cpp:253: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void set_format(int)':
main.cpp:261: error: 'struct pedit' has no member named 'track'
main.cpp:263: error: 'struct pedit' has no member named 'track'
main.cpp:270: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void cb_main_new(Fl_Widget*, void*)':
main.cpp:351: error: 'struct pedit' has no member named 'track'
main.cpp:352: error: 'struct pedit' has no member named 'track'
main.cpp:352: error: parse error before `;' token
main.cpp: In function `void cb_main_exit(Fl_Widget*, void*)':
main.cpp:393: error: 'struct pedit' has no member named 'track'
main.cpp:395: error: 'struct pedit' has no member named 'track'
main.cpp:402: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void cb_modify(int, int, int, int, const char*, void*)':
main.cpp:532: error: 'struct pedit' has no member named 'track'
main.cpp:534: error: 'struct pedit' has no member named 'track'
main.cpp:543: error: 'struct pedit' has no member named 'track'
main.cpp:556: error: 'struct pedit' has no member named 'track'
main.cpp: In function `void main_window()':
main.cpp:571: error: 'struct pedit' has no member named 'track'
main.cpp:571: error: parse error before `;' token

I also get the exact same output if I use:
$ g++ main.cpp post_edit.cpp `fltk-config --ldflags --cflags` -o pedit

It is my assumption that this should be solved with the missing file

If not, please give me a clue where to look for a solution. Mind you I don't want a solution, just an educated direction to look. Any other information that might be pertinent to pedit would be appreciated. By that I am talking about the line in post_edit.h that reads:

Code:

#include <stdio.h> //Remove after done debugging.

My guess is your are using printf() or something for testing output.

Well, thanks for such a cool program to play with while trying to get the bugs ironed out. Looking over the code I still may be a little bit from trying to modify anything of any major importance but as my better half loves to say:

Q:"How do you eat a bear?"
A:"One bite at a time!"

note to dsmith: perhaps this could be rolled into a new "pedit" thread?

dsmith · #7 31-Oct-2004, 05:23

Hi cable guy. I think I will keep this as part of this thread, because it may help other people down the road. It appears that I didn't give one of my dependancies for this is the source script. That was rather silly of me. Go here to get my list1.h implementation.

For the record, Pedit is nowhere near complete. It is the framework for something, but needs quite a bit of work. Anyway, see if the list1.h helps you to get this working.

Quick question, have you tried to compile the little tab order demo that I posted? This is a very simple fltk program and I believe it should compile without a hitch.

PS - You are right about the stdio.h.

cable_guy_67 · #8 31-Oct-2004, 06:13

Quote:

Originally Posted by dsmith

Quick question, have you tried to compile the little tab order demo that I posted? This is a very simple fltk program and I believe it should compile without a hitch.

That compiled cleanly on the first run through. BTW that was some killer info for renumbering tabs!

Quote:

Originally Posted by dsmith

For the record, Pedit is nowhere near complete. It is the framework for something, but needs quite a bit of work. Anyway, see if the list1.h helps you to get this working.

I will get list1.h and see if that kills my compile errors. No where near complete is just a frame of mind. I was poking around the program and can see what you are talking about. As far as I am concerned it is just a jumping in point.

BTW- I was google fishing for demo's etc and got a hit on this post before I was notified that you had replied. Someone must be doing something right!

Thanks dsmith. I will let you know how the new compile run goes.

cable_guy_67 · #9 31-Oct-2004, 06:51

Ok, adding the list1.h fixed my errors. I have a compiled version. No fancy icon though

. I used this to compile:

Code:

$ g++ main.cpp post_edit.cpp `fltk-config --ldflags --cxxflags` -o pedit

ALL RIGHT! I see there is a full list of vb codes in the faq. I see where you define many of them in your code and now I guess it is time to really do some studying. Now I have all the source and the fluid project file. I will have to find something to do that is within my grasp now.

Feel free to volunteer any tasks to implement.

Thanks again

dsmith · #10 31-Oct-2004, 07:15

Sorry again about leaving that list1.h out of the zip file. I haven't really worked on pedit, because I wasn't sure how much of a response there was to this. Seeing that the source has been downloaded a few times, plus having your responses makes me think that I will dive back into it.

When I left off, I was trying to get the bbcodes tracking working properly. ie, the right buttons should light up depending on where you are at. You should be able to delete the bbcode with a single key stroke. I kind of got bogged down in the tracking though. My ultimate goal originally was to make this wysiwyg as well. That may be a while down the road.

Any comments, suggestions, additions or improvements to this would be most welcome. You may even want to play with the tab order thing a bit more because it is much simpler. You could add a clear button and a post button and implement the callbacks for those, just to get a feel for how it all works...

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
some Great site for programming issues	priyanka	Web Design Forum	8	19-Dec-2005 08:55
I need programming help...	dewil	C Programming Language	10	04-Mar-2004 07:53
C programming help!!!	sanman10535	C Programming Language	4	27-Feb-2004 16:53
Web and Flash design. PHP, MySQL, ASP, JSP programming.	artem	Web Design Forum	4	28-Apr-2002 04:36