TouchGFX Change Color of a Circle

[RHuffman]

I apologize if this is a very simple question, but I can't seem to figure out how to change the color of a Circle in my TouchGFX project.

I know that for a Box, I can do something like...

box1.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 0, 255));
box1.invalidate();

I would like to do the equivalent but for a Circle, however there is no setColor() method.

I understand that Circles have something called a painter, which allows me to do...

circle1Painter.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 0, 255);

...but I do not know how to re-draw the circle with the updated painter.

I've tried...

circle1.setPainter(circle1Painter);
const Rect rect(0, 0, circle1.getWidth(), circle1.getHeight());
circle1.drawCanvasWidget(rect);
circle1.invalidate();

but this did not work.

I appreciate any advice you can provide.

[Martin KJELDSEN · Accepted solution]

Hi,

Firstly, please don't apologize!

Secondly, let me give you an example of how to change the color of a circle.

I added a background box and a circle widget (with a Color Painter). Generated code looks like this:

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <touchgfx/Color.hpp>
 
Screen1ViewBase::Screen1ViewBase()
{
 
    touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);
 
    box1.setPosition(0, 0, 480, 272);
    box1.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
 
    circle1.setPosition(200, 96, 80, 80);
    circle1.setCenter(40, 40);
    circle1.setRadius(40);
    circle1.setLineWidth(0);
    circle1.setArc(0, 360);
    circle1Painter.setColor(touchgfx::Color::getColorFrom24BitRGB(194, 51, 51));
    circle1.setPainter(circle1Painter);
 
    add(box1);
    add(circle1);
}
 
void Screen1ViewBase::setupScreen()
{
 
}

I'll then add a button and an interaction that calls a virtual function to change the color of the circle - The following code changes the color of the circle to green upon pressing my button. Since the circle owns the painter, invalidate the circle to force a re-render of the circle.

void  Screen1View::changeColor()
{
    circle1Painter.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 255, 0));
    circle1.invalidate();
}

You could also achieve this using an image painter, of course (red image), but if you're after something simple this is the way to go.

/Martin