(WIP) UI: Implement Dear ImGui UI part

AnClark · AnClark · commit 9bdaab7ca78a · 2025-07-13T08:35:46.000+08:00
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -12,6 +12,7 @@ add_subdirectory (dpf)
 
 include_directories (   
     src/
+    dpf-widgets/opengl/
 )
 
 set (SRC_BACKEND
@@ -42,5 +43,7 @@ dpf_add_plugin (${PROJECT_NAME}
         src/CetoneUIHelper.cpp
         src/Images/CetoneArtwork.cpp
         src/Fonts/CetoneFonts.cpp
+        dpf-widgets/opengl/DearImGui.cpp
+        src/Widgets/ImGui_UI.cpp
 )
 
diff --git a/src/CetoneUI.cpp b/src/CetoneUI.cpp
@@ -107,6 +107,22 @@ CCetoneUI::CCetoneUI()
     _createSwitchButton(fBtnGlideState, pPortaMode, 764, 150);
 
     _createSwitchButton(fBtnLFOTrigger, pLfo1Trig, 677, 260);
+
+    /* ImGui instance (popup menus, subwindows, etc.) */
+    fImGuiInstance = new ImGuiUI(getTopLevelWidget(), this);
+
+    /* "About" button (by clicking the plugin logo) */
+    _createHiddenButton(fBtnAbout, BTN_ABOUT, Size<uint>(118, 25), Point<int>(0, 0));
+
+    /* Popup menu button on params which has constant value sets */
+    _createHiddenButton(fBtnOsc1Waveform, pOsc1Wave, Size<uint>(45, 10 + 2), Point<int>(10 + 48 * 2, 200 + 2));
+    _createHiddenButton(fBtnOsc2Waveform, pOsc2Wave, Size<uint>(45, 10 + 2), Point<int>(262 + 48 * 2, 200 + 2));
+    _createHiddenButton(fBtnOsc3Waveform, pOsc3Wave, Size<uint>(45, 10 + 2), Point<int>(514 + 48 * 2, 200 + 2));
+
+    _createHiddenButton(fBtnFilterType, pFilterType, Size<uint>(45, 10 + 2), Point<int>(514, 96 - 4));
+    _createHiddenButton(fBtnFilterMode, pFilterMode, Size<uint>(45, 10 + 2), Point<int>(514 + 48, 96 - 4));
+
+    _createHiddenButton(fBtnLfo1Waveform, pLfo1Wave, Size<uint>(45, 10 + 2), Point<int>(534 + 48, 316 - 4));
 }
 
 void CCetoneUI::parameterChanged(uint32_t index, float value)
@@ -349,14 +365,52 @@ void CCetoneUI::parameterChanged(uint32_t index, float value)
 
 void CCetoneUI::imageButtonClicked(ImageButton* button, int)
 {
-#if 0
-    switch (button->getId()) {
-    case BTN_PANIC: {
-        panic();
-        break;
-    }
+    DISTRHO_SAFE_ASSERT_RETURN(fImGuiInstance, )
+
+    switch (button->getId())
+    {
+        case BTN_ABOUT:
+        {
+            fImGuiInstance->isAboutWindowOpen = !fImGuiInstance->isAboutWindowOpen;
+            break;
+        }
+        case pOsc1Wave:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnOsc1Waveform->getAbsolutePos().getX(), fBtnOsc1Waveform->getAbsolutePos().getY() + fBtnOsc1Waveform->getHeight());
+            fImGuiInstance->requestMenuId = pOsc1Wave;
+            break;
+        }
+        case pOsc2Wave:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnOsc2Waveform->getAbsolutePos().getX(), fBtnOsc2Waveform->getAbsolutePos().getY() + fBtnOsc2Waveform->getHeight());
+            fImGuiInstance->requestMenuId = pOsc2Wave;
+            break;
+        }
+        case pOsc3Wave:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnOsc3Waveform->getAbsolutePos().getX(), fBtnOsc3Waveform->getAbsolutePos().getY() + fBtnOsc3Waveform->getHeight());
+            fImGuiInstance->requestMenuId = pOsc3Wave;
+            break;
+        }
+        case pFilterType:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnFilterType->getAbsolutePos().getX(), fBtnFilterType->getAbsolutePos().getY() + fBtnFilterType->getHeight());
+            fImGuiInstance->requestMenuId = pFilterType;
+            break;
+        }
+        case pFilterMode:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnFilterMode->getAbsolutePos().getX(), fBtnFilterMode->getAbsolutePos().getY() + fBtnFilterMode->getHeight());
+            fImGuiInstance->requestMenuId = pFilterMode;
+            break;
+        }
+        case pLfo1Wave:
+        {
+            fImGuiInstance->menuPos = ImVec2(fBtnLfo1Waveform->getAbsolutePos().getX(), fBtnLfo1Waveform->getAbsolutePos().getY() + fBtnLfo1Waveform->getHeight());
+            fImGuiInstance->requestMenuId = pLfo1Wave;
+            break;
+        }
     }
