From 392d32c1d267df072c3bddc4298e818da5818ef7 Mon Sep 17 00:00:00 2001 From: NoobishSVK Date: Sun, 21 Jul 2024 22:03:00 +0200 Subject: [PATCH] design optimization & bugfixes --- server/endpoints.js | 1 + server/index.js | 74 +++++++++++++++++++++++----------------- web/css/breadcrumbs.css | 2 +- web/css/buttons.css | 39 +++++++++++++++------ web/css/dropdown.css | 7 +++- web/css/main.css | 14 +++++--- web/css/panels.css | 6 +++- web/index.ejs | 75 ++++++++++++++++++----------------------- web/js/init.js | 2 +- web/js/main.js | 12 ++++--- web/js/settings.js | 26 +++++++------- web/setup.ejs | 36 +++++++++++--------- 12 files changed, 171 insertions(+), 123 deletions(-) diff --git a/server/endpoints.js b/server/endpoints.js index 758e41a..225c005 100644 --- a/server/endpoints.js +++ b/server/endpoints.js @@ -111,6 +111,7 @@ router.get('/setup', (req, res) => { processUptime: formattedProcessUptime, consoleOutput: logs, plugins: allPluginConfigs, + enabledPlugins: serverConfig.plugins, onlineUsers: dataHandler.dataToSend.users, connectedUsers: storage.connectedUsers }); diff --git a/server/index.js b/server/index.js index 0a40356..6b537b4 100644 --- a/server/index.js +++ b/server/index.js @@ -63,46 +63,60 @@ connectToXdrd(); connectToSerial(); // Serial Connection -function connectToSerial() { - if (serverConfig.xdrd.wirelessConnection === false) { +if (serverConfig.xdrd.wirelessConnection === false) { - serialport = new SerialPort({path: serverConfig.xdrd.comPort, baudRate: 115200 }); + // Configure the SerialPort with DTR and RTS options + serialport = new SerialPort({ + path: serverConfig.xdrd.comPort, + baudRate: 115200, + autoOpen: false, // Prevents automatic opening + dtr: false, // Disable DTR + rts: false // Disable RTS + }); - serialport.on('open', () => { - logInfo('Using COM device: ' + serverConfig.xdrd.comPort); - serialport.write('x\n'); - setTimeout(() => { - serialport.write('Q0\n'); - serialport.write('M0\n'); - serialport.write('Z0\n'); + // Open the port manually after configuring DTR and RTS + serialport.open((err) => { + if (err) { + logError('Error opening port: ' + err.message); + return; + } + + logInfo('Using COM device: ' + serverConfig.xdrd.comPort); + serialport.write('x\n'); + + setTimeout(() => { + serialport.write('Q0\n'); + serialport.write('M0\n'); + serialport.write('Z0\n'); - if(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) { - serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n'); - dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3); - dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3); - } else { - serialport.write('T87500\n'); - } + if (serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) { + serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) + '\n'); + dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3); + dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3); + } else { + serialport.write('T87500\n'); + } - serialport.write('A0\n'); - serialport.write('F-1\n'); - serialport.write('W0\n'); - serialport.write('D0\n'); - serialport.write('G00\n'); - serverConfig.audio.startupVolume ? serialport.write('Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n') : serialport.write('Y100\n'); - }, 3000); - - serialport.on('data', (data) => { - helpers.resolveDataBuffer(data, wss); - }); + serialport.write('A0\n'); + serialport.write('F-1\n'); + serialport.write('W0\n'); + serialport.write('D0\n'); + serialport.write('G00\n'); + serverConfig.audio.startupVolume + ? serialport.write('Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n') + : serialport.write('Y100\n'); + }, 3000); + + serialport.on('data', (data) => { + helpers.resolveDataBuffer(data, wss); }); serialport.on('error', (error) => { logError(error.message); }); + }); - return serialport; - } + return serialport; } // xdrd connection diff --git a/web/css/breadcrumbs.css b/web/css/breadcrumbs.css index c1b674e..701a18d 100644 --- a/web/css/breadcrumbs.css +++ b/web/css/breadcrumbs.css @@ -326,7 +326,7 @@ pre { margin-bottom: 20px !important; } #ps-container { - background-color: var(--color-1); + background-color: var(--color-1-transparent); height: 100px !important; margin: auto !important; width: 100%; diff --git a/web/css/buttons.css b/web/css/buttons.css index c5827e4..61e0a5d 100644 --- a/web/css/buttons.css +++ b/web/css/buttons.css @@ -71,7 +71,7 @@ button:hover { input[type="text"], textarea, input[type="password"] { width: 300px; - min-height: 46px; + min-height: 48px; padding-left: 20px; box-sizing: border-box; border: 2px solid transparent; @@ -90,9 +90,29 @@ input[type="text"], textarea, input[type="password"] { border: 2px solid transparent; outline: 0; color: var(--color-text); - background-color: var(--color-1); + background-color: var(--color-1-transparent); font-family: 'Titillium Web', sans-serif; - } +} + +#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter)::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--color-1); + opacity: 0.6; /* Set the desired opacity */ + pointer-events: none; /* Ensure it does not interfere with interactions */ + z-index: -1; /* Place the pseudo-element behind the panel content */ + border-radius: 15px; +} + +#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter) { + backdrop-filter: blur(5px); + background-attachment: fixed; +} + #tune-buttons button { box-sizing: border-box; @@ -138,7 +158,7 @@ input[type="range"] { /* Track: Mozilla Firefox */ input[type="range"]::-moz-range-track { height: 48px; - background: var(--color-1); + background: var(--color-1-transparent); border-radius: 15px; border: 0; } @@ -190,7 +210,7 @@ input[type="range"]::-moz-range-thumb { padding: 0; cursor: pointer; width: 100%; - border-radius: 25px; + border-radius: 15px; font-weight: bold; background-color: var(--color-2); } @@ -218,7 +238,7 @@ input[type="range"]::-moz-range-thumb { .toggleSwitch > span { position: absolute; left: 0; - width: calc(100% - 6px); + width: calc(100%); margin: 0; text-align: left; white-space: nowrap; @@ -233,10 +253,9 @@ input[type="range"]::-moz-range-thumb { width: 50%; margin-left: 50px; text-align: left; - font-size: 0.9em; width: auto; opacity: 1; - width: 40%; + width: 50%; text-align: center; line-height:48px; } @@ -251,7 +270,7 @@ input[type="range"]::-moz-range-thumb { left: 0; width: 50%; background-color: var(--color-4); - border-radius: 25px; + border-radius: 15px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; @@ -285,7 +304,7 @@ input[type="range"]::-moz-range-thumb { transition: all 0.2s ease-out; } .toggleSwitch input:checked ~ a { - left: calc(50% - 3px); + left: calc(50%); } .toggleSwitch input:checked ~ span span:first-of-type { diff --git a/web/css/dropdown.css b/web/css/dropdown.css index ed95b0d..287b7a8 100644 --- a/web/css/dropdown.css +++ b/web/css/dropdown.css @@ -16,7 +16,7 @@ position: absolute; right: 10px; top: 18px; - z-index: 100; + z-index: 15; width: 6px; height: 6px; border: 1px solid var(--color-main); @@ -39,7 +39,12 @@ user-select: none; background-color: var(--color-4); color: var(--color-main); + border-radius: 15px; } + + .dropdown.opened > input { + border-radius: 0 0 15px 15px; + } .dropdown input:focus { outline: none; } diff --git a/web/css/main.css b/web/css/main.css index 45136c4..f514e33 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -1,8 +1,8 @@ :root { - --color-main: rgba(32, 34, 40, 1); - --color-main-bright: rgba(88, 219, 171, 1); - --color-text: rgba(255, 255, 255, 1); + --color-main: rgb(32, 34, 40); + --color-main-bright: rgb(88, 219, 171); + --color-text: rgb(255, 255, 255); --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */ --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */ @@ -10,7 +10,13 @@ --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */ --color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */ - --color-text-2: #ccc; + --color-1-transparent: color-mix(in srgb, var(--color-1), transparent 40%); + --color-2-transparent: color-mix(in srgb, var(--color-2), transparent 40%); + --color-3-transparent: color-mix(in srgb, var(--color-3), transparent 40%); + --color-4-transparent: color-mix(in srgb, var(--color-4), transparent 40%); + --color-5-transparent: color-mix(in srgb, var(--color-5), transparent 40%); + + --color-text-2: rgb(240,240,240); } * { diff --git a/web/css/panels.css b/web/css/panels.css index 75a9e1a..78eb4c7 100644 --- a/web/css/panels.css +++ b/web/css/panels.css @@ -1,5 +1,5 @@ *[class^="panel-"] { - background-color: var(--color-1); + background-color: var(--color-1-transparent); margin-left: 10px; margin-right: 10px; border-radius: 15px; @@ -8,6 +8,10 @@ transition: 0.3s ease-in-out background-color; } +*[class^="panel-"]:not(.no-bg):not(.no-filter) { + backdrop-filter:blur(5px); +} + .panel-10 { width: 10%; } diff --git a/web/index.ejs b/web/index.ejs index e635ed2..dfcd505 100644 --- a/web/index.ejs +++ b/web/index.ejs @@ -57,7 +57,7 @@
-
+
@@ -118,15 +118,15 @@
-
+
<% if (antennas.enabled == true) { %> -