Canvas SVG parser: Difference between revisions

Jump to navigation Jump to search
m
Line 51: Line 51:
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'':
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">
<syntaxhighlight lang="nasal">
# There are two arguments passed to the function. The first contains
# There are two arguments passed to the function. The first contains
# the font-family and the second one the font-weight attribute value
# the font-family and the second one the font-weight attribute value
Line 74: Line 74:
);
);
</syntaxhighlight>
</syntaxhighlight>
== Complex Instruments ==
Complex instruments like an airliner's PFD, ND or EICAS display will typically need to retrieve dozens of handles to SVG elements, store them and animate them independently. Typically, you'll see code like the following snippet being used:
<syntaxhighlight lang="nasal">
        var speedText = pfd.getElementById("speedText");
        var markerBeacon = pfd.getElementById("markerBeacon");
        var markerBeaconText = pfd.getElementById("markerBeaconText");
        var machText = pfd.getElementById("machText");
        var altText = pfd.getElementById("altText");
        var selHdgText = pfd.getElementById("selHdgText");
        var selAltPtr = pfd.getElementById("selAltPtr");
        var fdX = pfd.getElementById("fdX");
        var fdY = pfd.getElementById("fdY");
        var curAlt1 = pfd.getElementById("curAlt1");
        var curAlt2 = pfd.getElementById("curAlt2");
        var curAlt3 = pfd.getElementById("curAlt3");
... and so on
</syntaxhighlight>
As you can see, it is generally a good idea to use identical names, for both, SVG elements and Nasal variables.
However, there's one important consideration here: Code like that is generally not suitable to work for multiple instances of an instruments. This may not seem important in the beginning, but normally each pilot will have their own PFD/ND screens, and their own set of switches to control each display. In addition, keeping such requirements in mind, helps to generalize and improve the design of your code.
So rather than having possibly dozens of free-standing Nasal variables dozens of getElementById() calls, you can save lots of time, typing and energy by using a Nasal hash (class) as your instrument container:
<syntaxhighlight lang="nasal">
var myPFD777 = {
new: func {
  return {parents:[myPFD777] };
},
init: func(groupp) {
  me.pfd = group;
  canvas.parsesvg(me.pfd, "Aircraft/747-400/Models/Cockpit/Instruments/ND/ND.svg", {'font-mapper': font_mapper});
  foreach(var svg_element; ["wpActiveId","wpActiveDist","wind","gs","tas",
      "hdg","dmeLDist","dmeRDist","vorLId","vorRId",
      "eta","range","taOnly","status.wxr","status.wpt",
      "status.sta","status.arpt"])
  me[svg_element] = me.nd.getElementById(element);
}
};
</syntaxhighlight>
For a single instrument, this will be identical - but with the added advantage that all elements and canvas groups will not be saved as singleton/global variable, but as members of your myPFD777 class - that way, you will be easily able to support multiple instances of the same instrument.
If you have SVG elements that need some special processing, such as calling the updateCenter() during initialization, you can simply put those inside a separate vector:
<syntaxhighlight lang="nasal">
# load elements from vector image, and create instance variables using identical names, and call updateCenter() on each
# anything that needs updatecenter called, should be added to the vector here
# but do watch our for naming conflicts with other member fields, simply rename SVG IDs if necessary
foreach(var element; ["rotateComp","windArrow","selHdg",
      "curHdgPtr","staFromL","staToL",
      "staFromR","staToR","compass"] )
  me[element] = me.nd.getElementById(element).updateCenter();
</syntaxhighlight>
Bottom line being: 1) less code, 2) less typing, 3) better maintainable, 4) more future-proof


[[Category:Canvas]]
[[Category:Canvas]]
[[Category:Howto]]
[[Category:Howto]]

Navigation menu