Skip to main content
GS1
Senior III
October 2, 2022
Solved

Is it possible to set up my own style / skin for e.g. radio buttons and checkboxes, etc.?

  • October 2, 2022
  • 3 replies
  • 1322 views

I have a new project with TouchGFX and currently create a huge bunch of new screens.

As I have my own set of images (.png) for buttons etc. I do not use the integrated skins.

When placing a radio button or checkbox now with my own images, it is very time consuming to select the images for e.g. 4 states of a radio button from my own set of images.

My question therefore: Is it possible to create a customized skin so that I can select my preset skin images for the standard checkboxes and progress buttons etc?

This would speed up the creation of setup menus dramatically!

I could not find such a feature.

This topic has been closed for replies.
Best answer by Osman SOYKURT

Hi GS@S,

Yes It's possible :)

Here's how you can do it :

1- Go to your TouchGFX installation path, and navigate to this folder : "TouchGFX\4.20.0\designer\Skins"

2- Copy paste one of the Folder already there, for example "Blue", and rename you new folder with the name you want for your own customized skin :

0693W00000UnCWbQAN.png 

3- Open you new folder, and edit the skin.json file. You'll see on the first line, an entry called "Name". Replace the value with your new skin name :

{
 "Name": "Own_customized_skin",
 ...
}

4- Replace all the images you need in each of the folders

0693W00000UnCXyQAN.png 

Be careful, TouchGFX Designer will warn you if the image you've put doesn't suit, for example, for check_buttons, all of the buttons need to have same size.

6- If you need to rename the images, edit again the skin.json file to add/rename an image. You'll probably also need to edit it if your image has other dimensions than the one you replace.

Hope it helps.

/Osman

3 replies

Osman SOYKURT
Osman SOYKURTBest answer
ST Technical Moderator
October 3, 2022

Hi GS@S,

Yes It's possible :)

Here's how you can do it :

1- Go to your TouchGFX installation path, and navigate to this folder : "TouchGFX\4.20.0\designer\Skins"

2- Copy paste one of the Folder already there, for example "Blue", and rename you new folder with the name you want for your own customized skin :

0693W00000UnCWbQAN.png 

3- Open you new folder, and edit the skin.json file. You'll see on the first line, an entry called "Name". Replace the value with your new skin name :

{
 "Name": "Own_customized_skin",
 ...
}

4- Replace all the images you need in each of the folders

0693W00000UnCXyQAN.png 

Be careful, TouchGFX Designer will warn you if the image you've put doesn't suit, for example, for check_buttons, all of the buttons need to have same size.

6- If you need to rename the images, edit again the skin.json file to add/rename an image. You'll probably also need to edit it if your image has other dimensions than the one you replace.

Hope it helps.

/Osman

ST Software Developer | TouchGFX
GS1
GS1Author
Senior III
October 3, 2022

Wow! Thank you for this information. Will help a lot!

BR GS

Osman SOYKURT
ST Technical Moderator
October 3, 2022

You're welcome!

ST Software Developer | TouchGFX