followme_e-tron/Nasal/SmartScreen.nas

var smartScreen = canvas.new({
  "name": "smartScreen",   # The name is optional but allow for easier identification
  "size": [2048, 2048], # Size of the underlying texture (should be a power of 2, required) [Resolution]
  "view": [768, 768],  # Virtual resolution (Defines the coordinate system of the canvas [Dimensions]
                        # which will be stretched the size of the texture, required)
  "mipmapping": 1       # Enable mipmapping (optional)
});

#smartScreen.addPlacement({"node": "screen", "texture": "screen.jpeg"});
var group = smartScreen.createGroup();

# Create a text element and set some values
var text = group.createChild("text", "optional-id-for element")
                .setTranslation(10, 20)      # The origin is in the top left corner
                .setAlignment("left-center") # All values from osgText are supported (see $FG_ROOT/Docs/README.osgtext)
                .setFont("LiberationFonts/LiberationSans-Regular.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_ROOT/Fonts
                .setFontSize(14, 1.2)        # Set fontsize and optionally character aspect ratio
                .setColor(1,0,0)             # Text color
                .setText("This is a text element");
# ...
text.hide();
# ...
text.setText("SELF TEST NORMAL").show();








var ui_root = smartScreen.createGroup();
var vbox = canvas.VBoxLayout.new();
smartScreen.setLayout(vbox);


var button_onl = canvas.gui.widgets.Button.new(ui_root, canvas.style, {}).setText("Online OSM").listen("clicked", func showOnlineMap());
var button_offl = canvas.gui.widgets.Button.new(ui_root, canvas.style, {}).setText("Offline OSM").listen("clicked", func showOfflineMap());
button_onl.setSizeHint([32, 128]);
button_offl.setSizeHint([32, 128]);

var label = canvas.gui.widgets.Label.new(ui_root, canvas.style, {});

var button_box = canvas.HBoxLayout.new();
button_box.addItem(button_onl);
button_box.addItem(button_offl);
button_box.addItem(label);
button_box.addStretch(1);

vbox.addItem(button_box);
vbox.addStretch(1);


var showOnlineMap = func(){
    TestMap.show();
    g.hide();
    label.setText("Online Mode");
}


var showOfflineMap = func(){
    TestMap.hide();
    g.show();
    label.setText("Offline Mode");
}


#######
#Online Map using MapStructure

var TestMap = smartScreen.createGroup().createChild("map");
TestMap.setTranslation(
                           smartScreen.get("view[0]")/2,
                           smartScreen.get("view[1]")/2
                        );


var ctrl_ns = canvas.Map.Controller.get("Aircraft position");
var source = ctrl_ns.SOURCES["map-dialog"];
if (source == nil) {
    # TODO: amend
    var source = ctrl_ns.SOURCES["map-dialog"] = {
        getPosition: func subvec(geo.aircraft_position().latlon(), 0, 2),
        getAltitude: func getprop('/position/altitude-ft'),
        getHeading:  func {
            if (me.aircraft_heading)
                getprop('/orientation/heading-deg')
            else 0
        },
        aircraft_heading: 1,
    };
}
setlistener("/sim/gui/dialogs/map-canvas/aircraft-heading-up", func(n) {
    source.aircraft_heading = n.getBoolValue();
}, 1);
TestMap.setController("Aircraft position", "map-dialog");
TestMap.setRange(1); 


var r = func(name,vis=1,zindex=nil) return caller(0)[0];
# TODO: we'll need some z-indexing here, right now it's just random

foreach(var type; [r('APS')] ){
    TestMap.addLayer(factory: canvas.SymbolLayer, type_arg: type.name, visible: type.vis, priority: 2,);
}

foreach(var type; [ r('OSM')]) {
    TestMap.addLayer(factory: canvas.OverlayLayer, type_arg: type.name,
                     visible: type.vis, priority: 1,);
}


TestMap.hide();

#######
#Offline map

var g = smartScreen.createGroup();
var zoom = 15;
var type = "intl";
var tile_size = 256;


var changeZoom = func(d)
{
  zoom = math.max(2, math.min(19, zoom + d));
  updateTiles();
}

# http://polymaps.org/docs/
# https://github.com/simplegeo/polymaps
# https://github.com/Leaflet/Leaflet

var maps_base = getprop("/sim/fg-home") ~ '/cache/maps';

var makePath =
string.compileTemplate(maps_base ~ '/osm-{type}/{z}/{x}/{y}.jpg');
var num_tiles = [4, 4];

var center_tile_offset = [
(num_tiles[0] - 1) / 2,
(num_tiles[1] - 1) / 2
];

# simple aircraft icon at current position/center of the map
g.createChild("path")
.moveTo( tile_size * center_tile_offset[0] - 10,
  tile_size * center_tile_offset[1] )
.horiz(20)
.move(-10,-10)
.vert(20)
.set("stroke", "red")
.set("stroke-width", 2)
.set("z-index", 1);

##
# initialize the map by setting up
# a grid of raster images  

var tiles = setsize([], num_tiles[0]);
for(var x = 0; x < num_tiles[0]; x += 1)
{
  tiles[x] = setsize([], num_tiles[1]);
  for(var y = 0; y < num_tiles[1]; y += 1)
  tiles[x][y] = g.createChild("image", "map-tile");
}

var last_tile = [-1,-1];
var last_type = type;

##
# this is the callback that will be regularly called by the timer
# to update the map
var updateTiles = func()
{
  # get current position
  var lat = getprop('/position/latitude-deg');
  var lon = getprop('/position/longitude-deg');

  var n = math.pow(2, zoom);
  var offset = [
  n * ((lon + 180) / 360) - center_tile_offset[0],
  (1 - math.ln(math.tan(lat * math.pi/180) + 1 / math.cos(lat * math.pi/180)) / math.pi) / 2 * n - center_tile_offset[1]
  ];
  var tile_index = [int(offset[0]), int(offset[1])];

  var ox = tile_index[0] - offset[0];
  var oy = tile_index[1] - offset[1];

  for(var x = 0; x < num_tiles[0]; x += 1)
  for(var y = 0; y < num_tiles[1]; y += 1)
  tiles[x][y].setTranslation(int((ox + x) * tile_size + 0.5), int((oy + y) * tile_size + 0.5));

  if(    tile_index[0] != last_tile[0]
    or tile_index[1] != last_tile[1]
    or type != last_type )
  {
    for(var x = 0; x < num_tiles[0]; x += 1)
    for(var y = 0; y < num_tiles[1]; y += 1)
    {
      var pos = {
        z: zoom,
        x: int(offset[0] + x),
        y: int(offset[1] + y),
        type: type
      };

      (func {
        var img_path = makePath(pos);
        var tile = tiles[x][y];
        print('loading ' ~ img_path);
        tile.set("src", img_path)  
        })();
      }

      last_tile = tile_index;
      last_type = type;
    }
  };

##
# set up a timer that will invoke updateTiles at 2-second intervals
var update_timer = maketimer(2, updateTiles);
# actually start the timer
update_timer.start();

##
# set up default zoom level
changeZoom(0);

#g.hide();