Allowing brightness control on PNG based front panels?

Hello! I just announced new front panels for Voxglitch, and there’s some healthy debate about the brightness of the panels. Some like darker panels while some appreciate the clarity of lighter panels. I’m wondering if I can give them the best of both worlds.

Here’s an example:

I hacked the lighter panel together by putting a semi-transparent layer of white in photoshop over the original panel.

I can paint a semi-transparent PNG layer above the base layer. (I did it while playing with a “dust layer”). That code looks like this:

  DigitalSequencerWidget(DigitalSequencer* module)
    this->module = module;
    setPanel(APP->window->loadSvg(asset::plugin(pluginInstance, "res/digital_sequencer/digital_sequencer_front_panel.svg")));

    PNGPanel *png_panel = new PNGPanel("res/digital_sequencer/digital_sequencer_baseplate_small.png", 182.88, 128.5);

    // Add dust layer
    // PNGPanel *dust_png_panel = new PNGPanel("res/digital_sequencer/dust_layer.png", 182.88, 128.5, .5);
    // addChild(dust_png_panel);

Where PNGPanel is defined as:

struct PNGPanel : TransparentWidget
  std::string png_file_path;
  float width;
  float height;
  float alpha = 1.0;

  PNGPanel(std::string png_file_path, float width, float height)
    this->png_file_path = png_file_path;
    this->width = width;
    this->height = height;

  PNGPanel(std::string png_file_path, float width, float height, float alpha)
    this->png_file_path = png_file_path;
    this->width = width;
    this->height = height;
    this->alpha = alpha;

  void draw(const DrawArgs &args) override
    std::shared_ptr<Image> img = APP->window->loadImage(asset::plugin(pluginInstance, this->png_file_path));

    int temp_width, temp_height;

    // Get the image size and store it in the width and height variables
    nvgImageSize(, img->handle, &temp_width, &temp_height);

    // Set the bounding box of the widget
    box.size = mm2px(Vec(width, height));

    // Paint the .png background
    NVGpaint paint = nvgImagePattern(, 0.0, 0.0, box.size.x, box.size.y, 0.0, img->handle, this->alpha);
    nvgRect(, 0.0, 0.0, box.size.x, box.size.y);
    nvgFillPaint(, paint);


Is it possible to adjust a PNG’s transparency after an nvgImagePattern has been drawn on the widget? I’m assuming that it isn’t possible. I’m assuming that it gets cached, but I thought I’d ask!



everything is re-drawn every frame, which I think makes the question of changing transparency after drawing on top moot - you can draw whatever you want next frame. Not exactly the same, but my old (ancient) Colors module draws colored “static” on the panel by changing individual pixel transparency in a bitmap buffer that’s drawn every frame. Oh, wait a minute - the buffer stays the same and is just re-drawn in a random position (old hack for making “noise” cheap). Still, shouldn’t be a problem.

Ah, ok! I’ll give it a shot and see what happens. Thanks!