How is TouchGFX preview generated? How to change it if it doesn't match?

[unsigned_char_array]

I'm not satisfied with the limited alignment options of the text field in the standard button with label object. My text field is left aligned, but I want an offset without using spaces. I copied the cpp file and added a horizontal offset to the text rendering part in draw(). This works (tested in simulator).

This is the code I changed:

        case TEXT_ROTATE_0:
            offset = (this->getHeight() - height) / 2; // Prefer round down
            labelRect = Rect(0+10, offset, this->getWidth(), height); //  added 10 pixels horizontal offset
            break;

However the preview of the button in the editor doesn't change. Only when I run the simulator does it update.

How is TouchGFX preview generated? Can it be changed?

[tdecker2]

I'm quite sure you can't change the behaviour of the TouchGFX Designer. The program is only generating source code, but does not interpret whatever you change or add there.

[Mohammad MORADI ESFAHANIASL]

Hello @unsigned_char_array ,

Unfortunately, it is not possible to change the GUI preview. It is generated inside the designer and the source code for it is not available to the public.

Best regards,

[unsigned_char_array]

Our graphical designer came up with button designs with translatable left aligned or bottom aligned text. The left side of the text overlaps with the button edge in TouchGFX. Some buttons have text at the bottom. So I want an offset.
Vertical alignment can be done with new lines and horizontal alignment with spaces, but adding whitespace is an ugly hack and since all text fields for buttons are fixed I cannot modify them at run time and I don't want to modify the translations with whitespace. Also the precision is limited with whitespace and I prefer pixel level alignment. Hence my button source code modification.

When creating new widgets or modifying existing ones it makes it hard to see what it will look like (without running the simulation and taking a screenshot of each screen). Is there any workaround?

Are there any plans to add vertical alignment and/or horizontal/vertical offsets to text inside buttons. Right now options are rather limited. And to see it natively supported would help a big deal.

Also having a configurable menu for a custom widget inside TouchGFX would be great. Are there any plans for something like this?

[Mohammad MORADI ESFAHANIASL]

I totally understand the points you mentioned. 

Currently, there are no major plans for changing the text handling options. However, I will definitely convey your message to the rest of the team for future planning. 

[unsigned_char_array · Accepted solution]

Using flex button solved my problem with text alignment of the label of a button.

While it doesn't solve the issue where modifying a widget doesn't change the preview it did solve my initial problem for alignment. In an ideal scenario you can create widgets that also have custom configuration options available in the designer (perhaps via a json file) that it will use to initialize the widget and it would have a custom designPreview() method specifically for the designer when placing the widgets.