Howto:Serializing a Canvas to SVG
The FlightGear forum has a subforum related to: Canvas |
This article is a stub. You can help the wiki by expanding it. |
Background
This was inspired by recurring discussions on the forum to easily reuse existing Canvas based MFDs and show them in a browser or render them remotely using a Python script. The easiest way to do so would be treating a Canvas as a SVG file, simply because most Canvas based MFDs already use SVG files internally. These SVG files are obviously static and parsed by the Nasal svg.nas module to turn them into Canvas properties. However, the opposite would also be possible, all that would require is traversing a canvas node in the tree and iterating over all its child nodes, parsing its properties/attributes to come u p with a corresponding SVG equivalent.
For starters, it makes sense to merely focus on MFDs that are already using SVG files, because instead of actually traversing the full canvas, we can simply let the http server serve the original SVG file itself, which greatly simplifies the whole thing.
However, the next step would actually be traversing an existing Canvas node in the property tree, and then iterating over its child nodes to map certain properties back to their SVG equivalent.
This should work reasonably well, because the module converting svg markup into canvas properties also is implemented in Nasal, and can be easily extended.
Example
We will be working with an example taken from another tutorial, one showing a few raster images (splash screens) using fairly simple SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="20" y="20" width="80" height="80" xlink:href="Textures/Splash1.png" />
<image x="120" y="20" width="80" height="80" xlink:href="Textures/Splash2.png" />
<image x="220" y="20" width="80" height="80" xlink:href="Textures/Splash3.png" />
<image x="20" y="120" width="80" height="80" xlink:href="Textures/Splash4.png" />
<image x="120" y="120" width="80" height="80" xlink:href="Textures/Splash5.png" />
</svg>
This is referencing 5 different splash screen textures found in $FG_ROOT/Textures.
When the patches svg module parses the SVG file, it comes up with a property hierarchy according to this:
Related
References
References
|