How to do line drop shadow

[JPabl.1]

Hi there Touchgfx team!

 

I have this UI requirement of a line with a drop shadow: 

In Figma the line has 3 pixels. I found another post to do it with the alpha value but it doesn't feel the same. 

I'm using a line with a width of 3. Any ideas?

 

Thanks a lot in advance

[GaetanGodart]

Hello @JPabl.1 ,

 

Simply using another line with a low alpha value probably feels weird because you have a fade in your Figma image.

The best way to get really good looking GUI is to use images.

Can you export your Figma image and import it ti your TouchGFX project to use it there?

 

If you really don't want to use an image because it takes a lot of memory space, consider compressing your image inside TouchGFX.

 

If you still don't want to use images, then maybe you could create 3 lines (or boxes) of 1 pixel of width with a different alpha value each to create the fade.
(If you have bigger fades to do, you could use the "setAlpha" method to modify the alpha value in code so you don't have to do it by hand.

 

I hope this helps!
If this comment answers your question, I invite you to select it as "best answer".

 

Regards,

[unsigned_char_array]

Unfortunetely TouchGFX doesn't support SVG filter so SVG drop shadows cannot be used. Those would have been ideal.

You could programmatically create a drop shadow of an image by shifting and gausian bluring the alpha layer of an image and converting that to grey scale. I wrote some code to test that in TouchGFX. I used a 1d gausian kernal and first ran it in the x direction and then in the y direction. You can optimize it so it only computes the visible part of the shadow if you know the shape.

Another way to do it is to create an image which includes the shadow. You can use tools like inkscape to create a vector image including drop shadow and then export the object as a png.

The third way is to create an image which includes the shadow, but only export the shadow edges (e.g. bottom and right) as two images and use the line object from TouchGFX.

And like @GaetanGodart mentioned you can use compression if size is an issue.