Multiple transparent PNGs at the same time?

[irys1999]

Hello.
I found out on this forum that I can use the Form image as a background and then use Userimages to display a transparent PNG on top of it.
And I have succeeded in displaying it.
So please tell me, is it possible to use multiple Userimages to display multiple transparent PNGs at the same time?
I want to place the Form background at the bottom, and then place Userimages1, Userimages2, and Userimages3 on top of it, and display each transparent PNG at the same time.
If this is possible, I would like to know how to do it.
The display module I'm using is a μOLED-128-G2.
The board I am using is an Arduino nano, but if I need a board that can do multitasking (e.g. ESP32), I am willing to buy it.

Thank you very much for your help.

[ESPsupport]

Since this is a small display it doesn't have planes, or the memory to generated layered transparency.

However, there are two ways you can generate the appearance of transparency.

By placing a form image and user images Workshop generates a composite (flattened) image at build time. If you created every combination of Userimages 1, 2 and 3, then Workshop would generate it for you.

The other way to do is is using gfx_TransparentColour() and gfx_Transparency(). By setting gfx_TransparentColour() to the colour that is not to be written and gfx_Transparency(ON), the next time an image is displayed the selected colour will not be drawn, making the image appear transparent. There is a performance hit for this that varies according to the display used, it may not be noticeable, or it may be very noticeable, but with a 128-G2 it is more the former..

[irys1999]

Thanks Mark!

By placing a form image and user images Workshop generates a composite (flattened) image at build time. If you created every combination of Userimages 1, 2 and 3, then Workshop would generate it for you.

It's great.
I'm afraid I'm ignorant, but I was wondering if you could tell me how to do that.
I’m using the Arduino Compatible Environments in the Workshop.
When I place Form1, Userimages1, Userimages2, and paste the code for Userimages1 and 2 using "Paste static code", the images for 1 and 2 are displayed alternately. But not at the same time.
I tried to do the same thing with Visi without using Arduino, but it didn't work.

(I'd like to run the display as a module from the Arduino if possible…)

The other way to do is is using gfx_TransparentColour() and gfx_Transparency(). By setting gfx_TransparentColour() to the colour that is not to be written and gfx_Transparency(ON), the next time an image is displayed the selected colour will not be drawn, making the image appear transparent. There is a performance hit for this that varies according to the display used, it may not be noticeable, or it may be very noticeable, but with a 128-G2 it is more the former..

Thanks for all the suggestions!
I'm very interested in this method too, but I think it's a more rudimentary problem that I'm tripping over!

[ivan_4d]

Hi,

So please tell me, is it possible to use multiple Userimages to display multiple transparent PNGs at the same time?

The only way for this is to create a combined image of those images in one PNG file. You have to build the images for each possible combination and put them in a single UserImage widget. You can refer to the sample project I attached.

I hope this helps.

Best Regards.

[irys1999]

Thanks, ivan_4d.
Unfortunately the method you gave me did not achieve my goal, but I came up with another idea.
That is, instead of multiple Usarimages, I created multiple Forms with a single Usarimage and put the image that was supposed to be in the multiple Userimages in the background of each Form.
By switching the Form to be displayed and the Usarimages in the Form, we can simulate a two-layered display.

And I'm sorry to ask so many things, but now I have another problem.
I'll ask about that in another topic, since it's in a different category. I'm sorry for the inconvenience, but I would appreciate it if you could take a look at that too.

Thanks.

[ivan_4d]

Hi,

Can you elaborate on your idea? Best to explain it in detail so the other forum users can see.

It could help them with similar problems like yours.

Best Regards

[jkarran]

I'm struggling to get transparency of layered images working using designer mode and a diabalo screen. The colour to be transparent is specified as 24bit but the GraphicsComposer saves the image as 16bit so I can't tell exactly what colour my 'transparent' colour has been compressed to I have an image with magenta bits (0xFF00FF) which don't go transparent using the following code snippet

img_Show(ImgHandle,4);
gfx_TransparentColour(0xFF00FF);
gfx_Transparency(ON);
img_Show(ImgHandle,5)

EDIT: I'm making a mistake here, the colour specification for transparency is 16 bit not 24. Once I'd spotted that and I'm using 16bit colours the function does work but a single pixel border of the 'transparent' colour remains, is that a quirk or a setting I don't understand?

If I switch TransparentColour to 0x000000 then transparency does work, ish, for most of the black pixels but not all of them, some have presumably compressed to something very near 0x000000 but not quite during passage through the GraphicsComposer. I'll experiment some more with RGB, Black and White, see if that works but perhaps there is a trick I'm missing here?

[ivan_4d]

Hi,

It seems we need further details regarding your problem.

Can you share us the image you want to display? or much better your project your to see clearly what's going on.

Best Regards

[jkarran]

Hi Ivan,

Apologies, part of the problem was my mixup over 16 and 24bit colours. I do still have an issue though. I no longer have the exact file I was having problems with, it was just a test to help me understand the transparency functionality but I've recreated the issue. I used the following 3 lines to drop an image into an existing project (having added the image to that project's graphics files).

gfx_TransparentColour(RED);
gfx_Transparency(OFF);
img_Show(ImgHandle,TransparencyTest);

'TransparencyTest' is the blocky image seen in the attached photo below. As expected.



Switching transparency on: gfx_Transparency(ON); makes most of the red block transparent as expected but it leaves a red border 1 px wide. It isn't clear in the picture but under magnification the red border isn't quite complete, the corner pixels are red but their immediate neighbours are transparent.



I get the same left-over border effect with the other colours too (BLACK, WHITE, LIME, BLUE). All except MAGENTA which behaves slightly differently, it still leaves a border where it meets the other primary/bold colours within my test image but not at the outer boundary of the image. This suggests to me the colour borders within the image aren't actually hard, that they're bleeding into each other when the image is compressed so for a pixel or two they're no longer pure RED, BLUE etc.



However as far as I can tell using the colour picker tool in Paint.net on the bitmap version I pass to the GraphicsComposer, they are solid blocks of pure colour, see attached picture of me sampling an edge pixel of the red block in the .bmp, it's 0xFF0000.



Could the GraphicsComposer be doing some additional compression which causes softening of the edges in the image? I have 'Quality' set at the default BiCubic. All images are at their native pixel width/height sizes, I'm not using the GraphicsComposer to re-size them.

Sorry for not including the whole project, most of it is irrelevant it's just something to drop the test into.

Thanks, James