Use an image, or draw functions ?
Use an image, or draw functions ?
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 ?
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 ?
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Use an image, or draw functions ?
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
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
Re: Use an image, or draw functions ?
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
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
Air Manager panels at https://www.experimentalsimavionics.com
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
Re: Use an image, or draw functions ?
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
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
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
Re: Use an image, or draw functions ?
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.
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Use an image, or draw functions ?
Hi,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.
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
Re: Use an image, or draw functions ?
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 ?
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 ?
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Use an image, or draw functions ?
HiRoxus 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 ?
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
Re: Use an image, or draw functions ?
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.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.
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
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
Re: Use an image, or draw functions ?
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)
Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