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 

[Juliette CRESPO]

Here is a zip file containing a guide and the keyboard custom container in the .tpkg format.

/Juliette

[ShivDesh]

Hello @Juliette CRESPO ,

 

Thanks for sharing the keypad/board widget,

Could you please let me know what steps should I follow or how shall I use it touchgfx application?

I mean I need to get the typed names (from keyboard) into username and password textarea. I have imported the .tpkg file, able to add the widget into screen and now what next to do to get the typed data into Username and Password for authentication.

 

 

BR,
Shiv

[GaetanGodart]

Hello @ShivDesh ,

 

This thread is mostly to share custom widgets, not to ask questions otherwise it will get spammed very fast. :)

If you want to have an answer, I suggest you to create a new thread with details of what you want to do and with a reference to the custom container you want to use.

To give you a quick answer, the keyboard have a function called getText in the Keyboard.cpp that returns the buffer storing the data, so it seems you should call that function and write the returned value into your desired textArea.

If this answer is not enough, please create a new thread.

 

Regards,

[Sanchit1]

Thank you so much!

[Juliette CRESPO]

Here is a zip file containing a keypad in .tpkg format and its guide.

[NicoEFI]

I'm trying to use your keypad. In my screen I added the keypad container. The circles 1, 2, 3 ... will be buttons.
If I select button 3 for example, I would like the value of savedTextArea to appear in the screen above button 3 and not in the keypad container. It would also be necessary for it to become a variable linked to button 3 that I could later save on an eeprom. Same for each button.
I tried several things but I can't do it. Could someone give me an idea, a piece of code to move forward?

[NicoEFI]

up please

[Juliette CRESPO]

Here are different selectors: one for the date, one for the numbers and two for the time. This zip file contains the selectors in .tpkg format and a guide.

[Flemming Gram CHRISTENSEN]

Hi Juliette.
Great!

[Roger.ch]

Hello Juliette. 

Thank you for your keypad widget. 

I have integrated it into a separate container. 

Do you have any idea how I call a function of the parent container after the poundFlexButton is depressed?

Sequence: 

The keypad is invisible. 

When I press a button in my container the keypad becomes visible. Works. 

When a string is entered the keypad becomes invisible again when the poundFlexButton is pressed. This works. 

Now the parent container should realize that it can call the function Keypad::getText and take the text?

Can you give me a tip?

Best regards, Roger

[JTP1]

Hi Roger. Here is simple example how to get callback from keypad after pound is pressed.

[Roger.ch]

Hi JTP

Thanks a lot for your help.

Exactly what I was looking for.

You are saving my weekend right now.:grinning_face:

Have a nice weekend.

Best regards,

Roger

[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

 

[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