From a963b55607e7bd1e1031100babb2f265f9ffcb7c Mon Sep 17 00:00:00 2001
From: Arron Hartley <arronhartley@gmail.com>
Date: Thu, 31 Dec 2020 20:08:33 +0000
Subject: [PATCH] Added new Baro Settings popup to the G3X. This is activated
 by clicking on the baro reference value under the altimeter. In order to
 bring this popup up, an ID was required to be added to the baro reference
 text in the shared Altimeter.js.

---
 .../NavSystems/AS3X_Touch/AS3X_Touch.css      |  64 ++++++-
 .../NavSystems/AS3X_Touch/AS3X_Touch.html     |  47 ++++-
 .../NavSystems/AS3X_Touch/AS3X_Touch.js       | 173 ++++++++++++++++++
 .../Shared/Templates/Altimeter/Altimeter.js   |   1 +
 4 files changed, 275 insertions(+), 10 deletions(-)

diff --git a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.css b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.css
index a57400c25f..e238badd9c 100755
--- a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.css
+++ b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.css
@@ -1,4 +1,4 @@
-:root {
+:root {
   --bodyHeightScale: 1; }
 
 @keyframes TemporaryShow {
@@ -1610,11 +1610,11 @@ as3x-touch-element {
         top: 0%;
         left: 30%;
         width: 39%; }
-    as3x-touch-element #MFD #timeKeyboard #TK_Bksp, as3x-touch-element #MFD #timeKeyboard #SK_Bksp, as3x-touch-element #MFD #timeKeyboard #AK_Bksp, as3x-touch-element #MFD #speedKeyboard #TK_Bksp, as3x-touch-element #MFD #speedKeyboard #SK_Bksp, as3x-touch-element #MFD #speedKeyboard #AK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #TK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #SK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #AK_Bksp {
+    as3x-touch-element #MFD #timeKeyboard #TK_Bksp, as3x-touch-element #MFD #timeKeyboard #SK_Bksp, as3x-touch-element #MFD #timeKeyboard #AK_Bksp, as3x-touch-element #MFD #speedKeyboard #TK_Bksp, as3x-touch-element #MFD #speedKeyboard #SK_Bksp, as3x-touch-element #MFD #speedKeyboard #AK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #TK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #SK_Bksp, as3x-touch-element #MFD #altitudeKeyboard #AK_Bksp, as3x-touch-element #MFD #BaroKeyboard #BARO_Bksp {
       position: absolute;
       width: 20%;
       right: 5%; }
-    as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #timeKeyboard #SK_Display, as3x-touch-element #MFD #timeKeyboard #AK_Display, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #speedKeyboard #SK_Display, as3x-touch-element #MFD #speedKeyboard #AK_Display, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #altitudeKeyboard #SK_Display, as3x-touch-element #MFD #altitudeKeyboard #AK_Display {
+    as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #timeKeyboard #SK_Display, as3x-touch-element #MFD #timeKeyboard #AK_Display, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #speedKeyboard #SK_Display, as3x-touch-element #MFD #speedKeyboard #AK_Display, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay, as3x-touch-element #MFD #altitudeKeyboard #SK_Display, as3x-touch-element #MFD #altitudeKeyboard #AK_Display, as3x-touch-element #MFD #BaroKeyboard #BARO_Display {
       position: absolute;
       width: 30%;
       left: 35%;
@@ -1624,26 +1624,26 @@ as3x-touch-element {
       padding-top: 0.6vh;
       text-align: center;
       font-size: 4.2vh; }
-      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #timeKeyboard #SK_Display .Writed, as3x-touch-element #MFD #timeKeyboard #AK_Display .Writed, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #speedKeyboard #SK_Display .Writed, as3x-touch-element #MFD #speedKeyboard #AK_Display .Writed, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Writed, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Writed {
+      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #timeKeyboard #SK_Display .Writed, as3x-touch-element #MFD #timeKeyboard #AK_Display .Writed, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #speedKeyboard #SK_Display .Writed, as3x-touch-element #MFD #speedKeyboard #AK_Display .Writed, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Writed, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Writed, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Writed, as3x-touch-element #MFD #BaroKeyboard #BARO_Display .Writed {
         background-color: none;
         color: aqua; }
