Toolbar button image down state


#1

Hi, I have a toolbar on which there are a lot of ToolbarButtons represented by some svg images similarly to the toolbar in Juce Demo.

 

The problem is I haven't found a way to simply represent the "down state" of the button. It seems I need to supply a MouseDown version of the button the same way do it with the "normal" state. It would be nice if there was any option to "highlight" the image to mark it as being down. It works very well with mouse over state (some blue overlay) but there seems to be no way of doing the same for mouseDown state. At least not permanently. It only works while i hold the mouse button on the button. Have I missed something? What I would do to make it look the way I want is to take each image, paint some overlay on using some image editor and export it save it again as "myImage_mouseDown.svg" and then load it as mouse down image for the button. But that does not make much sense as JUCE could easily do this since it already works while I hold the mouse down over the button.

 

Thanks a lot!


#2

Anyone?


#3

Hi Aros, I've done something like this with DrawableButtons:


/**    Sets up images for a DrawableButton from binary data for a single image. This will replace any black in
 *    the image with different colours for the normal, over and down images. So it is best
 *    to use this with single colour SVG icons.
 *
 *    Default transparency is used for the disabled image, and nothing is set for the toggle on state images.
 */
extern void setImagesForDrawableButton (DrawableButton* button,             /**< DrawableButton to setup. */
                                        const void* imageData,                /**< Binary image data (typically SVG, but can be anything that juce:::ImageFileFormat understands. */
                                        size_t imageDataSize    ,            /**< Size of the binary image data (in bytes). */
                                        bool againstDarkbackground = true    /**< Determines which colours to use. */
                                        )
{
    Colour normalColour = Colour (0xff705090).brighter (0.4f);
    Colour overColour = Colour (0xff705090);
    Colour downColour = Colour (0xffffd040).darker (0.7f);
    if (!againstDarkbackground)
    {
        normalColour = Colour (0xff705090).darker (0.2f);
        overColour = Colour (0xff303030);
        downColour = Colour (0xffffd040).darker (0.7f);
    }
    
    OwnedArray<Drawable> drawableArray;
    drawableArray.add (Drawable::createFromImageData (imageData, imageDataSize));
    drawableArray.add (drawableArray[0]->createCopy ());
    drawableArray.add (drawableArray[0]->createCopy ());
    
    drawableArray[0]->replaceColour (Colours::black, normalColour);
    drawableArray[1]->replaceColour (Colours::black, overColour);
    drawableArray[2]->replaceColour (Colours::black, downColour);
    
    button->setImages (drawableArray[0], drawableArray[1], drawableArray[2]);
}

#4

OK, so actually there is no standard way of doing this? Like setting the toolbar button to render an overlay over the image if it is down?

Anyway I see the point of the code you posted but in my case it is not that simple (I don’t have binary images). But I could just render some overlay over the whole svg. That is, if I am able to find a way to edit an SVG image in JUCE…

//sorry for the late reply, I have been ill for some time.


#5

No worries, just thought I’d put it out there in case it gave you an idea.

Hope you’re feeling better soon!


#6

Thanks, me too…

So anyone else have an idea how to edit an svg image in JUCE? I could probably add a tag in the file before parsing it but still think there has to be a simpler way. It’s a lot of images to solve this individually…