prelim TLR

Gauge/src/components/test/test.tsx

@@ -1,7 +0,0 @@
-import { FSComponent, DisplayComponent, VNode } from "@microsoft/msfs-sdk";
-
-export class Test extends DisplayComponent<any> {
-  public render(): VNode {
-    return <div class="test">Hello World!</div>;
-  }
-}

Gauge/src/components/tlr/tlr.tsx

@@ -0,0 +1,82 @@
+import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from '@microsoft/msfs-sdk';
+
+function defineDragScroll(ele: HTMLElement, horizontalScroll = true, verticalScroll = true) {
+  let pos = { top: 0, left: 0, x: 0, y: 0 };
+  const mouseDownHandler = function (e: MouseEvent) {
+    pos = {
+      // The current scroll
+      left: ele.scrollLeft,
+      top: ele.scrollTop,
+      // Get the current mouse position
+      x: e.clientX,
+      y: e.clientY,
+    };
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+    document.removeEventListener('mouseleave', mouseUpHandler);
+  };
+  const mouseMoveHandler = function (e: MouseEvent) {
+    // How far the mouse has been moved
+    const dx = e.clientX - pos.x;
+    const dy = e.clientY - pos.y;
+    // Scroll the element
+    if (verticalScroll) {
+      ele.scrollTop = pos.top - dy;
+    }
+    if (horizontalScroll) {
+      ele.scrollLeft = pos.left - dx;
+    }
+  };
+  const mouseUpHandler = function (e: MouseEvent) {
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseUpHandler);
+    document.removeEventListener('mouseleave', mouseUpHandler);
+  };
+  ele.addEventListener('mousedown', mouseDownHandler);
+}
+
+interface TLRProps extends ComponentProps {
+  content: Subscribable<string>;
+}
+
+export class TLR extends DisplayComponent<TLRProps> {
+  constructor(props: TLRProps) {
+    super(props);
+  }
+
+  onAfterRender() {
+    const ele = document.getElementById('KH_FE_FPLAN');
+    if (ele) defineDragScroll(ele);
+    const toIns = document.getElementById('KH_FE_FPLAN_INS');
+    if (toIns) toIns.onclick = this.toIns;
+    const toTop = document.getElementById('KH_FE_FPLAN_TOP');
+    if (toTop) toTop.onclick = this.toTop;
+  }
+
+  toIns() {
+    SimVar.SetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number', 2);
+  }
+
+  toTop() {
+    const ele = document.getElementById('KH_FE_FPLAN');
+    if (ele) ele.scrollTop = 0;
+  }
+
+  public render(): VNode {
+    return (
+      <>
+        <div id="KH_FE_FPLAN">
+          <div id="TLR">
+            <div>
+              <pre>{this.props.content}</pre>
+            </div>
+          </div>
+        </div>
+        <div id="KH_CTRL">
+          <button id="KH_FE_FPLAN_TOP">To top</button>
+          <button id="KH_FE_FPLAN_INS">Switch to INS</button>
+        </div>
+      </>
+    );
+  }
+}

Gauge/src/index.html

@@ -1,5 +1,5 @@
-<script type="text/html" id="KH_FE_FPLAN">
-  <div id="InstrumentContent"></div>
+<script type="text/html" id="kh-fe-fplan">
+  <div id="root"></div>
 </script>
 
 <link rel="stylesheet" href="index.css" />

Gauge/src/index.scss

@@ -0,0 +1,71 @@
+@font-face {
+  font-family: 'Consolas';
+  src: url('./Consolas.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: lightgray;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: gray;
+  height: 200px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: darkgray;
+}
+
+#root {
+  --buttonHoverColor: lightgray;
+  --fss-select-hover: lightgray;
+  /* No idea why, zero. I looked at the EFB.css and it has 100%, but doing so screws this over hard */
+  width: 594px;
+  height: 100%;
+  background-image: url(../EFB/Images/bg.png);
+  background-size: 100% 100%;
+  color: #000;
+  font-size: 25px;
+  padding: 3vw;
+
+  #KH_CTRL {
+    height: 80px;
+    background: red;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  #KH_FE_FPLAN {
+    #TLR div {
+      line-height: unset !important;
+      font-size: unset !important;
+    }
+
+    #TLR pre {
+      white-space: pre;
+      line-height: 14px;
+      font-size: 13px;
+      font-family: 'Consolas' !important;
+    }
+
+    #TLR img {
+      width: calc(100vw - 6vw);
+    }
+
+    height: calc(100vh - 6vw - 170px);
+    width: 100%;
+    margin-top: 90px;
+    margin-bottom: 3vw;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}

Gauge/src/index.tsx

@@ -1,18 +1,57 @@
 /// <reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" />
+import './index.scss';
 
-import { FSComponent } from "@microsoft/msfs-sdk";
-import { Test } from "./components/test/test";
+import { EventBus, FSComponent, SimVarPublisher, SimVarValueType, Subject } from '@microsoft/msfs-sdk';
+import { TLR } from './components/tlr/tlr';
+
+export interface NewDataEvents {
+  newData: boolean;
+}
 
 class KH_FE_FPLAN extends BaseInstrument {
+  private readonly bus = new EventBus();
+
+  private readonly newDataPublisher = new SimVarPublisher<NewDataEvents>(
+    new Map([['newData', { name: 'L:KH_FE_FPLAN_NEW_DATA', type: SimVarValueType.Bool }]]),
+    this.bus
+  );
+
+  private contentPLAN = Subject.create<string>('');
+  private contentTLR = Subject.create<string>('');
+
   get templateID(): string {
-    return "KH_FE_FPLAN";
+    return 'kh-fe-fplan';
+  }
+
+  get isInteractive() {
+    return true;
   }
 
   public connectedCallback(): void {
     super.connectedCallback();
 
-    FSComponent.render(<Test />, document.getElementById("InstrumentContent"));
+    this.newDataPublisher.startPublish();
+    this.bus
+      .getSubscriber<NewDataEvents>()
+      .on('newData')
+      .handle((flag) => {
+        if (!flag) return;
+        SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool', 0);
+        this.contentPLAN.set(JSON.parse(window.localStorage.getItem('KH_FE_FPLAN_PLAN') ?? ''));
+        this.contentTLR.set(JSON.parse(window.localStorage.getItem('KH_FE_FPLAN_TLR') ?? ''));
+      });
+
+    window.localStorage.removeItem('KH_FE_FPLAN_PLAN');
+    window.localStorage.removeItem('KH_FE_FPLAN_TLR');
+
+    FSComponent.render(<TLR content={this.contentTLR} />, document.getElementById('root'));
+  }
+
+  protected Update(): void {
+    super.Update();
+
+    this.newDataPublisher.onUpdate();
   }
 }
 
-registerInstrument("KH_FE_FPLAN", KH_FE_FPLAN);
+registerInstrument('kh-fe-fplan', KH_FE_FPLAN);