Basic macro functionality working.

gbmhunter · May 17, 2024 · 0eba9d4 · 0eba9d4
1 parent fa9de8d
commit 0eba9d4
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 20 deletions.
diff --git a/src/model/App.tsx b/src/model/App.tsx
@@ -836,7 +836,15 @@ export class App {
     await this.writeBytesToSerialPort(Uint8Array.from(bytesToWrite));
   };
 
-  private async writeBytesToSerialPort(bytesToWrite: Uint8Array) {
+  /**
+   * Writes bytes to the serial port. Also:
+   * - Sends the data to the TX terminal view
+   * - Sends the data to the TX/RX terminal view, if local TX echo is enabled.
+   * - Sends the data to the logger.
+   *
+   * @param bytesToWrite
+   */
+  async writeBytesToSerialPort(bytesToWrite: Uint8Array) {
     const writer = this.port?.writable?.getWriter();
 
     await writer?.write(bytesToWrite);

diff --git a/src/model/Terminals/RightDrawer/Macros/Macros.ts b/src/model/Terminals/RightDrawer/Macros/Macros.ts
@@ -1,10 +1,13 @@
 import { makeAutoObservable } from 'mobx';
+import { App } from 'src/model/App';
 
 export class Macro {
+  app: App;
   name: string;
   data: string;
 
-  constructor(name: string, data: string) {
+  constructor(app: App, name: string, data: string) {
+    this.app = app;
     this.name = name;
     this.data = data;
 
@@ -17,17 +20,23 @@ export class Macro {
 
   send() {
     console.log('Send macro data:', this.data);
+    // Send the data to the serial port
+    // Convert string to Uint8Array
+    const data = new TextEncoder().encode(this.data);
+    this.app.writeBytesToSerialPort(data);
   }
 }
 
 export class Macros {
 
   macrosArray: Macro[] = [];
 
-  constructor() {
+  constructor(app: App) {
 
+    // Create individual macros. These will be displayed in the right-hand drawer
+    // in the terminal view.
     for (let i = 0; i < 3; i++) {
-      this.macrosArray.push(new Macro(`M${i}`, ''));
+      this.macrosArray.push(new Macro(app, `M${i}`, ''));
     }
 
     makeAutoObservable(this); // Make sure this near the end

diff --git a/src/model/Terminals/RightDrawer/RightDrawer.ts b/src/model/Terminals/RightDrawer/RightDrawer.ts
@@ -1,11 +1,14 @@
 import { makeAutoObservable } from 'mobx';
 import { Macros } from './Macros/Macros';
+import { App } from 'src/model/App';
 
 export default class RightDrawer {
 
-  macros: Macros = new Macros();
+  macros: Macros;
 
-  constructor() {
+  constructor(app: App) {
+
+    this.macros = new Macros(app);
 
     makeAutoObservable(this); // Make sure this near the end
   }

diff --git a/src/model/Terminals/Terminals.ts b/src/model/Terminals/Terminals.ts
@@ -16,12 +16,13 @@ export default class Terminals {
 
   filterText: ApplyableTextField;
 
-  rightDrawer: RightDrawer = new RightDrawer();
+  rightDrawer: RightDrawer;
 
   constructor(app: App) {
     this.txRxTerminal = new SingleTerminal('tx-rx-terminal', true, app.settings.rxSettings, app.settings.displaySettings, app.handleTerminalKeyDown);
     this.rxTerminal = new SingleTerminal('rx-terminal', false, app.settings.rxSettings, app.settings.displaySettings, app.handleTerminalKeyDown); // Not focusable
     this.txTerminal = new SingleTerminal('tx-terminal', true, app.settings.rxSettings, app.settings.displaySettings, app.handleTerminalKeyDown);
+    this.rightDrawer = new RightDrawer(app);
 
     this.filterText = new ApplyableTextField('', z.string());
     this.filterText.setOnApplyChanged(this.onFilterTextApply);

diff --git a/src/view/Terminals/RightDrawer/MacroView.tsx b/src/view/Terminals/RightDrawer/MacroView.tsx
@@ -42,18 +42,22 @@ export default observer((props: Props) => {
       {/* MACRO SEND BUTTON */}
       {/* ================================================ */}
       <Tooltip title="Send the data to the serial port." enterDelay={500} arrow>
-        <IconButton
-          aria-label="send-macro-data"
-          size="small"
-          style={{ padding: "1px" }}
-          disabled={app.portState !== PortState.OPENED}
-          onClick={() => {
-            macro.send();
-          }}
-        >
-          <ArrowForwardIcon />
-        </IconButton>
+        <span>
+          {/* This is a hack to get the tooltip to work when the button is disabled */}
+          <IconButton
+            aria-label="send-macro-data"
+            size="small"
+            style={{ padding: "1px" }}
+            disabled={app.portState !== PortState.OPENED}
+            onClick={() => {
+              macro.send();
+            }}
+          >
+            <ArrowForwardIcon />
+          </IconButton>
+        </span>
       </Tooltip>
+      {/* ================================================ */}
       {/* MACRO MORE SETTINGS BUTTON */}
       {/* ================================================ */}
       <Tooltip title="More settings for this macro." enterDelay={500} arrow>

diff --git a/src/view/Terminals/RightDrawer/RightDrawerView.tsx b/src/view/Terminals/RightDrawer/RightDrawerView.tsx
@@ -28,15 +28,16 @@ export default observer((props: Props) => {
         <div
           style={{
             height: "100%",
-            width: "5px",
-            backgroundColor: "#DC3545",
+            width: "10px", // This determines how easy it is to click on the resizable element
+            // backgroundColor: "#DC3545",
             position: "absolute",
             left: 0,
             top: 0,
             cursor: "ew-resize",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
+            borderLeft: "1px solid #505050", // Same border color as used on the left-hand nav menu
           }}
         ></div>
       }