Transparent MainComponent

General JUCE discussion
1

Hi, I created a project with Projucer and the only think I’ve done is comment g.fillAll in the paint func, like this:

//    g.fillAll (getLookAndFeel().findColour (juce::ResizableWindow::backgroundColourId));
g.setFont (juce::Font (16.0f));
g.setColour (juce::Colours::white);
g.drawText ("Hello World!", getLocalBounds(), juce::Justification::centred, true);

I would have expected to have a transparent component with only a withe “Hello world”, why not? and how can I create a transparent background?

2

you tried setOpaque(false) ? else perhaps it’s not supported.

1 Like
3

yes I’ve done it… I remember that a lot of time ago I achieve it, but I don’t remember how…

4

The paint() routines are limited to the drawing within the window. It has no idea of what’s behind.
The setOpaque() is not affecting the paint but rather an optimisation. It is used to figure out if the component behind needs redrawing.

You can try if the ComponentPeer::StyleFlags help, but the WidowIsSemiTransparent has a note “only for internal use”, so you have to test.

1 Like
5

My the Idea for what I’m going to do is having a project without main window and only with a component on screen, is it possible? I can’t immagine actually how I could have a component on screen not inside a window, but a window under the hood inherits Component class so it should be possible…
(I’d like to have a program for example that shows at display only a black square that follows the mouse and that show with a test inside this square the x and y coordinates of the mouse).

Really thank you!

6

Any Component can become a Window by calling addToDesktop (int windowStyleFlags). This is how e.g. PopupMenu and TooltipWindow work (they are not limited by the bounds of the parent window).

The ComponentPeer is the handle for the windowmanager/OS, which is created behind the scenes for you.

1 Like
7

I created a project with only a main.cpp and coded this, but nothing is shown on screen and paint func is never called:

class TrackerComponent : public Component
{
public:
    TrackerComponent(String name) : Component(name) { setOpaque (false); }
 
    void paint (juce::Graphics& g) override
    {
        g.setColour(Colours::black);
        g.drawRect(getLocalBounds(), 3);
        g.setFont(12);
        g.drawText("x = " + String(Desktop::getMousePosition(). x) + " y = " + String(Desktop::getMousePosition().y), getLocalBounds(), Justification::centred);
    }
};

class MouseTrackerApplication  : public juce::JUCEApplication, public Timer
{
public:

    MouseTrackerApplication() {}

    const juce::String getApplicationName() override       { return ProjectInfo::projectName; }
    const juce::String getApplicationVersion() override    { return ProjectInfo::versionString; }
    bool moreThanOneInstanceAllowed() override             { return true; }

    void initialise (const juce::String& commandLine) override
    {
        tracker.addToDesktop(ComponentPeer::StyleFlags::windowHasDropShadow |
                             ComponentPeer::StyleFlags::windowIsTemporary |
                             ComponentPeer::StyleFlags::windowIgnoresKeyPresses |
                             ComponentPeer::StyleFlags::windowIgnoresMouseClicks);
        
        startTimer(1);
    }

    void timerCallback() override
    {
        tracker.setBounds(Desktop::getMousePosition().x, Desktop::getMousePosition().y, 100, 50);
        tracker.repaint();
    }
    
    void shutdown() override {}
    void systemRequestedQuit() override { quit(); }
    void anotherInstanceStarted (const juce::String& commandLine) override {}
    
private:
    
    TrackerComponent tracker{"Tracker"};
};

I think also that (when it will work) it wold be ever in front of all that is displayed on screen, is it possible?

8

It is at least lacking a

tracker.setVisible (true);

And for your code, please add three backticks ```before and after the code on a separate line to fix the formatting…

1 Like
9

Ok really thank you! now the last thing as I supposed is to get it ever in front of other component, as you can see pictures it doesn’t overlap other apps!

PS: really thank you again, you’re very kind! :pray:t2:

10

Ok I found it! What I was searching for is setAlwaysOnTop( **true** );

Really thank you again and hope this could be useful for someone else!