Canvas animations

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 Efforts - projects using the Canvas system 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:Getting started with Canvas 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)

Background

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:

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.

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

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

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) .

Motivation

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:

• http://svgcircus.com/
• http://anigen.org/versions/0_6_4/
• http://www.synfig.org/cms/
• https://www.animatron.com/

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.

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

Objective

See also Howto:Creating SVG-based Canvas Avionics.

Work out what is needed to directly support SVG files with embedded animations (SVG animation ), 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).

Approaches

See also Howto:Extend the Canvas SVG module.

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) {}).

SMIL

Synchronized Multimedia Integration Language

ECMAScript

See also Canvas Nasal/JavaScript Subset.

References

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
• https://css-tricks.com/guide-svg-animations-smil/
• http://edutechwiki.unige.ch/en/SVG-SMIL_animation_tutorial
• https://davidwalsh.name/svg-animation
• https://www.w3.org/TR/SVG/animate.html