Share your Custom Widgets!

[Juliette CRESPO]

When creating a UI project, you may need widgets that are not part of the TouchGFX library. To create your own graphical element, the TouchGFX team suggests using the Custom Container approach. Since TouchGFX 4.20 it is possible to export and import Custom Containers into different projects. 

The TouchGFX team is working on developing new custom containers that could be useful for our own projects. You will find them under this post. The first widget is a keyboard. We hope that the idea will please you and that it will be useful for your projects ;)! 

We invite you to do the same. In the guide attached you will learn how to create your own widgets and how to export them. We wish to create a space where the community can find and share custom widgets. 

To keep this space a good place for collaboration between all of us, we invite you to share your project in a zip format which includes you widget (.tpkg) and a short document explaining your widget. Your post needs also to include at least one screenshot of your widget running on the simulator. Refer to the keyboard widget for an example.

Thanks for your contribution and have fun !!  

/The TouchGFX team 

[GaetanGodart]

Hello,

 

Please find attached a new custom widget (tpkg file and pdf instructions).

It a T9 keyboard. the old style of keyboards used on phones (not smartphones).
It is more compact and therefore it is suitable for small screen projects.

 

Regards,

[JTP1]

Hello Gaetan

Nice work !

Perhaps cursor (just static vertical bar '|'.. or even blinking) would be useful addition. Now when press space, you cannot see that in the text area.

Br JTP

 

[Mohammad MORADI ESFAHANIASL]

Hello wonderful community,

I'm glad to share a custom QR Code widget with you that you can use to create a QR Code either from text provided in the code or text from a Text Area in the designer. 
It is worth mentioning that the size of the QR Code symbol depends on the version you choose (from 1 to 40, you can read more about the different sizes here ) and the scale (i.e. multiply factor). 

QRCode widget

 

Best regards,

[unsigned_char_array]

Can you please give an example or documentation? I imported your widget in an empty project and I put in a single container in a screen (also added a button and a background). I get 3 QR codes in the background. I did not write a single line of code, this is the default behavior of your widget.

 

 

[JTP1]

Hello array

Seems that your project is having 24 bit colors and as default, this widget uses 16 bit color.

So browse to the \test15\TouchGFX\gui\include\gui\widgets\ folder and open 'QRCodeWidget.hpp' file. There comment 16 bit define and uncomment 24bit define. Like this

//Uncomment based on the selected display bpp (Bit per Pixel)
//#define QR_WIDGET_USE_8BIT_COLOR 1 
//#define QR_WIDGET_USE_16BIT_COLOR 1
#define QR_WIDGET_USE_24BIT_COLOR 1

then it works:

Hope this helps.

Br JTP

 

[GaetanGodart]

Hello @codebuk ,

 

I assume you are talking about the T9 keyboard post.

Unfortunately, there is no GitHub to track the changes of the custom widgets.
I personally see 2 reasons for it :

1. we are not expecting to make changes on those widgets
2. we expect users to add their own widgets so we don't want to force them to have a GitHub for it too

Why would you re-import the widget? If a change has been made to it, one solution would be to download the new one and use a file comparator to see the changes and apply them to your "old" version. Usually the changes are not that big.

I totally understand your comment about malicious code. Just a reminder that only the files in the "GUI" folder are "hand written", the code in the "generated" folder are generated by Designer every time you click on the "generate" or "flash device" button in Designer.

 

Regards,

[unsigned_char_array]

@GaetanGodart wrote:

1. we are not expecting to make changes on those widgets
2. we expect users to add their own widgets so we don't want to force them to have a GitHub for it too

Why would you re-import the widget? If a change has been made to it, one solution would be to download the new one and use a file comparator to see the changes and apply them to your "old" version. Usually the changes are not that big.

---

Not expecting changes in code is the worst mistake a software engineer can make. Think of bugfixes, optimizations and updating so it keeps working when breaking changes are made in the framework.

You don't need a github account to view of download code from github. Putting it on github allows people to also create forks (and those forks can be hosted or posted anywhere, since git is decentralized).
ST made a different decision about custom flashloaders. Users were asked to upload those to github. Though ST has stopped handling pull requests for some reason.

I don't think scrolling through forum posts to look for attachments is the best way to share these widgets. Forums are also shut down all the time. You also have to import/install the widgets before you can see the code since people only upload the package, not the source files. To do file comparison you would have to duplicate your entire project on your drive and import different versions and then to a folder comparison. That is tedious. This is why I asked how the packaging process works (https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/tpkg-file-format-unclear-import-error-bug-or-undocumented/td-p/659692). I don't like binary files, build artifacts or packages in my source code repository.

