creating custom widget using code stm32 cube ide

[sai1]

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?

[GaetanGodart]

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,

[Tesla DeLorean]

Duplicative, pick one person to post, or post once under one account

https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/create-a-custom-widget-using-code-in-stm32cubeide/td-p/730855

https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/creating-custom-widget-using-code-stm32-cube-ide/td-p/730902

[sai1]

Actually, I have a display board and want to design an arc using the C language. What steps should I follow?

[GaetanGodart · Accepted solution]

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

1. Set Up Your Environment:

   • Ensure you have the TouchGFX Designer and STM32CubeIDE installed.
   • Create a new TouchGFX project or open an existing one.

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

3. Implement the Arc Drawing Logic:

   • Override the draw method of the custom widget to implement the arc drawing logic.

4. 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 your ArcWidget 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

1. Create a Custom Widget:

   • Define a custom widget class ArcWidget that inherits from touchgfx::Widget.
   • Implement the draw method to draw the arc using the Canvas class.

2. Set Arc Parameters:

   • The setArc method sets the parameters for the arc, including the center coordinates, radius, start angle, end angle, and color.

3. Draw the Arc:

   • The draw method uses trigonometric functions to calculate the coordinates of the arc and draws it using the Canvas class.

4. Add the Custom Widget to Your Screen:

   • Add the custom widget to your screen in the setupScreen method of your view class.

By following these steps, you can create and display an arc using TouchGFX in your embedded application.

Regards,

[sai1]

Is there any other way to do this task.

[sai1]

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.

[GaetanGodart]

Hello @sai1 ,

It looks like you are using old libraries. To get the newest, try to regenerate code from STM32CubeMX.

Regards,