Recreating parameter controls from "Sound Stage"

Development
1

Does anybody have a good reference for a parameter implementation that follows the style used in the “Sound Stage” module? I.e., a text label describes the parameter name, and another describes the selected value. When clicked the parameter scrubs like a knob would, but updates the text label with the value of the parameter. I’m sure it’s relatively simple.

Screenshot 2025-01-01 at 6.03.38 PM copy

2

You need to use a text display widget to do that, you can use digitalDisplay.hpp as a starting point. It’s a little bit complex honestly, but the code is at least easy to copy/paste. You can find similar code in my Arrange module for the Stage knob (cv funk).

#include “digital_display.hpp”

Then when you initialize your vars:

DigitalDisplay* digitalDisplay = nullptr;

In the main module widget you place it like this:

    // Configure and add the first digital display
    DigitalDisplay* digitalDisplay = new DigitalDisplay();
    digitalDisplay->fontPath = asset::plugin(pluginInstance, "res/fonts/DejaVuSansMono.ttf");
    digitalDisplay->box.pos = Vec(41.5 + 25, 34); // Position on the module
    digitalDisplay->box.size = Vec(100, 18); // Size of the display
    digitalDisplay->text = "Stage : Max"; // Initial text
    digitalDisplay->fgColor = nvgRGB(208, 140, 89); // White color text
    digitalDisplay->textPos = Vec(0, 15); // Text position
    digitalDisplay->setFontSize(16.0f); // Set the font size as desired
    addChild(digitalDisplay);

    if (module) {
        module->digitalDisplay = digitalDisplay; // Link the module to the display
    }

Then in Draw you update it like this:

    // Update Stage progress display
    if (module->digitalDisplay) {
        module->digitalDisplay->text =  std::to_string(module->currentStage + 1) + " / " + std::to_string(module->maxStages);
    }

And you also need to define the widget like this:

DigitalDisplay* createDigitalDisplay(Vec position, std::string initialValue) {
    DigitalDisplay* display = new DigitalDisplay();
    display->box.pos = position;
    display->box.size = Vec(50, 18);
    display->text = initialValue;
    display->fgColor = nvgRGB(208, 140, 89); // Gold color text
    display->fontPath = asset::plugin(pluginInstance, "res/fonts/DejaVuSansMono.ttf");
    display->setFontSize(14.0f);
    return display;
}
1 Like