Howto:Creating SVG-based Canvas Avionics

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

Prerequisites

• Canvas_Snippets#Adding_Vector_Images
• Scripted SVG parser for Canvas
• Howto:Coding a simple Nasal Framework

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)

Intro

Your best bet is learning 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: [File:Navigation ) 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. — Hooray (Feb 15th, 2016). Re: Dynon Avionics D180. (powered by Instant-Cquotes)

Normally, you would start by prototyping instruments using a standalone GUI dialog, which greatly simplifies the whole prototyping process, because reloading/switching aircraft in FG still works only very unreliably - equally, lose coupling is much easier to accomplish by using a standalone GUI dialog. For starters, you will probably want to use the Nasal console and play with the code snippets from: Canvas Snippets The whole idea of this article is to get people started doing basic stuff, and then let them integrate things as required - i.e. "Canvas Snippets" is all about providing building blocks that can be adapted as needed. In other words, feel free to ask questions or help improve the wiki docs if you think anything is missing - please do so via the main Canvas forum, we should usually be able to answer most questions pretty quickly, or at least provide snippets/pointers to snippets. You will definitely benefit from understanding Nasal, and object-oriented programming in particular, a few fairly accessible introductory articles are these: Howto:Start using vectors and hashes in Nasal Object oriented programming in Nasal Object Oriented Programming with Nasal Once you have worked through these and played with a few examples, I would suggest to look at the Canvas docs, the API reference, and the snippets on the wiki. For prototyping purposes, I would suggest to create a standard canvas GUI dialog: Howto:Creating a Canvas GUI dialog file And you should also learn how to use io.include() and friends to split up your Nasal sources into separate files and make things more modular. Note that you don't need to be an experienced Nasal coder to use Nasal/Canvas, but understanding a few basic concepts will greatly simplify the whole process. The other part of this is artwork, which is usually created/edited using the Inkscape SVG editor. And it also makes sense to look at people who have previously done related work (e.g. Gijs, Hyde, artix, Philosopher, TheTom etc) - if in doubt, check the commit logs of aircraft using Canvas to look up whose involved. (but please don't just send tons of PMs to those, but instead ask general questions on the forum, and offer to provide something in return, i.e. document your journey, help improve the wiki/docs or help improve/write tutorials etc) For a few more relevant pointers/discussions, please see: search.php?st=0&sk=t&sd=d&sr=posts&keywords=canvas+animated+svg search.php?st=0&sk=t&sd=d&sr=posts&keywords=canvas+animated+inkscape search.php?st=0&sk=t&sd=d&sr=posts&keywords=nasal+canvas+animated+timers+listeners (it would be great, if someone could copy relevant stuff over to the wiki so that these postings can be turned into a new wiki article) Features closely related to existing stuff (think PFD, ND, EICAS/EFIS) would ideally be based on adapting, generaliing and refactoring existing code (as per Gijs' ND effort) though - but you would inevitably benefit from knowing how Nasal/Canvas work under the hood, especially in order to learn how to use the corresponding frameworks (think MapStructure), because most people have a hard time understanding the reasons for contributing to a generic/aircraft-agnostic effort even though their primary motivation is a single project only. Feel free to get in touch via the forum/wiki if you have any specific questions and nobody else seems to be around to answer those. strictly speaking, 3D modeling will remain largely irrelevant for anything involving MFDs, it will only start becoming slightly relevant when all prototyping is finished, i.e. when you hook up your Nasal/Canvas code and SVG artwork to the cockpit and stop using a standalone GUI dialog. Overall, 3D modeling has little (if any) bearing on 2D MFDs - and people focusing on that, merely demonstrate to fellow coders that their priorities/interests or skills are elsewhere (you could look at the FARMIN effort). — Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700. (powered by Instant-Cquotes)