feat: Web MCDU - Hold CLR and MCDU Light-Dark Mode (#6763)

* Added extended eventing to Buttons to allow for button held logic for CLR * Exchanged the MCDU image with actual image from the A32NX from the sim. * Added light and dark mode for the MCDU image * Simplified background image swap handling
flybywiresim · Feb 26, 2022 · 119b6ae · 119b6ae
1 parent 9e48327
commit 119b6ae
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 17 deletions.
diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
@@ -168,6 +168,7 @@
 1. [SOUNDS] Add rain sounds in cockpit - @Mico975 (Mico)
 1. [SOUNDS] Add passenger announcements and ambience - @hotshotp (Boris)
 1. [EFB] Added setting for colored METAR in EFB weather widget - @frankkopp (Frank Kopp)
+1. [MCDU] Improved Remote MCDU with CLR hold and light-dark mode - @frankkopp (Frank Kopp)
 
 ## 0.7.0
 

diff --git a/src/mcdu-server/client/public/mcdu-a32nx-dark.png b/src/mcdu-server/client/public/mcdu-a32nx-dark.png
diff --git a/src/mcdu-server/client/public/mcdu-a32nx.png b/src/mcdu-server/client/public/mcdu-a32nx.png
diff --git a/src/mcdu-server/client/src/App.css b/src/mcdu-server/client/src/App.css
@@ -9,13 +9,12 @@
 }
 
 .normal {
-  --aspect-ratio: calc(1061/1650);
+  --aspect-ratio: calc(1290/2000);
   --top-padding: .146;
   --screen-scale: .69;
 }
 
 .normal .App {
-  background-image: url("mcdu-r2-c.png");
   background-size: contain;
   background-repeat: no-repeat;
 }
@@ -25,4 +24,4 @@
   --top-padding: 0;
   --screen-scale: 1;
   cursor: pointer;
-}
+}
diff --git a/src/mcdu-server/client/src/App.jsx b/src/mcdu-server/client/src/App.jsx
@@ -7,6 +7,7 @@ import { WebsocketContext } from './WebsocketContext';
 
 function App() {
     const [fullscreen, setFullscreen] = useState(window.location.href.endsWith('fullscreen'));
+    const [dark, setDark] = useState(false);
     const [sound] = useState(window.location.href.endsWith('sound'));
     const socketUrl = `ws://${window.location.hostname}:__WEBSOCKET_PORT__`;
 
@@ -59,9 +60,14 @@ function App() {
         }
     }, [lastMessage]);
 
+    let backgroundImageUrl = 'mcdu-a32nx.png';
+    if (dark) {
+        backgroundImageUrl = 'mcdu-a32nx-dark.png';
+    }
+
     return (
         <div className={fullscreen ? 'fullscreen' : 'normal'}>
-            <div className="App">
+            <div className="App" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
                 <WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
                     {!fullscreen && (
                         <>
@@ -72,6 +78,11 @@ function App() {
                                     <div className="button" title="Fullscreen" onClick={() => setFullscreen(!fullscreen)} />
                                 </div>
                             </div>
+                            <div className="button-grid" style={{ left: '82%', top: '50%', width: '8%', height: '8%' }}>
+                                <div className="button-row">
+                                    <div className="button" title="Dark" onClick={() => setDark(!dark)} />
+                                </div>
+                            </div>
                         </>
                     )}
                     {fullscreen && (

diff --git a/src/mcdu-server/client/src/McduButtons.jsx b/src/mcdu-server/client/src/McduButtons.jsx
@@ -1,7 +1,5 @@
-import React, { useContext } from 'react';
-
+import React, { useRef, useContext } from 'react';
 import './McduButtons.css';
-
 import { WebsocketContext } from './WebsocketContext';
 
 const ButtonGrid = ({ children, x, y, width, height }) => (
@@ -18,17 +16,38 @@ const ButtonRow = ({ children }) => (
 
 const Button = ({ sound, name }) => {
     const socket = useContext(WebsocketContext);
+    const timeout = useRef();
+    const buttonHeldTime = 1500;
+
+    function pressButton(event) {
+        if (event.defaultPrevented) {
+            event.preventDefault();
+        }
+        if (sound) {
+            new Audio('button-click.mp3').play();
+        }
+        socket.sendMessage(`event:${name}`);
+        timeout.current = setTimeout(() => {
+            socket.sendMessage(`event:${name}_Held`);
+        }, buttonHeldTime);
+    }
 
-    function mcduButtonPress() {
-        return () => {
-            if (sound) new Audio('button-click.mp3').play();
-            socket.sendMessage(`event:${name}`);
-        };
+    function releaseButton(event) {
+        event.preventDefault();
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
     }
 
     if (name.length) {
         return (
-            <div className="button" onClick={mcduButtonPress()} />
+            <div
+                className="button"
+                onMouseDown={(e) => pressButton(e)}
+                onMouseUp={(e) => releaseButton(e)}
+                onTouchStart={(e) => pressButton(e)}
+                onTouchEnd={(e) => releaseButton(e)}
+            />
         );
     }
     return <div className="dummy" />;
@@ -62,7 +81,7 @@ export const McduButtons = ({ sound }) => (
                 <Button sound={sound} name="R6" />
             </ButtonRow>
         </ButtonGrid>
-        <ButtonGrid x={122} y={804} width={745} height={180}>
+        <ButtonGrid x={115} y={804} width={745} height={180}>
             <ButtonRow>
                 <Button sound={sound} name="DIR" />
                 <Button sound={sound} name="PROG" />
@@ -80,7 +99,7 @@ export const McduButtons = ({ sound }) => (
                 <Button sound={sound} name="MENU" />
             </ButtonRow>
         </ButtonGrid>
-        <ButtonGrid x={122} y={985} width={260} height={260}>
+        <ButtonGrid x={115} y={985} width={260} height={260}>
             <ButtonRow>
                 <Button sound={sound} name="AIRPORT" />
                 <Button sound={sound} name="" />
@@ -94,7 +113,7 @@ export const McduButtons = ({ sound }) => (
                 <Button sound={sound} name="DOWN" />
             </ButtonRow>
         </ButtonGrid>
-        <ButtonGrid x={440} y={1015} width={522} height={616}>
+        <ButtonGrid x={435} y={1013} width={522} height={616}>
             <ButtonRow>
                 <Button sound={sound} name="A" />
                 <Button sound={sound} name="B" />
@@ -138,7 +157,7 @@ export const McduButtons = ({ sound }) => (
                 <Button sound={sound} name="CLR" />
             </ButtonRow>
         </ButtonGrid>
-        <ButtonGrid x={135} y={1250} width={300} height={375}>
+        <ButtonGrid x={128} y={1250} width={300} height={375}>
             <ButtonRow>
                 <Button sound={sound} name="1" />
                 <Button sound={sound} name="2" />

diff --git a/src/mcdu-server/index.js b/src/mcdu-server/index.js
@@ -22,6 +22,8 @@ path.join(__dirname, 'client/build/HoneywellMCDU.ttf');
 path.join(__dirname, 'client/build/HoneywellMCDUSmall.ttf');
 path.join(__dirname, 'client/build/index.html');
 path.join(__dirname, 'client/build/mcdu-r2-c.png');
+path.join(__dirname, 'client/build/mcdu-a32nx.png');
+path.join(__dirname, 'client/build/mcdu-a32nx-dark.png');
 path.join(__dirname, 'client/build/button-click.mp3');
 path.join(__dirname, '../../node_modules/pdf-to-printer/dist/SumatraPDF.exe');
 path.join(__dirname, '../../node_modules/linebreak/src/classes.trie');