Talk:Canvas snippets: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
Line 69: Line 69:


# parse the SVG file
# parse the SVG file
# this converts the SVG file into OpenVG instructions
# supported by Canvas
canvas.parsesvg(svg_symbols, svg_path);
canvas.parsesvg(svg_symbols, svg_path);
   
   
# resize the SVG image  
# resize the SVG image  
shuttle_symbol.setScale(0.20);  
shuttle_symbol.setScale(0.20); # 20%


# position the image (this could be done dynamically using a maketimer() callback)
# position the image (this could be done dynamically using a maketimer() callback)

Revision as of 01:48, 11 April 2015

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 image_width = 310;
var image_height = 155;

var x_offset = (width-image_width)/2;
var y_offset = (height-image_height)/2;

# 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

# 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% 

# position the image (this could be done dynamically using a maketimer() callback)
# you'd want to use the current lat/lon here and recompute the x/y position using the Mercator projection

shuttle_symbol.setTranslation(image_width/2+x_offset, image_height/2+y_offset);

Adding a dynamically computed line/curve