TouchGFX Simulator skin not working

[unsigned_char_array]

I've made custom simulator skin for my project. My display is 1024*600 pixels (16-bit, rgb565, landscape). Project runs fine in simulator without skin and also on target.

When adding the skin the corner of the skin is at the corner of my window, so the top and left part of bezel obstructs the content.
https://support.touchgfx.com/docs/development/ui-development/designer-user-guide/config-view#simulator
"The X and Y properties determine the position of the simulator on the skin."
I found it actually does the opposite. It moves the skin relative to the simulator. So you need negative coordinates to center the simulator.
Furthermore the transparent hole in the center is not showing the content. Only at the transition of the bezel to the transparent hole can I see a line where I can make out parts of the content. I can see my desktop through the hole.

I tried TouchGFX 4.23.2 and 4.24.0

Creating a new project from scratch has the same problem. I created a project using STM32H735G-DK  (480*272 pixels, 24-bit, rgb888, landscape) and then added a skin. I get the same result.

[Osman SOYKURT]

Hello @unsigned_char_array ,

Indeed the transparent hole in the center does not show the content, you need to have skin that has no transparency at the position of your simulator.

In the example above, the red zone is the border of your skin, the yellow zone is zone that will be visible from your simulator. The transparent and semi-transparent will not be displayed at all.

Concerning what's written in our documentation : "The X and Y properties determine the position of the simulator on the skin." There's no problem with that sentence.

On the example above, if I want to place my simulator on the yellow zone, I'll put an X and Y with positive value, for instance coordinate 140,140. The origin (0,0) is placed on top left corner of my skin (same as TouchGFX coordinate, so in the red zone, top left.

Hope it helps.

[unsigned_char_array]

---

@Osman SOYKURT wrote:

Indeed the transparent hole in the center does not show the content, you need to have skin that has no transparency at the position of your simulator.

---

I'm glad you found the bug. Will it be fixed? My skin has rounded corners on the external corners and also covers the screen for rounded corners of the display itself, so it needs transparency. With just transparency for the external corners it doesn't work either. The transparency itself works, but I simply don't see the simulator. There should be an easy fix or a workaround (fix the problem, remove transparency or give the user a warning message).

I've attached two skins, one with rounded corners at the outside and one without. Both display correctly, but only the one without transparency shows the simulator inside.

---

@Osman SOYKURT wrote:

Concerning what's written in our documentation : "The X and Y properties determine the position of the simulator on the skin." There's no problem with that sentence.
On the example above, if I want to place my simulator on the yellow zone, I'll put an X and Y with positive value, for instance coordinate 140,140. The origin (0,0) is placed on top left corner of my skin (same as TouchGFX coordinate, so in the red zone, top left.

---

My bad. It was hard to see what happened when I could only see part of the simulator.

[Osman SOYKURT]

Hello @unsigned_char_array ,

Yes, I've informed the team about the issue, and we're going to address it. However, I'm unable to give you a specific date for when it will be fixed. I'll update you as soon as I have further details about the solution. Thanks for letting us know and for sending the additional information :grinning_face:

[unsigned_char_array]

I've tested a few things with TouchGFX 4.25.0.
Transparent outer corners works well.
Transparent center does not work.
Covering part of the display itself (in case of a round display or a display with rounded inner corners) doesn't work.

I modified the code to make those scenarios work.

Scenario 0: no skin

Scenario 1: opaque skin

Scenario 2: transparent corners

Scenario 3: transparent corners and transparent center

Scenario 3: transparent corners and transparent center with overlap

I made this work in 2 steps:

1. window shape is based on the alpha channel of the skin like before, however the alpha channel in the display area is ignored and explicitly set to opaque. I do this by creating a copy of the skin surface object and set the alpha channel of the display area in that copy to 255. By doing so the window won't be transparent where the display needs to be. If the window were to be transparent there there won't be anything rendered there.
2. In case of transparency in the display area of the skin I draw the skin over/after the display, otherwise under/before. Transparency on other areas of the skin are irrelevant for this.

As you can see you can now create round displays (think about smart watches etc.) or displays with rounded corners. And you can create skins with non-rectangular shapes.
The modified HALSDL2.cpp is attached.
Modifications to HALSDL2.hpp:

        bool displayAreaOpaque;

        SkinInfo()
            : surface(0), isOpaque(true), hasSemiTransparency(false), offsetX(0), offsetY(0), displayAreaOpaque(true)
        {

The only thing that isn't perfect is screenshots. They are saved as bmp files without transparency so the transparent areas are black. This is not a problem for me. There is no standard function that can output a png with transparency as far as I know.