-      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #timeKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #timeKeyboard #AK_Display .ToWrite, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #speedKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #speedKeyboard #AK_Display .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .ToWrite {
+      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #timeKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #timeKeyboard #AK_Display .ToWrite, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #speedKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #speedKeyboard #AK_Display .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .ToWrite, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .ToWrite, as3x-touch-element #MFD #BaroKeyboard #BARO_Display .ToWrite {
         background-color: none;
         color: dimgray; }
-      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #timeKeyboard #SK_Display .Writing, as3x-touch-element #MFD #timeKeyboard #AK_Display .Writing, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #speedKeyboard #SK_Display .Writing, as3x-touch-element #MFD #speedKeyboard #AK_Display .Writing, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Writing, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Writing {
+      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #timeKeyboard #SK_Display .Writing, as3x-touch-element #MFD #timeKeyboard #AK_Display .Writing, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #speedKeyboard #SK_Display .Writing, as3x-touch-element #MFD #speedKeyboard #AK_Display .Writing, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Writing, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Writing, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Writing, as3x-touch-element #MFD #BaroKeyboard #BARO_Display .Writing {
         animation: SelectedCharBlinkFreqEdit 1s infinite;
         min-width: 0.5vw;
         min-height: 3.6vh;
         display: inline-block; }
-      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #timeKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #timeKeyboard #AK_Display .Fixed, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #speedKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #speedKeyboard #AK_Display .Fixed, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Fixed {
+      as3x-touch-element #MFD #timeKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #timeKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #timeKeyboard #AK_Display .Fixed, as3x-touch-element #MFD #speedKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #speedKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #speedKeyboard #AK_Display .Fixed, as3x-touch-element #MFD #altitudeKeyboard #TK_TimeDisplay .Fixed, as3x-touch-element #MFD #altitudeKeyboard #SK_Display .Fixed, as3x-touch-element #MFD #altitudeKeyboard #AK_Display .Fixed, as3x-touch-element #MFD #BaroKeyboard #BARO_Display .Fixed {
         background-color: aqua; }
-    as3x-touch-element #MFD #timeKeyboard #KeyBoard, as3x-touch-element #MFD #speedKeyboard #KeyBoard, as3x-touch-element #MFD #altitudeKeyboard #KeyBoard {
+    as3x-touch-element #MFD #timeKeyboard #KeyBoard, as3x-touch-element #MFD #speedKeyboard #KeyBoard, as3x-touch-element #MFD #altitudeKeyboard #KeyBoard, as3x-touch-element #MFD #BaroKeyboard #KeyBoard {
       position: absolute;
       top: 20%;
       height: 60%;
       width: 60%;
       left: 23%; }
-      as3x-touch-element #MFD #timeKeyboard #KeyBoard .roundButton, as3x-touch-element #MFD #speedKeyboard #KeyBoard .roundButton, as3x-touch-element #MFD #altitudeKeyboard #KeyBoard .roundButton {
+      as3x-touch-element #MFD #timeKeyboard #KeyBoard .roundButton, as3x-touch-element #MFD #speedKeyboard #KeyBoard .roundButton, as3x-touch-element #MFD #altitudeKeyboard #KeyBoard .roundButton, as3x-touch-element #MFD #BaroKeyboard #KeyBoard .roundButton {
         width: 9vh;
         height: 9vh;
         line-height: 9vh;
@@ -1661,6 +1661,40 @@ as3x-touch-element {
       position: absolute;
       bottom: 2%;
       right: 2%; }
+
+as3x-touch-element #MFD #BaroKeyboard .gradientButton .mainText {
+    font-size: 2.4vh;
+    text-align: center;
+    height: 100%;
+}
+
+as3x-touch-element #MFD #BaroKeyboard .BottomButtons .gradientButton {
+    position: absolute;
+    bottom: 2%;
+    width: 30%;
+}
+
+as3x-touch-element #MFD #BaroKeyboard .BottomButtons #BARO_Enter {
+    right: 2%;
+}
+
+as3x-touch-element #MFD #BaroKeyboard .BottomButtons #BARO_Cancel {
+    left: 2%;
+}
+
+as3x-touch-element #MFD #BaroKeyboard #BARO_STD {
+    position: absolute;
+    left: 6%;
+    top: 7%;
+    width: 20%;
+}
+
+as3x-touch-element #MFD #BaroKeyboard #BARO_Bksp {
+    position: absolute;
+    right: 6%;
+    top: 7%;
+}
+
     as3x-touch-element #MFD #fullKeyboard #Keyboard_LetterTable,
     as3x-touch-element #MFD #fullKeyboard #Keyboard_NumberTable {
       display: none; }
