Skip to content

Commit

Permalink
Merge pull request #44 from Heavy-Division/MFS_irs_state
Browse files Browse the repository at this point in the history 
[LOGIC] MFD use attribute 'irs-state' for hiding / showing PFD elements
  • Loading branch information
@kimlada
kimlada authored Dec 27, 2020
2 parents ef671ea + 381e737 commit a838806
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 165 deletions.
78 changes: 76 additions & 2 deletions html_ui/Pages/VCockpit/Instruments/Airliners/B747_8/MFD/B747_8_MFD.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,81 @@ b747-8-mfd-element #Mainframe #align-times text.align {
alignment-baseline: central;
}

b747-8-mfd-element #Mainframe #align-times text#time-to-align {
visibility: hidden;
/** IRS States **/

/*
document.getElementById('Map').style.visibility = 'visible';
document.getElementById('headingGroup').style.visibility = 'visible';
document.getElementById('CourseInfo').style.visibility = 'visible';
document.getElementById('selectedHeadingGroup').style.visibility = 'visible';
document.getElementById('selectedTrackGroup').style.visibility = 'visible';
document.getElementById('ILSGroup').style.visibility = 'visible';
document.getElementById('currentRefGroup').style.visibility = 'visible';
document.getElementById('RangeGroup').style.visibility = 'visible';
*/

#Map[irs-state=off], #Map[irs-state=inited], #Map[irs-state=aligning],
map-instrument[irs-state=off], map-instrument[irs-state=inited], map-instrument[irs-state=aligning],
#headingGroup[irs-state=off], #headingGroup[irs-state=inited], #headingGroup[irs-state=aligning],
#CourseInfo[irs-state=off], #CourseInfo[irs-state=inited], #CourseInfo[irs-state=aligning],
#selectedHeadingGroup[irs-state=off], #selectedHeadingGroup[irs-state=inited], #selectedHeadingGroup[irs-state=aligning],
#selectedTrackGroup[irs-state=off], #selectedTrackGroup[irs-state=inited], #selectedTrackGroup[irs-state=aligning],
#ILSGroup[irs-state=off], #ILSGroup[irs-state=inited], #ILSGroup[irs-state=aligning],
#currentRefGroup[irs-state=off], #currentRefGroup[irs-state=inited], #currentRefGroup[irs-state=aligning],
#RangeGroup[irs-state=off], #RangeGroup[irs-state=inited], #RangeGroup[irs-state=aligning],
#NDInfo[irs-state=off], #NDInfo[irs-state=inited], #NDInfo[irs-state=aligning],
#circleGroup text[irs-state=off], #circleGroup text[irs-state=inited], #circleGroup text[irs-state=aligning]{
display: none;
}

#Map[irs-state=aligned],
map-instrument[irs-state=aligned],
#headingGroup[irs-state=aligned],
#CourseInfo[irs-state=aligned],
#selectedHeadingGroup[irs-state=aligned],
#selectedTrackGroup[irs-state=aligned],
#ILSGroup[irs-state=aligned],
#currentRefGroup[irs-state=aligned],
#RangeGroup[irs-state=aligned],
#NDInfo[irs-state=aligned]
#circleGroup text[irs-state=aligned]{
display: block;
}

#time-to-align[irs-state=aligning]{
display:block;
}

#time-to-align[irs-state=off], #time-to-align[irs-state=inited], #time-to-align[irs-state=aligned]{
display:none;
}

#align-times[irs-state=aligned], #FakeMapBox[irs-state=aligned], #FakeCompassBoxHdg[irs-state=aligned], #FakeCompassBox[irs-state=aligned]{
display: none;
}

#FakeCompassBoxHdg[irs-state=off]{
display:block;
}

#FakeCompassBoxHdg[irs-state=inited], #FakeCompassBoxHdg[irs-state=aligning], #FakeCompassBoxHdg[irs-state=aligned]{
display:none;
}

#FakeCompassBox[irs-state=off], #FakeCompassBox[irs-state=aligned]{
display:none;
}

