Text Shadows and Borders

How-to
1

Hello,

First of all I would like to thank a lot to the authors and contributors of LittlevGL!
is a very nice library. The features are cool and detailed. Very suited for lots of projects. The architecture of the library was easy to understand and the documentations were helpful. I got myself running this library in less than an hour of download. I am running it on STM32F103 series 100 pin MCU with LCD on FSMC. The TFT is Solomon Systech based 320x240 with restrictive touch panel. Soon I will publish a video.

I have gone through and tried many widgets (objects)

I have one question does this library supports shadows of text? or/and borders of text? As the authors may be familier that text rendered on top of graphical backgrounds are best visible if provided with inverse colour border. In that way we can draw a clearly visible text without caring for the background image.

2

Text shadows/borders are not supported directly. But I see two ways of doing it:

  • Use an image with your text on it.
  • Possibly using two labels and shifting one to the right and down a bit would give a similar effect.
3

Thanks!

I could not understand the first option :stuck_out_tongue:
But the second one is OK!

Let us try!

4

Use GIMP or a similar tool and write your text the way you want. Export that as an image and import it into LittlevGL. Then, when you want to display the text, use an lv_img object to display the image.

5

Thanks!

That is nice but wont work with dynamic texts. Like clock on home screen and user name display.

6

True, but I’m not sure if the other method will work either. It might not look that great - I’ve never really tried it.

It’s kind of a tradeoff.

7

One more doubt, nothing is said about the “type” of the screen object? It is written we may use an image object and use a wallpaper as background. But what about the default screen? what is it? How we may apply a gradient to it?

8

@avinash The screen is internally a base LittlevGL object, so you should be able to apply a style to it.

To keep the forum organized, please open a new topic for different questions.

9

Yes! done it!

10

littlevgl
littlevgl.jpg1000×713 447 KB

Here it is!
Gradient background!
and the dynamic text with shadow!

The shadow looks hard. Only if text supported translucency we may have given 50% to make shadow softer!

Tomorrow I shall post full UI prototype of our HOME SECURITY SYSTEM

11

Hi,

Look nice!

Text do support transparency. Try the style.text.opa property.

12

Thanks!

Lots of nice visual effects can be created using opacity protery of text.