1. FLUID  The Fast Light User Interface Designer, or FLUID, is a graphical editor that is used to produce FLTK source code  Creates C++ code  Compile.fl file into.cxx and.h  Located in fltk-source/fluid/fluidd.exe  We will create the CustomWidget using fluid

2. Timers Not 100% accurate (don't measure time with them) Single shot timeouts void add_timeout(double t, Fl_Timeout_Handler, void* d) o call a function in t seconds void remove_timeout(Fl_Timeout_Handler, void* d) o cancels a timeout (harmless if timer already triggered) void repeat_timeout(double t, Fl_Timeout_Handler, void* d) o call a function t seconds after the last timeout triggered o can only be called from within a timer callback

3. Simple Timer Print "TICK" every second void callback(void*) { printf(“TICK\n"); Fl::repeat_timeout(1.0, callback); } int main() { …… Fl::add_timeout(1.0, callback); return Fl::run() }

4. Add Timer to Move CustomWidget Goal: Have slider slide back and forth Use globals for all variables and widgets o Make customWidget global o Add variable to control direction Callback o Setup repeat timer o Move widget in specified direction o Check if we have reached max or min and change direction Main o Set initial direction o Initial timer call

5. int increasing; CustomWidget *customWidget; void timer(void*) { Fl::repeat_timeout(0.02, timer); if ( increasing ) { customWidget->value(customWidget->value() + 1); if ( customWidget->value() >= customWidget->maximum() ) increasing = 0; } else { customWidget->value(customWidget->value() - 1); if ( customWidget->value() minimum() ) increasing = 1; }

6. Idle Similar to GLUT add_idle(void (*cb)(void*), void *) o function to call whenever nothing else is happening o can have multiple callbacks remove_timout(void (*cb)(void*), void *) o removes callback function if it exists

7. OpenGL in FLTK

8. OpenGL Widget Create a subclass of Fl_Gl_Window o #include  Will include Need to implement draw function in subclass o Setup view port  valid() will return false if needed o Actual drawing

9. OpenGL Widget class OpenGLWindow : public Fl_Gl_Window { private: void draw() { if ( !valid() ) { // initialization } // draw }; public: OpenGLWindow(int x, int y, int w, int h, const char* l = 0) : Fl_Gl_Window(x, y, w, h, l) { }; };

10. 3D Gasket in FLTK Put all code into subclass of Fl_Gl_Window Copy triangle, tetra, and divide_tetra functions o Move colors into tetra and v into draw All reference to width are height need to be replaced with w() and h() Hard code number of sub divisions Create a window and place OpenGL widget in it

11. Widget to Control Sub Divisions OpenGL draw() now get value from slider widget divide_tetra(v[0], v[1], v[2], v[3], divisions->value()); Add a slider (and label) for number of sub divisions divisions = new Fl_Slider(100, 480, 540,20); divisions->type(FL_HORIZONTAL); divisions->range(1, 20); divisions->step(1);

12. Need to tell FLTK/OpenGL Widget to update o call widget's redraw() Need to redraw when we change slider (callback) void update(Fl_Widget*, void*) { glwindow->redraw(); } // when creating slider divisions->callback(update);

13. Assignment 1 Part 3 in FLTK Will use toggle button instead of mouse clicks Timer instead of idle Create toggle button and start timer spinning = new Fl_Button(545, 485, 90, 20, "Spinning"); spinning->type(FL_TOGGLE_BUTTON); Fl::add_timeout(1, timer, 0); spin = 0.0f;

14. Update spin and redraw if necessary void timer(void*) { Fl::repeat_timeout(0.02, timer); if ( spinning->value() ) { spin += 1.0f; if ( spin > 360.0f ) spin -= 360.0f; glwindow->redraw(); } }

15. Events Implement int handle(int event) o event is mouse click & drag, mouse wheel, keyboard presses & release, system events Return 1 if event is used o Event consumed Return 0 is unused o Event will continue to be passed around Additional helper functions o Mouse: event_button() event_x() o Keyboard: event_key()

16. Spin Triangle with Mouse Goal: mouse drags will rotate object Filter out only used event o Pass rest to default handler No previous mouse position with drag event (only current) Initial click will seed last position Need to hold current state

17. Spin Triangle with Mouse Header: int oldX, oldY; float vRotation, hRotation; int handle(int event); Constructor: vRotation = hRotation = 0.0f; Draw: glRotatef(hRotation, 0.0f, 1.0f, 0.0f); glRotatef(vRotation, 1.0f, 0.0f, 0.0f);

18. Handle switch ( event ) { case FL_DRAG: hRotation += Fl::event_x() - oldX; vRotation += Fl::event_y() - oldY; redraw(); case FL_PUSH: oldX = Fl::event_x(); oldY = Fl::event_y(); return 1; default: return Fl_Gl_Window::handle(event); }

19. Assignment 1 Part 3 in FLUID  Keep class OpenGLWindow  In fluidd.exe  Add New->Code->class, set the name of the class ‘UI’  Highlight class UI, New->Code->function/Method, add the constructor UI(), set it public  Highlight UI(), New->group->Window, under C++ tab, name it mainWindow  Highlight mainWindow, New->valuator->Slider. Change its label. Under tab C++, set it horizontal. Add extra code  divisions->range(0, 5);  divisions->step(1);  Add callback  glWindow->setDivision(divisions->value());  glWindow->redraw();

20.  Highlight mainWindow  New->Buttons->button. Change its label. Under tab C++, set it a toggle button, and set its name spinning.  New->others->box to add OpenGLWindow widget. Under tab C++, add extra code: #include"OpenGLWindow.h“ and name it glWindow.  Highlight class UI  New->Code->declaration, add a variable ‘float spin’