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 

[JTP1]

Hello

Yes, add these function definitions to DatePICKER.hpp under public items:

void setDay(int16_t day) // day 1-31
{
	if(day>=1&&day<=31) 
		numberDateScrollWheel.animateToItem(day-1, 0); // 0=  first day in wheel so decrease 1
}

void setYear(int16_t year) // year 1900 -
{
	if(year>=1900&&year<(yearScrollWheel.getNumberOfItems()+1900)) 
	    yearScrollWheel.animateToItem( year-1900, 0); // 1900 is first in wheel so decrease  1900
}   

void setMonth(int16_t month) // month 1-12
{
	if(month>=1&&month<=12) 
		monthScrollWheel.animateToItem(month-1, 0); // 0= january in wheel so decrease 1
		
}

It should do pretty much what you need :D

You can also add number of items of yearScrollWhell to get current year + some extra availabe

Br. JTP

[VL.3]

Rather silly question, but how to import both Date and Time widgets? I can only import one of them, the other one gives me an error that the files already exist when importing. Manually deleting existing files didn't help cause I got other errors

[JTP1]

Hello

This importing function is bit problematic. See attached widgets, I've update those that there is no duplicate resources any more.  Made and tested with version 4.21.4.

Seems that 4.22.0 and later version has bug in importing function. Those cant handle even same font, but importing crashes if you have same font allready used on the project you are importing to.These example widgets uses Verdana- font.

There seems to be workaround so that select first some other font than verdana to all existing typographies of your project. Then delete the font file verdana.ttf from \assets\fonts\ folder and then import one widget. Repeat, if need to import another widget. When finished importing, restore the font selections if needed.

Please note that if you try to import to widgets with same/used font, even that importing is not finished, it imports something since the preliminary inspection doesn't find any problem and after this importing same widget will fail on the pre-check.

Same problem occurs even if widget is made and exported from 4.23.0.

Br JTP

[JTP1]

Hello

Confirming that import font bug seems to be fixed in the 4.23.1 version.

Now its possible to even import all example containers to same project when using picker widgets from the post above.

Please share if someone has new ideas or needs for example containers !

Br JTP

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

[Thomas8607]

Hi Gaetan!

I modified the T9 keyboard a bit, what is finished is what it should be, but I can't supplement it with the following:

- a negative sign can only be placed in the first place (I entered a condition, but it doesn't work as I thought)
- if the buffer reaches the set limit, the keys cannot be pressed (numbers and "-", "."). If the size of the buffer is 10, I can still write into it and the simulator crashes
- only one decimal point can be entered and not in the first place.

If there is a negative signal in the buffer, then the output is int32_t, if there is not, then uint32_t. If there is a decimal point, it should be a float.
I don't know if this can be solved.

How can the widget be packaged so that I don't have to attach the whole project?

I would like to ask for help with these, if possible.

Thank you!

Regards,
Thomas Soronics

[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