Scientific Visualization A Programming Guide using Fltk and Visual Studio

Transcription

1 Scientific Visualization A Programming Guide using Fltk and Visual Studio Programming Guide: 1. Software Environment The homework is designed to give you a good exposure to standard programming practices and techniques in general graphics as well as in volume visualization. You will be using C/C++, FLTK (Fast Light Toolkit, a platform-independent GUI builder), and OpenGL (a popular graphics API). In the FLTK, a small program, Fluid, offers a text editor as well as a visual editor that shows the actual GUI to help you create the GUI with many useful widgets. See a simple tutorial below. Next, we will provide basic framework codes and compiling instructions. Please note that you could find the documentations of using fltk at This course recommends the students to use Microsoft Visual Studio (C++) Community 2017 for programming projects. The following instructions will assume you are using Visual Studio Community Sample Codes and Project Setup Important: Both the fltk and the fluid documentation are available for browsing at Most likely you already have the OpenGL libraries on your PC. So, you won't have to do much here. Please click to download the fltk running package and the example framework code found in the class webpage, and follow the steps below: Step 1: Downloading fltk Find fltk zip in the class webpage and click to download. Extract fltk zip to your Desktop or any other location.

2 Step 2: Compiling and building fltk from source. Go to your extracted fltk folder. In my case C:\Users\SH-2017\Desktop\fltk \ide\VisualC2010 Open (double-click) fltk.sln. Visual Studio 2017 Community will open and ask you if you want to update the files.

3 Click OK and wait for a few moments. Your window will look like this: Right-click the demo solution file. Click on Set as StartUp Project.

4 Now click on Build and Build Solution. After a couple of moments your Output window shows Build: 79 succeeded

5 Make sure to set Debug mode. Press F5 on your keyboard. Or the play button on top of your canvas Local Windows Debugger.

6 You should get two windows, one console window and another one showing the fltk-test layout. Now change the Debug mode to Release mode on the top left corner of your Visual Studio window. Again: Press F5 on your keyboard. Or the play button on top of your canvas Local Windows Debugger to run your project. You should now see the fltk-test layout and no console window. Done compiling and test-running.

7 Step 3: Integrating fltk files into your Visual Stuido 2017 Community folder structure. Now you need to copy those freshly compiled files (explained in three steps in the next paragraph) into your Visual Studio 2017 Community folder structure so it knows where to find them: 1. Go to: your fltk folder (in my case: C:\Users\SH-2017\Desktop\fltk ) and copy the FL folder into your include folder (in my case): C:\Program Files (x86)\microsoft Visual Studio\2017\Community\VC\Tools\MSVC\ \include 2. Go to: the lib folder in your fltk source folder (in my case C:\Users\SH-2017\Desktop\fltk \lib) and copy all 19.lib files (Note that there are pairs of 2, one of them named with a d for debug in the end). And paste them into your Visual Studio 2017 lib folder (in my case: C:\Program Files (x86)\microsoft Visual Studio\2017\Community\VC\Tools\MSVC\ \lib\x64). Of course, you noticed that in the lib folder there are two more folders: x64 and x86. I just pasted the 19.lib files into both of them (In case there is someone out there who can tell me if that is wrong or right, please contact me). 3. Go to: the fluid folder in your fltk source folder (in my case: C:\Users\SH-2017\Desktop\fltk \fluid) and copy fluid.exe and fluidd.exe into your Visual Studio 2017 bin folder. (in my case: C:\Program Files (x86)\microsoft Visual Studio\2017\Community\VC\Tools\MSVC\ \bin). Now, setup a new project and see if Visual Studio 2017 Community can locate and use the files we just copied over. Open Visual Studio 2017 Community (or any other of course) and under the Visual C++ Windows Desktop tab create a new Windows Desktop Wizard project.

8

