Talk:Canvas snippets
Jump to navigation
Jump to search
Documenting supported options/parameters
Space Shuttle Snippets
Okay, I have a nice loaded earth texture picture. I have the position of my shuttle:
Probably all are solved problems - but how? — Thorsten (Fri Apr 10). Re: Using Canvas for visualizing orbital flights (cont'd PM).
(powered by Instant-Cquotes) |
Loading a raster image
var (width,height) = (400,200);
# create a new window, dimensions are 400 x 200, using the dialog decoration (i.e. titlebar)
var window = canvas.Window.new([width, height],"dialog");
# adding a canvas to the new window and setting up background colors/transparency
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));
# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();
# path is now a URL (could also be stored in $FG_ROOT and be fixed path instead)
var url = "http://www.worldwidetelescope.org/docs/Images/MapOfEarth.jpg";
# this would need to be changed when using a different image
var map_width = 310;
var map_height = 155;
var x_offset = (width-map_width)/2;
var y_offset = (height-map_height)/2;
# assuming Mercator projection for now (untested pseudo code)
var position2Pixels = func(lat, lon) {
var xpos = (lon+180)*(map_width/360);
var latRad = lat*math.PI/180;
var mercN = math.log(math.tan((math.PI/4)+(latRad/2)));
var ypos= (map_height/2)-(map_width*mercN/(2*math.PI));
return [xpos+x_offset, ypos+y_offset];
}
# create an image child for the texture
var child=root.createChild("image")
.setFile( url )
.setTranslation( x_offset, y_offset ) # centered, in relation to dialog coordinates
.setSize(image_width, image_height); # image dimensions
Adding a dynamically positioned symbol
Note This snippet is generic enough to be usable for both use-cases: showing a moving aircraft/shuttle symbol, but also adding a static landing site. However, you'd obviously not update static symbols each frame using a timer. |
# this could also be any other SVG file
var svg_path = "Nasal/canvas/map/Images/boeingAirplane.svg";
# create an empty Canvas group for holding the space shuttle symbol
var shuttle_symbol = root.createChild("group", "shuttle-symbol");
# parse the SVG file
# this converts the SVG file into OpenVG instructions
# supported by Canvas
canvas.parsesvg(svg_symbols, svg_path);
# resize the SVG image
shuttle_symbol.setScale(0.20); # 20%
var update_shuttle = func() {
var lat = getprop('/position/latitude-deg');
var lon = getprop('/position/longitude-deg');
var (x,y) = position2Pixels(lat:lat,lon:lon);
shuttle_symbol.setTranslation(x,y,);
}
# can use maketimer() to call this regularly
update_shuttle();
Adding a dynamically computed line/curve
var groundtrack = root.createChild("path");
Orbital Map
this is probably rather crude, but it (sort of) works - I'm getting the current position of the shuttle as well as the selected landing site displayed. — Thorsten (Sat Apr 11). Re: Using Canvas for visualizing orbital flights (cont'd PM).
(powered by Instant-Cquotes) |
var sym_shuttle = {};
var sym_landing_site = {};
var create_map = func {
var window = canvas.Window.new([800,400],"dialog");
var mapCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));
var root = mapCanvas.createGroup();
var path = "Aircraft/SpaceShuttle/Dialogs/MapOfEarth.png";
var child=root.createChild("image")
.setFile( path )
.setTranslation(0,0)
.setSize(800,400);
sym_shuttle = mapCanvas.createGroup();
canvas.parsesvg(sym_shuttle, "/Nasal/canvas/map/Images/boeingAirplane.svg");
sym_shuttle.setScale(0.2);
sym_landing_site = mapCanvas.createGroup();
canvas.parsesvg(sym_landing_site, "/gui/dialogs/images/ndb_symbol.svg");
sym_landing_site.setScale(0.6);
map_update();
}
var map_update = func {
var lat = getprop("/position/latitude-deg");
var lon = getprop("/position/longitude-deg");
var x = 400.0 + lon /180. * 400.0 -10.0;
var y = 200.0 - lat /90. * 200.0 -10.0;
var heading = getprop("/orientation/heading-deg");
sym_shuttle.setTranslation(x,y);
#symbol.setRotation(heading);
x = 400.0 + landing_site.lon()/180 * 400.0 -10.0;
y = 200.0 - landing_site.lat()/90. * 200.0 -10.0;
sym_landing_site.setTranslation(x,y);
settimer(map_update, 1.0);
}
extending the snippet template
- required minimal FG version
- external dependencies (files)
- note/caution if snippet has been updated and not yet tested
- variables read/written
- related docs