Add support for dynamic tray icons

Dashboard/src/App.tsx

@@ -3,6 +3,7 @@ import { createGlobalStyle } from "styled-components";
 // import { useDispatch } from "react-redux";
 import Select from "react-select";
 import SerialPort from "serialport";
+import electron from "electron";
 import KnobSection from "./Components/KnobSection";
 import { useAppDispatch } from "./redux/hooks";
 import { connect, disconnect, setSerialPort } from "./redux/slices/serialConnectionSlice";
@@ -58,6 +59,38 @@ const App = () => {
       >
         disconnect
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          electron.ipcRenderer.send("asynchronous-message", "red");
+        }}
+      >
+        tray red
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          electron.ipcRenderer.send("asynchronous-message", "green");
+        }}
+      >
+        tray green
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          electron.ipcRenderer.send("asynchronous-message", "yellow");
+        }}
+      >
+        tray yellow
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          electron.ipcRenderer.send("asynchronous-message", "default");
+        }}
+      >
+        tray default
+      </button>
       <Select
         value={portSelectionValue}
         onChange={handlePortChange}

Dashboard/src/electron.js

@@ -2,7 +2,9 @@
 const path = require("path");
 const { BrowserWindow } = require("electron-acrylic-window");
 
-const { app, Tray, Menu } = require("electron");
+const {
+  app, Tray, Menu, ipcMain,
+} = require("electron");
 const isDev = require("electron-is-dev");
 const screenz = require("screenz");
 const els = require("electron-localshortcut");
@@ -105,7 +107,7 @@ app.on("browser-window-blur", () => {
 // code. You can also put them in separate files and require them here.
 
 function createTray() {
-  const trayIcon = new Tray(getAssetPath("tray.ico"));
+  const trayIcon = new Tray(getAssetPath("tray-default.png"));
   const contextMenu = Menu.buildFromTemplate([
     {
       label: "Show",
@@ -121,7 +123,7 @@ function createTray() {
     },
   ]);
 
-  trayIcon.setToolTip("Light Control");
+  trayIcon.setToolTip("Heliox");
   trayIcon.setContextMenu(contextMenu);
   return trayIcon;
 }
@@ -154,6 +156,18 @@ if (!gotTheLock) {
       tray.on("click", () => {
         mainWindow.show();
       });
+
+      ipcMain.on("asynchronous-message", (event, arg) => {
+        if (arg === "green") {
+          tray.setImage(getAssetPath("tray-green.png"));
+        } else if (arg === "red") {
+          tray.setImage(getAssetPath("tray-red.png"));
+        } else if (arg === "yellow") {
+          tray.setImage(getAssetPath("tray-yellow.png"));
+        } else if (arg === "default") {
+          tray.setImage(getAssetPath("tray-default.png"));
+        }
+      });
     });
   });
 }