9 In your newly created Empty Project right click the Source Files folder and Add a New Item which is going to be a.cpp file. I called it fltk_test.cpp. Copy the following code into your.cpp file: #include<fl/fl.h> #include<fl/fl_box.h> #include<fl/fl_window.h> int main() { Fl_Window window(200, 200, "Window title"); Fl_Box box(0, 0, 200, 200, "Hey, I mean, Hello, World!"); window.show(); return Fl::run(); } (NOTE: The following Properties setup needs to be done for every new fltk project you are creating!) Then go to your top navigation bar and click Project and in the drop-down menu Properties. Make sure to set the Configuration to Debug.

10 On your left-hand side go to Linker and Input. Click on the drop-down arrow in the Additional Dependencies tab and click on Edit.

11 A new window will pop up. In the screenshot shown I filled in already the following entries: fltkd.lib wsock32.lib

12 comctl32.lib fltkjpegd.lib fltkimagesd.lib Please do the same. Click OK to confirm your entry. Now go to System. And set the SubSystem to Console (/SUBSYSTEM:CONSOLE)

13 Click Apply and hit F5 to test-run the project. Your project should compile and run and show something like this:

14 Step 4: Extract the framework code (project.zip) (please download from the class webpage), which includes several.cpp and.h source files. It also includes a gui.fl file. Start fluid.exe (you may copy fluid.exe to the source file directory) and open gui.fl by selecting File open. Select 'File - write code' which will automatically generate a gui.cpp and a gui.h on the same directory of fluid.exe. See below for a small tutorial of Fluid. Step 5: Create a new EMPTY Win32 Console project in Visual Studio (As explained in Step 3) and add the source files, as well as gui.cpp and gui.h, to this project. in 'additional dependencies' add: fltkd.lib wsock32.lib comctl32.lib fltkjpegd.lib fltkimagesd.lib odbc32.lib odbccp32.lib opengl32.lib glu32.lib fltk.lib fltkgl.lib Now you should be able to build the solution and run the program. Try File->Open to open an image file, bird.ppm (please download from the class webpage). PPM is a simple format used in the code. You can use irfanview to transfer other images to PPM format. Now You may look at the code with this simple example.

15 A small tutorial on fluid: (by Klaus Mueller) Fluid offers a text editor as well as a visual editor that shows the actual GUI. You can move items around in the visual editor, but you need to add items in the text editor. First, load the provided gui.fl into fluid by selecting 'File - open' on the menubar of fluid's text editor. This should pop up the visual editor and fill some text into the text editor. Fluid is quite powerful, but for the matter of this class, you only need to know what is described below. However, feel free to read more about the capabilities of fluid on the documention pages at To add a new submenu item for gui.fl, select the already existing 'Menu Bar menu bar' item in the text editor and then go to the 'New' pull down menu and select 'menus - submenus'. A window will pop up where you can enter the properties of this submenu. For 'Name' enter the name you want to give this item (for example 'imageprocess', and for 'Label' enter the tag you want to appear on the GUI menu bar (for example 'Image Process'). You can click on 'OK' and you will see that submenu appear in the visual editor on the menu bar. If you want to move it to the left of the 'Exit' button, you can select the 'imageprocess' item on the list and then choose 'Edit - earlier' on the fluid text editor menu bar. To add a new menu item for a submenu in gui.fl, select an already existing 'submenu' item in the text editor (for example 'imageprocess') and then go to the 'New' pull down menu and select 'menus - menu item'. A window will pop up. Enter an appropriate name and label as before (for example 'readfile' and 'Read File', respectively), and in 'Callback' enter the name of the routine in the application class in Application.cpp that will service this callback (for example, enter the line: app->readfile(); ). Note that you must provide this routine in Application.cpp and also define it in Application.h before you compile the application with the new gui.cpp and gui.h (see below). Select a few items in gui.fl (double clicking will bring up the property window for that item) that have already been defined to see how things are done. Select 'File - write code' which will write a new gui.cpp and gui.h. You may have to set the extension.cpp in 'Edit - preferences' (it may be set to.cxx). Note that you have to include gui.fl and gui.h into your Visual Studio project before you compile and link. Save the new gui.fl with 'File - save'.