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
1. WIDGETS
2. LAYOUT
3. STYLES
4. LAYOUTS & DOCKING [WIP]
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
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!
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
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
- 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.
1. MISCELLANEOUS [WIP]
2. TIMELINES AND SEQUENCERS [WIP]
3. NODES PATCHING [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.
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.
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_5_ImNodes_thedmd-Blueprints [BROKEN]
5_6_ImNodes-Graph-ImGuizmo [BROKEN]
ofxSurfingImGui
ofxImGui / AWESOME FORK from @Daandelange
ofxSurfingHelpers / for some examples only
ofxWindowApp / for some examples only
- Windows10 / VS2017 / OF ~0.11
All source snippets from other authors are linked into header files. Thanks!
MIT License
An addon by @moebiusSurfing
( ManuMolina ) 2021-2023