Use an image, or draw functions ?

Help and techniques for creating Air Manager Instrument Graphics

Moderators: russ, Ralph

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

Use an image, or draw functions ?

#1 Post by Roxus »

I've been building my UH60 replica cockpit for a few weeks, and I've really hated the way text appear in images when it gets anti-aliased.

My latest instrument, the Central Display Unit, I spent this weekend creating it using just draw functions
An actual instrument (that I've been basing it on) can be seen here :

https://aerospacellc.com/wp-content/upl ... -small.jpg

Now that I've done all the work to draw it, and the text is all clean, I realize that I can take a screen cap and just save that as an image and use that, and it won't get distorted.
It certainly will be easier to maintain the code (there's a LOT of x,y,height,width parameters !!!)

But this surely can't be the route most people are taking when creating instruments ?
What am I missing on the text of the instruments in static images ?
I'm using GIMP and MSPaint, and I thought GIMP might do a better job, but it anti-aliases the text just as poorly
There must be an option to turn off GIMP anti-aliasing, I'm sure, so maybe this is more of a question for GIMP usage.

So in general , do ppl "draw" their images , or "program" their images, and then save them as a PNG after its all clean ?

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

Re: Use an image, or draw functions ?

#2 Post by Keith Baxter »

Hi,

There is no right way. It all boils down to resources and quality.

Using programs like skinman and inkscape can produce great effects in light reflections and aging of the instrument. I do have gimp but prefer inksape. Both skinman and inkscape are free. There is a video here somewhere on using skinman to create a gauge. You will have to look for it in the WIKI video section. EDIT : Ok I found it for you. https://youtu.be/0QwiFI4eMD0

Using canvas_draw() is a limited vector based approach so getting those effects and almost impossible.

There is no point in doing a dial in canvas_draw then saving it as a .png.

It is very simple to move and resize the canvas that you have drawn using the move() function. If you look at the vector map thread that is what Tony and I are doing.
Images use up a lot more resources than a canvas. So if the instrument is heavily .png orientated it might be very slow on air_player or a RPI

IF it is just text that you have an issue with you could always use the txt_add() function to draw on top of a .png image.

The bar indicators in those gauges that you want would be easier using canvas_draw() and showing the various segments using a table{}

I personaly like to use canvas_draw() but @JackZ , @Sling and @SimPassion would most probably opt for a graphics program for the .png image. Using canvas_drwa() for things like bar and pie type instruments.

It is really all up to what effect you want.

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 

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

Re: Use an image, or draw functions ?

#3 Post by Sling »

I don’t actually have a preference. Generally I make my decision based on the application. Using png or a canvas draw both have their own pros/cons. As a starting point I tend to use a png for fixed portions of the instrument such as the bezel, background, fixed markers and draw the active stuff such as bars or changing values.
There are almost always exceptions to this. Like Keith said no right or wrong answer but its useful to understand the limitations of each method.

Tony

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

Re: Use an image, or draw functions ?

#4 Post by JackZ »

Nothing much to add there. Both solutions have their pros and cons.

For your specific instrument, since it is fixed with only the LED bar graphs moving, I would probably go the « hybrid » route, namely all the plate, buttons and legends drawn with Skinman (or Inkscape, or Illustrator), where everything can be easily positioned and some subtle effects added (text emboss to make the texts look as engraved) & with antialiasing done directly by the software.

The key here is to use a vector graphics software rather than a pixel level editor such as Gimp or Photoshop, which are less adapted for the purpose since they boil down everything to pixel.

There would be transparent holes in the resulting png file that would merely be displayed by img_add_fullscreen(), where the LED bargraphs would appear.

Those LEDS bar graphs could be in turn either displayed by using canvas draw() routines code OR by using supplementary png for each Lighted led elements in a table and setting each element to hidden or visible accordingly.

For this part this is really a matter of preference.
Personally I tend to prefer the png route, since it is easier to maintain code wise, but needs some more work on the graphic side, since everything has to be drawn by hand.

And leds display can be rendered that way too!


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 ?

#5 Post by Roxus »

Hmmm, did not know that PNG's were resource intensive on the AP. That would explain why I'm only getting 6FPS on my Pi3 running this instrument, since I have 1 LED PNG for each spot, and just use visible() on it (so 30x12 10x10 LED PNG's !!). Thanks for that. I will also look into the other apps.

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

Re: Use an image, or draw functions ?

#6 Post by Keith Baxter »

Roxus wrote: Wed Sep 09, 2020 6:08 pm Hmmm, did not know that PNG's were resource intensive on the AP. That would explain why I'm only getting 6FPS on my Pi3 running this instrument, since I have 1 LED PNG for each spot, and just use visible() on it (so 30x12 10x10 LED PNG's !!). Thanks for that. I will also look into the other apps.
Hi,

Yes it is. Corjan added a feature to help with image intensive instruments. It might help if you have to use .png.
Note that this is not only with .PNG. If you are loading lots of text and canvas you can also remove unwanted ones assisting on resource draw,


http://siminnovations.com/wiki/index.php?title=Remove

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 

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

Re: Use an image, or draw functions ?

#7 Post by Roxus »

This prolly lends towards my initial query then to have the "base" instrument as a single PNG rather than *LOTS* of add_txt all over the instrument for every number in the axis'.
I should rethink the implementation of the LED's then instead of 360 PNG's as well
None of them are unwanted (AFAIK), coz I assume, after creating them and drawing them, they are still needed for every redraw() event ?

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

Re: Use an image, or draw functions ?

#8 Post by Keith Baxter »

Roxus wrote: Wed Sep 09, 2020 7:35 pm This prolly lends towards my initial query then to have the "base" instrument as a single PNG rather than *LOTS* of add_txt all over the instrument for every number in the axis'.
I should rethink the implementation of the LED's then instead of 360 PNG's as well
None of them are unwanted (AFAIK), coz I assume, after creating them and drawing them, they are still needed for every redraw() event ?
Hi

Do not redraw without removing if you can help it.

Once drawn then show/hide and move.

Here is an example paging/searching many thousand chart images that I used. So as I page/scroll the old image is removed and the new image loaded. That way there is only one image in memory. All the others are gone. This is very effective as long as you are not iterating through large static files. Then it is best to load once and then manipulate.

Code: Select all

	if json_data ~= nil then
		chart_path = json_data[iaco_var][chart_type ][chart_no]["IMAGE"]
		if min_chart ~= nil then
			remove(min_chart)
			min_chart = nil
		end	
		min_chart=img_add(chart_path,8,250,99,150,"scale_mode:aspect_fit; halign:center; valign:center")
	end

I found an old video to demonstrate what the remove() function was for. This instrument was falling over due to the resource drain. The code above is what is used to discard the previous image and load the new one. Load time is instantaneous and memory resources minimal.
The problem here is the size of all the images (.png) files in the resources folder which are loaded when one starts the instrument. There are thousands of aviation charts.
If you are using canvas_draw() . The whole instrument is "lighter" making it more friendly towards RPI and air player.

So if you goal is to use your instrument on a RPi. Use as few .png files in the resources folder as possible. Remove and redraw canvases as long as they are not iterating through big files.

Hope that assists you in you instrument creation venture.





Keith
Last edited by Keith Baxter on Wed Sep 09, 2020 8:03 pm, edited 1 time in total.
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 ?

#9 Post by JackZ »

Roxus wrote: Wed Sep 09, 2020 6:08 pm Hmmm, did not know that PNG's were resource intensive on the AP. That would explain why I'm only getting 6FPS on my Pi3 running this instrument, since I have 1 LED PNG for each spot, and just use visible() on it (so 30x12 10x10 LED PNG's !!). Thanks for that. I will also look into the other apps.
Well a single png for one led segment should not be that much resource intensive, after all it should something like a 10x10 pixels wide png file.
If you used for each a complete image the size of the whole instrument , even if transparent, that's another story.

And remember also that that could even be using a single pixel (1x1) png image for each color segment of the bargraph, and resize the single pixel accordingly using move() with a scale of 10 to save space.
That way you can fill gigantic rectangles with a single pixel png base file.

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

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

Re: Use an image, or draw functions ?

#10 Post by JackZ »


Code: Select all

----------------------------------------------------
-- BARGRAPH DEMO with 1x1 pixel images
----------------------------------------------------
top_x=50
top_y=450
nb_red_segments=2
nb_orange_segments=3
nb_green_segments=10

img_add_fullscreen("one_pixel_image_grey.png")

for i=1,nb_red_segments + nb_orange_segments + nb_green_segments do
	img_add("one_pixel_image_darkgrey.png", top_x, top_y-25*i, 20, 20)
end

txt_disco= txt_add("DISCO !!!", "font:digital-7-mono.ttf; size:50; color: white;", 200, 250, 200, 200)
img_led={}
for i=1,nb_green_segments do
    img_led[i]= img_add("one_pixel_image_green.png", top_x, top_y-25*i, 20, 20)
end

for i=nb_green_segments +1,nb_green_segments + nb_orange_segments do
    img_led[i]= img_add("one_pixel_image_orange.png", top_x, top_y-25*i, 20, 20)
end

for i=nb_green_segments + nb_orange_segments +1, nb_red_segments + nb_orange_segments + nb_green_segments do
    img_led[i]= img_add("one_pixel_image_red.png", top_x,top_y-25*i, 20, 20)
end

for i=1,15 do
    visible(img_led[i], false)
end

function play_bar()
bar_height=math.random()*15+1

for i=1,15 do
    if i <= bar_height then visible(img_led[i], true) else  visible(img_led[i], false) end
end
vis=not(vis)
visible(txt_disco,vis)
end

timer_start(0,200,play_bar)
Entirely done with only five 1x1 pixel png files (5kb total). Enjoy!

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

Post Reply