Canvas animations

From FlightGear wiki
Jump to navigation Jump to search
This article is a stub. You can help the wiki by expanding it.


1rightarrow.png See Canvas SVG Parser for the main article about this subject.

An increasing number of Canvas-based MFDs are using Scalable Vector Graphics (SVG), so that complex MFDs can be largely created/edited and maintained using existing toolchains like Inkscape. For the time being, Canvas-based instruments/avionics tend to use various combinations of timers and listeners to implement different kinds of animations/update semantics.

Internally, there is a Nasal module (svg.nas) that translates SVG/XML markup into Canvas properties (e.g. text nodes, OpenVG paths).

People wanting to learn how to create modern avionics (MFDs) for FlightGear, are well-advised to more about SVG vector images, e.g. using an editor like Inkscape.

Once you know how to use Inkscape, you basically can treat any intstrument like a vector image with different modes, pages and layout items - which in turn can be SVG images or SVG image elements.

Under the hood, this is how the space shuttle/extra500 avionics, but also the ND stuff, is assembled. Ultimately, it's all vector image data that is animated using a bunch of Nasal timers/listeners. For instance, look at this screenshot:

Navigation display MAP mode.png

In other words, the image is literally drawn using Inkscape, and then loaded into FlightGear as a Canvas texture, it is then animated using timers and listeners which dynamically decide how to update/transform and hide/show certain elements (e.g. by setting text properties etc) Internally, the whole system is using a handwritten svg parser that turns SVG files into Canvas properties, i.e. those representing OpenVG paths and/or osgText nodes (fonts) - it would even be possible to also support nested images, i.e. not just included SVG files but even raster images, because the Canvas system does have support for raster images. If people still find this too complicated/tedious, it would also be possible to extend the parser to support animiations created via Inkscape. [1]

However, FlightGear core developers are generally hesitant to add even more Nasal code to the main loop [2] [3].

Also, fgdata contributors generally recommend that hard-coded/XML-configurable systems should often be preferred over Nasal based solutions for these reasons [4]

One of the suggestions originally discussed on the forum was exposing the autopilot/property rule systems to scripting space, so that Nasal can be used to merely set up/customize the corresponding logic, and let everything else run in C++ space (native code) instead of scripting space (Nasal) [5].

  1. Hooray (Feb 15th, 2016). Re: Dynon Avionics D180.
  2. James Turner (Apr 3rd, 2015). Re: [Flightgear-devel] Route manager: waypoint smoothing.
  3. ThorstenB (Aug 29th, 2012). Re: [Flightgear-devel] Running Nasal at simulation rate.
  4. Renk Thorsten (Aug 30th, 2012). Re: [Flightgear-devel] Running Nasal at simulation rate.
  5. Torsten (Feb 2nd, 2012). Re: 2 Questions: vacuum & electrical.


A number of freely available SVG editors have built-in support for animating SVG elements using a form of SMIL and/or ECMAScript. In addition, there are a number of web-based SVG editors that allow people to easily animate SVG elements:

Furthermore, OpenSceneGraph (OSG) supports a variety of osg::Group child classes to implement different kinds of animations. For the time being, these are not yet used by the Canvas system.

1rightarrow.png See Canvas Sandbox#CanvasAnimation for the main article about this subject.


Work out what is needed to directly support SVG files with embedded animations (SVG animation This is a link to a Wikipedia article), without having to write too much custom Nasal code, while ideally mapping such animations to existing C++ code, e.g. in the form of properyt rules and/or state machine logic (simgear).


The svg.nas module can be easily extended to add support for other SVG features, including SMIL animations, CSS, but even ECMAScripting based animation support, i.e. by creating a tiny DSL in Nasal that maps ECMAScript primitives (e.g. function name(signature) {}) to their Nasal equivalent (var name=func(signature) {}).


Synchronized Multimedia Integration Language This is a link to a Wikipedia article

CSS Animations