Talk:Canvas snippets: Difference between revisions
Jump to navigation
Jump to search
(→Documenting supported options/parameters: new section) |
(→Space Shuttle Snippets: new section) |
||
Line 9: | Line 9: | ||
}} | }} | ||
}} | }} | ||
== Space Shuttle Snippets == | |||
{{FGCquote | |||
| [[File:Canvas-overlay-with-mapstructure.png|thumb]] | |||
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? | |||
|{{cite web |url=http://forum.flightgear.org/viewtopic.php?f=71&t=25953&p=238316#p238304 | |||
|title=<nowiki>Re: Using Canvas for visualizing orbital flights (cont'd PM)</nowiki> | |||
|author=<nowiki>Thorsten</nowiki> | |||
|date=<nowiki>Fri Apr 10</nowiki> | |||
}} | |||
}} | |||
=== Loading a raster image === | |||
<syntaxhighlight lang="nasal"> | |||
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 | |||
</syntaxhighlight> | |||
=== Adding a dynamically positioned symbol === | |||
<syntaxhighlight lang="nasal"> | |||
# 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 | |||
canvas.parsesvg(svg_symbols, svg_path); | |||
# resize the SVG image | |||
shuttle_symbol.setScale(0.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); | |||
</syntaxhighlight> | |||
=== Adding a dynamically computed line/curve === | |||
<syntaxhighlight lang="nasal"> | |||
</syntaxhighlight> |
Revision as of 01:47, 11 April 2015
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 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
canvas.parsesvg(svg_symbols, svg_path);
# resize the SVG image
shuttle_symbol.setScale(0.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);