kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-26 22:13:53 +01:00
Code Issues Activity

design / UI changes

Browse Source
This commit is contained in:
NoobishSVK
2024-01-19 22:23:19 +01:00
parent 4ce4d4f02f
commit 0cd9661619
4 changed files with 80 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/index.html
View File

@@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<canvas id="signal-canvas" width="1240" height="200" style="margin-top: 80px;"></canvas> <canvas id="signal-canvas" width="1240" height="200"></canvas>
<div class="flex-container"> <div class="flex-container">
<div class="panel-90 no-bg"> <div class="panel-90 no-bg">
@@ -28,12 +28,12 @@
<div class="flex-container"> <div class="flex-container">
<div class="panel-33"> <div class="panel-33 hover-brighten" id="pi-code-container">
<h2>PI CODE</h2> <h2>PI CODE</h2>
<span id="data-pi" class="text-big"></span> <span id="data-pi" class="text-big"></span>
</div> </div>
<div class="panel-33"> <div class="panel-33 hover-brighten" id="freq-container">
<h2>FREQUENCY</h2> <h2>FREQUENCY</h2>
<span id="data-frequency" class="text-big"></span> <span id="data-frequency" class="text-big"></span>
</div> </div>
@@ -108,6 +108,7 @@
<option value="theme3">Green</option> <option value="theme3">Green</option>
<option value="theme4">Cyan</option> <option value="theme4">Cyan</option>
<option value="theme5">Orange</option> <option value="theme5">Orange</option>
<option value="theme6">Pink</option>
</select> </select>
<p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librdsparser by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p> <p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librdsparser by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p>
<button class="button-close" id="closeModalButton">Close</button> <button class="button-close" id="closeModalButton">Close</button>

55
web/main.js
View File

@@ -242,16 +242,16 @@ function checkKey(e) {
if (socket.readyState === WebSocket.OPEN) { if (socket.readyState === WebSocket.OPEN) {
if (e.keyCode == '38') { if (e.keyCode == '38') {
socket.send((currentFreq + 0.01).toFixed(3)); socket.send((currentFreq + 0.01).toFixed(2));
} }
else if (e.keyCode == '40') { else if (e.keyCode == '40') {
socket.send((currentFreq - 0.01).toFixed(3)); socket.send((currentFreq - 0.01).toFixed(2));
} }
else if (e.keyCode == '37') { else if (e.keyCode == '37') {
socket.send((currentFreq - 0.10).toFixed(3)); socket.send((currentFreq - 0.10).toFixed(1));
} }
else if (e.keyCode == '39') { else if (e.keyCode == '39') {
socket.send((currentFreq + 0.10).toFixed(3)); socket.send((currentFreq + 0.10).toFixed(1));
} }
} }
} }
@@ -266,20 +266,63 @@ function getCurrentFreq() {
freqUpButton = document.getElementById('freq-up'); freqUpButton = document.getElementById('freq-up');
freqDownButton = document.getElementById('freq-down'); freqDownButton = document.getElementById('freq-down');
piCodeContainer = document.getElementById('pi-code-container');
freqContainer = document.getElementById('freq-container');
freqUpButton.addEventListener("click", tuneUp); freqUpButton.addEventListener("click", tuneUp);
freqDownButton.addEventListener("click", tuneDown); freqDownButton.addEventListener("click", tuneDown);
piCodeContainer.addEventListener("click", copyPi);
freqContainer.addEventListener("click", function() {
textInput.focus();
});
function tuneUp() { function tuneUp() {
if (socket.readyState === WebSocket.OPEN) { if (socket.readyState === WebSocket.OPEN) {
getCurrentFreq(); getCurrentFreq();
socket.send((currentFreq + 0.10).toFixed(3)); socket.send((currentFreq + 0.10).toFixed(1));
} }
} }
function tuneDown() { function tuneDown() {
if (socket.readyState === WebSocket.OPEN) { if (socket.readyState === WebSocket.OPEN) {
getCurrentFreq(); getCurrentFreq();
socket.send((currentFreq - 0.10).toFixed(3)); socket.send((currentFreq - 0.10).toFixed(1));
}
}
async function copyPi() {
console.log("clicked pi");
let frequency = document.querySelector('#data-frequency').textContent;
let pi = document.querySelector('#data-pi').textContent;
let ps = document.querySelector('#data-ps').textContent;
let signal = document.querySelector('#data-signal').textContent;
let signalUnit = document.querySelector('#signal-units').textContent;
try {
await copyToClipboard(frequency + " - " + pi + " | " + ps + " [" + signal + " " + signalUnit + "]");
} catch(error) {
console.error(error);
}
}
async function copyToClipboard(textToCopy) {
// Navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(textToCopy);
} else {
const textArea = document.createElement("textarea");
textArea.value = textToCopy;
textArea.style.position = "absolute";
textArea.style.left = "-999999px";
document.body.prepend(textArea);
textArea.select();
try {
document.execCommand('copy');
} catch (error) {
console.error(error);
} finally {
textArea.remove();
}
} }
} }

28
web/styles.css
View File

@@ -2,8 +2,8 @@
@import url('https://fonts.googleapis.com/css2?family=Monomaniac+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Monomaniac+One&display=swap');
:root { :root {
--color-main: #1d1838; --color-main: #111;
--color-main-bright: #8069fa; --color-main-bright: #aaa;
--color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright));
--color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright));
@@ -20,7 +20,8 @@
body { body {
font-family: 'Titillium Web', sans-serif; font-family: 'Titillium Web', sans-serif;
color: white; color: white;
background: var(--color-main); background-color: var(--color-main);
transition: 0.3s ease-in-out background-color;
} }
a { a {
@@ -33,7 +34,10 @@ a {
} }
#wrapper { #wrapper {
margin: auto; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto; width: auto;
max-width: 1240px; max-width: 1240px;
} }
@@ -89,12 +93,18 @@ h2 {
.panel-33 { .panel-33 {
width: 33%; width: 33%;
background: var(--color-1); background-color: var(--color-1);
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 30px; border-radius: 30px;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
transition: 0.3s ease-in-out background-color;
}
.hover-brighten:hover {
cursor: pointer;
background-color: var(--color-2);
} }
.panel-75 { .panel-75 {
@@ -243,6 +253,14 @@ input[type="text"]:hover {
} }
@media (max-width: 960px) {
#wrapper {
position: static;
transform: none;
margin: 0 auto;
}
}
input[type="range"] { input[type="range"] {
margin: 0; margin: 0;
/* removing default appearance */ /* removing default appearance */

4
web/themes.js
View File

@@ -18,6 +18,10 @@ const themes = {
theme5: { theme5: {
'--color-main': '#171106', '--color-main': '#171106',
'--color-main-bright': '#f5b642', '--color-main-bright': '#f5b642',
},
theme6: {
'--color-main': '#21091d',
'--color-main-bright': '#ed51d3',
} }
}; };