added component for dropdown box for COM Port selection

2024-06-01 01:32:52 +10:00
parent 17e7bb137e
commit 8d2f70fd23
9 changed files with 351 additions and 21 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
      "hasInstallScript": true,
      "dependencies": {
        "@electron-toolkit/preload": "^3.0.0",
-        "@electron-toolkit/utils": "^3.0.0"
+        "@electron-toolkit/utils": "^3.0.0",
+        "serialport": "^12.0.0"
      },
      "devDependencies": {
        "@electron-toolkit/eslint-config": "^1.0.1",
@@ -22,6 +23,7 @@
        "electron-vite": "^2.0.0",
        "eslint": "^8.56.0",
        "eslint-plugin-vue": "^9.20.1",
+        "log-timestamp": "^0.3.0",
        "prettier": "^3.2.4",
        "vite": "^5.0.12",
        "vue": "^3.4.15"
@@ -1734,6 +1736,200 @@
      "integrity": "sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==",
      "dev": true
    },
+    "node_modules/@serialport/binding-mock": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/@serialport/binding-mock/-/binding-mock-10.2.2.tgz",
+      "integrity": "sha512-HAFzGhk9OuFMpuor7aT5G1ChPgn5qSsklTFOTUX72Rl6p0xwcSVsRtG/xaGp6bxpN7fI9D/S8THLBWbBgS6ldw==",
+      "dependencies": {
+        "@serialport/bindings-interface": "^1.2.1",
+        "debug": "^4.3.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@serialport/bindings-cpp/-/bindings-cpp-12.0.1.tgz",
+      "integrity": "sha512-r2XOwY2dDvbW7dKqSPIk2gzsr6M6Qpe9+/Ngs94fNaNlcTRCV02PfaoDmRgcubpNVVcLATlxSxPTIDw12dbKOg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@serialport/bindings-interface": "1.2.2",
+        "@serialport/parser-readline": "11.0.0",
+        "debug": "4.3.4",
+        "node-addon-api": "7.0.0",
+        "node-gyp-build": "4.6.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/@serialport/parser-delimiter": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-delimiter/-/parser-delimiter-11.0.0.tgz",
+      "integrity": "sha512-aZLJhlRTjSmEwllLG7S4J8s8ctRAS0cbvCpO87smLvl3e4BgzbVgF6Z6zaJd3Aji2uSiYgfedCdNc4L6W+1E2g==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/@serialport/parser-readline": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-readline/-/parser-readline-11.0.0.tgz",
+      "integrity": "sha512-rRAivhRkT3YO28WjmmG4FQX6L+KMb5/ikhyylRfzWPw0nSXy97+u07peS9CbHqaNvJkMhH1locp2H36aGMOEIA==",
+      "dependencies": {
+        "@serialport/parser-delimiter": "11.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/bindings-cpp/node_modules/node-addon-api": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.0.0.tgz",
+      "integrity": "sha512-vgbBJTS4m5/KkE16t5Ly0WW9hz46swAstv0hYYwMtbG7AznRhNyfLRe8HZAiWIpcHzoO7HxhLuBQj9rJ/Ho0ZA=="
+    },
+    "node_modules/@serialport/bindings-interface": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@serialport/bindings-interface/-/bindings-interface-1.2.2.tgz",
+      "integrity": "sha512-CJaUd5bLvtM9c5dmO9rPBHPXTa9R2UwpkJ0wdh9JCYcbrPWsKz+ErvR0hBLeo7NPeiFdjFO4sonRljiw4d2XiA==",
+      "engines": {
+        "node": "^12.22 || ^14.13 || >=16"
+      }
+    },
+    "node_modules/@serialport/parser-byte-length": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-byte-length/-/parser-byte-length-12.0.0.tgz",
+      "integrity": "sha512-0ei0txFAj+s6FTiCJFBJ1T2hpKkX8Md0Pu6dqMrYoirjPskDLJRgZGLqoy3/lnU1bkvHpnJO+9oJ3PB9v8rNlg==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-cctalk": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-cctalk/-/parser-cctalk-12.0.0.tgz",
+      "integrity": "sha512-0PfLzO9t2X5ufKuBO34DQKLXrCCqS9xz2D0pfuaLNeTkyGUBv426zxoMf3rsMRodDOZNbFblu3Ae84MOQXjnZw==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-delimiter": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-delimiter/-/parser-delimiter-12.0.0.tgz",
+      "integrity": "sha512-gu26tVt5lQoybhorLTPsH2j2LnX3AOP2x/34+DUSTNaUTzu2fBXw+isVjQJpUBFWu6aeQRZw5bJol5X9Gxjblw==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-inter-byte-timeout": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-inter-byte-timeout/-/parser-inter-byte-timeout-12.0.0.tgz",
+      "integrity": "sha512-GnCh8K0NAESfhCuXAt+FfBRz1Cf9CzIgXfp7SdMgXwrtuUnCC/yuRTUFWRvuzhYKoAo1TL0hhUo77SFHUH1T/w==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-packet-length": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-packet-length/-/parser-packet-length-12.0.0.tgz",
+      "integrity": "sha512-p1hiCRqvGHHLCN/8ZiPUY/G0zrxd7gtZs251n+cfNTn+87rwcdUeu9Dps3Aadx30/sOGGFL6brIRGK4l/t7MuQ==",
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@serialport/parser-readline": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-readline/-/parser-readline-12.0.0.tgz",
+      "integrity": "sha512-O7cywCWC8PiOMvo/gglEBfAkLjp/SENEML46BXDykfKP5mTPM46XMaX1L0waWU6DXJpBgjaL7+yX6VriVPbN4w==",
+      "dependencies": {
+        "@serialport/parser-delimiter": "12.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-ready": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-ready/-/parser-ready-12.0.0.tgz",
+      "integrity": "sha512-ygDwj3O4SDpZlbrRUraoXIoIqb8sM7aMKryGjYTIF0JRnKeB1ys8+wIp0RFMdFbO62YriUDextHB5Um5cKFSWg==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-regex": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-regex/-/parser-regex-12.0.0.tgz",
+      "integrity": "sha512-dCAVh4P/pZrLcPv9NJ2mvPRBg64L5jXuiRxIlyxxdZGH4WubwXVXY/kBTihQmiAMPxbT3yshSX8f2+feqWsxqA==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-slip-encoder": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-slip-encoder/-/parser-slip-encoder-12.0.0.tgz",
+      "integrity": "sha512-0APxDGR9YvJXTRfY+uRGhzOhTpU5akSH183RUcwzN7QXh8/1jwFsFLCu0grmAUfi+fItCkR+Xr1TcNJLR13VNA==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/parser-spacepacket": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/parser-spacepacket/-/parser-spacepacket-12.0.0.tgz",
+      "integrity": "sha512-dozONxhPC/78pntuxpz/NOtVps8qIc/UZzdc/LuPvVsqCoJXiRxOg6ZtCP/W58iibJDKPZPAWPGYeZt9DJxI+Q==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
+    "node_modules/@serialport/stream": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@serialport/stream/-/stream-12.0.0.tgz",
+      "integrity": "sha512-9On64rhzuqKdOQyiYLYv2lQOh3TZU/D3+IWCR5gk0alPel2nwpp4YwDEGiUBfrQZEdQ6xww0PWkzqth4wqwX3Q==",
+      "dependencies": {
+        "@serialport/bindings-interface": "1.2.2",
+        "debug": "4.3.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
    "node_modules/@sindresorhus/is": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -4820,6 +5016,27 @@
      "dev": true,
      "peer": true
    },
+    "node_modules/log-prefix": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/log-prefix/-/log-prefix-0.1.1.tgz",
+      "integrity": "sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/log-timestamp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/log-timestamp/-/log-timestamp-0.3.0.tgz",
+      "integrity": "sha512-luRz6soxijd1aJh0GkLXFjKABihxthvTfWTzu3XhCgg5EivG2bsTpSd63QFbUgS+/KmFtL+0RfSpeaD2QvOV8Q==",
+      "dev": true,
+      "dependencies": {
+        "log-prefix": "0.1.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/lowercase-keys": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
@@ -5008,6 +5225,16 @@
      "dev": true,
      "optional": true
    },
+    "node_modules/node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
    "node_modules/node-releases": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -5619,6 +5846,33 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/serialport": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/serialport/-/serialport-12.0.0.tgz",
+      "integrity": "sha512-AmH3D9hHPFmnF/oq/rvigfiAouAKyK/TjnrkwZRYSFZxNggJxwvbAbfYrLeuvq7ktUdhuHdVdSjj852Z55R+uA==",
+      "dependencies": {
+        "@serialport/binding-mock": "10.2.2",
+        "@serialport/bindings-cpp": "12.0.1",
+        "@serialport/parser-byte-length": "12.0.0",
+        "@serialport/parser-cctalk": "12.0.0",
+        "@serialport/parser-delimiter": "12.0.0",
+        "@serialport/parser-inter-byte-timeout": "12.0.0",
+        "@serialport/parser-packet-length": "12.0.0",
+        "@serialport/parser-readline": "12.0.0",
+        "@serialport/parser-ready": "12.0.0",
+        "@serialport/parser-regex": "12.0.0",
+        "@serialport/parser-slip-encoder": "12.0.0",
+        "@serialport/parser-spacepacket": "12.0.0",
+        "@serialport/stream": "12.0.0",
+        "debug": "4.3.4"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/serialport/donate"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.0",
-    "@electron-toolkit/utils": "^3.0.0"
+    "@electron-toolkit/utils": "^3.0.0",
+    "serialport": "^12.0.0"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.1",
@@ -31,6 +32,7 @@
    "electron-vite": "^2.0.0",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.20.1",
+    "log-timestamp": "^0.3.0",
    "prettier": "^3.2.4",
    "vite": "^5.0.12",
    "vue": "^3.4.15"
--- a/resources/test.js
+++ b/resources/test.js
@@ -0,0 +1,3 @@
+import { SerialPort } from 'serialport'
+
+console.log(SerialPort.list())
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -3,18 +3,22 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import fs from 'node:fs/promises'
-
+import { SerialPort } from 'serialport'
+import * as logTimestamp from 'log-timestamp'

 async function loadConfigurationYAML() {
  try {
-    const data = await fs.readFile('./resources//config.yaml', { encoding: 'utf8' });
-    console.log(data);
+    const data = await fs.readFile('./resources//config.yaml', { encoding: 'utf8' })
+    console.log(data)
    return data
  } catch (err) {
-    console.log(err);
-    return (`There was an error reading the file: <br> ${err} `)
+    console.log(err)
+    return `There was an error reading the file: <br> ${err} `
+  }
 }

+async function getSerialPorts() {
+  return await SerialPort.list()
 }

 function createWindow() {
@@ -49,6 +53,10 @@ function createWindow() {
  }
 }

+function developmentConsole() {
+  // SerialPort.list().then((data) => console.log(data))
+}
+
 // 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.
@@ -65,8 +73,10 @@ app.whenReady().then(() => {

  // IPC test
  ipcMain.on('ping', () => console.log('pong'))
-  ipcMain.handle("loadConfigurationYML", loadConfigurationYAML)
+  ipcMain.handle('loadConfigurationYML', loadConfigurationYAML)
+  ipcMain.handle('getSerialPorts', getSerialPorts)

+  developmentConsole()
  createWindow()

  app.on('activate', function () {
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -2,12 +2,8 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <title>Electron</title>
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <!-- <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
-    /> -->
+    <title>Deej Configurator</title>
+
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import Versions from './components/Versions.vue'
 import MovieCard from './components/MovieCard.vue'
+import COMselect from './components/COMselect.vue'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
+import * as logTimestamp from 'log-timestamp'

 const movies = ref([])
 const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
 const configuration = ref('Loading....')
+const serialPorts = ref('Loading Serial ports.... ')

 const ipcHandle = () => window.electron.ipcRenderer.send('ping')
 const getConfigFileContents = async () => {
@@ -14,6 +17,11 @@ const getConfigFileContents = async () => {
  configuration.value = returnValue
 }

+const getSerialPorts = async () => {
+  serialPorts.value = await window.electron.ipcRenderer.invoke('getSerialPorts')
+  console.log(`the returned serial ports are ${serialPorts}`)
+}
+
 const getTrendingMovies = (category) => {
  return fetch(`https://api.themoviedb.org/3/trending/movie/${category}?api_key=${apiKey}`)
    .then((response) => response.json())
@@ -24,17 +32,22 @@ const getTrendingMovies = (category) => {

 onMounted(() => {
  getTrendingMovies('day')
+  getSerialPorts()
 })
 </script>

 <template>
-  <img alt="logo" class="logo" src="./assets/electron.svg" />
+  <!-- <img alt="logo" class="logo" src="./assets/electron.svg" />
  <div class="creator">Powered by electron-vite</div>

-  <Versions />
+
+  <Versions /> -->
+
+  <COMselect :serialports="serialPorts" />
  <button type="button" @click="ipcHandle">Send Ping</button>
-  <button type="button" @click="getConfigFileContents">Load config</button>
+  <button type="button" @click="getSerialPorts">Load config</button>
  <div>{{ configuration }}</div>
+  <!-- 
  <div class="container">
    <div class="text-center">
      <h2 class="text-center mt-5">Trending Movies 🍿</h2>
@@ -48,8 +61,8 @@ onMounted(() => {
  </div>

  <div v-if="movies.length > 0" class="row">
-    <div v-for="(movie, i) in movies" :key="i" class="col-md-4">
+    <div v-for="(movie, i) in movies.slice(0, 2)" :key="i" class="col-md-4">
      <MovieCard :movie="movie" />
    </div>
-  </div>
+  </div> -->
 </template>
--- a/src/renderer/src/components/COMselect.vue
+++ b/src/renderer/src/components/COMselect.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['serialports'])
+const com_port = ref('')
+const iterator = ref(1)
+function optioniterator() { return iterator.value++};
+
+
+function addNewProgram() {
+  const programsContent = document.getElementById('programs')
+  const programNode = document.createElement('div')
+  programNode.innerHTML = `<div class='row'><select class='form-select'> <option> ${optioniterator()} </option> </select></div>`
+  programsContent.appendChild(programNode.firstChild)
+}
+
+function onMounted() {
+  
+}
+</script>
+<template>
+  <p>Select COM port for device: {{ com_port }}</p>
+
+  <div class="row">
+    <div class="col-auto">
+      <label class="form-label">Select COM Port for your deej device</label>
+    </div>
+    <div class="col-auto">
+      <select v-model="com_port" class="form-select">
+        <option v-for="(serialport, i) in props.serialports" :key="i" :value="serialport.path">
+          {{ serialport.friendlyName }}
+        </option>
+      </select>
+    </div>
+  </div>
+  <div id="programs"></div>
+  <div>
+    <button class="form-button" @click="addNewProgram">Add program</button>
+  </div>
+  <!-- <table>
+    <tr>
+      <td>Select COM Port for device</td>
+      <td>
+        <select v-model="com_port">
+          <option v-for="(serialport, i) in props.serialports" :key="i" :value="serialport.path">
+            {{ serialport.friendlyName }}
+          </option>
+        </select>
+      </td>
+    </tr>
+  </table> --->
+</template>
--- a/src/renderer/src/components/Versions.vue
+++ b/src/renderer/src/components/Versions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'

 const versions = reactive({ ...window.electron.process.versions })
 </script>