#FakeCompassBox[irs-state=inited], #FakeCompassBox[irs-state=aligning]{
display:block;
}

#l-align[irs-state=aligning], #c-align[irs-state=aligning], #r-align[irs-state=aligning]{
display: block;
}

#l-align[irs-state=off], #l-align[irs-state=inited], #l-align[irs-state=aligned],
#c-align[irs-state=off], #c-align[irs-state=inited], #c-align[irs-state=aligned],
#r-align[irs-state=off], #r-align[irs-state=inited], #r-align[irs-state=aligned] {
display: none;
}
26 changes: 13 additions & 13 deletions html_ui/Pages/VCockpit/Instruments/Airliners/B747_8/MFD/B747_8_MFD.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<glasscockpit-highlight id="highlight"></glasscockpit-highlight>
<div id="Mainframe">
<div id="Electricity" state="off">
<div id="Map">
<map-instrument id="MapInstrument" map-mode="plan" bing-id="MFD" show-overlay="false" show-roads="false" config-path="/Pages/VCockpit/Instruments/Airliners/B747_8/MFD/"></map-instrument>
<div id="Map" irs-state="off">
<map-instrument irs-state="off" id="MapInstrument" map-mode="plan" bing-id="MFD" show-overlay="false" show-roads="false" config-path="/Pages/VCockpit/Instruments/Airliners/B747_8/MFD/"></map-instrument>
</div>
<div id="altitudeArc" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; ">
<svg viewBox="-300 0 600 600">
Expand All @@ -14,7 +14,7 @@
</div>
<jet-mfd-nd-compass id="Compass"></jet-mfd-nd-compass>
<div id="ModeChangeMask"></div>
<jet-mfd-nd-info id="NDInfo">
<jet-mfd-nd-info id="NDInfo" irs-state="off">
<div id="TopBox">
<div id="Speed">
<svg>
Expand Down Expand Up @@ -86,30 +86,30 @@
</div>
</jet-mfd-nd-info>

<svg id="FakeCompassBox" viewBox = "0 0 600 600">
<svg id="FakeCompassBox" viewBox = "0 0 600 600" irs-state="off">
<text x="266" y="57" fill="green" font-size="21" font-family="Roboto-Bold" text-anchor="end" alignment-baseline="central">HDG</text>
<text x="300" y="57" fill="white" font-size="26" font-family="Roboto-Bold" text-anchor="middle" alignment-baseline="central">---</text>
<text x="335" y="57" fill="green" font-size="21" font-family="Roboto-Bold" text-anchor="start" alignment-baseline="central">MAG</text>
<path d="M 270 38 L 270 75 L 330 75 L 330 38" stroke-width="1" stroke="white" fill="none"></path>
</svg>

<svg id="FakeCompassBoxHdg" viewBox = "0 0 600 600">
<svg id="FakeCompassBoxHdg" viewBox = "0 0 600 600" irs-state="off">
<text x="300" y="57">HDG</text>
<path d="M273 43L273 70L326 70L326 43L273 43"></path>
</svg>

<svg id="FakeMapBox" viewBox = "0 0 600 600">
<svg id="FakeMapBox" viewBox = "0 0 600 600" irs-state="off">
<text x="300" y="320">MAP</text>
<path d="M273 307L273 334L326 334L326 307L273 307"></path>
</svg>

