ofxSurfingImGuiExtra

Overview

This is a complementary repository with extra files, complementary docs and a kind of sandbox for testing openFrameworks projects using ofxSurfingImGui.

ofxSurfingImGui is an ImGui toolkit for openFrameworks projects.

Most stuff stills in WIP / alpha state. For example Timeline/Sequencer or Node Patching testing Projects.

More Info README_DEV.

Usefull 3rd party Imgui widgets: imgui/wiki/Useful-Extensions

SCREENSHOTS

WORK IN PROGRESS!

INDEX

1. WIDGETS

2. LAYOUT

3. STYLES

4. LAYOUTS & DOCKING [WIP]

1. WIDGETS

Shows ofParameter helpers with full/half/third/quarter width Buttons, Toggles, DearWidgets, Range Sliders, Bezier Curve, Spinner/Progress Indicators, and ofxImGui standard parameters.

1_1_Widgets_DearWidgets

Includes Range Sliders with ofParameters, responsive Button/Toggles and the AWESOME DearWidgets from @soufianekhiat.

1_2_Widgets_Curve

Includes Bezier Curves and usable timed Tween/Easing functions.

1_3_Widgets_Spinner

Includes waiting and progress spinners.

1_4_Widgets_Surfing

Includes a matrix button clicker selector linked to an ofParameter (aka preset index), small tooltips, spin clicker, and the awesome gradient engine from @galloscript from his Github Gist.

1_5_FileBrowser

1_8_Knobs

2. LAYOUT

Speed up ofxImGui instantiation (auto draw, viewport mode, fonts...), windows, and layouts.
Includes ofParameter helpers, widget sizes, and extra widgets.
Notice that below at point 3. TYPES ENGINE, there's a better NEW API!

Example Code

ofApp.h

#include "ofxSurfingImGui.h"

ofxSurfingGui ui;

ofParameter<bool> bGui{ "Show Gui", true };

ofParameter<bool> bEnable{ "Enable", true };
ofParameter<bool> b1{ "b1", false };
ofParameter<bool> b2{ "b2", false };
ofParameter<bool> b3{ "b3", false };

ofApp.cpp

void ofApp::setup() 
{ 
    ui.setup(); 

    // Instantiates and configures all the required ofxImGui stuff inside:
    // Font, theme, autodraw, layout store/recall, multi context/instances, ofParams Helpers and other customizations.
}

void ofApp::draw() 
{ 
    ui.Begin();
    if (bGui) // -> This param makes the close button functional
    {
        ui.BeginWindow("Window", (bool *)&bGui.get(), ImGuiWindowFlags_None);
        {
            ofxImGuiSurfing::AddToggleRoundedButton(bEnable);
            if (bEnable)
            {
                // Precalculate common widgets sizes to fit current window, "to be responsive".
                float _w1 = ofxImGuiSurfing::getWidgetsWidth(1); // 1 widget full width
                float _w2 = ofxImGuiSurfing::getWidgetsWidth(2); // 2 widgets half width
                float _w3 = ofxImGuiSurfing::getWidgetsWidth(3); // 3 widgets third width
                float _w4 = ofxImGuiSurfing::getWidgetsWidth(4); // 4 widgets quarter width
                float _h = ofxImGuiSurfing::getWidgetsHeightRelative(); // one unit height relative to ImGui theme

                //-

                /* Draw RAW ImGui or SurfingWidgets with ofParameters */

                // One widget full with and theme height. The callback is handled by the param listeners.
                ofxImGuiSurfing::AddBigToggle(b1); 

                // Two widgets same line/row with the 50% of window panel width 
                if (ofxImGuiSurfing::AddBigButton(b2, _w2, _h)) {
                  // This acts as callback. 
                  // No parameter listener required.
                }
                ImGui::SameLine();
                if (ofxImGuiSurfing::AddBigButton(b3, _w2, _h)) {
                  // This acts as callback. 
                  // No parameter listener required.
                }

                // Or using raw ImGui
                // Three widgets and fit width in one line
                if (ImGui::Button("START", ImVec2(_w3, _h))) {}
                ImGui::SameLine();
                if (ImGui::Button("STOP", ImVec2(_w3, _h))) {}
                ImGui::SameLine();
                if (ImGui::Button("REPLAY", ImVec2(_w3, _h))) {}
            }
        }
        ui.EndWindow();
    }
    ui.End();
}