@@ -2161,6 +2195,18 @@ as3x-touch-element {
       line-height: 3.5vh;
       background: none;
       vertical-align: bottom; }
+    as3x-touch-element .gradientButton .small-title {
+        position: absolute;
+        height: 20%;
+        width: 100%;
+        bottom: 4%;
+        text-align: center;
+        color: white;
+        font-size: 2.0vh;
+        line-height: 2.0vh;
+        background: none;
+        vertical-align: bottom;
+    }
     as3x-touch-element .gradientButton .topText {
       color: white;
       text-align: left;
diff --git a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.html b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.html
index a042269fa2..e210aa122b 100755
--- a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.html
+++ b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.html
@@ -1,4 +1,4 @@
-<script type="text/html" id="AS3X_Touch">
+<script type="text/html" id="AS3X_Touch">
     <glasscockpit-highlight id="highlight"></glasscockpit-highlight>
     <div id="Mainframe">
         <div id="Electricity" state="off">
@@ -1456,6 +1456,51 @@
                         </div>
                     </div>
                 </div>
+                <div class="popup" id="BaroKeyboard">
+                    <div class="WindowTitle">Baro Setting</div>
+                    <div class="gradientButton" id="BARO_STD">
+                        <div class="mainText">Set Standard</div>
+                    </div>
+                    <div id="BARO_Display">
+                        __.__IN
+                    </div>
+                    <div class="gradientButton" id="BARO_Bksp">
+                        <img class="img" src="/Pages/VCockpit/Instruments/NavSystems/Shared/Images/TSC/Icons/ICON_MAP_BKSP.png" />
+                        <div class="small-title">Backspace</div>
+                    </div>
+                    <table id="KeyBoard">
+                        <tr>
+                            <td> <div class="roundButton" id="BARO_1">1</div> </td>
+                            <td> <div class="roundButton" id="BARO_2">2</div> </td>
+                            <td> <div class="roundButton" id="BARO_3">3</div> </td>
+                        </tr>
+                        <tr>
+                            <td> <div class="roundButton" id="BARO_4">4</div> </td>
+                            <td> <div class="roundButton" id="BARO_5">5</div> </td>
+                            <td> <div class="roundButton" id="BARO_6">6</div> </td>
+                        </tr>
+                        <tr>
+                            <td> <div class="roundButton" id="BARO_7">7</div> </td>
+                            <td> <div class="roundButton" id="BARO_8">8</div> </td>
+                            <td> <div class="roundButton" id="BARO_9">9</div> </td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                            <td> <div class="roundButton" id="BARO_0">0</div> </td>
+                            <td></td>
+                        </tr>
+                    </table>
+                    <div class="BottomButtons">
+                        <div class="gradientButton" id="BARO_Cancel">
+                            <img class="img" src="/Pages/VCockpit/Instruments/NavSystems/Shared/Images/TSC/Icons/ICON_MAP_BUTTONBAR_BACK_1.png" />
+                            <div class="small-title">Cancel</div>
+                        </div>
+                        <div class="gradientButton" id="BARO_Enter" state="Greyed">
+                            <img class="img" src="/Pages/VCockpit/Instruments/NavSystems/Shared/Images/TSC/Icons/ICON_MAP_ENTER.png" />
+                            <div class="small-title">Enter</div>
+                        </div>
+                    </div>
+                </div>
                 <div class="popup" id="PFD_Menu">
                     <div class="title">PFD Options</div>
                     <div id="cdi_source" class="subpart">
diff --git a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.js b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.js
index 6f8a517171..17b1bc84de 100755
--- a/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.js
+++ b/src/workingtitle-vcockpits-instruments-navsystems-gx/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/AS3X_Touch/AS3X_Touch.js
@@ -60,6 +60,8 @@ class AS3X_Touch extends NavSystemTouch {
         this.mapMenu.setGPS(this);
         this.afcsMenu = new NavSystemElementContainer("AFCS Menu", "AFCS_Menu", new AS3X_Touch_AFCSMenu());
         this.afcsMenu.setGPS(this);
+        this.baroMenu = new NavSystemElementContainer("BaroKeyboard", "BaroKeyboard", new AS3X_Touch_BaroKeyboard());
+        this.baroMenu.setGPS(this);
         this.fullKeyboard = new NavSystemElementContainer("Full Keyboard", "fullKeyboard", new AS3X_Touch_FullKeyboard());
         this.fullKeyboard.setGPS(this);
         this.duplicateWaypointSelection = new NavSystemElementContainer("Waypoint Duplicates", "WaypointDuplicateWindow", new AS3X_Touch_DuplicateWaypointSelection());
@@ -124,6 +126,14 @@ class AS3X_Touch extends NavSystemTouch {
                 this.switchToPopUpPage(this.afcsMenu);
             }
         }.bind(this));
