• Which the release of FS2020 we see an explosition of activity on the forun and of course we are very happy to see this. But having all questions about FS2020 in one forum becomes a bit messy. So therefore we would like to ask you all to use the following guidelines when posting your questions:

    • Tag FS2020 specific questions with the MSFS2020 tag.
    • Questions about making 3D assets can be posted in the 3D asset design forum. Either post them in the subforum of the modelling tool you use or in the general forum if they are general.
    • Questions about aircraft design can be posted in the Aircraft design forum
    • Questions about airport design can be posted in the FS2020 airport design forum. Once airport development tools have been updated for FS2020 you can post tool speciifc questions in the subforums of those tools as well of course.
    • Questions about terrain design can be posted in the FS2020 terrain design forum.
    • Questions about SimConnect can be posted in the SimConnect forum.

    Any other question that is not specific to an aspect of development or tool can be posted in the General chat forum.

    By following these guidelines we make sure that the forums remain easy to read for everybody and also that the right people can find your post to answer it.

Problem with Mask in html_ui

I am building an StemmeS12, and while doing that, learning how html_ui gauges is working.
Following several tutorials here, I managed to make an HTML_UI browser compatible version that can show an speed dashed line with green-yellow and red colors show in the lateral of the Artificial Horizont in SVG graphics like this:

The line is full from top to botton, but it is masked to only shows a portion in the middle. The top and botton areas are with other information.
Ok.. I managed to make this in JavaScript with something like this:

  1. var VelocidadMask = document.createElementNS(xmlns, "mask"); VelocidadMask.setAttribute("id", "LineaVelocidadMask"); VelocidadMask.setAttribute("maskUnits", "userSpaceOnUse");
    var LinVelMaskRect = document.createElementNS(xmlns, "rect"); LinVelMaskRect.setAttribute("x", "20.267908"); LinVelMaskRect.setAttribute("y", "19.944452"); LinVelMaskRect.setAttribute("width", "11.346234"); LinVelMaskRect.setAttribute("height", "228.4375"); LinVelMaskRect.setAttribute("fill", "white"); VelocidadMask.appendChild(LinVelMaskRect);

and then applied the mask in the group like this:
var lINEAvELOCIDAD = document.createElementNS(xmlns, "g"); lINEAvELOCIDAD.setAttribute("id", "lINEAvELOCIDAD"); lINEAvELOCIDAD.setAttribute("mask", "url(#LineaVelocidadMask)");

As said, this works in the Browser version, but when I substitute the "xmlns" with "Avionics.SVG.NS" to make it compatible with MSFS, it shows this one on the plane:


and if I change this line: var VelocidadMask = document.createElementNS(xmlns, "mask");
with this: var VelocidadMask = document.createElementNS(xmlns, "g");

Then it renders the speed line with the white squared mask on (same way as if I do the same change in the browser version preserving the
var xmlns = "http://www.w3.org/2000/svg";


So my question is if the "mask" parameter is something compatible with MSFS, and if not, how I can do it? Or maybe the problem comes from this line:

VelocidadMask.setAttribute("maskUnits", "userSpaceOnUse");

ok! I managed to make the mask in MSFS "mask" don't work, but it works "clipPath"

var aharsMask = document.createElementNS(Avionics.SVG.NS, "clipPath");

and in the assignation to make the mask use:

AHARS.setAttribute("clip-path", "url(#AharsMask)");

removing the line setAttribute("maskUnits", "userSpaceOnUse");

now my problem is that the mask is animated with the transform of the element masked, and it is supposed it should be stay on place as it is not child (the mask) of the masked element, but it seems that in Javascript it animates. I could use the opposite tranformation as the masked element, but I don't find the clue how.

I used this transform in msfsUpdate() (as you can see I am making a circle to test over the AHARS element):

msfsUpdate() {

var _elevatorPosition = SimVar.GetSimVarValue("ELEVATOR POSITION", "percent");

var _aileronPosition = SimVar.GetSimVarValue("AILERON POSITION", "percent");

if ( this.aharsElem ) {

this.aharsElem.setAttribute("transform", "rotate(" + _aileronPosition.toString() + ",50,50) translate(0," + _elevatorPosition.toString() + ")");

aharsMask.setAttribute("transform", "rotate(" + (-_aileronPosition).toString() + ",50,50) translate(0," + (-_elevatorPosition).toString() + ")");

//this.circuloElem.setAttribute("transform", "rotate(" + (-_aileronPosition).toString() + ",50,50) translate(0," + (-_elevatorPosition).toString() + ")");




as you can see this.circleElem was defined here, BUT using that one (uncomment the this.circuloElem.setAttribute..... removes all SVG element and just leave all the screen red.


var aharsMask = document.createElementNS(Avionics.SVG.NS, "clipPath");

aharsMask.setAttribute("id", "AharsMask");

this.circuloElem = AharsMask;

var circulo = document.createElementNS(Avionics.SVG.NS, "circle");

circulo.setAttribute('cx', '220');

circulo.setAttribute('cy', '150');

circulo.setAttribute('r', '100');

circulo.setAttribute('fill', 'yellow');