Difference between revisions of "Canvas SVG Parser"

From FlightGear wiki
Jump to: navigation, search
(Created page with "{{Template:Canvas Navigation}} 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). Aft...")
 
Line 1: Line 1:
 
{{Template:Canvas Navigation}}
 
{{Template:Canvas Navigation}}
 +
 +
== 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:
 
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:
Line 22: Line 24:
  
 
[[File:Canvas SVG demo.png|380px|left|thumb|Simple EICAS example (Notice our warning message)]]
 
[[File:Canvas SVG demo.png|380px|left|thumb|Simple EICAS example (Notice our warning message)]]
 +
 +
== Supported SVG features ==
 +
 +
The SVG file used for this demo has been created using [http://inkscape.org 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 [https://gitorious.org/~tomprogs/fg/toms-fgdata/blobs/canvas/Nasal/canvas/svg.nas 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'':
 +
 +
<syntaxhighlight lang="php">
 +
# 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...
 +
canvas.parsesvg
 +
(
 +
  eicas,
 +
  "Aircraft/C-130J/Instruments/EICAS.svg",
 +
  # ... but additionally with our font mapping function
 +
  {'font-mapper': font_mapper}
 +
);
 +
</syntaxhighlight>
  
 
[[Category:Canvas]]
 
[[Category:Canvas]]
 
[[Category:Howto]]
 
[[Category:Howto]]

Revision as of 12:42, 16 July 2012

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:

# 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!");
msg.setColor(1,0,0);

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...
canvas.parsesvg
(
  eicas,
  "Aircraft/C-130J/Instruments/EICAS.svg",
  # ... but additionally with our font mapping function
  {'font-mapper': font_mapper}
);