I too faced the issue of re-importing. It created errors. I had to manually delete the source files of the old package to import a new one. The entire point of packaging is to avoid things like this.

Please reconsider the current method of packaging, importing and sharing custom widgets.

 

[t.decker]

Marquee text scroll widget

Based on the examples of @Michael K in https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/marquee-text-character-from-left-to-write/m-p/165237 I created a TextAreaMarquee widget. It can easily be used as a TextArea replacement which automatically scrolls through your text when it doesn't fit in the widgets dimensions.

A short demonstration video is attached.

Note: I had issues importing this into an empty project, because the "Default" typography already exists. I had to rename the existing typography before starting the import. Check your texts, typographies, fonts and languages after import!

Note2: @Juliette CRESPO please edit the opening post and replace "share your project in a zip format" with ".7z" or similar. The .zip file ending is for whatever reason not allowed.

[GaetanGodart]

Hello,

 

We made a color picker widget with an example and some documentation!

You can get the currently selected color on the wheel as a touchgfx::colortype format that can directly be used in your widgets (box and others).

 

Enjoy!

[goleszek]

Hello Gaetan,

thanks for sharing this widget, it works quite cool :smiling_face_with_smiling_eyes: 

I thought about something similar, yet using a predefined palette.  The idea was loading it from a CLUT table (out of L8_xxx bitmap) or define it directly as an array of RGB colors.

LTone board running ColorPicker widget

[Junde]

The number keyboard and the demo show how to use it.

 

 

[dcbrian]

Hi, I tried to build a project with this widget, but I ran into some compiler errors.

 

My-Project-Path/Appli/TouchGFX/gui/src/containers/BTN_num.cpp:14:18: fatal error: dbger.h: No such file or directory

14 | #include "dbger.h"

 

My-Project-Path/Appli/TouchGFX/gui/src/containers/KB_num.cpp:2:10: fatal error: gui/common/FR_9K_defs.h: No such file or directory

2 | #include <gui/common/FR_9K_defs.h>

| ^~~~~~~~~~~~~~~~~~~~~~~~~

 

Did your perhaps omit this files in error? The demo project does not include either of those. Should I get them from elsewhere?

 

Thanks for any help.

[Junde]

alphabetical keyboard

 

 

 

[GaetanGodart]

Hello,

 

Please find attached a new custom widget (tpkg file and example of usage).
It is a confirmation/validation slider, the type you have on payment services.
I hope you like it! :smiling_face_with_smiling_eyes:

To see how I created the widget and how to use it watch this video !

 

Regards,

[jrf]

Hi Gaetan!

I'm looking to create a text area that also acts as a progress meter, with the colour of the text filling and emptying vertically as a progress meter might. Is there any way this is possible? Would it have to be implemented as a custom widget, and is that something that you guys at ST might create in the future?

I've attached some concept art for what I'm trying to achieve.

All the best,

JRF

 

 

[unsigned_char_array]

---

@jrf wrote:

Hi Gaetan!

I'm looking to create a text area that also acts as a progress meter, with the colour of the text filling and emptying vertically as a progress meter might. Is there any way this is possible? Would it have to be implemented as a custom widget, and is that something that you guys at ST might create in the future?

I've attached some concept art for what I'm trying to achieve.

All the best,

JRF

---

This should be a custom widget. Too specific to be generic.
The way I would implement it is using multiple layers. You have a background layer with the colors you want. You can animate them (or mask them partially with a white block depending on the level). Then the middle layer is a black image with 7-segment cutouts (transparent). Then on the top you have all the segments in black. In TouchGFX you can simply hide certain segments, depending on the value of the digits, to reveal the background.
Alternatively you can create 10 images with the cutouts and select which one should be visible. You might also create a custom 7-segment font with inverted characters.
If you need help create a new topic and mention me. I can help you out.

[Marc_LM]

Here is a first attempt at custom widget to draw images inside a circle instead of a rectangle.
It is not fully featured but good enough to share.

From the Docs:
https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/custom-widgets 
https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/canvas-widgets 

[unsigned_char_array]

---

@Marc_LM wrote:

Here is a first attempt at custom widget to draw images inside a circle instead of a rectangle.

---

Where?

[jumman_JHINGA]

Hii @Juliette CRESPO  

A while ago, I developed a custom keypad without using any custom container. Instead, I added the button images directly to my project assets and manually modified the CustomKeyboard files provided in the Keypad example.

Now, I’d like to convert this setup into a proper custom widget, so it can be reused more elegantly and integrated cleanly across my project.

Could you please guide me on how to structure it as a custom keypad widget within TouchGFX?

I've attached a snapshot of my current keypad implementation below for reference.

Thanks in advance for your support.