Use an image, or draw functions ?

Help and techniques for creating Air Manager Instrument Graphics

Moderators: russ, Ralph

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

Re: Use an image, or draw functions ?

#11 Post by Keith Baxter »

Hi,

I am not trying to start a war with which method is better. I knew that @JackZ would advocate using .png over canvas_draw() :lol: :lol: . I personally prefer to use .png from and aesthetic point of view. Most times I use a combination of both.

Just so that you can get an idea. This overhead panel that I started then stopped because the panel became available in the premium store and I also decided to build a full hardware cockpit., was done with the intention to run on a RPI and overhead touch screen. When I first did it and tried it on a RPi it would crash the RPi (just would not load) That was because of all the annunciator .png files which made the instrument 3.6MB.

I changed that by doing everything in canvas_draw() baring 20 switch images which take up 65kb. The whole instrument now only takes just over 320kb. with the lua and resources images.
ice_screenshot_20200910-103115.png
The reason I am showing you this is so that you can see what a difference there is between loading many .png file to doing what Jacques did and also using canvas_draw()
The question you asked is an interesting one. You will not get a right or wrong answer as each has it's pros and cons.
Have fun doing the instrument many times to get the exact look and performance you prefer. You will come across many tricks and shortcuts on how to do the same thing. It is all a learning experience.

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: Use an image, or draw functions ?

#12 Post by JackZ »

So.
Since Keith and I are and old couple, I will try everything in my power to try and save our relationship. :lol:

Starting with this!

Code: Select all

----------------------------------------------------
-- BARGRAPH DEMO with canvas_draw()
-- J. ZAHAR 09/2020
----------------------------------------------------

top_x=50
top_y=450
nb_red_segments=2
nb_orange_segments=3
nb_green_segments=10

canvas_add(0,0,512,512,function()
    _rect(0,0,512,512)
    _fill("grey")
end)

canvas_black=canvas_add(0,0,512,512)
canvas_draw(canvas_black,function()
    for i=1,nb_red_segments + nb_orange_segments + nb_green_segments do
        _rect(top_x, top_y-25*i, 20, 20)
        _fill("black")
    end
end)

txt_disco= txt_add("DISCO !!!", "font:digital-7-mono.ttf; size:50; color: white;", 200, 250, 200, 200)


canvas_lighted=canvas_add(0,0,512,512)

function play_bar()
bar_height=math.random()*15+1
canvas_draw(canvas_lighted,function()
    for i=1, bar_height do
        _rect(top_x, top_y-25*i, 20, 20)
        if i <=nb_green_segments then 
                _fill("green")
        elseif i <=nb_green_segments +  nb_orange_segments then
                _fill("orange")
        else
                 _fill("red")
        end
    end
end)
       
vis=not(vis)
visible(txt_disco,vis)
end

timer_start(0,150,play_bar)
You saved 5 kb of pixel images, yeah! :lol:

Jacques
bargraph_canvas.siff
(2.7 KiB) Downloaded 288 times
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: Use an image, or draw functions ?

#13 Post by Keith Baxter »

Hi,

Yes, not to worry, Our relationship saved. :mrgreen:

Those are just two very intuitive ways of doing the same thing. I most probably would have done it the second way. Just moving a _rect() in increments behind a line mask to give it the effect of separate led's. But the OP now has a few excellent ways to do the bar instruments.

We need to revive that idea of a library on how to do different things.

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: Use an image, or draw functions ?

#14 Post by JackZ »

I love you Keith.... :oops:
Here's my gift to you, best of both worlds....


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

Roxus
Posts: 58
Joined: Wed Sep 02, 2020 7:30 pm

Re: Use an image, or draw functions ?

#15 Post by Roxus »

Thanks for that guys :D
I did have the code for the array of img_add()'s (although they're already 10x10's instead of 1x1's and being stretched by the API .. save some cycles ?)

When I switched last night the "background" to static a PNG instead of a canvas, my FPS on the Pi3 went from 6 to 27.
I guess the function() on the canvas is called every redraw ? and its too intensive doing all that line drawing ?
I know that I prolly really cant tell the difference b/w 6FPS and 27FPS on a Pi3 display, but the programmer in me just cant sit by and have CPU cycles wasted !! ;)

Anyway, nearly finished the instrument last night, with test, dim and digits switch all working on the AP with a "remote" on the AM for the touch elements

Even though the BFDG guys didnt program all that functionality into their cockpit, that didnt stop me ;)

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

Re: Use an image, or draw functions ?

#16 Post by Sling »

If you are only using the canvas to produce a static graphic you should only draw it the once. Even when redrawing you don’t have to redraw at the same interval as the data is changing. Some of the sim data changes very frequently and it can be averaged or sampled to reduce the redrawing frequency.

Tony

Post Reply