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. 

[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 ...