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.

<details> <summary>1_1_Widgets_DearWidgets</summary> <p>

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

<details> <summary>1_2_Widgets_Curve</summary> <p>

Includes Bezier Curves and usable timed Tween/Easing functions. </p> </details>

<details> <summary>1_3_Widgets_Spinner</summary> <p>

Includes waiting and progress spinners. </p> </details>

<details> <summary>1_4_Widgets_Surfing</summary> <p>

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

<details> <summary>1_5_FileBrowser</summary> <p>

</p> </details>

<details> <summary>1_8_Knobs</summary> <p>

</p> </details>

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!_

<details> <summary>Example Code</summary> <p>



ofApp.h

``.cpp

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

.c++ 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(); } `` </p> </details>

<details> <summary>2_1_Layout_Basic</summary> <p>

</p> </details>

<details> <summary>2_0_Layout_ofParamaters</summary> <p>

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

<details> <summary>2_4_Layout_ThemeEditor</summary> <p>

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! </p> </details>

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.

<details> <summary>Vertical and Horizontal Sliders</summary> <p>

</p> </details>

<details> <summary>Grouped Vertical and Horizontal Sliders</summary> <p>

</p> </details>

<details> <summary>Nested Styled Groups</summary> <p>

</p> </details>

<details> <summary>Layout Engine</summary> <p>

</p> </details>

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. <details> <summary>3_0_Layout_Docking2</summary> <p>

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.

</p> </details>

<details> <summary>3_0_Layout_Docking3</summary> <p>

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.

</p> </details>

EXTRA WIP STUFF INDEX

1. MISCELLANEOUS [WIP]

2. TIMELINES AND SEQUENCERS [WIP]

3. NODES PATCHING [WIP]

1. MISCELLANEOUS [WIP]

<details> <summary>3_1_Layout_ImTools1</summary> <p>

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.

</p> </details>

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.

<details> <summary>4_1_ImSequencer</summary> <p>

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

<details> <summary>5_3_Sequentity [BROKEN]</summary> <p> Using Sequentity. It's being hard to port because of some dependencies... </p> </details>

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._

<details> <summary>5_1_ImNodes_Nelarius</summary> <p>

Using Nelarius/imnodes </p> </details>

<details> <summary>5_4_ImNodes_rokups</summary> <p>

Using rokups/ImNodes </p> </details>

<details> <summary>5_5_ImNodes_thedmd</summary> <p>

Using thedmd/imgui-node-editor </p> </details>

<details> <summary>5_5_2_ImNodes_thedmd-PatchBay</summary> <p>

[WIP] Using ofxPatchbayParams </p> </details>

<details> <summary>6_7_DaanMosaic3</summary> <p>

Example code by @Daandelange. Using ofxVisualProgramming stuff </p> </details>

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*