Talk:Canvas snippets

From FlightGear wiki
Jump to navigation Jump to search

Documenting supported options/parameters

Cquote1.png you made a good point that we should probably document supported parameters/attributes or "modes" whenever possible. I think it would make sense to extend the underlying template accordingly and provide a list of documented options.
— Hooray (Fri Apr 10). Improving Canvas docs (cont'd PM).
(powered by Instant-Cquotes)
Cquote2.png

Space Shuttle Snippets

Cquote1.png
Canvas-overlay-with-mapstructure.png

Okay, I have a nice loaded earth texture picture. I have the position of my shuttle:

  • first thing I want is to draw it in real time on the picture, see it move.
  • Next thing is - I want to display the ground track. What do I do - store past positions into an array regularly? Is it done automatically?
  • Beyond that, I want to display the groundtrack prediction based on current state. So, I can create an array of future points. Or properties. Or pass the function which, when given a time, will spit out coordinates. Don't care - whatever is best.
  • Finally, I'd like to have the ability to display the selected landing site on the map. But that's probably the same as the shuttle problem - I have a set of coords and I want a symbol drawn there.

Probably all are solved problems - but how?


Cquote2.png

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