Howto:Creating fullscreen Canvas applications

This article is a stub. You can help the wiki by expanding it.

Canvas - the FlightGear 2D drawing API
Canvas - Main Page Canvas News - for the latest developments Shiva Alternatives - ongoing work for Core Profile support Canvas FAQs - frequently asked questions Canvas - Getting started Canvas Development (core) Canvas Troubleshooting (core) Canvas Sandbox (core) PUI2Canvas (PUI/XML Parser) Canvas GUI Canvas Widgets Canvas Maps Canvas Snippets
RFC
Canvas Instancing Howto:New Canvas Execution Model Canvas SVG Canvas Popout Windows Canvas Scenery Overlays
Frameworks
Canvas Map API (soon deprecated!) Canvas MapStructure Canvas MapStructure Layers MapStructure Snippets Canvas Radar Canvas Animation Framework (WIP) Canvas Plotting Framework (WIP) Canvas MFD Framework Canvas ND Framework Canvas PFD Framework Canvas MCDU Framework Canvas EFB Framework Canvas Wrappers Canvas Glass Cockpit Efforts
Tutorials
Howto: Canvas Troubleshooting Howto:Adding a canvas to a GUI dialog (PUI!) Howto:Creating a Canvas GUI dialog file (New) Howto:Dynamic Liveries via Canvas (new) Howto:Creating a Canvas GUI Widget Howto:Add a 2D canvas instrument to your aircraft Howto:Parsing 2D Instruments using the Canvas Howto:Creating fullscreen Canvas applications Howto:Use SVG inside a Canvas Howto:Extend the Canvas SVG module Howto:Serializing a Canvas to SVG Howto:Canvas applications as Nasal submodules Howto:Using raster images and nested canvases Canvas HUD Howto:Project 3D to 2D coordinates on desktop canvas
Reference
Canvas Element Group Image Map Path Text Canvas Nasal API MessageBox Layout System Canvas GUI API Canvas draw library Event Handling
Related
Canvas Properties Unifying the 2D rendering backend via canvas Howto:Use a Camera View in an Instrument Howto:Extending Canvas to support rendering 3D models Howto:Extending Canvas to support MathGL
To be ported
Navigation display Map FGCanvas Canvas Nasal/JavaScript Subset
Deprecated by Canvas
Complex Glass Cockpit Avionics
(click on headings to toggle)

Objective

Demonstrate how to easily create Canvas-based fullscreen applications, i.e. for creating a standalone instrument/MFD viewer, FGPanel or FGCanvas mode for master/slave setups. This is just very basic boilerplate code, it can be used for all sorts of applications, including GUI/Widget designers, graph plotting, a fullscreen ATC client or even an instructor console, all implemented on top of Nasal scripting and the Canvas system.

You can also use the same approach to implement a fullscreen mode for instruments, so that they are easier to use, e.g. a CDU/MCDU).

Example for the Nasal Console

Open the Nasal Console.

##
# Here's a short demo, open the Nasal Console, copy this to your clipboard and then
# paste it into the Nasal console in FlightGear, next click "Execute".


##
# hide menubar 
#
setprop("/sim/menubar/visibility",0);

##
# you can also toggle the menubar automatically:
#
# setprop("/sim/menubar/autovisibility/enabled",1);

##
# get the screen coordinates
var x = getprop("/sim/startup/xsize");
var y = getprop("/sim/startup/ysize");

##
# create a new canvas fullscreen window 
#
var dlg = canvas.Window.new([x,y]);

##
# set rgba
#
var my_canvas = dlg.createCanvas()
                     .setColorBackground(1,1,1,1);

##
# create the toplevel canvas group
#                     
var root = my_canvas.createGroup();

##
# show an NDB symbol
canvas.parsesvg(root, "gui/dialogs/images/ndb_symbol.svg");


##
# add a simple event handler, clicking destroys the window
#
my_canvas.addEventListener("click", 
	func dlg.del() 
);

Submodule Example

Here's pretty much the same example, but this time not intended to be pasted into the Nasal console, but instead added to a separate Nasal submodule, and with some more elements added (a text area and a texture)

• Create a new folder named 'fullscreen' in $FG_ROOT/Nasal/
• add a new nasal file named demo.nas
• paste the following code into demo.nas and save the file

###
# $FG_ROOT/Nasal/fullscreen/demo.nas
#

var demo = func {
 
##
# enable menubar hiding
#
setprop("/sim/menubar/autovisibility/enabled",1);
 
##
# get the screen coordinates
var x = getprop("/sim/startup/xsize");
var y = getprop("/sim/startup/ysize");
 
##
# create a new canvas fullscreen window 
#
var dlg = canvas.Window.new([x,y]);
 
##
# set rgba
#
var my_canvas = dlg.createCanvas()
                     .setColorBackground(1,1,1,1);
 
##
# create the toplevel canvas group
#                     
var root = my_canvas.createGroup();
 
##
# show an NDB symbol
canvas.parsesvg(root, "gui/dialogs/images/ndb_symbol.svg");

##
# add a text area
#
var text =
      root.createChild("text")
          .setText("Fullscreen Canvas Windows demo - click to close !")
          .setTranslation(50, 50)
          .setAlignment("left-top")
          .setFontSize(35)
          .setFont("LiberationFonts/LiberationSans-Regular.ttf")
          .set("max-width", x)
          .setColor(1,0,0); 

##
# add a raster image from the Instruments folder
# 
root.createChild("image")
				    .setFile("Aircraft/Instruments/Textures/gyro-fronts.rgb")
                                    .setSize(240,180)
                                    .setTranslation(50,100);

##
# add a simple event handler, clicking destroys the window
#
my_canvas.addEventListener("click", 
	func dlg.del() 
);
 
} # end of demo function

##
# register a submodule listener to ensure that our demo function is called
#
_setlistener("/nasal/fullscreen/loaded", demo );

Some standalone fullscreen applications are unlikely to require most FlightGear subsystems while they're running/maximized, such as the FDM, sound, AI-traffic manager, weather/environment etc - you should explicitly disable those to free computing resources. The draw-otw property that would normally disable scenery rendering is currently broken, but you can basically achieve the same thing by reducing visibility to 0m and setting a high value for fog.

For some additional info, please see:

• FGCanvas
• FlightGear Run Levels

An application class

var CanvasApplication = {
 ##
 # constructor
 new: func(x=300,y=200) {
  var m = { parents: [CanvasApplication] };
  m.dlg = canvas.Window.new([x,y],"dialog");
  m.canvas = m.dlg.createCanvas().setColorBackground(1,1,1,1);
  m.root = m.canvas.createGroup();
  m.init();
  return m;
 },


##
# show something and register an event listener
init: func() {
  canvas.parsesvg(me.root, "gui/dialogs/images/ndb_symbol.svg");
  me.canvas.addEventListener("click", func me.dlg.del() );
 },

}; # end of CanvasApplication

var test = CanvasApplication.new(x:400, y:200);
print("Success!");

What's next

Next, you'll probably want to learn more about:

• Howto:Canvas applications as Nasal submodules
• Howto:Use SVG inside a Canvas
• Canvas Nasal API
• Howto:Using raster images and nested canvases
• Canvas Image
• Canvas - Event Handling

For additional examples, see Tom's canvas-gui-demo branch at [1].