-#endif
 }
 
 void CCetoneUI::imageSwitchClicked(ImageSwitch* button, bool down)
diff --git a/src/CetoneUI.hpp b/src/CetoneUI.hpp
@@ -4,6 +4,8 @@
 #include "ImageWidgets.hpp"
 #include "NanoVG.hpp"
 
+#include "Widgets/ImGui_UI.hpp"
+
 using DGL_NAMESPACE::ImageAboutWindow;
 using DGL_NAMESPACE::ImageButton;
 using DGL_NAMESPACE::ImageKnob;
@@ -55,6 +57,12 @@ class CCetoneUI : public DISTRHO::UI,
     NanoVG fNanoText;
     char fLabelBuffer[32 + 1];
 
+    // -------------------------------------------------------------------
+    // Dear ImGui Instance
+
+    ScopedPointer<ImGuiUI> fImGuiInstance;
+    friend class ImGuiUI;
+
     // -------------------------------------------------------------------
     // Image resources
 
@@ -93,6 +101,15 @@ class CCetoneUI : public DISTRHO::UI,
     ScopedPointer<ImageSwitch> fBtnGlideState;
     ScopedPointer<ImageSwitch> fBtnLFOTrigger;
 
+    // -------------------------------------------------------------------
+    // Buttons
+
+    ScopedPointer<ImageButton> fBtnAbout;
+
+    ScopedPointer<ImageButton> fBtnOsc1Waveform, fBtnOsc2Waveform, fBtnOsc3Waveform;
+    ScopedPointer<ImageButton> fBtnFilterType, fBtnFilterMode;
+    ScopedPointer<ImageButton> fBtnLfo1Waveform;
+
     // -------------------------------------------------------------------
     // Helpers
 
@@ -127,5 +144,6 @@ class CCetoneUI : public DISTRHO::UI,
 // Button IDs
 
 constexpr uint BTN_PANIC = d_cconst('p', 'n', 'i', 'c');
+constexpr uint BTN_ABOUT = d_cconst('a', 'b', 't', '.');
 
 // -----------------------------------------------------------------------
