drawed CircleCheckBox

[JNova.0]

Hello,

I needed to create some drawed ones elements. My request was the ability to change the color on the fly, the ability to set the day and night mode and possibly change the dimensions.

I am sending here the first working version without setting the dimensions. I set the colors globally, but here I put them directly in the container.

I'm not changing the dimensions here, a newer version will do that. The way I do it is definitely not the best and I will probably edit it before publication.

Now I'm putting it here more for the purpose of getting feedback.

Is this way the right way?

Is there something I'm doing wrong in the code and should I do it differently?

I have created several checkboxes, radiobuttons, buttons, togglebuttons, sleder ...

In case I'm not doing it completely wrong, I'll put them here.

For jnCircleCheckBoxA:

bool checked;

setChecked(false);

determines the state of the checkbox.

bool enabled;

setEnabled(true);

determines whether the checkbox can be clicked

bool selected;

setSelected(false);

determines the active (selected) element when using the keyboard

bool transparent;

setTransparent(true);

sets the visibility for the background and thus sets the transparency

When I create a component directly in my code, I use a constructor with set values. Now the initialization is done in the Base file, I can't write there, so a "setup" function is created to reset the default values and redraw the component.

Callback processing in the screen

Screen1View.hpp

...
private:

    /*
     * Callback Declarations
     */
touchgfx::Callback<Screen1View, const jnCircleCheckBoxA&, ClickEvent::ClickEventType> jnCircleCheckBoxACallback;

    /*
     * Callback Handler Declarations
     */
    void jnCircleCheckBoxACheckedCallbackHandler(const jnCircleCheckBoxA& button, ClickEvent::ClickEventType eventtype_);

Screen1View.cpp

...
Screen1View::Screen1View():
jnCircleCheckBoxACallback(this, &Screen2View::jnCircleCheckBoxACheckedCallbackHandler),
{
jnCircleCheckBoxA1.setClickCallback(jnCircleCheckBoxACallback);

    jnCircleCheckBoxA1.setup(true, true, false, true); // checked, enabled, selected, transparent

...

void Screen1View::jnCircleCheckBoxACheckedCallbackHandler(const jnCircleCheckBoxA& button, ClickEvent::ClickEventType eventtype_)
{
    // Handle button click event (PRESSED or RELEASED)
    if (eventtype_ == ClickEvent::PRESSED) {
        // Handle button pressed event
    touchgfx_printf("PRESSED \n");
    } else if (eventtype_ == ClickEvent::RELEASED) {
        // Handle button released event
    touchgfx_printf("RELEASED \n");
    }
}

When I fine-tune the element according to ST standards, I'll put it in the "Share your Custom Widgets!" section.

The code shows how to write a callback so that the action is written to the screen.

Thank you in advance for your comments and suggestions.
JN

PS. Just a side note. Unable to insert file with extension "tpkg" when uploading. This is a custom container. It would not be wise to whitelist this extension. Now the file must be repackaged, for example, into 7z.

[JNova.0]

I have not yet received any suggestion or reminder. Maybe it's because I posted on Friday night. In my opinion, people from the IT community do not solve the day or the hour, but maybe I'm wrong and maybe I've been doing everything wrong all my life :-).
So I'll try to ask directly and hopefully get an answer.
I really hope it's not written badly and at least something could be used.
Changing the size due to the impossibility of adding custom parameters to the "Properties" panel can be implemented using parameters in the constructor. However, this will reset all the same elements in the project :-(.
Creating a procedure named, for example, setupSize, where I set the shape (none, circle, square, rounded square), check mark (check, cross), element width, line thickness, colors ...
Of course, many other items can be set, but this is essentially the same problem.
The method I outlined has, from my point of view, several fundamental problems.
What I am going to set with the "setup" or "setupSize" code is not visible in the TouchGFX designer.
It would be great to be able to add your own "container" and "widget" with the ability to set parameters in the "Properties" panel, but this is currently not possible. Everything is packaged in a DLL and resources from TouchGFX are not available. I assume that this functionality cannot be avoided in the future, but at the moment it is simply not possible.
I have a component created that I am not adding with TouchGFX but from code. There I can set what I need (what I outlined in the previous lines). Thanks to the fact that the compilation in the simulator does not take long, it is not a problem to modify the graphics even from the code. I suppose this is not quite an ideal solution for TouchGFX, but on the other hand, it allows absolute control over the entire program and is perhaps a better solution for various graphics adapters, where the layout of items can be adjusted in the code according to the resolution of the adapter.
I tried to find some sample example or code that allows more variability in TouchGFX, but I couldn't find anything. It's all tied to what TouchGFX can/can't display. It does not currently display the external code. I have read in some posts that users are asking for a "user code" option. I can't judge if that would help. In any case, I see the ability to import custom containers and widgets with a customized "Properties" panel as the most important thing. I assume that there would be an exponential increase in the use of this tool.
Can you advise how to change the parameters (size, color) of the component in the current situation?
Thank you all in advance for your response and sorry for my English. It's not my English, but some google translator's 🙂 .
JN

[GaetanGodart · Accepted solution]

Hello @JNova.0 ,

1) Regarding feedback on your custom container / custom widget :

1. I really appreciate the comments on your code and it is great to have a callback to access it from the screen!
2. I do not understand why you created a setup function. If you want to do some actions (call functions, set values etc), you can just do that in the void jnCircleCheckBoxA::initialize() function generated by TouchGFX Designer.
3. A small improvement could be to only modify and invalidate the elements affected when changing some variables. For example in the setChecked function, you call reDraw at the end which does a bunch of checks but we only need the last 3 lines "line1.setVisible(checked);", "line2.setVisible(checked);" and "invalidate();". By doing so, you could also limit the erea to invalidate by only invalidating line1 and line 2.
   Your function would go from that (currently) :
   void jnCircleCheckBoxA::setChecked(bool activeState) {
       checked = activeState;
       reDraw(); // Redraws the elements of the checkbox.
   }
   To that :
   void jnCircleCheckBoxA::setChecked(bool activeState) {
       checked = activeState;
       line1.setVisible(checked);
       line2.setVisible(checked);
       line1.invalidate();
       line2.invalidate();
   }

2) Regarding your second post :

