20,741
edits
Canvas snippets: Difference between revisions
Jump to navigation
Jump to search
m
→A simple tile map: +comments
(Tile map demo) |
m (→A simple tile map: +comments) |
||
| Line 483: | Line 483: | ||
| | | | ||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
var window = canvas.Window.new([ | var (width,height) = (768,512); | ||
var window = canvas.Window.new([width, height],"dialog") | |||
.set('title', "Tile map demo"); | .set('title', "Tile map demo"); | ||
var g = window.getCanvas(1) | var g = window.getCanvas(1) | ||
| Line 546: | Line 547: | ||
# simple aircraft icon at current position/center of the map | # simple aircraft icon at current position/center of the map | ||
g.createChild("path") | g.createChild("path") | ||
.moveTo( | .moveTo( height/2 * center_tile_offset[0] - 10, | ||
height/2 * center_tile_offset[1] ) | |||
.horiz(20) | .horiz(20) | ||
.move(-10,-10) | .move(-10,-10) | ||
| Line 554: | Line 555: | ||
.set("stroke-width", 2) | .set("stroke-width", 2) | ||
.set("z-index", 1); | .set("z-index", 1); | ||
## | |||
# initialize the map by setting up | |||
# a grid of raster images | |||
var tiles = setsize([], num_tiles[0]); | var tiles = setsize([], num_tiles[0]); | ||
| Line 566: | Line 571: | ||
var last_type = type; | var last_type = type; | ||
## | |||
# this is the callback that will be regularly called by the timer | |||
# to update the map | |||
var updateTiles = func() | var updateTiles = func() | ||
{ | { | ||
# get current position | |||
var lat = getprop('/position/latitude-deg'); | var lat = getprop('/position/latitude-deg'); | ||
var lon = getprop('/position/longitude-deg'); | var lon = getprop('/position/longitude-deg'); | ||
| Line 583: | Line 592: | ||
for(var x = 0; x < num_tiles[0]; x += 1) | for(var x = 0; x < num_tiles[0]; x += 1) | ||
for(var y = 0; y < num_tiles[1]; y += 1) | for(var y = 0; y < num_tiles[1]; y += 1) | ||
tiles[x][y].setTranslation(int((ox + x) * | tiles[x][y].setTranslation(int((ox + x) * height/2 + 0.5), int((oy + y) * height/2 + 0.5)); | ||
if( tile_index[0] != last_tile[0] | if( tile_index[0] != last_tile[0] | ||
| Line 604: | Line 613: | ||
if( io.stat(img_path) == nil ) | if( io.stat(img_path) == nil ) | ||
{ | { # image not found, save in $FG_HOME | ||
var img_url = makeUrl(pos); | var img_url = makeUrl(pos); | ||
print('requesting ' ~ img_url); | print('requesting ' ~ img_url); | ||
| Line 611: | Line 620: | ||
.fail(func (r) print('Failed to get image ' ~ img_path ~ ' ' ~ r.status ~ ': ' ~ r.reason)); | .fail(func (r) print('Failed to get image ' ~ img_path ~ ' ' ~ r.status ~ ': ' ~ r.reason)); | ||
} | } | ||
else | else # cached image found, reusing | ||
{ | { | ||
print('loading ' ~ img_path); | print('loading ' ~ img_path); | ||
| Line 623: | Line 632: | ||
} | } | ||
}; | }; | ||
## | |||
# set up a timer that will invoke updateTiles at 2-second intervals | |||
var update_timer = maketimer(2, updateTiles); | var update_timer = maketimer(2, updateTiles); | ||
# actually start the timer | |||
update_timer.start(); | update_timer.start(); | ||
## | |||
# set up default zoom level | |||
changeZoom(0); | changeZoom(0); | ||
</syntaxhighlight> | </syntaxhighlight> | ||