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 

[unsigned_char_array]

Thank you. I will try to see if I can modify the code so it won't need the define. In addition I will see if I can do some optimizations on the draw method. Right now rendering is done in software using for loops. But QR codes have lots of rectangles so hardware acceleration can be used to draw those. Inverting the loop may also increase performance (right now the loop iterates over pixels, not over QR-code bits).

[Mohammad MORADI ESFAHANIASL]

Hello @unsigned_char_array ,

As @JTP1 has mentioned, it is due to the mismatch between the bpp set for your project and the widget's bpp. 
I have attached a compressed file containing an example and a document for the widget.

I hope it helps you.

[unsigned_char_array]

His solution worked. I was also able to get it working without a define by getting the bit depth at runtime.

I'm now looking for a way to easily generate a tpkg file without using the TouchGFX editor. Let me know if that is possible and what tpkg command line arguments I should use.

I have my code on github: https://github.com/ChrisIdema/TouchGFX_QRCodeCustomWidget/tree/develop

[codebuk]

Hi, Gaetan,

This is fantastic. 

Is this available on github so I can track the changes?

Some other minor comments: 

 - We find re-importing containers very error prone - especially given fonts needs a to be deleted that may be used elsewhere and lots of files need to be manually removed. 

- We are concerned about the risk of importing malicious code - we would prefer to be able review the changes. 

Cheers,

Dan

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

[Mohammad MORADI ESFAHANIASL]

Hello @unsigned_char_array ,

Unfortunately, there are no command line instructions for exporting custom containers, but you can customize the Export Configurations. In case you need more documentation on exporting, you can take a look here .

Best regards,

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