Add a way to specify active communication icon

com.neil-enns.trackaudio.sdPlugin/manifest.json

@@ -16,10 +16,6 @@
         {
           "Image": "images/actions/station-status/black",
           "TitleAlignment": "middle"
-        },
-        {
-          "Image": "images/actions/station-status/green",
-          "TitleAlignment": "middle"
         }
       ]
     }

com.neil-enns.trackaudio.sdPlugin/station-status.html

@@ -20,5 +20,26 @@
         <option value="xc">XC</option>
       </sdpi-radio>
     </sdpi-item>
+
+    <sdpi-item label="Not listening icon">
+      <sdpi-file
+        setting="notListeningIconPath"
+        accept="image/png, image/jpeg"
+      ></sdpi-file>
+    </sdpi-item>
+
+    <sdpi-item label="Listening icon">
+      <sdpi-file
+        setting="listeningIconPath"
+        accept="image/png, image/jpeg, image/svg+xml"
+      ></sdpi-file>
+    </sdpi-item>
+
+    <sdpi-item label="Active comms icon">
+      <sdpi-file
+        setting="activeCommsIconPath"
+        accept="image/png, image/jpeg, image/svg+xml"
+      ></sdpi-file>
+    </sdpi-item>
   </body>
 </html>

src/actionManager.ts

@@ -5,18 +5,41 @@ import { EventEmitter } from "events";
 type State = 0 | 1;
 export type ListenTo = "rx" | "tx" | "xc";
 
