nabeel/vue_electron_project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added component for dropdown box for COM Port selection

Browse Source
This commit is contained in:
nabeel
2024-06-01 01:32:52 +10:00
parent 17e7bb137e
commit 8d2f70fd23
9 changed files with 351 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/main/index.js
View File

@@ -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 () {

8
src/renderer/index.html
View File

@@ -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"

23
src/renderer/src/App.vue
View File

@@ -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>

52
src/renderer/src/components/COMselect.vue Normal file
View File

@@ -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>

2
src/renderer/src/components/Versions.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { reactive } from 'vue'
import { reactive, ref } from 'vue'
const versions = reactive({ ...window.electron.process.versions })
</script>