first test using pinia

gui_vue/dist-electron/main.js

@@ -1 +1 @@
-"use strict";const o=require("electron"),n=require("node:path");process.env.DIST=n.join(__dirname,"../dist");process.env.PUBLIC=o.app.isPackaged?process.env.DIST:n.join(process.env.DIST,"../public");let e;const s=process.env.VITE_DEV_SERVER_URL;function t(){e=new o.BrowserWindow({icon:n.join(process.env.PUBLIC,"electron-vite.svg"),webPreferences:{preload:n.join(__dirname,"preload-main.js"),backgroundThrottle:!1,nodeIntegration:!0,contextIsolation:!1,enableRemoteModule:!1,sandbox:!1}}),e.webContents.on("did-finish-load",()=>{e==null||e.webContents.send("main-process-message",new Date().toLocaleString())}),s?e.loadURL(s):e.loadFile(n.join(process.env.DIST,"index.html"))}o.app.on("window-all-closed",()=>{e=null});o.app.whenReady().then(t);
+"use strict";const o=require("electron"),n=require("node:path");process.env.ELECTRON_DISABLE_SECURITY_WARNINGS="true";process.env.DIST=n.join(__dirname,"../dist");process.env.PUBLIC=o.app.isPackaged?process.env.DIST:n.join(process.env.DIST,"../public");let e;const s=process.env.VITE_DEV_SERVER_URL;function a(){e=new o.BrowserWindow({icon:n.join(process.env.PUBLIC,"electron-vite.svg"),webPreferences:{preload:n.join(__dirname,"preload-main.js"),backgroundThrottle:!1,nodeIntegration:!0,contextIsolation:!1,enableRemoteModule:!1,sandbox:!1}}),e.webContents.on("did-finish-load",()=>{e==null||e.webContents.send("main-process-message",new Date().toLocaleString())}),s?e.loadURL(s):e.loadFile(n.join(process.env.DIST,"index.html"))}o.app.on("window-all-closed",()=>{e=null});o.app.whenReady().then(a);o.ipcMain.on("request-update-daemon-state",(i,t)=>{e.webContents.send("action-update-daemon-state",t)});

gui_vue/electron/main.ts

@@ -1,6 +1,14 @@
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, ipcMain } from 'electron'
 import path from 'node:path'
 
+
+//import { useIpcRenderer } from '@vueuse/electron'
+//const ipcRenderer = useIpcRenderer()
+
+
+
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+
 // The built directory structure
 //
 // ├─┬─┬ dist
@@ -55,3 +63,7 @@ app.on('window-all-closed', () => {
 })
 
 app.whenReady().then(createWindow)
+
+ipcMain.on("request-update-daemon-state", (event, arg) => {
+  win.webContents.send("action-update-daemon-state", arg);
+});

gui_vue/package.json

@@ -10,30 +10,32 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/electron": "^10.4.1",
     "blob-util": "^2.0.2",
     "bootstrap": "^5.3.1",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.1",
     "browser-image-compression": "^2.0.2",
     "chart.js": "^4.3.3",
-    "electron-log": "^4.4.8",
-    "emoji-picker-element": "^1.18.3",
-    "emoji-picker-element-data": "^1.4.0",
-    "mime": "^3.0.0",
     "chartjs-plugin-annotation": "^3.0.1",
     "electron-log": "^4.4.8",
     "electron-updater": "^6.1.1",
+    "emoji-picker-element": "^1.18.3",
+    "emoji-picker-element-data": "^1.4.0",
+    "mime": "^3.0.0",
+    "pinia": "^2.1.6",
     "pouchdb": "^8.0.1",
     "pouchdb-find": "^8.0.1",
     "pouchdb-upsert": "^2.2.0",
     "qth-locator": "^2.1.0",
     "sass": "^1.66.1",
+    "socket.io": "^4.7.2",
     "uuid": "^9.0.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
-    "electron": "^24.4.0",
+    "electron": "^24.8.2",
     "electron-builder": "^23.6.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",

gui_vue/setup.md

@@ -5,4 +5,11 @@ https://github.com/electron-vite
 https://github.com/electron-vite/electron-vite-vue
 https://github.com/vuejs/create-vue
 https://vue-community.org/guide/ecosystem/desktop-apps.html#electron
-https://blog.logrocket.com/building-app-electron-vue/
+https://blog.logrocket.com/building-app-electron-vue/
+
+
+Folder structure
+dist-electron: Automatically compiled source from vite
+electron: Source code folder for Electron stuff
+public: Public data 
+src: VueJS source code

gui_vue/src/components/main_audio.vue

@@ -1,7 +1,20 @@
+<script setup>
 
+import { setActivePinia } from 'pinia';
+import pinia from '../store/index';
+setActivePinia(pinia);
+
+import { useAudioStore } from '../store/audioStore.js';
+const audio = useAudioStore(pinia);
+
+
+
+
+</script>
 
 <template>
 
+
             <div class="card mb-0">
               <div class="card-header p-1">
                 <div class="container">
@@ -39,8 +52,8 @@
                     class="form-select form-select-sm"
                     id="audio_input_selectbox"
                     aria-label=".form-select-sm"
+                    v-html="audio.getInputDevices()"
                   >
