Text styling (text-shadow)

Questions about deployment and use of Air Manager Instruments

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 creating an autopilot instrument and want the glow effect around the text (see images). I have created all the numbers and the below code works but the number flash as they are removed and replaced. I even tried styling "text_add" with "style: text-shadow: 2px 2px 3px #e5f0ff;" but that does not work sadly (feature request added)
Does anyone know a better way?
Thanks
Screenshot_1.png
7SEG_8.png
7SEG_8.png (7.83 KiB) Viewed 2281 times

Code: Select all

spd_txt = txt_add(" ", "font:digital-7-mono.ttf;size:28px; color: #e5f0ff; halign: right;", 51, 26, 52, 30)
function mcp_spd_chg(spd_mach, is_mach)

    if spd_mach < 1 then
        txt_set(spd_txt,string.format( ".%02f", spd_mach * 100 ))
    else
    	-- txt_set(spd_txt,string.format("%03.0f", spd_mach))
        spd = string.format("%03.0f", spd_mach)
        if speed_1 then
            remove(speed_1)
        end
        if speed_2 then
            remove(speed_2)
        end
        if speed_3 then
            remove(speed_3)
        end
        speed_1 = img_add(digits[string.sub(spd, 1, 1)],51,25,28,35)
        speed_2 = img_add(digits[string.sub(spd, 2, 2)],72,25,28,35)
        speed_3 = img_add(digits[string.sub(spd, 3, 3)],93,25,28,35)
    end
end

digits = {
    ["0"] = "7SEG/7SEG_0.png",
    ["1"] = "7SEG/7SEG_1.png",
    ["2"] = "7SEG/7SEG_2.png",
    ["3"] = "7SEG/7SEG_3.png",
    ["4"] = "7SEG/7SEG_4.png",
    ["5"] = "7SEG/7SEG_5.png",
    ["6"] = "7SEG/7SEG_6.png",
    ["7"] = "7SEG/7SEG_7.png",
    ["8"] = "7SEG/7SEG_8.png",
    ["9"] = "7SEG/7SEG_9.png",
}


User avatar
Sling
Posts: 5237
Joined: Mon Sep 11, 2017 2:37 pm
Contact:

Re: Text styling (text-shadow)

#2 Post by Sling »

Use visible to show/hide the graphic element and don’t add and remove them as you are currently doing. Note that remove is only for removing an image that is no longer required where not removing it could slow down the instrument significantly. In most cases it’s ok to add all the images at start and use visible to control when they are shown.

Tony

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

Re: Text styling (text-shadow)

#3 Post by Keith Baxter »

Sling wrote: Mon May 31, 2021 9:08 pm Use visible to show/hide the graphic element and don’t add and remove them as you are currently doing. Note that remove is only for removing an image that is no longer required where not removing it could slow down the instrument significantly. In most cases it’s ok to add all the images at start and use visible to control when they are shown.

Tony
Hi Tom,
Sorry I disappeared off the discord. We had an unscheduled power "Load shedding". It is winter by us and it is a cold evening so the power draw on the grid must have been high.

Tony is correct. Removing and adding an image is slower than a canvas_draw() hence your flickering. But using visible() is the fastest considering you have done all the graphics already.

Code: Select all

speed_1 = img_add("7SEG/7SEG_1.png",51,25,28,35)
speed_2 = img_add("7SEG/7SEG_2.png",51,25,28,35)


  visible(speed_1,digit== 1)
  visible(speed_2,digit== 2)

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)

#4 Post by JackZ »

@MeTom
Agree with the others. Adding and removing images on the fly is not a good practice. It takes a lot of memory and is quite slow.

You should for each digit at initialization add only once all the images from 0 to 9 on top of each other using a loop and giving an indexed name to each image such as digit[j][n], where j is the digit position and i is the number, then play with visible()
Here's an example of code, you'll need to add another image for the decimal dot. I assume that each digit image has its' own shadow

Code: Select all

--Initialization
img_digits = {"7SEG/7SEG_0.png","7SEG/7SEG_1.png","7SEG/7SEG_2.png","7SEG/7SEG_3.png","7SEG/7SEG_4.png","7SEG/7SEG_5.png","7SEG/7SEG_6.png","7SEG/7SEG_7.png","7SEG/7SEG_8.png","7SEG/7SEG_9.png"}

digits={}
for i=1,3 do
   digits[i]={}
   for j=0,9 do
    	digits[i][j]=img_add(img_digits[j+1],30+(21*i),25,28,35)
    	visible(digits[i][j],false)
    end
 end
-- sets 000 at startup
 visible(digits[1][0],true)
 visible(digits[2][0],true)
 visible(digits[3][0],true)
 -- decimal dot for Mach number
decimal_dot=img_add("7Seg/7SEG_dot.png",75,25,2,35)
visible(decimal_dot,false)

-------------------------------------- 
function mcp_spd_chg(speed, is_mach)

if is_mach then
    spd=string.format("%03d", var_round(speed*100,0))
    visible(decimal_dot,true)
else
    spd=string.format("%03d", speed)
    visible(decimal_dot,false)
end

for j=1,3 do
        str=string.sub(spd, j, j)
        for i=0,9 do
        	if tonumber(str)==i then
            		visible(digits[j][i],true)
        	else
            		visible(digits[j][i],false)
        	end
        end
end
end
-------------------------------
---------------- Test routine 
speed=0
is_mach=false

function display_test()
    speed=speed+1
if speed>=600 then speed=0 end --Above M1.0 resets to 000
if speed>300 then -- switch to Mach
        is_mach=true 
        spd=speed/667 -- converts kts to mach
    else 
         is_mach=false 
        spd=speed
    end
    mcp_spd_chg(spd,is_mach)
end

timer_start(0,50,display_test)



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

Post Reply