<svg id="align-times">
<text id="GS_FakeText" class="Small" x="70" y="101" alignment-baseline="baseline">GS</text>
<text id="GS_FakeValue" class="Value" x="130" y="101" alignment-baseline="baseline">---</text>
<text id="time-to-align" class="align" x="50" y="150" alignment-baseline="baseline">TIME TO ALIGN</text>
<text id="l-align" class="align" x="50" y="190" alignment-baseline="baseline"></text>
<text id="c-align" class="align" x="50" y="220" alignment-baseline="baseline"></text>
<text id="r-align" class="align" x="50" y="250" alignment-baseline="baseline"></text>
<svg id="align-times" irs-state="off">
<text id="GS_FakeText" class="Small" x="70" y="101" alignment-baseline="baseline" irs-state="off">GS</text>
<text id="GS_FakeValue" class="Value" x="130" y="101" alignment-baseline="baseline" irs-state="off">---</text>
<text id="time-to-align" class="align" x="50" y="150" alignment-baseline="baseline" irs-state="off">TIME TO ALIGN</text>
<text id="l-align" class="align" x="50" y="190" alignment-baseline="baseline" irs-state="off"></text>
<text id="c-align" class="align" x="50" y="220" alignment-baseline="baseline" irs-state="off"></text>
<text id="r-align" class="align" x="50" y="250" alignment-baseline="baseline" irs-state="off"></text>
</svg>
</div>
</div>
Expand Down
136 changes: 58 additions & 78 deletions html_ui/Pages/VCockpit/Instruments/Airliners/B747_8/MFD/Heavy/Heavy_B747_8_MFD_MainPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,95 +49,75 @@ B747_8_MFD_MainPage.prototype.updateAltitudeArc = function (_deltatime) {
}
};

B747_8_MFD_MainPage.prototype.extendMFDHtmlElementsWithIrsState = () => {
[document.getElementById('headingGroup'),
document.getElementById('CourseInfo'),
document.getElementById('selectedHeadingGroup'),
document.getElementById('selectedTrackGroup'),
document.getElementById('ILSGroup'),
document.getElementById('currentRefGroup'),
document.getElementById('RangeGroup'),
].forEach((element) => {
element.setAttribute('irs-state', 'off');
});

let compassCircleGroup = document.getElementById('circleGroup');
compassCircleGroup.querySelectorAll('text').forEach((element) => {
element.setAttribute('irs-state', 'off');
});
};