+        this.makeButton(this.getChildById("BaroReference"), function () {
+            if (this.popUpElement == this.baroMenu) {
+                this.closePopUpElement();
+            }
+            else {
+                this.switchToPopUpPage(this.baroMenu);
+            }
+        }.bind(this));
         this.maxUpdateBudget = 12;
         this.autoPitotHeat = false;
     }
@@ -938,6 +948,169 @@ class AS3X_Touch_MapMenu extends AS3X_Touch_Popup {
         Avionics.Utils.diffAndSetAttribute(this.rangeAuto, "state", this._map.getAutoRange() ? "Active" : "");
     }
 }
+class AS3X_Touch_BaroKeyboard extends AS3X_Touch_Popup {
+    constructor() {
+        super(...arguments);
+        this.maxChars = 4;
+        this.needUpdate = true;
+        this.currentIndex = -1;
+        this.currentValue = [-1, -1, -1, -1];
+        this.displayedValue = "__.__IN";
+    }
+    init(_root) {
+        super.init(_root);
+        this.display = this.gps.getChildById("BARO_Display");
+        this.enterButton = this.gps.getChildById("BARO_Enter");
+        this.setStdButton = this.gps.getChildById("BARO_STD");
+        this.cancelButton = this.gps.getChildById("BARO_Cancel");
+        this.backspaceButton = this.gps.getChildById("BARO_Bksp");
+        this.KN_0 = this.gps.getChildById("BARO_0");
+        this.KN_1 = this.gps.getChildById("BARO_1");
+        this.KN_2 = this.gps.getChildById("BARO_2");
+        this.KN_3 = this.gps.getChildById("BARO_3");
+        this.KN_4 = this.gps.getChildById("BARO_4");
+        this.KN_5 = this.gps.getChildById("BARO_5");
+        this.KN_6 = this.gps.getChildById("BARO_6");
+        this.KN_7 = this.gps.getChildById("BARO_7");
+        this.KN_8 = this.gps.getChildById("BARO_8");
+        this.KN_9 = this.gps.getChildById("BARO_9");
+
+        this.gps.makeButton(this.enterButton, this.enter.bind(this));
+        this.gps.makeButton(this.setStdButton, this.setStdPressure.bind(this));
+        this.gps.makeButton(this.cancelButton, this.cancel.bind(this));
+        this.gps.makeButton(this.backspaceButton, this.backspace.bind(this));
+        this.gps.makeButton(this.KN_0, this.numberPressed.bind(this, 0));
+        this.gps.makeButton(this.KN_1, this.numberPressed.bind(this, 1));
+        this.gps.makeButton(this.KN_2, this.numberPressed.bind(this, 2));
+        this.gps.makeButton(this.KN_3, this.numberPressed.bind(this, 3));
+        this.gps.makeButton(this.KN_4, this.numberPressed.bind(this, 4));
+        this.gps.makeButton(this.KN_5, this.numberPressed.bind(this, 5));
+        this.gps.makeButton(this.KN_6, this.numberPressed.bind(this, 6));
+        this.gps.makeButton(this.KN_7, this.numberPressed.bind(this, 7));
+        this.gps.makeButton(this.KN_8, this.numberPressed.bind(this, 8));
+        this.gps.makeButton(this.KN_9, this.numberPressed.bind(this, 9));
+    }
+    onEnter() {
+        super.onEnter();
+        this.needUpdate = true;
+        this.currentIndex = -1;
+        this.currentValue = [-1, -1, -1, -1];
+        this.displayedValue = "__.__IN";
+    }
+    cancel() {
+        this.gps.closePopUpElement();
+    }
+    enter() {
+        if (this.enterButton.getAttribute("state") == "Greyed")
+            return;
+
+        const inToMbConst = 33.8639;
+
+        let pressure = this.buildPressureValue(this.currentValue);
+        let pressureInMb = pressure * inToMbConst;
+
+        SimVar.SetSimVarValue("K:0:KOHLSMAN_SET", "number", 16 * pressureInMb);
+        this.cancel();
+    }
+    validateCurrentValues() {
+        const minPressure = 27.99;
+        const maxPressure = 32.01;
+
+        if (this.currentIndex < 4)
+            return false;
+
+        let pressure = this.buildPressureValue(this.currentValue);
+        if ((pressure < minPressure) || (pressure > maxPressure))
+            return false;
+
+        return true;
+    }
+    buildPressureValue(_values) {
+        const coef = [10, 1, 0.1, 0.01];
+
+        let val = 0;
+        for (let i = 0; i < _values.length; i++) {
+            val += (_values[i] == -1 ? 0 : _values[i]) * coef[i];
+        }
+        return val;
+    }
+    onUpdate() {
+        if (this.needUpdate) {
+            if (this.currentIndex == -1) {
+                this.display.innerHTML = '<span class="NoEdit">' + this.displayedValue + '</span>';
+            }
+            else {
+                let rxIndex = this.currentIndex;
+                let rxLeft = this.currentValue.length - this.currentIndex;
+                if (this.currentIndex >= 2) {
+                    rxIndex += 1; // Skip "."
+                    rxLeft = (rxLeft == 0 ? 0 : rxLeft - 1);
+                }
+                var regex = new RegExp('^(.{' + rxIndex + '})(.{0,1})(.{' + rxLeft + '})');
+
+                const replaceWrited = '<span class="Writed">$1</span>';
+                const replaceCursor = '<span class="Writing">$2</span>';
+                const replaceToWrite = '<span class = "ToWrite">$3</span>';
+                const replaceSuffix = '<span class="Writed">IN</span>';
+
+                var replace = replaceWrited;
+                if (this.currentIndex < 4) {
+                    replace += replaceCursor;
+                }
+                replace += replaceToWrite + replaceSuffix;
+
+                var pressure = "";
+                let digitsLeft = this.currentValue.length;
+                let count = 0;
+                while (digitsLeft > 0) {
+                    if (count++ == 2) {
+                        pressure += ".";
+                    }
+
+                    let idx = this.currentValue.length - digitsLeft--;
+                    pressure += (this.currentValue[idx] == -1 ? "_" : this.currentValue[idx]);
+                }
+
+                this.displayedValue = pressure.replace(regex, replace);
+                this.display.innerHTML = this.displayedValue;
+            }
+
+            if (this.validateCurrentValues()) {
+                this.enterButton.setAttribute("state", "");
+            }
+            else {
+                this.enterButton.setAttribute("state", "Greyed");
+            }
+
+            this.needUpdate = false;
+        }
+    }
+    numberPressed(_number) {
+        if (this.currentIndex == -1) {
+            this.currentValue = [-1, -1, -1, -1];
+            this.currentIndex = 0;
+        }
+        if (this.currentIndex < 4) {
+            this.currentValue[this.currentIndex] = _number;
+            this.currentIndex++;
+        }
+        this.needUpdate = true;
+    }
+    backspace() {
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+            for (let i = this.currentIndex; i < this.currentValue.length; i++) {
+                this.currentValue[i] = -1;
+            }
+            this.needUpdate = true;
+        }
+    }
+    setStdPressure() {
+        this.currentIndex = 4;
+        this.currentValue = [2, 9, 9, 2];
+        this.needUpdate = true;
+    }
+}
 class AS3X_Touch_AFCSMenu extends AS3X_Touch_Popup {
     init(root) {
         super.init(root);
diff --git a/src/workingtitle-vcockpits-instruments-navsystems/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/Shared/Templates/Altimeter/Altimeter.js b/src/workingtitle-vcockpits-instruments-navsystems/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/Shared/Templates/Altimeter/Altimeter.js
index 08ee94c71e..4f5030c0fb 100755
--- a/src/workingtitle-vcockpits-instruments-navsystems/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/Shared/Templates/Altimeter/Altimeter.js
+++ b/src/workingtitle-vcockpits-instruments-navsystems/html_ui/WorkingTitle/Pages/VCockpit/Instruments/NavSystems/Shared/Templates/Altimeter/Altimeter.js
@@ -317,6 +317,7 @@ class Altimeter extends HTMLElement {
             this.baroText.setAttribute("font-family", "Roboto-Bold");
             this.baroText.setAttribute("text-anchor", "middle");
             this.baroText.textContent = "--.--IN";
+            this.baroText.id = "BaroReference";
             this.root.appendChild(this.baroText);
         }
         {