Canvas MFD framework

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)

Introduction

There is a simple implementation of the basic support for an MFD (or MPCD, or PFD), or any device that is basically a set of pages with buttons around the outside to select the page that is displayed.

This works with a SVG file that defines the menu label locations and has a group for each page. The framework manages the menu hierarchy and displays labels corresponding to the buttons.

This is based around the SpaceShuttle displays which are in turn based on the http://wiki.flightgear.org/McDonnell_Douglas_F-15_Eagle#MPCD.

For a straightforward example of this in use, see https://sourceforge.net/p/flightgear/fgaddon/HEAD/tree/trunk/Aircraft/F-15/Nasal/MPCD/MPCD_main.nas

For a more complex example as part of the FG1000 glass cockpit, see https://sourceforge.net/p/flightgear/fgdata/ci/next/tree/Aircraft/Instruments-3d/FG1000/Nasal/MFD.nas

Design

The PFD/MFD contains multiple pages, each of which can be referenced by buttons and displayed.

Emesary is used to pass input information from the buttons into the MFD. This allows MP support hardware interfaces.

To make it easier to use SVG files for UI elements, a number of UI primitives are supported which support highlighting, editing in a generic way (see https://sourceforge.net/p/flightgear/fgdata/ci/next/tree/Nasal/canvas/PFD/).

UI Primitives

UIElement

Abstract element, all other elements inherit from this and have the following methods:

• getName : func() { return me._name; },
• setValue : func(value) { me._value = value; },
• getValue : func() { return me._value; },
• highlightElement : func() { },
• unhighlightElement : func() { },
• isEditable : func () { return 0; },
• isInEdit : func() { return me._edit; },
• enterElement : func() { me._edit = 0; return me._value; },
• clearElement : func() { me._edit = 0; },
• editElement : func() { me._edit = 1; },
• setVisible : func(vis) { },
• incrSmall : func(value) { },
• incrLarge : func(value) { },

TextElement

Simple text element, can have values set (setValue) and retrieved (getValue).

In the SVG file, this will have the name [pagename][name].

Constructor: new : func (pagename, svg, name, value="", style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• value - initial value
• style - style hash

HighlightElement

An SVG element that is made visible or hidden to indicate that an element is selected, rather than highlighting the text.

In the SVG file, this will have the name [pagename][name].

Constructor: new : func (pagename, svg, name, value="", style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• value - initial value
• style - style hash

ScrollElement

Element that can take a number of pre-defined values.

In addition to the [PageName][name] SVG Text element, [PageName][name]Left and [PageName][name]Right SVG elements used to indicate if there are any further values to scroll through.

Constructor: new : func (pageName, svg, name, values, initialIndex=0, style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• values - array of values that this scroll element can scroll through
• initialIndex - index into the array of values.
• style - style hash

Additional methods:

• setValues(values_array) sets the values of the element to values_array

PointerElement

An SVG element that moves horizontally or vertically depending on the value set.

In the SVG file, this will have the name [pagename][name]. [pagename][name] will be shifted linearly in the x axis (or y axis if vertical=1) such that when value >= maxVal it is shifted by scalePx.

Constructor: new : func (pagename, svg, name, minVal, maxVal, scalePx, vertical=0, value=0, style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• minVal - minimum value to clamp to
• maxVal - maximum value to clamp to
• scalePx - scale.
• vertical - whether the element should be shifted horizontally or vertically.
• value - initial value
• style - style hash

RotatingElement

An SVG element that rotates around an axis depending on the value set.

In the SVG file, this will have the name [pagename][name]. [pagename][name] will be rotated around the centerOffset point.

Constructor: new : func (pagename, svg, name, minVal, maxVal, rangeDeg, centerOffset, value=0, style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• minVal - minimum value to clamp to
• maxVal - maximum value to clamp to
• rangeDeg - degrees to rotate clockwise when value >= maxVal.
• centerOffset - Array [x,y] indicating the offset for the rotation.
• value - initial value
• style - style hash

DataEntryElement

Element that allows the user to enter input, e.g. entering an ICAO airport name to search for. incrLarge() is used to move the cursor between characters, incrSmall() is used to change the current character, or if the DataEntryElement is not being edited, to start editing it.

In addition to a [PageName][name] SVG Text element containing the string, there must also be a set of [PageName][name][0...size] elements, each representing a single character for data entry.

Constructor: new : func (pagename, svg, name, value, size, charSet, style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• name - name of the element. In the SVG file this will be [pagename][name].
• value - initial value
• size - the number of characters in the DataEntryElement
• charSet - string containing the set of valid characters, e.g. "ABDCEFG...."
• style - style hash

GroupElement

A set of elements used to display a paged list containing lines of elements. incrSmall() is used to scroll through the list, one line at a time. Pagination happens automatically.

If there are more values than space to display them, then a scrollbar can be displayed.

The SVG file will contain

• [pageName][elementNames ....][0 .... size] elements for the lines of elements to display
• optionally, [pageName][scrollTroughElement] and [pageName][scrollThumbElement] to display a scrollbar.

Constructor: new : func (pageName, svg, elementNames, size, highlightElement, arrow=0, scrollTroughElement=nil, scrollThumbElement=nil, scrollHeight=0, style=nil)

• pagename - the name of the page this belongs to, as referenced by the MFD. This is the prefix for the SVG elements themselves.
• svg - reference the svg Group element that contains the element.
• elementNames - a list of element names that define a single line within the group.
• size - the number of elements that are displayed on each page.
• highlightElement - the name of the element (in elementNames) that will be highlighted to indicate the selected line.
• arrow - whether the highlightElement is a TextElement (and will be highlighted normally) or an ArrowElement (and will be shown or hidden)
• scrollTroughElement/scrollThumbElement, the names (without pagename prefix) that are used to scroll through the list. If neither are defined, then no scrollbar will be displayed, though the list can still scroll.
• scrollHeight - the total height through which the scrollThumbElement will move. Typically this will be the height of the scrollTroughElement minus the height of the scrollThumbElement.
• style - style hash