plane icon Welcome to Microsoft Flight Simulator’s SDK Q&A Platform!

You have questions regarding the SDK? DevMode Tools? SimConnect? You would like to submit an idea for future improvements, seek help or exchange knowledge? You’re in the right place.


Please take a moment to read the platform’s guidelines before you get started!


question

Japo32 avatar image
Japo32 asked Japo32 answered

HTML_UI mask use in MSFS?

Hello!
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:dynonmaskbrowser.png

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:

dynonmsfsnomask.png


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";


dynondashlinenomask.png


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");

Thanks!


gaugeshtml
dynonmaskbrowser.png (2.5 KiB)
dynonmsfsnomask.png (179.6 KiB)
dynondashlinenomask.png (173.8 KiB)
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

1 Answer

·
Japo32 avatar image
Japo32 answered

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() + ")");

}

return;

}

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.

//CIRCLE MASK

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');

aharsMask.appendChild(circulo);


svgElem.appendChild(aharsMask);

411e58f8e99bf60add8e72cd631e1763.png


411e58f8e99bf60add8e72cd631e1763.png (181.6 KiB)
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 5 attachments (including images) can be used with a maximum of 19.1 MiB each and 23.8 MiB total.