FLUID Interface Guide

​

Main Application Window

​

Title Bar

function_panel.fl* - .cxx*

• Project name: Current .fl file (function_panel.fl)
• First asterisk: Project has unsaved changes (press Ctrl+S to save)
• .cxx: Generated code file extension
• Second asterisk: Code files don’t match project (press Ctrl+Shift+C to update)

​

Menu Bar

​

File Menu

• New (Ctrl+N) - Close current project and start fresh
• Open… (Ctrl+O) - Load existing .fl file
• Insert… (Ctrl+I) - Merge another .fl file into current project
• Save (Ctrl+S) - Save current project
• Save As… (Ctrl+Shift+S) - Save with new filename
• Save A Copy… - Save copy without changing current filename
• Revert… - Discard changes since last save
• New From Template… - Create project from saved template
• Save As Template… - Save current project as template
• Print… (Ctrl+P) - Print all open windows
• Write Code (Ctrl+Shift+C) - Generate .h and .cxx files
• Write Strings (Ctrl+Shift+W) - Generate internationalization files
• Quit (Ctrl+Q) - Exit FLUID

​

Edit Menu

• Undo (Ctrl+Z) / Redo (Ctrl+Shift+Z) - Undo/redo changes
• Cut (Ctrl+X) - Remove selected widgets to clipboard
• Copy (Ctrl+C) - Copy selected widgets to clipboard
• Paste (Ctrl+V) - Paste widgets from clipboard
• Duplicate (Ctrl+U) - Duplicate selected widgets
• Delete - Remove selected widgets permanently
• Select All (Ctrl+A) - Select all widgets in current group
• Properties… (F1) - Open widget properties panel
• Sort - Sort widgets by position (top-left to bottom-right)
• Earlier (F2) - Move widget earlier in hierarchy
• Later (F3) - Move widget later in hierarchy
• Group (F7) - Create group containing selected widgets
• Ungroup (F8) - Extract widgets from group
• Show/Hide Overlays (Ctrl+Shift+O) - Toggle selection overlays
• Show/Hide Guides (Ctrl+Shift+G) - Toggle alignment guides
• Show/Hide Restricted (Ctrl+Shift+R) - Show overlap warnings
• Show/Hide Widget Bin (Alt+B) - Toggle widget palette
• Show/Hide Code View (Alt+C) - Toggle code preview window
• Settings… (Alt+P) - Open settings dialog

​

New Menu

• Function - C++ function that creates widgets
• Code - Single line of C++ code
• Code Block - Multi-line C++ code block
• Declaration - Variable or include declaration
• Class - C++ class definition
• Widget Class - Custom widget class
• Comment - Documentation comment
• Data - Embedded binary data

• Window - Top-level window
• Group - Generic container
• Pack - Automatic layout group
• Flex - Flexible box layout
• Tabs - Tabbed interface
• Scroll - Scrollable area
• Tile - Resizable tiles
• Wizard - Multi-page wizard
• Grid - Grid layout
• Table - Table widget
• Terminal - Terminal emulator

• Button - Standard push button
• Return Button - Default button (responds to Enter)
• Light Button - Toggle with indicator
• Check Button - Checkbox
• Round Button - Radio button
• Repeat Button - Repeats while held

• Slider - Linear slider
• Scrollbar - Scrollbar control
• Value Slider - Slider with value display
• Value Input - Numeric input with arrows
• Value Output - Read-only numeric display
• Adjuster - Fine adjustment control
• Counter - Value with increment buttons
• Dial - Rotary dial
• Roller - Mouse-drag value control
• Spinner - Text input with up/down arrows

• Input - Single-line text input
• Output - Read-only text display
• Text Display - Multi-line text viewer
• Text Editor - Multi-line text editor
• File Input - Filename input with browser
• Simple Terminal - Simple terminal widget

• Menu Bar - Application menu bar
• Menu Button - Pop-up menu button
• Choice - Drop-down choice menu
• Input Choice - Combo box (editable choice)
• Menu Item - Item within a menu
• Submenu - Hierarchical submenu
• Checkbox Menu Item - Toggleable menu item
• Radio Menu Item - Exclusive menu choice

• Browser - List browser
• Check Browser - List with checkboxes
• File Browser - File system browser
• Tree - Hierarchical tree view
• Help View - HTML help viewer

• Box - Static text or image
• Clock - Analog or digital clock
• Progress - Progress bar

​

Layout Menu

• Left - Align left edges
• Center - Center horizontally
• Right - Align right edges
• Top - Align top edges
• Middle - Center vertically
• Bottom - Align bottom edges

• Across - Distribute horizontally
• Down - Distribute vertically

• Width - Match width of first selected
• Height - Match height of first selected
• Both - Match both dimensions

• Horizontal - Center horizontally in parent
• Vertical - Center vertically in parent
• Both - Center in both directions

• Synchronized Resize - Toggle live resize preview
• Grid and Size Settings… (Ctrl+G) - Configure layout guides

​

Shell Menu

• Customize… (Alt+X) - Configure shell commands
• User-defined commands - Appears after configuration

​

Help Menu

• About FLUID - Version information

​

Widget Browser

