How to draw and dynamically set colour for rounded rectangles?

[ARM_and]

I'd like to draw rounded corner rectangles (e.g. buttons) where the background/fill colour can be changed by the application as well as opacity/alpha channel.

The current shape tools don't seem have this option (rectangle or circle). It's possible to place SVG files, but that doesn't seem to allow for colour and alpha changes.

Is there a way to use vector renderer and give it a path and the change the fill colour by the application?

-a

[unsigned_char_array]

I got it to work with circles.

#include <touchgfx/Color.hpp>

...

circle1Painter.setColor(touchgfx::Color::getColorFromRGB(0, 255, 0));
circle1.invalidate();

You can also set alpha using setAlpha()

[ARM_and]

Yes, it'll work with rectangles as well.  But there doesn't seem to be an easy way to create rounded corner rectangles and set their colour.

Of course one can make a rounded rect using 4 circles and 2 or 3 rectangles, but that's a bit of processing work.

[Marc_LM]

I don't recommend using SVG if you will move them on the screen.
Each invalidation will recalculate all portion of the SVG and not work on the intermediate bitmap.

As for unsigned_char_array comment's, you will need to learn what the painters and drawers are.
I recommend you look over the Lens example.
Try to do the challange the GFX team suggest. 
https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/dynamic-bitmaps
Read everything from the touchgfx-engine-features 3 times at least. 

[unsigned_char_array]

---

@ARM_and wrote:

Of course one can make a rounded rect using 4 circles and 2 or 3 rectangles, but that's a bit of processing work.

---

Simply create a widget and add a method to set the color. You can even set the dimensions of the rectangle and radius of the corners in software (but then the preview image in the editor may not be correct) if you generate the shapes it programmatically.

[ARM_and]

Yes. However, on the STM32U5G9 the demo specifically shows off how to move and rotate SVG on the screen at 60FPS.

Would still be nice to know how do load some SVG paths dynamically with vector renderer. Some shapes are not easily produce-able using dynamic bitmaps.

[Marc_LM]

I didn't check the implementation of the Texture mapper.

Maybe you could get more info from questions from @PJEN, on the matter.
Last time I talked to them: "is-it-possible-to-create-dynamic-svg-images-as-it-can-be-done".

[PJEN]

Hello everyone,

You may use a subclass of an SVGImage to create a VGObject with some splines and some lines to draw a rounded rectangle but I personally use a quicker solution for this. It's a quick and dirty code that simply draw 4 surrounding wide lines with ROUND_CAP_ENDING ending style and a Box that fill the inside ...

To have some 'wysiwyg' feature in the designer , I place a simple Box where I want my rounded rectangle to be placed. Then in the setupScreen() function of my screen, I replace this Box with my custom widget.

I made some cleanup to my original and dirty code to copy it here in case it may be of some help to someone ;)

/*
 * CustomRoundRect.hpp
 *
 *  Created on: Jul 31, 2025
 *      Author: pierrejenard
 */

#ifndef TOUCHGFX_GUI_INCLUDE_GUI_COMMON_CUSTOMROUNDRECT_H_
#define TOUCHGFX_GUI_INCLUDE_GUI_COMMON_CUSTOMROUNDRECT_H_

#include <touchgfx/hal/Types.hpp>
#include <touchgfx/containers/Container.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/canvas/Line.hpp>
#include <touchgfx/widgets/canvas/PainterRGB565.hpp>


class CustomRoundRect : public touchgfx::Container
{
public:
	CustomRoundRect();
	virtual ~CustomRoundRect() {}

    void setColor(touchgfx::colortype value);
    void setRadius(int value);
    void setWidth(int16_t width);
    void setHeight(int16_t height);

protected:

    void updateGeometry();

    /*
     * Member Declarations
     */
    int m_radius;

    touchgfx::PainterRGB565 linePainter;
    touchgfx::Box box;
    touchgfx::Line line1;
    touchgfx::Line line2;
    touchgfx::Line line3;
    touchgfx::Line line4;

};


#endif /* TOUCHGFX_GUI_INCLUDE_GUI_COMMON_CUSTOMROUNDRECT_H_ */

/*
 * CustomRoundRect.cpp
 *
 *  Created on: Jul 31, 2025
 *      Author: pierrejenard
 */

#include <gui/common/CustomRoundRect.hpp>
#include <touchgfx/Color.hpp>
#include <touchgfx/hal/Types.hpp>

CustomRoundRect::CustomRoundRect()
{
    add(box);

    line1.setLineEndingStyle(touchgfx::Line::ROUND_CAP_ENDING);
    line1.setPainter(linePainter);
    line2.setLineEndingStyle(touchgfx::Line::ROUND_CAP_ENDING);
    line2.setPainter(linePainter);
    line3.setLineEndingStyle(touchgfx::Line::ROUND_CAP_ENDING);
    line3.setPainter(linePainter);
    line4.setLineEndingStyle(touchgfx::Line::ROUND_CAP_ENDING);
    line4.setPainter(linePainter);
    add(line1);
    add(line2);
    add(line3);
    add(line4);

}

void CustomRoundRect::setColor(touchgfx::colortype value)
{
    box.setColor(value);
    linePainter.setColor(value);
}

void CustomRoundRect::setWidth(int16_t width)
{
	touchgfx::Container::setWidth(width);
	updateGeometry();
}

void CustomRoundRect::setHeight(int16_t height)
{
	touchgfx::Container::setHeight(height);
	updateGeometry();
}

void CustomRoundRect::setRadius(int value)
{
	m_radius = value;
	updateGeometry();
}

void CustomRoundRect::updateGeometry()
{
	int lw = 2*m_radius;
    box.setPosition(m_radius, m_radius, getWidth()-lw, getHeight()-lw);

    line1.setPosition(0, 0, getWidth(), getHeight());
    line1.setStart(m_radius, m_radius);
    line1.setEnd(getWidth()-m_radius, m_radius);
    line1.setLineWidth(lw);

    line2.setPosition(0, 0, getWidth(), getHeight());
	line2.setStart(m_radius, getHeight()-m_radius);
	line2.setEnd(getWidth()-m_radius, getHeight()-m_radius);
	line2.setLineWidth(lw);

    line3.setPosition(0, 0, getWidth(), getHeight());
	line3.setStart(m_radius, m_radius);
	line3.setEnd(m_radius, getHeight()-m_radius);
	line3.setLineWidth(lw);

    line4.setPosition(0, 0, getWidth(), getHeight());
	line4.setStart(getWidth()-m_radius, m_radius);
	line4.setEnd(getWidth()-m_radius, getHeight()-m_radius);
	line4.setLineWidth(lw);
}

and an example of how to replace a Box in a Screen , keeping it's position in the draw chain

void HelpView::setupScreen()
{
    HelpViewBase::setupScreen();

    // replace a rectangle by a rounded rectangle
    m_round_rect.setPosition(round_r);
    m_round_rect.setColor(round_r.getColor());
    m_round_rect.setRadius(15);
    insert(&round_r, m_round_rect);
    remove(round_r);

.....

m_round_rect is declared in the screen class as :

    CustomRoundRect m_round_rect;

That's all ...