diff --git a/src/Widgets/ImGui_UI.cpp b/src/Widgets/ImGui_UI.cpp
@@ -0,0 +1,175 @@
+#include "ImGui_UI.hpp"
+#include "DistrhoPluginInfo.h"
+
+#include "Structures.h"
+#include "Defines.h"
+
+#include "CetoneUI.hpp" // For class CCetoneUI
+
+void ImGuiUI::onImGuiDisplay()
+{
+    double scaleFactor = getScaleFactor() * userScaling;
+    const double initialSize = 800 * scaleFactor;
+
+    //
+    // "About" Window
+    //
+    {
+        ImGui::SetNextWindowPos(ImVec2(initialSize / 4, initialSize / 16), ImGuiCond_Once);
+        ImGui::SetNextWindowSize(ImVec2(600, 230), ImGuiCond_Once);
+
+        if (isAboutWindowOpen)
+        {
+            ImGui::Begin("About " DISTRHO_PLUGIN_NAME, &isAboutWindowOpen, ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_NoResize);
+            {
+                ImGui::SeparatorText("Cetone Synth Light");
+                ImGui::Text("Light-weight monophonic analogue-style synthesizer, by Neotec Software.\n");
+
+                ImGui::SeparatorText("Authors");
+                ImGui::BulletText("René 'Neotec' Jeschke - Original developer");
+                ImGui::BulletText("AnClark Liu <clarklaw4701@qq.com> - Ported to DPF, Further developments");
+
+                ImGui::SeparatorText("License");
+                ImGui::BulletText("This project is licensed under GNU General Public License, version 3.");
+
+                ImGui::Text("\n\n");
+                ImGui::Dummy(ImVec2(490, 0));
+                ImGui::SameLine();
+                if (ImGui::Button("OK", ImVec2(80, 0)))
+                    isAboutWindowOpen = false;
+            }
+            ImGui::End(); 
+        }
+    }
+
+    //
+    // Handle menu opening requests
+    //
+    // Here, variable `requestTestMenuOpen` acts as an "event flag" to request ImGui to show the menu.
+    //
+    // Dear ImGui has its own mechanism to show popup menus, which does not require a flag to control its exisitance.
+    // This is quite different from window (ImGui::Begin()).
+    // So just call this function once, your popup will stick on the screen unless you do some operations.
+    //
+    switch (requestMenuId)
+    {
+        case pOsc1Wave:
+            ImGui::OpenPopup("menu_osc1_wave");
+            requestMenuId = 0;
+            break;
+        case pOsc2Wave:
+            ImGui::OpenPopup("menu_osc2_wave");
+            requestMenuId = 0;
+            break;
+        case pOsc3Wave:
+            ImGui::OpenPopup("menu_osc3_wave");
+            requestMenuId = 0;
+            break;
+        case pFilterType:
+            ImGui::OpenPopup("menu_filter_type");
+            requestMenuId = 0;
+            break;
+        case pFilterMode:
+            ImGui::OpenPopup("menu_filter_mode");
+            requestMenuId = 0;
+            break;
+        case pLfo1Wave:
+            ImGui::OpenPopup("menu_lfo1_wave");
+            requestMenuId = 0;
+            break;
+        
+        default:
+            requestMenuId = 0;
+    }
+
+    //
+    // Create popup menus
+    // [NOTICE] ImGui::BeginPopup() MUST be put after ImGui::OpenPopup(), otherwise popup won't show!
+    //
+
+    ImGui::SetNextWindowPos(menuPos);       // Specify menu position
+
+    if (ImGui::BeginPopup("menu_osc1_wave"))
+    {
+        ImGui::SeparatorText("Waveform");
+        if (ImGui::MenuItem("Saw")) { _triggerParamUpdate(pOsc1Wave, ui->_pi2f(OWAVE_SAW, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Pulse")) { _triggerParamUpdate(pOsc1Wave, ui->_pi2f(OWAVE_PULSE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Triangle")) { _triggerParamUpdate(pOsc1Wave, ui->_pi2f(OWAVE_TRI, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Sine")) { _triggerParamUpdate(pOsc1Wave, ui->_pi2f(OWAVE_SINE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("C64 Noise")) { _triggerParamUpdate(pOsc1Wave, ui->_pi2f(OWAVE_C64NOISE, OWAVE_MAX)); }
+        ImGui::EndPopup();
+    }
+
+    ImGui::SetNextWindowPos(menuPos);       // Specify menu position
+
+    if (ImGui::BeginPopup("menu_osc2_wave"))
+    {
+        ImGui::SeparatorText("Waveform");
+        if (ImGui::MenuItem("Saw")) { _triggerParamUpdate(pOsc2Wave, ui->_pi2f(OWAVE_SAW, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Pulse")) { _triggerParamUpdate(pOsc2Wave, ui->_pi2f(OWAVE_PULSE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Triangle")) { _triggerParamUpdate(pOsc2Wave, ui->_pi2f(OWAVE_TRI, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Sine")) { _triggerParamUpdate(pOsc2Wave, ui->_pi2f(OWAVE_SINE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("C64 Noise")) { _triggerParamUpdate(pOsc2Wave, ui->_pi2f(OWAVE_C64NOISE, OWAVE_MAX)); }
+        ImGui::EndPopup();
+    }
+
+    ImGui::SetNextWindowPos(menuPos);       // Specify menu position
+
+    if (ImGui::BeginPopup("menu_osc3_wave"))
+    {
+        ImGui::SeparatorText("Waveform");
+        if (ImGui::MenuItem("Saw")) { _triggerParamUpdate(pOsc3Wave, ui->_pi2f(OWAVE_SAW, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Pulse")) { _triggerParamUpdate(pOsc3Wave, ui->_pi2f(OWAVE_PULSE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Triangle")) { _triggerParamUpdate(pOsc3Wave, ui->_pi2f(OWAVE_TRI, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Sine")) { _triggerParamUpdate(pOsc3Wave, ui->_pi2f(OWAVE_SINE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("C64 Noise")) { _triggerParamUpdate(pOsc3Wave, ui->_pi2f(OWAVE_C64NOISE, OWAVE_MAX)); }
+        ImGui::EndPopup();
+    }
+
+    ImGui::SetNextWindowPos(menuPos);       // Specify menu position
+
+    if (ImGui::BeginPopup("menu_filter_type"))
+    {
+        ImGui::SeparatorText("Filter Type");
+        if (ImGui::MenuItem("None")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_NONE, FTYPE_MAX)); }
+        if (ImGui::MenuItem("Dirty")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_DIRTY, FTYPE_MAX)); }
+        if (ImGui::MenuItem("Moog")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_MOOG, FTYPE_MAX)); }
+        if (ImGui::MenuItem("Moog 2")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_MOOG2, FTYPE_MAX)); }
+        if (ImGui::MenuItem("Ch12db")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_CH12DB, FTYPE_MAX)); }
+        if (ImGui::MenuItem("x0x (303)")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_303, FTYPE_MAX)); }
+        if (ImGui::MenuItem("8580")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_8580, FTYPE_MAX)); }
+        if (ImGui::MenuItem("Bi12db (Budda)")) { _triggerParamUpdate(pFilterType, ui->_pi2f(FTYPE_BUDDA, FTYPE_MAX)); }
+        ImGui::EndPopup();
+    }
+
+    ImGui::SetNextWindowPos(menuPos);
+
+    if (ImGui::BeginPopup("menu_filter_mode"))
+    {
+        ImGui::SeparatorText("Filter Mode");
+        if (ImGui::MenuItem("Low pass")) { _triggerParamUpdate(pFilterMode, ui->_pi2f(FMODE_LOW, FMODE_MAX)); }
+        if (ImGui::MenuItem("Band pass")) { _triggerParamUpdate(pFilterMode, ui->_pi2f(FMODE_BAND, FMODE_MAX)); }
+        if (ImGui::MenuItem("High pass")) { _triggerParamUpdate(pFilterMode, ui->_pi2f(FMODE_HIGH, FMODE_MAX)); }
+        if (ImGui::MenuItem("Notch")) { _triggerParamUpdate(pFilterMode, ui->_pi2f(FMODE_NOTCH, FMODE_MAX)); }
+        ImGui::EndPopup();
+    }
+
+    ImGui::SetNextWindowPos(menuPos);       // Specify menu position
+
+    if (ImGui::BeginPopup("menu_lfo1_wave"))
+    {
+        ImGui::SeparatorText("Waveform");
+        if (ImGui::MenuItem("Saw")) { _triggerParamUpdate(pLfo1Wave, ui->_pi2f(OWAVE_SAW, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Pulse")) { _triggerParamUpdate(pLfo1Wave, ui->_pi2f(OWAVE_PULSE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Triangle")) { _triggerParamUpdate(pLfo1Wave, ui->_pi2f(OWAVE_TRI, OWAVE_MAX)); }
+        if (ImGui::MenuItem("Sine")) { _triggerParamUpdate(pLfo1Wave, ui->_pi2f(OWAVE_SINE, OWAVE_MAX)); }
+        if (ImGui::MenuItem("C64 Noise")) { _triggerParamUpdate(pLfo1Wave, ui->_pi2f(OWAVE_C64NOISE, OWAVE_MAX)); }
+        ImGui::EndPopup();
+    }
+}
+
+void ImGuiUI::_triggerParamUpdate(uint32_t paramId, float newValue)
+{
+    ui->setParameterValue(paramId, newValue);   // Tell the DSP to update parameter value
+    ui->parameterChanged(paramId, newValue);    // Request UI refresh
+}
diff --git a/src/Widgets/ImGui_UI.hpp b/src/Widgets/ImGui_UI.hpp
@@ -0,0 +1,51 @@
+/*
+ * Inspector Window for DPF
+ * Copyright (C) 2022-2025 Filipe Coelho <falktx@falktx.com>
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with
+ * or without fee is hereby granted, provided that the above copyright notice and this
+ * permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD
+ * TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN
+ * NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL
+ * DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
+ * IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+ * CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+#pragma once
+
+#include "DearImGui.hpp"
+
+// Forward decls.
+class CCetoneUI;
+
+
+// --------------------------------------------------------------------------------------------------------------------
+
+class ImGuiUI : public ImGuiTopLevelWidget
+{
+
+public:
+    CCetoneUI *ui;
+
+    bool isAboutWindowOpen = false;
+    uint16_t requestMenuId = 0;
+    
+    ImVec2 menuPos{0, 0};
+
+    double userScaling = 1.0f;
+
+    ImGuiUI(TopLevelWidget* const tlw, CCetoneUI* const ui) : 
+        ImGuiTopLevelWidget(tlw->getWindow()),
+        ui(ui)
+        {
+        }
+
+protected:
+    void onImGuiDisplay() override;
+
+private:
+    void _triggerParamUpdate(uint32_t paramId, float newValue);
+};

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ add_subdirectory (dpf)`
`12`	`12`
`13`	`13`	`include_directories (`
`14`	`14`	`src/`
	`15`	`+ dpf-widgets/opengl/`
`15`	`16`	`)`
`16`	`17`
`17`	`18`	`set (SRC_BACKEND`
`@@ -42,5 +43,7 @@ dpf_add_plugin (${PROJECT_NAME}`
`42`	`43`	`src/CetoneUIHelper.cpp`
`43`	`44`	`src/Images/CetoneArtwork.cpp`
`44`	`45`	`src/Fonts/CetoneFonts.cpp`
	`46`	`+ dpf-widgets/opengl/DearImGui.cpp`
	`47`	`+ src/Widgets/ImGui_UI.cpp`
`45`	`48`	`)`
`46`	`49`