[HELP] How to apply GlowEffect or ImageEffectFilter

Getting Started
1

Hi guys!

I’ve been searching for hours and tried to make it myself but no luck :/. I have no idea how to implement this. I am getting started lately on GUI development on JUCE for VSTs (I am a graphic designer and the team just needs GUI design help for the VST).

Say I made a component called “myHeader.cpp” (for the header of the VST), this one has a few rectangles inside made with DrawRectangle declared in the “myHeader.h” file. I managed to position them and color them all nicely. Now question is, how do I go about adding any imageEffectsFilter (like shadow, blur, glow) that is available inside JUCE? I am mainly focused on GlowEffect. Here is the header file .h:

class myHeader    : public Component
{
public:
    myHeader();
    ~myHeader();

    void paint (Graphics&) override;
    void resized() override;

private:
    
    Colour headerColor;
    Colour masterVol_AddinstColor;
    Colour bgFieldColor;
    
    myPatchField patchField;
    DrawableRectangle logoRect;
    DrawableRectangle patchRect;
    DrawableRectangle masterVolRect;
    DrawableRectangle addInstRect;
    
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (myHeader)
};    **class**  myHeader    :  **public**  Component
    {
    **public** :
        myHeader();
        ~myHeader();

      **void**  paint (Graphics&)  **override** ;
      **void**  resized()  **override** ;

    **private** :

        Colour headerColor;
        Colour masterVol_AddinstColor;
        Colour bgFieldColor;

        myPatchField patchField;
        DrawableRectangle logoRect;
        DrawableRectangle patchRect;
        DrawableRectangle masterVolRect;
        DrawableRectangle addInstRect;

        JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (myHeader)
};

And this is my paint method in the .cpp file, the constructor has only the addAndMakeVisible function in it:

void myHeader::paint (Graphics& g)
{
    g.fillAll (Colour::fromRGBA(51, 51, 51, 0));
    
    Image myImage (Image::RGB, 500, 500, true);
    GlowEffect ds;
    
    ds.applyEffect(myImage, g, 1.0f, 0.5);
    
    logoRect.setFill(headerColor);
    patchRect.setFill(headerColor);
    masterVolRect.setFill(masterVol_AddinstColor);
    addInstRect.setFill(masterVol_AddinstColor);
    
    
}

Plz help :’(, also is DrawRectangle a good way to insert different backgrounds for different sections of the VST?

Thank you so much in advance for the help i am struggling with this for quite some time now :/.

Any example or a bit more detailed explanation would be amazing.

2

Based on:

Image myImage(Image::RGB, 500, 500, true);
GlowEffect ds;

ds.applyEffect(myImage, g, 1.0f, 0.5);

You won’t see anything since myImage is an empty image: the image is created but then nothing is drawn into it. The GlowEffect just sees a big block of transparent pixels here.

The ImageEffectFilter classes (like the shadow, blur, etc.) can be used on images directly like in your example, but from your original post it sounds like you want all the rectangles in the myHeader component to have the same glow effect applied to them.

To achieve that you’d have to apply the GlowEffect to the image result of the component’s paint method. This can be achieved through using juce::Component::setComponentEffect().

Essentially setComponentEffect() tells the component that it should take the results of its paint() method (as a juce::Image) and run them through the supplied effect filter, before drawing the final image to the screen. This way you don’t have to create or manage the image objects at all!

Because the method takes a pointer (location in memory) to an ImageEffectFilter object, you’ll want to keep an ImageEffectFilter around that will always be accessible to the component trying to use it. Here’s a super short example:

class myComponent : Component
{
    // The glow here is a member variable, so it will always be accessible to myComponent
    GlowEffect glow;

    myComponent()
    {
        // Pass the address of "glow" so the component knows what effect to always apply
        setComponentEffect(&glow);
    }

    void paint(Graphics &g) override
    {
        // Draw rectangles, text, etc. All of it will have the glow filter applied
    }
};

Do you mean DrawableRectangle? Most of the Drawable classes are used for creating a vector image out of many pieces (for example JUCE’s SVG code builds Drawables passed on an SVG document), I don’t usually use them unless I need some sort of complex shape or illustration in a GUI that I can’t easily make in the code.

You could simply use Graphics::fillRect() to draw the rectangles, as its more lightweight and easier to work with. If you’re setting up some layouts with the DrawableRectangles you can simply turn them into Rectangle<int> and then supply them to Graphics::fillRect() when you paint.

Hope that helps!

2 Likes
3

Hi!

Thanks a lot for the quick reply and for the info, very valuable!

That works good now!

1 Like
4

Do anyone of you know how to add simple glow effect or even color gradient to a rotary knob slider’s fill path color? For example, I currently have a knob that has a blue fill path, I would love for the blue path to have some effect like glowing or gradient as it is turned. Please I cant find any solution