Canvas Draw: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
Line 55: Line 55:


This would be in line with the existing Canvas/MapStructure APIs, and it would also make it possible to easily use delegates to customize internal behavior
This would be in line with the existing Canvas/MapStructure APIs, and it would also make it possible to easily use delegates to customize internal behavior
<syntaxhighlight lang="javascript">
var myElement = func(root, options, style) {
....
return element;
}
</syntaxhighlight>


== Implementation ==
== Implementation ==

Revision as of 15:58, 2 December 2018

Canvas.Draw
Started in 12/2018
Description 2D drawing helpers for creating avionics
Maintainer(s) ThomasS
Contributor(s) ThomasS
Status discussion as of 11/2018
This article is a stub. You can help the wiki by expanding it.

Status

By now, Thorsten created a library of procedural commands which allows you to e.g. draw a HUD with a minimal set of commands and re-draw it with a different design if you find it doesn't match reality runtime - something which SVG can just not do.

All it needs is to streamline it and document it, and then the situation your describe may (or not) change, but in Thorsten's opinion it beats SVG in designer-friendliness by a large margin - simply because you can change spacings etc. runtime in FG. Whereas re-drawing a pitch ladder with different spacing in SVG is a piece of work and there's no guarantee you get it right runtime.

within the Shuttle code, Thorsten seems to have developed a considerably superior version of the Canvas API, i.e. would it not make sense to move that into the FGData Canvas files, and standardise it?

It sounds as if Dirk and probably many other people want exactly that kind of functionality.[1]

Background

a library of functions to draw more complex things on a canvas? While some people prefer Inkscape/SVG and others prefer nasal scripting, this page is intended to document a library for procedural drawing.

Specifically, to help implement elements commonly used for the PFD and parts of MFD.

While people can certainly find lots of code in all the different aircraft for drawing things like speed tape, compass, engine instruments etc. but as far as I see there is nothing like a canvas.draw library as of 12/2018.

It seems, it would be good to start such thing and the first elements would be a compass rose and a linear tape (e.g. for speed and altitude), stylable of course. So the library should also contain a structure to organize styles.

Existing work

TODO: add links

  • shuttle 2D drawing helpers (Thorsten)
  • rleibner's 2D drawing API
  • extra500 helpers

(anything else ?)

Design

Ideally, the new 2D drawing helpers would be agnostic to the concrete use-case, so that they can be used for arbitrary purposes. This can be accomplished by following a few simple design principles:

  • all drawing callbacks should accept a mandatory group/element node to operate on
  • all drawing callbacks should accept/support an optional options hash
  • all drawing callback should return the corresponding Canvas element

This would be in line with the existing Canvas/MapStructure APIs, and it would also make it possible to easily use delegates to customize internal behavior


var myElement = func(root, options, style) {
....
return element;
}

Implementation

We are proposing a layered design, with simple shapes being used to implement more complex elements (think altitude/speed tapes, artificial horizon etc). Internal default heuristics should be customizable via delegates (Nasal callbacks).

Approach

To ensure rapid prototyping, the idea is to structure the whole thing as an addon. This would make it possible to easily copy existing code into a new module and adapt it as needed.

For testing purposes, it would make sense to extend svg.nas as we go, i.e. to add support for native shapes to the svg parser.

In addition, it might be worthwhile to also write a custom Nasal parser to parse our existing HUD XML markup (README.hud). This would seem like a goo idea, because we've been wanting to get rid of the hard-coded legacy HUD system anyway, but were still lacking a corresponding 2D API for things like altitude/speed tapes.

Structuring the whole thing as an addon, would also mean that people can get more easily involved in testing the new module, but also in developing it further.

Once the canvas.draw module is sufficiently mature it would be reviewed and get committed to the base package.

Related

References

References