FLTK. Objectives Install and Use FLTK Widgets ◦Callbacks Handling event ◦System events ◦Mouse events ◦Keyboard events.

Slides:



Advertisements
Similar presentations
Chapter 16 Graphical User Interfaces
Advertisements

Chapter 16 Graphical User Interfaces John Keyser’s Modifications of Slides by Bjarne Stroustrup
Using Macros and Visual Basic for Applications (VBA) with Excel
1 After completing this lesson, you will be able to: Create columns. Adjust column width. Adjust column spacing. Insert a column break.
Using Eclipse. Getting Started There are three ways to create a Java project: 1:Select File > New > Project, 2 Select the arrow of the button in the upper.
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.
PRIMARY, SECONDARY & QUANTITATIVE RESEARCH TASK HYPERLINK APPLICATION PROCEDURE 1.
A graphical user interface (GUI) is a pictorial interface to a program. A good GUI can make programs easier to use by providing them with a consistent.
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
Macromedia Flash MX 2004 – Design Professional and Interactivity WORKING WITH SYMBOLS.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Microsoft Windows Vista Chapter 6 Customizing Your Computer Using the Control Panel.
Work with symbols and instances Work with Libraries Create buttons Assign actions to buttons Unit Lessons.
A Guide to Oracle9i1 Creating an Integrated Database Application Chapter 8.
Creating, Formatting, and Editing a Word Document with a Picture
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Chapter Day 9. © 2007 Pearson Addison-Wesley. All rights reserved4-2 Agenda Day 8 Questions from last Class?? Problem set 2 posted  10 programs from.
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 8 Working with Macros and Visual Basic for Applications (VBA)
Chapter 2 Enhancing a Presentation with Pictures, Shapes, and WordArt
COMPREHENSIVE Excel Tutorial 8 Developing an Excel Application.
Microsoft Visual Basic 2005 CHAPTER 8 Using Procedures and Exception Handling.
Chapter 3 Working with Symbols and Interactivity.
Microsoft Word 2010 Chapter 1 Creating, Formatting, and Editing a Word Document with Pictures.
Microsoft Excel 2000 Adding Visual Elements and Managing Files.
Microsoft Visual Basic 2012 Using Procedures and Exception Handling CHAPTER SEVEN.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
Inspire students to develop ideas & organize thinking
Microsoft Visual Basic 2008 CHAPTER 8 Using Procedures and Exception Handling.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
Department of Mechanical Engineering, LSUSession VII MATLAB Tutorials Session VIII Graphical User Interface using MATLAB Rajeev Madazhy
Chapter 8: Writing Graphical User Interfaces
Introduction to Matlab & Data Analysis
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
FLTK Tutorial.
A First Look At Microsoft Visual Basic Lesson 1. What is Microsoft Visual Basic? Microsoft Visual Basic is a software development tool, which means it.
GUI Widgets Jeff Offutt SWE 432 Design and Implementation of Software for the Web.
FLTK Help Session By Richard Yu Gu CS 638 -Graphics Fall, 1999.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
1. Chapter 4 Customizing Paragraphs 3 More Paragraph Changes Highlight a paragraph in Word by applying borders and shading. Sort paragraphs to control.
Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
CSCE 121: Introduction to Program Design and Concepts, Honors Dr. J. Michael Moore Spring 2015 Set 15: GUIs 1.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
WaveMaker Visual AJAX Studio 4.0 Training Basics: Building Your First Application Designer Basics.
1 Chapter 12 GUI C/C++ Language Programming Wanxiang Che.
Microsoft Publisher 2010 Chapter 1 Creating a Flyer.
Chapter 2 – Introduction to the Visual Studio .NET IDE
1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects Windows Forms Application Give the Project a Name and.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
Copyright 2007 Paradigm Publishing Inc. EXCEL 2007 Chapter 7 BACKNEXTEND 7-1 LINKS TO OBJECTIVES Create a Chart with Data in a Worksheet Create a Chart.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 – Graphical User Interfaces Java Foundations: Introduction to Programming.
Macromedia Flash 8 Revealed WORKING WITH SYMBOLS AND INTERACTIVITY.
Macromedia Flash Design Professional And Interactivity WORKING WITH SYMBOLS.
July Doxygen A Code Documentation System Doxygen generates documentation directly from the structure and comments in the code –Browsable HTML documentation.
How to Create a PowerPoint Presentation Mrs. Leah Craft University of Mississippi NMGK-8.
OpenGL in FLTK  .
MATLAB and SimulinkLecture 61 To days Outline Graphical User Interface (GUI) Exercise on this days topics.
Customizing Menus and Toolbars CHAPTER 12 Customizing Menus and Toolbars.
Pasewark & Pasewark 1 Word Lesson 2 Basic Editing Microsoft Office 2007: Introductory.
Hamilton Software Products The Measure of Excellence Customized dialog.
WaveMaker Visual AJAX Studio 4.0 Training Styling your application.
Microsoft PowerPoint 2010 Chapter 3 Reusing a Presentation and Adding Media.
July FLTK The Fast Light Toolkit • A C++ graphical user interface toolkit • Can be used under X, Windows, MacOS • Supports OpenGL • Provides: – Interactive.
Java FX: Scene Builder.
FLTK The Fast Light Toolkit
Event Driven Programming
Introduction to Computing Using Java
Event Driven Programming Anatomy – Handle
Presentation transcript:

FLTK

Objectives Install and Use FLTK Widgets ◦Callbacks Handling event ◦System events ◦Mouse events ◦Keyboard events

