creating custom widget using code stm32 cube ide
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 4:39 AM
Is it possible to create a custom widget in TouchGFX using code, specifically in STM32CubeIDE? I would like to start with a blank screen, add a custom widget, import the generated project into STM32CubeIDE, and then write code for the custom widget. What are the steps involved in achieving this?
Solved! Go to Solution.
- Labels:
-
TouchGFX
-
TouchGFX Designer
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 6:27 AM
Sure, I think I understand more clearly your question now.
Please find below a guidance, some of it could be wrong, I am just doing that on top of my head.
Steps to Design an Arc Using TouchGFX
-
Set Up Your Environment:
- Ensure you have the TouchGFX Designer and STM32CubeIDE installed.
- Create a new TouchGFX project or open an existing one.
-
Create a Custom Widget:
- TouchGFX does not have a built-in arc widget, so you will need to create a custom widget to draw an arc.
-
Implement the Arc Drawing Logic:
- Override the
draw
method of the custom widget to implement the arc drawing logic.
- Override the
-
Add the Custom Widget to Your Screen:
- Add the custom widget to your screen in the TouchGFX Designer.
Example Code
Below is an example of how you can create a custom widget to draw an arc in TouchGFX:
1. Create a Custom Widget Header File (ArcWidget.hpp
)
#ifndef ARC_WIDGET_HPP
#define ARC_WIDGET_HPP
#include <touchgfx/widgets/Widget.hpp>
#include <touchgfx/hal/Types.hpp>
class ArcWidget : public touchgfx::Widget
{
public:
ArcWidget();
virtual void draw(const touchgfx::Rect& invalidatedArea) const;
void setArc(int16_t x, int16_t y, int16_t radius, int16_t startAngle, int16_t endAngle, touchgfx::colortype color);
private:
int16_t centerX;
int16_t centerY;
int16_t radius;
int16_t startAngle;
int16_t endAngle;
touchgfx::colortype arcColor;
};
#endif // ARC_WIDGET_HPP
2. Implement the Custom Widget (ArcWidget.cpp
)
#include <touchgfx/Color.hpp>
#include <touchgfx/widgets/canvas/PainterRGB565.hpp>
#include <touchgfx/widgets/canvas/CanvasWidgetRenderer.hpp>
#include "ArcWidget.hpp"
ArcWidget::ArcWidget()
: centerX(0), centerY(0), radius(0), startAngle(0), endAngle(0), arcColor(touchgfx::Color::getColorFrom24BitRGB(0, 0, 0))
{
}
void ArcWidget::setArc(int16_t x, int16_t y, int16_t radius, int16_t startAngle, int16_t endAngle, touchgfx::colortype color)
{
centerX = x;
centerY = y;
this->radius = radius;
this->startAngle = startAngle;
this->endAngle = endAngle;
arcColor = color;
invalidate();
}
void ArcWidget::draw(const touchgfx::Rect& invalidatedArea) const
{
touchgfx::Canvas canvas(this, invalidatedArea);
touchgfx::PainterRGB565 painter(arcColor);
canvas.setPainter(painter);
// Draw the arc using the canvas
canvas.moveTo(centerX + radius * cosf(startAngle * M_PI / 180.0f), centerY - radius * sinf(startAngle * M_PI / 180.0f));
for (int angle = startAngle; angle <= endAngle; angle++)
{
canvas.lineTo(centerX + radius * cosf(angle * M_PI / 180.0f), centerY - radius * sinf(angle * M_PI / 180.0f));
}
canvas.render();
}
3. Add the Custom Widget to Your Screen
- Open the TouchGFX Designer.
- Drag and drop a
Custom Container
onto your screen. - Replace the
Custom Container
with yourArcWidget
in the code.
4. Use the Custom Widget in Your Application
#include <gui/screen1_screen/Screen1View.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include "ArcWidget.hpp"
Screen1View::Screen1View()
{
}
void Screen1View::setupScreen()
{
Screen1ViewBase::setupScreen();
ArcWidget arc;
arc.setArc(100, 100, 50, 0, 180, touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
add(arc);
}
void Screen1View::tearDownScreen()
{
Screen1ViewBase::tearDownScreen();
}
Explanation
-
Create a Custom Widget:
- Define a custom widget class
ArcWidget
that inherits fromtouchgfx::Widget
. - Implement the
draw
method to draw the arc using theCanvas
class.
- Define a custom widget class
-
Set Arc Parameters:
- The
setArc
method sets the parameters for the arc, including the center coordinates, radius, start angle, end angle, and color.
- The
-
Draw the Arc:
- The
draw
method uses trigonometric functions to calculate the coordinates of the arc and draws it using theCanvas
class.
- The
-
Add the Custom Widget to Your Screen:
- Add the custom widget to your screen in the
setupScreen
method of your view class.
- Add the custom widget to your screen in the
By following these steps, you can create and display an arc using TouchGFX in your embedded application.
Regards,
Software engineer at ST (TouchGFX)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 6:00 AM
Hello @sai1 ,
To create a custom widget, the simplest way is to open TouchGFX Designer, create a new project.
Then, on your application, just go to the "Containers" tab and click on the "+" icon :
Then, you can add shapes, images, etc that you will need for your custom widget.
Then, click on "Generate code":
Then you can open the folder where your project is inside your favorite text editor or IDE (in that case, STM32CubeIDE):
The custom container code will be under TouchGFX => gui => source => container.
From there you can code custom behavior.
I hope this help!
If this comment answers your question, I invite you to select it as "best answer". :smiling_face_with_smiling_eyes:
Regards,
Software engineer at ST (TouchGFX)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 6:09 AM
Duplicative, pick one person to post, or post once under one account
Up vote any posts that you find helpful, it shows what's working..
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 6:17 AM
Actually, I have a display board and want to design an arc using the C language. What steps should I follow?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-14 6:27 AM
Sure, I think I understand more clearly your question now.
Please find below a guidance, some of it could be wrong, I am just doing that on top of my head.
Steps to Design an Arc Using TouchGFX
-
Set Up Your Environment:
- Ensure you have the TouchGFX Designer and STM32CubeIDE installed.
- Create a new TouchGFX project or open an existing one.
-
Create a Custom Widget:
- TouchGFX does not have a built-in arc widget, so you will need to create a custom widget to draw an arc.
-
Implement the Arc Drawing Logic:
- Override the
draw
method of the custom widget to implement the arc drawing logic.
- Override the
-
Add the Custom Widget to Your Screen:
- Add the custom widget to your screen in the TouchGFX Designer.
Example Code
Below is an example of how you can create a custom widget to draw an arc in TouchGFX:
1. Create a Custom Widget Header File (ArcWidget.hpp
)
#ifndef ARC_WIDGET_HPP
#define ARC_WIDGET_HPP
#include <touchgfx/widgets/Widget.hpp>
#include <touchgfx/hal/Types.hpp>
class ArcWidget : public touchgfx::Widget
{
public:
ArcWidget();
virtual void draw(const touchgfx::Rect& invalidatedArea) const;
void setArc(int16_t x, int16_t y, int16_t radius, int16_t startAngle, int16_t endAngle, touchgfx::colortype color);
private:
int16_t centerX;
int16_t centerY;
int16_t radius;
int16_t startAngle;
int16_t endAngle;
touchgfx::colortype arcColor;
};
#endif // ARC_WIDGET_HPP
2. Implement the Custom Widget (ArcWidget.cpp
)
#include <touchgfx/Color.hpp>
#include <touchgfx/widgets/canvas/PainterRGB565.hpp>
#include <touchgfx/widgets/canvas/CanvasWidgetRenderer.hpp>
#include "ArcWidget.hpp"
ArcWidget::ArcWidget()
: centerX(0), centerY(0), radius(0), startAngle(0), endAngle(0), arcColor(touchgfx::Color::getColorFrom24BitRGB(0, 0, 0))
{
}
void ArcWidget::setArc(int16_t x, int16_t y, int16_t radius, int16_t startAngle, int16_t endAngle, touchgfx::colortype color)
{
centerX = x;
centerY = y;
this->radius = radius;
this->startAngle = startAngle;
this->endAngle = endAngle;
arcColor = color;
invalidate();
}
void ArcWidget::draw(const touchgfx::Rect& invalidatedArea) const
{
touchgfx::Canvas canvas(this, invalidatedArea);
touchgfx::PainterRGB565 painter(arcColor);
canvas.setPainter(painter);
// Draw the arc using the canvas
canvas.moveTo(centerX + radius * cosf(startAngle * M_PI / 180.0f), centerY - radius * sinf(startAngle * M_PI / 180.0f));
for (int angle = startAngle; angle <= endAngle; angle++)
{
canvas.lineTo(centerX + radius * cosf(angle * M_PI / 180.0f), centerY - radius * sinf(angle * M_PI / 180.0f));
}
canvas.render();
}
3. Add the Custom Widget to Your Screen
- Open the TouchGFX Designer.
- Drag and drop a
Custom Container
onto your screen. - Replace the
Custom Container
with yourArcWidget
in the code.
4. Use the Custom Widget in Your Application
#include <gui/screen1_screen/Screen1View.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include "ArcWidget.hpp"
Screen1View::Screen1View()
{
}
void Screen1View::setupScreen()
{
Screen1ViewBase::setupScreen();
ArcWidget arc;
arc.setArc(100, 100, 50, 0, 180, touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
add(arc);
}
void Screen1View::tearDownScreen()
{
Screen1ViewBase::tearDownScreen();
}
Explanation
-
Create a Custom Widget:
- Define a custom widget class
ArcWidget
that inherits fromtouchgfx::Widget
. - Implement the
draw
method to draw the arc using theCanvas
class.
- Define a custom widget class
-
Set Arc Parameters:
- The
setArc
method sets the parameters for the arc, including the center coordinates, radius, start angle, end angle, and color.
- The
-
Draw the Arc:
- The
draw
method uses trigonometric functions to calculate the coordinates of the arc and draws it using theCanvas
class.
- The
-
Add the Custom Widget to Your Screen:
- Add the custom widget to your screen in the
setupScreen
method of your view class.
- Add the custom widget to your screen in the
By following these steps, you can create and display an arc using TouchGFX in your embedded application.
Regards,
Software engineer at ST (TouchGFX)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-15 2:13 AM
Is there any other way to do this task.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-15 8:58 PM
Hi, I’m encountering several issues when trying to build this code. It seems that some functions might be missing from the canvas libraries. Could you provide the supported libraries or functions? Please see the attached file for the specific issues I’m facing.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2024-10-18 7:06 AM
Hello @sai1 ,
It looks like you are using old libraries. To get the newest, try to regenerate code from STM32CubeMX.
Regards,
Software engineer at ST (TouchGFX)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2025-02-28 2:38 AM
Hi sai1,
did you succeed with building your own widget? I"m getting exactly the same errors as you've shown on the above picture.
I"m using TouchGFX version 4.24.
Regards