├── ▼ Function: make_window()
│   ├── ▼ Fl_Window "My Main Window"
│   │   ├── Fl_Menu_Bar
│   │   ├── ▼ Fl_Group
│   │   │   ├── Fl_Button "OK"
│   │   │   └── Fl_Button "Cancel"
│   │   └── Fl_Box "Status: Ready"
└── ▼ class MyDialog : Fl_Window
    └── ...

​

Tree Structure Elements

• White: No children
• Black pointing right: Children hidden (click to expand)
• Black pointing down: Children visible (click to collapse)

• Gray: Regular widgets
• Blue title bar: Windows
• Green: Functional nodes (code, functions, classes)
• Padlock corner: Private or static element

• Comment (green): If set, shows above name
• Type name (bold black): Widget class (e.g., Fl_Button)
• Label (red): Widget’s label text
• Variable name (black): C++ variable name if set

​

Browser Interaction

• Single click: Select one widget
• Shift+Click: Toggle widget selection
• Drag: Select multiple widgets
• Click empty area: Deselect all

• Double-click: Open properties panel
• F1: Open properties for selected widget(s)

• F2: Move selected earlier in order
• F3: Move selected later in order
• Drag and drop: Not supported (use Cut/Paste instead)

• F7: Group selected widgets
• F8: Ungroup selected widgets
• Ctrl+X/C/V: Cut, copy, paste

​

Layout Editor Window

​

Visual Elements

• Highlight selected widgets
• Corner and edge handles for resizing
• Toggle with Ctrl+Shift+O

• Show margins, gaps, and grid
• Help align widgets consistently
• Toggle with Ctrl+Shift+G
• Configure in Layout > Grid Settings

• Highlight overlapping widgets
• Indicate undefined behavior regions
• Toggle with Ctrl+Shift+R

​

Selection and Editing

• Click widget to select
• Shift+Click to toggle selection
• Drag rectangle to select multiple
• Click empty area to deselect all

• Drag selected widgets to new position
• Widgets snap to guides if enabled
• Hold Shift while dragging to disable snapping

• Drag corner handles to resize proportionally
• Drag edge handles to resize one dimension
• Snap works on edges and corners

• Same as New menu
• Context-appropriate widget creation

​

Layout Tools

1. Select multiple widgets
2. Choose alignment option
3. Widgets adjust to match first selected widget

​

Widget Properties Panel

​

GUI Tab

• Label: Text displayed on widget
• Image: Image file to display
• Inactive: Grayed-out version of image
• Alignment: Label position (left, center, right, etc.)
• Position: X, Y coordinates
• Size: Width, height
• Values: Widget-specific values (e.g., button state, slider range)
• Shortcut: Keyboard shortcut
• Attributes: Hide, deactivate, resizable, hotspot

​

Style Tab

• Label Font: Font family
• Label Size: Font point size
• Label Color: Text color
• Box: Background box style
• Down Box: Pressed state appearance (buttons)
• Color: Background color
• Select Color: Selection/active color

​

C++ Tab

• Name: C++ variable name
• Class: Widget class (can override default)
• Type: Widget type variant
• Callback: Callback function or inline code
• User Data: Data passed to callback
• User Data Type: Type of user data
• When: When callback fires (changed, released, etc.)
• Access: Public, private, protected
• Extra Code: Additional initialization code

​

Grid Tab (Fl_Grid only)

• Rows/Columns: Grid dimensions
• Margins: Space around grid edges
• Gaps: Space between cells
• Row/Column Properties: Height, weight, gap per row/column

​

Grid Cell Tab (Children of Fl_Grid)

• Location: Row and column position
• Span: Rows and columns to span
• Alignment: Widget alignment within cell
• Minimum Size: Minimum cell dimensions

​

Widget Bin Panel

• Click widget type to add at default location
• Drag widget from bin to precise position in layout
• Organized by category: Groups, Buttons, Valuators, Text, Menus, Browsers, Other

​

Code View Panel

​

Features

• Source: Generated .cxx file contents
• Header: Generated .h file contents

​

Settings Dialog

​

General Tab

• Use macOS Command key: Use Cmd instead of Ctrl on macOS
• Allow UTF-8 in source: Include UTF-8 directly vs escape sequences
• Avoid early includes: Delay #include <FL/Fl.H> in generated code

​

Project Tab

• Header filename: Generated .h file name or extension
• Code filename: Generated .cxx file name or extension
• Include header from code: Add #include "header.h" to code file

​

Layout Tab

• Layout suites: FLTK, Grid, or custom layouts
• Presets: Main window, dialog box, toolbox
• Margins: Space from parent edges
• Gaps: Space between widgets
• Grid: Grid line spacing

​

Shell Tab

• Add commands: Create build scripts
• Assign shortcuts: Quick access keys
• Set conditions: When command is available
• Configure flags: Run in terminal, save before running, etc.

​

i18n Tab

• Type: None, GNU gettext, or POSIX catgets
• Function names: Translation function names
• Include files: Headers for i18n functions
• File/Set names: Output file configuration

​

User Tab

• Browser colors: Tree view color scheme
• Font styles: Bold, italic for different elements
• Icon sizes: Widget browser icon dimensions

​

Window Management

• Closing layout window doesn’t delete it
• Windows persist in project and can be reopened
• Delete window via widget browser or Edit menu

• Double-click window in browser
• Or select and press F1
• Window appears at saved position

• Projects can have many windows
• All can be open simultaneously
• Each has independent layout editor

​

Keyboard Shortcuts Reference

​

Tips and Tricks