Canvas SVG Parser

From FlightGear wiki
Revision as of 17:50, 30 July 2012 by Hooray (Talk | contribs) (Basic example)

Jump to: navigation, search

Background: Vector Image Support (Status 07/2012:SVG parser implemented and available)

TheTom: I already have some experimental code for an old version of the canvas. But basically it is just mapping the xml structure to the property tree. I though have no plans to support the full SVG standard, but only a subset. Maybe we should implement this in Nasal so its easier to add suport for new SVG features if someone needs it. As there is already support for parsing xml in Nasal parsing SVG should be pretty straight forward. Just a boring programming exercise :-) But using separate canvas elements instead of a single image will always be slower as every little piece of the canvas hat to be triangulated and afterwards rendered every time the canvas gets updated instead of just copying an image. On the other hand you if you use the canvas you can dynamically update the contents of the image and also get (theoretically) unlimited resolution, even changeable at runtime.

TheTom: Currently I use svgconv for converting SVG files to OpenVG compatible path syntax.

Regarding SVG, the advantage would be that people could use existing tools (GIMP, Inkscape) to create their images and then just "load" them via Nasal and add some dynamic features to them. Specifying all these things in Nasal would be very tedious, and this is something that most of us coders are really not too good at (i.e. artwork).

This is not to say that all of SVG would need to be supported, but there's already code in OSG to support such image formats - and if we could find a way to leverage native OSG code to handle such things, we would gain lots of flexibility: We have LOTS of users here who are really good at using tools like GIMP or Inkscape, so if they have a way to reuse such artwork, it would be great.

Integration-wise, there are some lessons to be learnt from the way SMIL works via SVG and ECMAScript (JavaScript).

Basic example

For loading a SVG file onto a Canvas we first need to create a Canvas instance (See Howto:Add_a_2D_canvas_instrument_to_your_aircraft). Afterwards we can load a SVG by just using the function canvas.parsesvg from the Canvas API, also the API now supports retrieving elements by id which enables the following simple code snippet for changing the text and color in an instrument:

# Create a group for the parsed elements
var eicas = my_canvas.createGroup();

# Parse an SVG file and add the parsed elements to the given group
canvas.parsesvg(eicas, "Aircraft/C-130J/Instruments/EICAS.svg");

# Get a handle to the element called "ACAWS_10" inside the parsed
# SVG file...
var msg = eicas.getElementById("ACAWS_10");

# ... and change it's text and color
msg.setText("THE NEW API IS COOL!");

Also the API now supports retrieving elements by id which enables the following simple code snippet for changing the text and color in an instrument: You can lookup any type of element you want and modify them how you want (Add transformations, change colors/texts/coordinates etc.). You can also lookup an parent element and afterwards some of is child elements. By this you can use the same id multiple times but are still able to get access to every element (eg. Engine 1/Dial N1, Engine 2/Dial N1, etc.).

The result will look somehow like in the following image. The screen on the left side has been created by using the code snippet above and the screen on the right side is just a statically rendered version of the EICAS:

Simple EICAS example (Notice our warning message)

Supported SVG features

The SVG file used for this demo has been created using Inkscape. Using paths (also with linestipple/dasharray), text, groups and cloning is supported, but don't try to use more advanced features like gradients, as the SVG parser doesn't interpret every part of the SVG standard. (You can always have a look at the implementation and also improve it if you want ;-) )

Advanced usage

Font settings

By default every text element uses "LiberationFonts/LiberationMono-Bold.ttf" for rendering. If you want to use another font you can pass a function as an additional option to canvas.parsesvg:

# There are two arguments passed to the function. The first contains
# the font-family and the second one the font-weight attribute value
var font_mapper = func(family, weight)
  if( family == "Ubuntu Mono" and weight == "bold" )
    # We have to return the name of the font file, which has to be
    # inside either the global Font directory inside fgdata or a
    # Font directory inside the current aircraft directory.
    return "UbuntuMono-B.ttf";

  # If we don't return anything the default font is used

# Same as before...
  # ... but additionally with our font mapping function
  {'font-mapper': font_mapper}