File selection!

settings.html

@@ -48,21 +48,9 @@
                 <div class="col col-form-label system charted">
                     Where to get RGB matrix:
                 </div>
-                <div class="col-auto system charted p-0">
-                    <div class="form-check form-check-inline">
-                        <input type="radio" class="form-check-input" name="matrixSource" id="matrixSourceDefault" value="default" checked>
-                        <label for="matrixSourceDefault" class="form-check-label">
-                            GraphicsConfiguration.xml
-                        </label>
-                    </div>
-                </div>
-                <div class="col-auto system charted p-0">
-                    <div class="form-check form-check-inline">
-                        <input type="radio" class="form-check-input" id="matrixSourceEDHM" name="matrixSource" value="EDHM">
-                        <label for="matrixSourceEDHM" class="form-check-label">
-                            EDHM XML-Profile.ini
-                        </label>
-                    </div>
+                <div class="col-2 system charted p-0 text-center">
+                    <button type="button" class="btn" id="matrixBtn">Select File</button>
+                    <input type="hidden" id="matrixFile" name="matrixFile">
                 </div>
             </div>
         </div>

src/assets/index.css

@@ -185,6 +185,21 @@ div b.active.landable {
     border-bottom: 1px solid var(--main);
 }
 
+form .btn {
+    color: inherit;
+    text-transform: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    text-shadow: inherit;
+    border-radius: 0;
+    transition: color 400ms;
+}
+
+form .btn:hover {
+    color: var(--main);
+    transition: color 400ms;
+}
+
 .draggable {
     -webkit-app-region: drag;
     -webkit-user-select: none;

src/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, ipcMain } = require('electron');
+const { app, BrowserWindow, Menu, ipcMain, dialog } = require('electron');
 const path = require('path');
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
@@ -7,7 +7,6 @@ if (require('electron-squirrel-startup')) {
 }
 
 let mainWindow;
-let settingsWindow;
 
 const createWindow = () => {
     // Create the browser window.
@@ -68,6 +67,21 @@ const loadMain = (event) => {
     }
 }
 
+// Set up file picker handler.
+const selectMatrixFile = async () => {
+    const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
+        filters: [{name: 'Matrix File', extensions: ['xml', 'ini']}],
+        properties: ['openFile', 'showHiddenFiles'],
+    });
+
+    if (canceled) {
+        return;
+    } else {
+        return filePaths[0];
+    }
+
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -75,6 +89,7 @@ app.on('ready', () => {
     ipcMain.on('CLOSE_WINDOW', closeWindow);
     ipcMain.on('LOAD_SETTINGS', loadSettings);
     ipcMain.on('LOAD_MAIN', loadMain);
+    ipcMain.handle('SELECT_MATRIX_FILE', selectMatrixFile);
     createWindow();
 });
 

src/models/Settings.ts

@@ -3,6 +3,7 @@ const { statSync, writeFileSync, readFileSync } = require('node:fs');
 const os = require('node:os');
 const path = require('node:path');
 
+import { EliteMatrix } from "elite-matrix";
 import { Log } from "./Log";
 
 interface settingsFile {
@@ -19,6 +20,9 @@ export class Settings {
     minValue: number;
     maxDistance: number;
 
+    #matrixFile?: string;
+    matrix?: EliteMatrix;
+
     private constructor(isPackaged: boolean) {
         if (!isPackaged && os.platform() === 'linux') {
             this.#file = '/mnt/c/Users/marle/ed-safari-settings.json';

src/renderer.js

@@ -131,7 +131,6 @@ edsm.on('SYSTEM_APPRAISED', (system) => {
     }
 });
 
-
 // const matrixRed = [1.2, 0.05, 0.07];
 // const matrixGreen = [0.13, 1, 1.18];
 // const matrixBlue = [0.4, 1.29, 2];

src/settings.js

@@ -28,6 +28,13 @@ $('.backBtn').on('click', () => {
 $('#minValue').attr('value', settings.minValue);
 $('#maxDistance').attr('value', settings.maxDistance);
 
+/* ---------------------------------------------------------------------- select matrix file ---- */
+
+$('#matrixBtn').on('click', async function () {
+    const filePath = await ipcRenderer.invoke('SELECT_MATRIX_FILE');
+    $('#matrixFile').attr('value', filePath);
+});
+
 /* ---------------------------------------------------------------------------- process form ---- */
 
 $('form').on('submit', async function (event) {