-                    <!-- 					 					<option selected value="3011">USB Interface</option>-->
                   </select>
                 </div>
                 <div class="input-group input-group-sm">
@@ -51,7 +64,9 @@
                     class="form-select form-select-sm"
                     id="audio_output_selectbox"
                     aria-label=".form-select-sm"
-                  ></select>
+                    v-html="audio.getOutputDevices()"
+                  >
+                  </select>
                 </div>
               </div>
             </div>

gui_vue/src/components/main_rig_control.vue

@@ -1,3 +1,46 @@
+<script setup lang="ts">
+
+
+  // TEST HAMLIB
+function testHamlib(){
+    var data_bits = document.getElementById("hamlib_data_bits").value;
+    var stop_bits = document.getElementById("hamlib_stop_bits").value;
+    var handshake = document.getElementById("hamlib_handshake").value;
+    var pttport = document.getElementById("hamlib_ptt_port").value;
+
+    var rigctld_ip = document.getElementById("hamlib_rigctld_ip").value;
+    var rigctld_port = document.getElementById("hamlib_rigctld_port").value;
+
+    var deviceid = document.getElementById("hamlib_deviceid").value;
+    var deviceport = document.getElementById("hamlib_deviceport").value;
+    var serialspeed = document.getElementById("hamlib_serialspeed").value;
+    var pttprotocol = document.getElementById("hamlib_pttprotocol").value;
+
+    if (document.getElementById("radio-control-switch-disabled").checked) {
+      var radiocontrol = "disabled";
+    } else {
+      var radiocontrol = "rigctld";
+    }
+
+    daemon.testHamlib(
+      radiocontrol,
+      deviceid,
+      deviceport,
+      serialspeed,
+      pttprotocol,
+      pttport,
+      data_bits,
+      stop_bits,
+      handshake,
+      rigctld_ip,
+      rigctld_port,
+    );
+  };
+
+
+</script>
+
+
 <template>
 <div class="card mb-0">
               <div class="card-header p-1">
@@ -155,6 +198,7 @@
                         data-bs-toggle="tooltip"
                         data-bs-trigger="hover"
                         data-bs-html="true"
+                        @click="testHamlib"
                         title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails."
                       >
                         PTT Test

gui_vue/src/main.ts

@@ -1,4 +1,7 @@
-import { createApp } from 'vue'
+import { createApp, Vue } from 'vue'
+import { createPinia } from 'pinia'
+
+
 import './styles.css'
 
 
@@ -12,14 +15,18 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 
 
+
+
 // Import our custom CSS
 //import './scss/styles.scss'
 
-
-
-
-
-
 import App from './App.vue'
+const app = createApp(App)//.mount('#app').$nextTick(() => postMessage({ payload: 'removeLoading' }, '*'))
 
-createApp(App).mount('#app').$nextTick(() => postMessage({ payload: 'removeLoading' }, '*'))
+const pinia = createPinia()
+app.mount('#app')
+console.log("init...")
+app.use(pinia)
+
+
+import './js/daemon.js'

gui_vue/src/store/audioStore.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue';
+
+export const useAudioStore = defineStore('audioStore', () => {
+    var inputDevices = ref([{"id":0, "name": "no input devices"}])
+    var outputDevices = ref([{"id":0, "name": "no output devices"}])
+
+    function getInputDevices() {
+       var html = "";
+       for(var key in inputDevices.value) {
+            html +=`<option value=${inputDevices.value[key]["id"]}>${inputDevices.value[key]["name"]}</option>`;
+       }
+       return html
+    }
+
+    function getOutputDevices() {
+       var html = "";
+       for(var key in outputDevices.value) {
+            html +=`<option value="${outputDevices.value[key]["id"]}">${outputDevices.value[key]["name"]}</option>`;
+       }
+        return html
+    }
+
+  return { inputDevices, outputDevices, getInputDevices, getOutputDevices };
+});

gui_vue/src/store/index.js

@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia;

gui_vue/src/store/store.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // could also be defined as
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})

gui_vue/tsconfig.json

@@ -20,6 +20,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
+
+
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "electron"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

gui_vue/vite.config.ts

@@ -5,6 +5,12 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+
+build: {
+        minify: false
+    },
+    useEslint: false,
+
   plugins: [
     vue(),
     electron([
@@ -13,14 +19,37 @@ export default defineConfig({
         entry: 'electron/main.ts',
       },
       {
-        entry: 'electron/preload.ts',
+        // Daemon-Process entry file of the Electron App.
+        entry: 'electron/sock.js',
+      },
+      {
+        // Daemon-Process entry file of the Electron App.
+        entry: 'electron/daemon.js',
+      },
+            {
+        // Daemon-Process entry file of the Electron App.
+        entry: 'electron/freedata.js',
+      },
+      {
+        entry: 'electron/preload-main.js',
         onstart(options) {
-          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete, 
+          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
           // instead of restarting the entire Electron App.
           options.reload()
         },
       },
-    ]),
+      {
+        entry: 'electron/preload-chat.js',
+        onstart(options) {
+          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
+          // instead of restarting the entire Electron App.
+          options.reload()
+        },
+      },
+    ],
+
+
+    ),
     renderer(),
   ],
 })