Icons

Gauge/src/components/controls/controls.scss

@@ -0,0 +1,30 @@
+#KH_CTRL {
+  height: 80px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .button {
+    border-radius: 5px;
+    border: solid 1px #000;
+    padding-left: 7px;
+    padding-right: 7px;
+
+    .icon {
+      width: 30px;
+      margin-top: 6px;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--buttonHoverColor);
+    }
+
+    &.d180 {
+      transform: rotate(180deg);
+    }
+
+    &.d90 {
+      transform: rotate(90deg);
+    }
+  }
+}

Gauge/src/components/controls/controls.tsx

@@ -8,6 +8,8 @@ import {
   VNode,
 } from '@microsoft/msfs-sdk';
 
+import './controls.scss';
+
 interface ControlsProps extends ComponentProps {
   containerRef: NodeReference<HTMLDivElement>;
   reload: () => void;
@@ -16,14 +18,14 @@ interface ControlsProps extends ComponentProps {
 }
 
 export class Controls extends DisplayComponent<ControlsProps> {
-  private cycleRef = FSComponent.createRef<HTMLButtonElement>();
-  private toTopRef = FSComponent.createRef<HTMLButtonElement>();
-  private reloadRef = FSComponent.createRef<HTMLButtonElement>();
-  private switchPosRef = FSComponent.createRef<HTMLButtonElement>();
+  private cycleRef = FSComponent.createRef<HTMLDivElement>();
+  private toTopRef = FSComponent.createRef<HTMLDivElement>();
+  private reloadRef = FSComponent.createRef<HTMLDivElement>();
+  private switchPosRef = FSComponent.createRef<HTMLDivElement>();
   private buttonName = ComputedSubject.create<number, string>(0, (val) => {
-    if (val === 1) return 'Move to INS';
-    else if (val === 2) return 'Move to FE';
-    return 'ERROR';
+    if (val === 1) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/compass.png';
+    else if (val === 2) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/wrench.png';
+    return '';
   });
 
   constructor(props: ControlsProps) {
@@ -50,11 +52,25 @@ export class Controls extends DisplayComponent<ControlsProps> {
 
   public render = (): VNode => (
     <div id="KH_CTRL">
-      {this.props.page === 1 && <button ref={this.cycleRef}>Prev Page</button>}
-      <button ref={this.toTopRef}>To top</button>
-      <button ref={this.reloadRef}>Reload</button>
-      <button ref={this.switchPosRef}>{this.buttonName}</button>
-      {this.props.page === 0 && <button ref={this.cycleRef}>Next Page</button>}
+      {this.props.page === 1 && (
+        <div ref={this.cycleRef} class="button">
+          <img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
+        </div>
+      )}
+      <div ref={this.toTopRef} class="button d90">
+        <img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
+      </div>
+      <div ref={this.reloadRef} class="button">
+        <img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/cloud.png" />
+      </div>
+      <div ref={this.switchPosRef} class="button">
+        <img class="icon" src={this.buttonName} />
+      </div>
+      {this.props.page === 0 && (
+        <div ref={this.cycleRef} class="button d180">
+          <img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
+        </div>
+      )}
     </div>
   );
 

Gauge/src/index.scss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'Consolas';
-  src: url('./Consolas.ttf') format('truetype');
+  src: url('./assets/fonts/Consolas.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
 }
@@ -9,18 +9,15 @@
   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;
 }
@@ -37,13 +34,6 @@
   font-size: 25px;
   padding: 3vw;
 
-  #KH_CTRL {
-    height: 80px;
-    background: red;
-    display: flex;
-    justify-content: space-around;
-  }
-
   #KH_FE_FPLAN {
     height: calc(100vh - 6vw - 180px);
     width: 100%;

Gauge/src/index.tsx

@@ -1,11 +1,12 @@
 /// <reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" />
 /// <reference types="@microsoft/msfs-types/JS/dataStorage" />
-import './index.scss';
 
 import { EventBus, FSComponent, SimVarPublisher, SimVarValueType, Subject } from '@microsoft/msfs-sdk';
 import { OFP } from './components/ofp/ofp';
 import { TLR } from './components/tlr/tlr';
 
+import './index.scss';
+
 export interface NewDataEvents {
   newData: boolean;
   position: number;

README.MD

@@ -1,7 +1,3 @@
 # How to export a package
 - Run `pnpm install` and `pnpm prod` to build gauge
 - Export from MSFS
-
-# TODO
-For sure:
-- Icons

rollup.config.js

@@ -33,7 +33,11 @@ export default {
     typescript(),
     targetEnv === 'production' && terser(),
     copy({
-      targets: [{ src: [`${inDirBase}/index.html`, `${inDirBase}/Consolas.ttf`], dest: outDirBase }],
+      targets: [
+        { src: [`${inDirBase}/index.html`], dest: outDirBase },
+        { src: [`${inDirBase}/assets/img/**`], dest: outDirBase + 'assets/img' },
+        { src: [`${inDirBase}/assets/fonts/**`], dest: outDirBase + 'assets/fonts' },
+      ],
     }),
   ],
 };