Text styling (text-shadow)

Let Sim Innovations know about your Air Manager experience and let us know about your dream feature addition

Moderators: russ, Ralph

Post Reply
Message
Author
MeTom
Posts: 7
Joined: Mon May 31, 2021 3:31 pm

Text styling (text-shadow)

#1 Post by MeTom »

I am working on an autopilot panel and like the look of LED displays. It would be nice to be able to use the CSS style "text-shadow" property to give text a glow effect. (see image)

Image

Image

User avatar
Keith Baxter
Posts: 4671
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Text styling (text-shadow)

#2 Post by Keith Baxter »

Hi Tom,

A few ways to do this.
You can create 10 digit images and use them within a table

Or you could use one of the gradient functions in canvas_draw() as a background to each segment.


Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

MeTom
Posts: 7
Joined: Mon May 31, 2021 3:31 pm

Re: Text styling (text-shadow)

#3 Post by MeTom »

I have tried the image approach but that is laggy. see my post here https://siminnovations.com/forums/viewt ... low#p37202

but i have no idea how to use the canvas. I am new and that is too far out of reach for me right now lol

thanks for the quick reply

User avatar
Keith Baxter
Posts: 4671
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Text styling (text-shadow)

#4 Post by Keith Baxter »

Hi Tom,

It is very easy. Jump on the discord and I will give you some pointers.
I am sure Jacques will also be interested.

Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Text styling (text-shadow)

#5 Post by JackZ »

@MeTom
FYI the image approach is definitely NOT laggy, as long as you use the proper technique, ie using visible().

In my example code I posted on your other post about the same subject (???) I switch visibilities of 30 (yes 3x10) images in a less than 50 Mseconds loop with the timer without a hitch.
That means 600 visible() switches per second!
Largely enough for an FCU display I believe. Guess it could go as low as 20msecs, around 1500 visible per second.

Dunno if using canvas would be as fast, but for subtle real LED effects, guess that canvas is not up to par with a graphic editor.
And here the problem is that the Airbus FCU digits have a unique shape not achievable with any font I know of, so some tweak would be needed.

And FYI the real Airbus FCU display is NOT using LEDs at all. It is an LCD display with inverse polarization, ie what should appear normally black is letting the light go through and the background is actually black instead of transparent. That way the digits are crisp with almost no flickering and high contrast and require very few power.

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4671
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Text styling (text-shadow)

#6 Post by Keith Baxter »

Jacques,

Do you know off hand who the FCU maker is?

Is the font IRL straight or slanted in the FCU?

Something like this if one wants 7seg LED's
https://lightkeyled.en.made-in-china.co ... turer.html

Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Text styling (text-shadow)

#7 Post by JackZ »

It is straight and as I said it is a complete custom LCD display including the text above the digits
4A1DBD83-8A78-425B-9E76-A4D14CE7466B.jpeg
44C5AEC6-A781-4AE3-8985-B33BA2D652B0.jpeg
The planes I flew were old models with orange/yellow digits, I guess that new ones are blue.
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

Post Reply