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 

[Mohammad MORADI ESFAHANIASL]

Hello @NicoEFI,

I think you can consider your button with the text area corresponding to it as a custom container which contains a variable for saving the typed value. In this way, when the circular button is pressed, you can call a function that copies the keyboard buffer (Keypad::getText()) to your variable, and then you can display that value in the corresponding text area. 

I hope this helps you!

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

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