Canvas introduction
 |
Work in progress This article or section will be worked on in the upcoming hours or days. See history for the latest developments. |
Concepts
Models
be assured that Canvas is actually a lot easier than it seems from the documentation. [1]
Model-side, a canvas is a texture that gets assigned to a surface just like a static texture would (unless you have it as a popup window). For each distinct instrument, you need one canvas, if you want two screens showing always the same, you can assign the same canvas to both. Just like a static texture.[2]
Animations
Animation-side, it's a collection of elements (which seem to be pretty similar to what SVG provides, in fact you can parse a subset of SVG and map it into canvas elements). Each of these elements has a name and can be part of a group (that also has a name), and you can identify elements by name and do things with them.
For instance, consider:
# makes element invisible,
element.setVisible(0)
# moves the element around (if element refers to a group, you can move a whole group).
element.setTranslation(x,y)Similarly you can assign colors, change text, rotate, scale...[3]
Using Canvas
The most common elements are groups (combinations of several smaller elements), text and path (a line segment). With this background, try to make sense of Canvas Snippets to see how the various elements are referenced and their properties set. The snippets should provide you with self-contained small code examples to play with. The complete reference of what properties you can set and what transformations you can use for what is here Canvas Nasal API[4]
SVG
So what you probably want to do is a) draw an SVG of your display with all elements - static background and dynamical elements - make sure all elements have an ID b) use the canvas Canvas SVG Parser to read in that SVG c) reference the elements you want to animate/hide by their ID and set their translation, rotation, scale, visibility or color as you need in an animation loop of the instrument (there are other workflows possible, but given that you have experience with SVG, this seems easiest). There's nothing you need to install, canvas is just supported by a current FG and controlled by Nasal scripts. [5]
Put everything that could possibly be there in the SVG. That is a design to load all pages at startup - which has them reside in memory and you can switch pretty quickly (we're using this for the 30+ pages of the Space Shuttle avionics). The former allows you to load pages from SVG on demand or all at once dependent on how your code is structured. Dependent on complexity, you may actually want to have the pages available quickly runtime, so we're pretty happy with the second variant, but both would work - whatever is easier for you I guess. [6]
Where you have text messages that can vary just put a placeholder text and change the text at run time. You can set the fonts at run time if you wish to. All goes into one SVG with a group per page. The group ID is used to identify the pages (object properties in Inkscape to set this) Have a look at the F-15 MPCD SVG https://raw.githubusercontent.com/Zaretto/fg-aircraft/master/aircraft/F-15/Nasal/MPCD/MPCD_0_0.svg Although the F-15 VSD doesn't need any page switching the SVG shows the use of placeholder text https://raw.githubusercontent.com/Zaretto/fg-aircraft/master/aircraft/F-15/Nasal/VSD/VSD.svg [7]
MFD Framework
If you're working with a device that is 'page' based and you can represent easily with a pre-drawn SVG then the generic MFD framework may be useful. This is what Richard used in the F-15 for the MPCD. See Canvas MFD Framework.
It's quite a simple framework than will manage the page selection and updating. Ideally you'd be using the latest FGData version as it's had some improvements since the 2016.2 release - mainly adding a simple way of getting a NavDisplay.
There is a writeup about using Canvas for an instrument (with code) which you may like to read http://chateau-logic.com/content/flightgear-using-canvas-3d-instrument. You can build the display yourself using Canvas primitives but often that seems much harder than drawing them in SVG and then animating them.[8]
References
|