Installing FLTK 1.1 Linux ◦Package manager Mac < 10.5 ◦Mac Ports *nix ◦./configure && make && make install Visual Studio ◦Open fltk-source/visualc/fltk.dsw and build ◦In fltk-source copy FL folder to vc/include ◦In fltk-source/lib copy all files to vc/lib

Linking Visual Studio ◦Add fltk.lib, wsock32.lib, comctl32.lib,fltkgl.lib, fltkforms.lib, and fltkimages.lib (or fltkd.lib, etc.) to linker input *nix ◦`fltk-config --use-gl --use-images --use-forms --cxxflags –ldflags`

Widgets Basic visual building blocks which are combined intoan applications GUI

Common FLTK Widgets Buttons ◦Includes radio buttons and check boxes Text ◦Display and receive strings Valuators ◦Display and receive numbers Groups ◦Containers such as tabs and group boxes ◦Also includes windows and OpenGL windows

Hierarchies and Properties Parent Child relationship ◦Created widgets are added to current group ◦Created group widgets start their own group  Stopped by calling widget->end(); ◦Can manually add widgets to groups Get / Set Methods ◦Change style, properties, values etc. ◦Get: int minimum() ◦Set: void minimum(int)

FLTK Hello World #include intmain(intargc, 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); window->end(); window->show(argc, argv); return Fl::run(); }

FLTK Callbacks Sets a functions to called when the value of a widget changes ◦ void functionName(Fl_Widget*, void*) Called function is passed pointer to the widget that changed and optional pointer to data Can be activated by keyboard shortcut

Callback Demo void button_cb(Fl_Widget *widget, void *data) { Fl_Button*button = (Fl_Button*)widget; button->label("Thank you"); } intmain(intargc, char **argv) {... Fl_Button *button = new Fl_Button(50, 70, 200, 40, "Click Me"); button->callback(button_cb);... }

Custom Widgets Subclass an existing widget ◦Control widget to get/receive a value ◦Composite widget to hold a list of child widgets and handle them together ◦Can also subclass existing widget and change

Custom Widget Composite widget Slider and text box When the value of one changes the other is updated Will use slider internally to store data ◦Easier because already has min, max, etc. Improvements ◦Validate text box input

Custom Widget Widget is a composition so we will inherit Fl_Group Class CustomWidget : Fl_Group { Constructor with default FLTK parameters public: CustomWidget(intx, inty, intw, inth, char *l =0) : Fl_Group(x, y, w, h, l);

Custom Widget Our two widgets private: Fl_Int_Input*input; Fl_Slider*slider; Slider will store our data ◦Current value ◦Bounds ◦Step size

Custom Widget Common slider properties public: int value(); void value(intv); int minimum(); void minimum(int min); int maximum(); void maximum(int max); void bounds(int min, int max);

Custom Widget Internal callbacks static void input_cb(Fl_Widget *w, void *d); static void slider_cb(Fl_Widget *w, void *d); void input_cb2(); void slider_cb2();

Custom Widget Constructor: Layout intconst in_w = 40; input = new Fl_Int_Input(x, y, in_w, h); slider = new Fl_Slider(x + in_w, y, w- in_w, h); slider->type(FL_HOR_SLIDER);

Custom Widget Constructor: Data bounds(1, 100); value(1); Constructor: Callbacks input->when(FL_WHEN_CHANGED); input->callback(input_cb, this); slider->callback(slider_cb, this);

Custom Widget Static callbacks void CustomWidget::input_cb(Fl_Widget *w, void *d) { ((CustomWidget*)d)->input_cb2(); } void CustomWidget::slider_cb(Fl_Widget *w, void *d) { ((CustomWidget*)d)->slider_cb2(); }

Custom Widget Callbacks: Update the other widget void CustomWidget::input_cb2() { intval; sscanf(input->value(), "%d", &val); slider->value(val); } void CustomWidget::slider_cb2() { char val[16]; sprintf(val, "%d", (int)(slider->value() + 0.5)); input->value(val); }

Custom Widget Properties intCustomWidget::value() { return (int)(slider->value() + 0.5); } void CustomWidget::value(intv) { slider->value(v); slider_cb2(); }

System Events Focus events ◦Mouse enters/leaves program ◦Program gains/loses focus Clipboard events Widget events ◦Activation/deactivation ◦Show/hide

Mouse Events Button pushed down Mouse moved while button pressed (drag) Button release Mouse moved Mouse wheel

Keyboard Events Propagate through widgets until handled Key Up/Down ◦Event trigger on both key press and release ◦Sent to widget with focus, then parents, then becomes a shortcut Shortcuts ◦Sent to widget under mouse, then parents, then every widget

Custom Widget Events Override inthandle(int event) ◦Return 0 if event unused  Event will continue to be passed around ◦Return 1 if event used  Event is consumed Slider responds to left/right keys ◦Expand to include up/down keys

Custom Widget Events intCustomWidget::handle(int event) { if ( event == FL_KEYDOWN ) { if ( Fl::event_key() == FL_Up ) { value(value() + 1); return 1; } else if ( Fl::event_key() == FL_Down ) { value(value() - 1); return 1; } return Fl_Group::handle(event); }

FLUID GUI to produce FLTK source code Creates C++ code ◦Compile.fl file into.cxx and.h Can create your entire program

Other FLTK Parts Premade dialog boxes ◦File chooser ◦Input ◦Color ◦Alerts Images 2D drawing functions Threads Timers