B747_8_MFD_MainPage.prototype.updateMapIfIrsNotAligned = function () {
this.extendMFDHtmlElementsWithIrsState();
this.heavyIRSSimulator.update();

if (this.heavyIRSSimulator.irsLState > 2 || this.heavyIRSSimulator.irsCState > 2 || this.heavyIRSSimulator.irsRState > 2) {
document.getElementById('align-times').style.visibility = 'hidden';
document.getElementById('FakeMapBox').style.visibility = 'hidden';
document.getElementById('FakeCompassBoxHdg').style.visibility = 'hidden';
document.getElementById('FakeCompassBox').style.visibility = 'hidden';

document.getElementById('Map').style.visibility = 'visible';
document.getElementById('headingGroup').style.visibility = 'visible';
document.getElementById('CourseInfo').style.visibility = 'visible';
document.getElementById('selectedHeadingGroup').style.visibility = 'visible';
document.getElementById('selectedTrackGroup').style.visibility = 'visible';
document.getElementById('ILSGroup').style.visibility = 'visible';
document.getElementById('currentRefGroup').style.visibility = 'visible';
document.getElementById('RangeGroup').style.visibility = 'visible';

document.getElementById('NDInfo').style.visibility = 'visible';

let compassCircleGroup = document.getElementById('circleGroup');
compassCircleGroup.querySelectorAll('text').forEach((element) => {
element.style.visibility = 'visible';
document.querySelectorAll('[irs-state]').forEach((element) => {
element.setAttribute('irs-state', 'aligned');
});
return;
}

document.getElementById('align-times').style.visibility = 'visible';

if (this.heavyIRSSimulator.irsLState > 0 || this.heavyIRSSimulator.irsCState > 0 || this.heavyIRSSimulator.irsRState > 0) {
document.getElementById('FakeCompassBoxHdg').style.visibility = 'hidden';
document.getElementById('FakeCompassBox').style.visibility = 'visible';
} else {
document.getElementById('FakeCompassBoxHdg').style.visibility = 'visible';
document.getElementById('FakeCompassBox').style.visibility = 'hidden';
}

document.getElementById('Map').style.visibility = 'hidden';

document.getElementById('headingGroup').style.visibility = 'hidden';
document.getElementById('CourseInfo').style.visibility = 'hidden';
document.getElementById('selectedHeadingGroup').style.visibility = 'hidden';
document.getElementById('selectedTrackGroup').style.visibility = 'hidden';
document.getElementById('ILSGroup').style.visibility = 'hidden';
document.getElementById('currentRefGroup').style.visibility = 'hidden';
document.getElementById('RangeGroup').style.visibility = 'hidden';

document.getElementById('NDInfo').style.visibility = 'hidden';
} else if (this.heavyIRSSimulator.irsLState > 1 || this.heavyIRSSimulator.irsCState > 1 || this.heavyIRSSimulator.irsRState > 1) {
document.querySelectorAll('[irs-state]').forEach((element) => {
element.setAttribute('irs-state', 'aligning');
});

let aligns = [document.getElementById('l-align'), document.getElementById('c-align'), document.getElementById('r-align')];
let aligns = [document.getElementById('l-align'), document.getElementById('c-align'), document.getElementById('r-align')];

aligns.forEach((element) => {
element.style.visibility = 'hidden';
element.textContent = '';
});

if (this.heavyIRSSimulator.irsLState === 2 || this.heavyIRSSimulator.irsCState === 2 || this.heavyIRSSimulator.irsRState === 2) {
document.getElementById('time-to-align').style.visibility = 'visible';
let times = [];
let position = 0;
let now = Math.floor(Date.now() / 1000);
if (this.heavyIRSSimulator.irsLState === 2) {
aligns[position].textContent = 'L ' + Math.floor(((this.heavyIRSSimulator.initLAlignTime + this.heavyIRSSimulator.irsLTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
}

if (this.heavyIRSSimulator.irsCState === 2) {
aligns[position].textContent = 'C ' + Math.floor(((this.heavyIRSSimulator.initCAlignTime + this.heavyIRSSimulator.irsCTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
}

if (this.heavyIRSSimulator.irsRState === 2) {
aligns[position].textContent = 'R ' + Math.floor(((this.heavyIRSSimulator.initRAlignTime + this.heavyIRSSimulator.irsRTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
}

} else if (this.heavyIRSSimulator.irsLState > 0 || this.heavyIRSSimulator.irsCState > 0 || this.heavyIRSSimulator.irsRState > 0) {
document.querySelectorAll('[irs-state]').forEach((element) => {
element.setAttribute('irs-state', 'inited');
});
} else {
document.getElementById('time-to-align').style.visibility = 'hidden';
}

aligns.forEach((element) => {
element.style.visibility = 'hidden';
element.textContent = '';
});

let times = [];
let position = 0;
let now = Math.floor(Date.now() / 1000);
if (this.heavyIRSSimulator.irsLState === 2) {
aligns[position].textContent = 'L ' + Math.floor(((this.heavyIRSSimulator.initLAlignTime + this.heavyIRSSimulator.irsLTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
}

if (this.heavyIRSSimulator.irsCState === 2) {
aligns[position].textContent = 'C ' + Math.floor(((this.heavyIRSSimulator.initCAlignTime + this.heavyIRSSimulator.irsCTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
}

if (this.heavyIRSSimulator.irsRState === 2) {
aligns[position].textContent = 'R ' + Math.floor(((this.heavyIRSSimulator.initRAlignTime + this.heavyIRSSimulator.irsRTimeForAligning) - now) / 60) + '+ MIN';
aligns[position].style.visibility = 'visible';
position++;
document.querySelectorAll('[irs-state]').forEach((element) => {
element.setAttribute('irs-state', 'off');
});
}

// Hides all texts from compass circle
let compassCircleGroup = document.getElementById('circleGroup');
compassCircleGroup.querySelectorAll('text').forEach((element) => {
element.style.visibility = 'hidden';
});
};

B747_8_MFD_MainPage.prototype.onUpdate = function (_deltatime) {
Expand Down
Loading

0 comments on commit a838806

Please sign in to comment.