Changing the size due to the impossibility of adding custom parameters to the "Properties" panel can be implemented using parameters in the constructor.

Yes, it is not possible to change the parameters of a custom container / custom widget directly in Designer. This would indeed be a great feature!

---

However, this will reset all the same elements in the project :(

---

I do not understand why this would reset the parameters of all the same elements in your project.
Currently, in your project, if you insert 2 of your checkboxes, you can then modify each one individually.

Creating a procedure named, for example, setupSize, where I set the shape (none, circle, square, rounded square), check mark (check, cross), element width, line thickness, colors ...
Of course, many other items can be set, but this is essentially the same problem.
The method I outlined has, from my point of view, several fundamental problems.
What I am going to set with the "setup" or "setupSize" code is not visible in the TouchGFX designer.

---

Yes, this is the only way currently. As you mention, it is not the most user friendly but that is because Designer is made to make it easier to create designs using TouchGFX, the Designer does not pack all the features of TouchGFX, it is not possible to fit all the features and possible customization of TouchGFX in Designer without making it too cluttered.
As you mention after, some people prefer to work with the code as it gives them full control.

---

It does not currently display the external code.
I have read in some posts that users are asking for a "user code" option.

---

I am sorry, I do not understand what you meant from those 2 sentences.

In any case, I see the ability to import custom containers and widgets with a customized "Properties" panel as the most important thing. I assume that there would be an exponential increase in the use of this tool.

---

I definitely agree, this would make a lot of sense to add this feature.

Can you advise how to change the parameters (size, color) of the component in the current situation?

---

Just like you did with changing the color to transparent : creating dedicated methods for it.
You could for instance have a variable storing the scaling factor, one storing the background color, one storing the border color, one storing the check mark color.
Then, all you need to do is to modify your reDraw function to implement those new variables.

For instance, you could create a function to change the border color such as :
void jnCircleCheckBoxA::setup(int red, int green, int blue) {
    contour.setColor(touchgfx::Color::getColorFromRGB(red, green, blue));
    contour.invalidate();
}

You could resize the circles by using the method setRadius such as contour.setRadius(BaseRadiusContour * scalingRatio);

You can find the documentation for the circles here :

• https://support.touchgfx.com/docs/development/ui-development/ui-components/shapes/circle
• https://support.touchgfx.com/docs/api/classes/classtouchgfx_1_1_circle

Hope this helps.
Don’t hesitate to give us a feedback or give more precisions and tell us if the issue is solved! 😊

[GaetanGodart]

Hello @JNova.0 ,

Have you been able to move forward with your project?

Without answer from you we will close this thread.

Regards,