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");