+export class TrackAudioActionSettings {
+  callsign: string = "";
+  listenTo: ListenTo = "rx";
+
+  // Icon paths
+  notListeningIconPath: string | undefined;
+  listeningIconPath: string | undefined;
+  activeCommsIconPath: string | undefined;
+}
+
 export class TrackAudioAction {
-  callsign: string;
-  listenTo: ListenTo;
   action: Action;
   frequency: number = 0;
   isRx: boolean = false;
   isTx: boolean = false;
+  isListening: boolean = false;
 
-  constructor(callsign: string, listenTo: ListenTo, action: Action) {
-    this.callsign = callsign;
+  settings: TrackAudioActionSettings = new TrackAudioActionSettings();
+
+  /**
+   *
+   * @param callsign The callsign for the action
+   * @param listenTo The type of listening requested, either rx, tx, or xc
+   * @param notListeningIconPath The path to the icon file for the not listening state, or undefined to use the default
+   * @param listeningIconPath The path to the icon file for the listening state, or undefined to use the default
+   * @param activeCommsIconPath The path to the icon file for the active comms state, or undefined to use the default
+   * @param action The StreamDeck action object
+   */
+  constructor(action: Action, options: TrackAudioActionSettings) {
     this.action = action;
-    this.listenTo = listenTo;
+    this.settings.callsign = options.callsign;
+    this.settings.listenTo = options.listenTo;
+    this.settings.notListeningIconPath = options.notListeningIconPath;
+    this.settings.listeningIconPath = options.listeningIconPath;
+    this.settings.activeCommsIconPath = options.activeCommsIconPath;
   }
 }
 
@@ -40,9 +63,8 @@ export default class ActionManager extends EventEmitter {
    * @param callsign The callsign associated with the action
    * @param action The action
    */
-  public add(callsign: string, listenTo: ListenTo, action: Action): void {
-    const newObject = new TrackAudioAction(callsign, listenTo, action);
-    this.actions.push(newObject);
+  public add(action: Action, settings: TrackAudioActionSettings): void {
+    this.actions.push(new TrackAudioAction(action, settings));
 
     this.emit("added", this.actions.length);
   }
@@ -53,7 +75,7 @@ export default class ActionManager extends EventEmitter {
    * @param callsign The callsign to set
    * @param listenTo The listenTo value to set
    */
-  public update(action: Action, callsign: string, listenTo: ListenTo) {
+  public update(action: Action, settings: TrackAudioActionSettings) {
     const savedAction = this.actions.find(
       (entry) => entry.action.id === action.id
     );
@@ -62,20 +84,57 @@ export default class ActionManager extends EventEmitter {
       return;
     }
 
-    savedAction.callsign = callsign;
-    savedAction.listenTo = listenTo;
+    savedAction.settings = settings;
   }
 
   public setFrequency(callsign: string, frequency: number) {
     const savedAction = this.actions.find(
-      (entry) => entry.callsign === callsign
+      (entry) => entry.settings.callsign === callsign
     );
 
     if (savedAction) {
       savedAction.frequency = frequency;
     }
   }
 
+  /**
+   * Updates all actions that match the callsign to show the listen state.
+   * @param callsign The callsign of the actions to update
+   */
+  public listenBegin(callsign: string) {
+    this.actions
+      .filter(
+        (entry) =>
+          entry.settings.callsign === callsign && entry.isListening === false
+      )
+      .forEach((entry) => {
+        entry.isListening = true;
+        entry.action.setImage(
+          entry.settings.listeningIconPath ??
+            "images/actions/station-status/green.svg"
+        );
+      });
+  }
+
+  /**
+   * Updates all actions that match the callsign to clear the listen state.
+   * @param callsign The callsign of the actions to update
+   */
+  public listenEnd(callsign: string) {
+    this.actions
+      .filter(
+        (entry) =>
+          entry.settings.callsign === callsign && entry.isListening === true
+      )
+      .forEach((entry) => {
+        entry.isListening = false;
+        entry.action.setImage(
+          entry.settings.notListeningIconPath ??
+            "images/actions/station-status/black.svg"
+        );
+      });
+  }
+
   /**
    * Updates all actions that match the frequency to show the transmission in progress state.
    * @param frequency The callsign of the actions to update
@@ -85,7 +144,7 @@ export default class ActionManager extends EventEmitter {
       .filter(
         (entry) =>
           entry.frequency === frequency &&
-          entry.listenTo === "rx" &&
+          entry.settings.listenTo === "rx" &&
           entry.isRx === false
       )
       .forEach((entry) => {
@@ -103,7 +162,7 @@ export default class ActionManager extends EventEmitter {
       .filter(
         (entry) =>
           entry.frequency === frequency &&
-          entry.listenTo === "rx" &&
+          entry.settings.listenTo === "rx" &&
           entry.isRx === true
       )
       .forEach((entry) => {
@@ -121,7 +180,7 @@ export default class ActionManager extends EventEmitter {
       .filter(
         (entry) =>
           entry.frequency === frequency &&
-          entry.listenTo === "tx" &&
+          entry.settings.listenTo === "tx" &&
           entry.isTx === false
       )
       .forEach((entry) => {
@@ -139,7 +198,7 @@ export default class ActionManager extends EventEmitter {
       .filter(
         (entry) =>
           entry.frequency === frequency &&
-          entry.listenTo === "tx" &&
+          entry.settings.listenTo === "tx" &&
           entry.isTx === true
       )
       .forEach((entry) => {
@@ -182,7 +241,7 @@ export default class ActionManager extends EventEmitter {
    */
   public setState(callsign: string, state: State) {
     this.actions
-      .filter((entry) => entry.callsign === callsign)
+      .filter((entry) => entry.settings.callsign === callsign)
       .forEach((entry) => entry.action.setState(state));
   }
 

src/actions/station-status.ts

@@ -8,17 +8,23 @@ import {
   WillAppearEvent,
   WillDisappearEvent,
 } from "@elgato/streamdeck";
-import ActionManager, { ListenTo } from "../actionManager";
+import ActionManager, {
+  ListenTo,
+  TrackAudioAction,
+  TrackAudioActionSettings,
+} from "../actionManager";
 import { getDisplayTitle } from "../helpers/helpers";
 
 @action({ UUID: "com.neil-enns.trackaudio.stationstatus" })
 export class StationStatus extends SingletonAction<StationSettings> {
   onWillAppear(ev: WillAppearEvent<StationSettings>): void | Promise<void> {
-    ActionManager.getInstance().add(
-      ev.payload.settings.callsign,
-      ev.payload.settings.listenTo ?? "rx",
-      ev.action
-    );
+    ActionManager.getInstance().add(ev.action, {
+      callsign: ev.payload.settings.callsign,
+      listenTo: ev.payload.settings.listenTo ?? "rx",
+      listeningIconPath: ev.payload.settings.listeningIconPath,
+      notListeningIconPath: ev.payload.settings.notListeningIconPath,
+      activeCommsIconPath: ev.payload.settings.activeCommsIconPath,
+    });
 
     // Set the default title to the provided callsign. StreamDeck will use this if the user
     // didn't specify a custom title.
@@ -39,11 +45,13 @@ export class StationStatus extends SingletonAction<StationSettings> {
   onDidReceiveSettings(
     ev: DidReceiveSettingsEvent<StationSettings>
   ): void | Promise<void> {
-    ActionManager.getInstance().update(
-      ev.action,
-      ev.payload.settings.callsign,
-      ev.payload.settings.listenTo
-    );
+    ActionManager.getInstance().update(ev.action, {
+      callsign: ev.payload.settings.callsign,
+      listenTo: ev.payload.settings.listenTo ?? "rx",
+      listeningIconPath: ev.payload.settings.listeningIconPath,
+      notListeningIconPath: ev.payload.settings.notListeningIconPath,
+      activeCommsIconPath: ev.payload.settings.activeCommsIconPath,
+    });
 
     // Set the default title to the provided callsign. StreamDeck will use this if the user
     // didn't specify a custom title.
@@ -74,4 +82,7 @@ export class StationStatus extends SingletonAction<StationSettings> {
 type StationSettings = {
   callsign: string;
   listenTo: ListenTo;
+  notListeningIconPath: string;
+  listeningIconPath: string;
+  activeCommsIconPath: string;
 };

src/plugin.ts

@@ -35,22 +35,25 @@ const updateButtons = () => {
   // the state to active. Relies on the frequencyData variable to contain the data received from a
   // frequencyUpdate message.
   actionManager.getActions().forEach((entry) => {
-    if (!entry.listenTo || !entry.callsign) {
+    if (!entry.settings.listenTo || !entry.settings.callsign) {
       return;
     }
 
-    const foundEntry = frequencyData?.value[entry.listenTo].find(
-      (update) => update.pCallsign === entry.callsign
+    const foundEntry = frequencyData?.value[entry.settings.listenTo].find(
+      (update) => update.pCallsign === entry.settings.callsign
     );
 
     // If the entry is found set both the state and the frequency. The frequency must be set
     // so txBegin and rxBegin events can determine which buttons to light up
     if (foundEntry) {
-      actionManager.setState(entry.callsign, 1);
-      actionManager.setFrequency(entry.callsign, foundEntry.pFrequencyHz);
+      actionManager.listenBegin(entry.settings.callsign);
+      actionManager.setFrequency(
+        entry.settings.callsign,
+        foundEntry.pFrequencyHz
+      );
     } else {
-      actionManager.setFrequency(entry.callsign, 0);
-      actionManager.setState(entry.callsign, 0);
+      actionManager.listenEnd(entry.settings.callsign);
+      actionManager.setFrequency(entry.settings.callsign, 0);
     }
   });
 };