Skip to main content
RHuffman
Visitor II
January 27, 2020
Solved

TouchGFX Change Color of a Circle

  • January 27, 2020
  • 1 reply
  • 2844 views

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.

This topic has been closed for replies.
Best answer by Martin KJELDSEN

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

1 reply

Martin KJELDSEN
Martin KJELDSENBest answer
Principal III
January 27, 2020

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