2_1_Layout_Basic

2_0_Layout_ofParamaters

Includes ofParameter and ofParameterGroup helpers and customize how groups are presented: collapsed/expanded, hidden header, ImGui::Tree/ImGui::TreeEx ...etc.
[BROKEN]

2_4_Layout_ThemeEditor

This is a helper for tweaking your Themes: testings sizes, layout, and colors, and alternate fonts.

Notice that you need to export the newly modified theme code through the clipboard and paste it to a new function/theme manually.
There's not an automatic-fully-functional, save preset/load theme designer!

3. STYLES

One step forward for ofHelpers:

• Fast ofParameters widgets layout: responsive-auto_fit width, height, amount items per row, and different styles for the same types or even repeated parameters with different styles.

• Also ofParameterGroup and their inside ofParameters, can be customized too with different ImGui::Tree settings, collapsed and nested.

Vertical and Horizontal Sliders

Grouped Vertical and Horizontal Sliders

Nested Styled Groups

Layout Engine

4. LAYOUTS & DOCKING [WIP]

Examples to improve the layout of Docking Spaces.

• Learn to split docking spaces by code, or using mouse control by the user.
• Docking helpers. Engine Manager to create layout presets.

3_0_Layout_Docking2

LAYOUT PRESETS ENGINE

• Fast adding of windows to the Gui Manager.
• Auto populates Control Panels to handle layout presets.
• Cute workflow for Management.
• You can add extra parameters to the presets too.

3_0_Layout_Docking3

This example shows how to populate many ImGui windows from different scopes on the same viewport.
Uses different approaches: from ofApp, from an add-on/class, or with Surfing Layout tools as ui.
Also useful to check viewport modes, docking merging windows or auto draw modes.

EXTRA WIP STUFF INDEX

1. MISCELLANEOUS [WIP]

2. TIMELINES AND SEQUENCERS [WIP]

3. NODES PATCHING [WIP]

1. MISCELLANEOUS [WIP]

3_1_Layout_ImTools1

Uses ImTools from @aiekick: "_ It's a class for manage docking panes in an easy way, display (panes, menu, pane dialog), load/save, auto layout, etc..._". WIP porting to use in my oF projects.

An alternative to my Docking Layout Engine but without presets and with more development required.
Nice to learn about ImGui Docking.

2. TIMELINES AND SEQUENCERS [WIP]

These are TESTING projects trying to build an operative but very basic timeline, to run very simple animations:

• A kind of note on/off or clip start/end behavior.
• A curve editor for float variable automation.

4_1_ImSequencer

Using ImGuizmo
Still very raw yet, not functional: I need to finish the engine to read the values when frames are playing.

5_3_Sequentity [BROKEN]

Using Sequentity. It's being hard to port because of some dependencies...

3. NODES PATCHING [WIP]

These are testing projects with nodes/graph/patching.
My target is to build a simple engine to patch between ofParameters.
For example: A simple patch-bay to route some ofParameters from an audio analyzer to the render scene ofParameters.

5_1_ImNodes_Nelarius

Using Nelarius/imnodes

5_4_ImNodes_rokups

Using rokups/ImNodes

5_5_ImNodes_thedmd

Using thedmd/imgui-node-editor

5_5_2_ImNodes_thedmd-PatchBay

[WIP] Using ofxPatchbayParams

6_7_DaanMosaic3

Example code by @Daandelange. Using ofxVisualProgramming stuff

5_5_ImNodes_thedmd-Blueprints [BROKEN]
5_6_ImNodes-Graph-ImGuizmo [BROKEN]

Dependencies

ofxSurfingImGui
ofxImGui / AWESOME FORK from @Daandelange
ofxSurfingHelpers / for some examples only
ofxWindowApp / for some examples only

Tested Systems

• Windows10 / VS2017 / OF ~0.11

Thanks

All source snippets from other authors are linked into header files. Thanks!

License

MIT License

Author

An addon by @moebiusSurfing
( ManuMolina ) 2021-2023