From 0cd966161981e588f29bf2219324b5629e8e8acb Mon Sep 17 00:00:00 2001 From: NoobishSVK Date: Fri, 19 Jan 2024 22:23:19 +0100 Subject: [PATCH] design / UI changes --- web/index.html | 7 ++++--- web/main.js | 55 ++++++++++++++++++++++++++++++++++++++++++++------ web/styles.css | 28 ++++++++++++++++++++----- web/themes.js | 4 ++++ 4 files changed, 80 insertions(+), 14 deletions(-) diff --git a/web/index.html b/web/index.html index 3fe14e2..f8ffcec 100644 --- a/web/index.html +++ b/web/index.html @@ -8,7 +8,7 @@
- +
@@ -28,12 +28,12 @@
-
+

PI CODE

-
+

FREQUENCY

@@ -108,6 +108,7 @@ +

FM-DX WebServer uses librdsparser by Konrad Kosmatka.

diff --git a/web/main.js b/web/main.js index e5027df..e22ca7a 100644 --- a/web/main.js +++ b/web/main.js @@ -242,16 +242,16 @@ function checkKey(e) { if (socket.readyState === WebSocket.OPEN) { if (e.keyCode == '38') { - socket.send((currentFreq + 0.01).toFixed(3)); + socket.send((currentFreq + 0.01).toFixed(2)); } else if (e.keyCode == '40') { - socket.send((currentFreq - 0.01).toFixed(3)); + socket.send((currentFreq - 0.01).toFixed(2)); } else if (e.keyCode == '37') { - socket.send((currentFreq - 0.10).toFixed(3)); + socket.send((currentFreq - 0.10).toFixed(1)); } 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'); freqDownButton = document.getElementById('freq-down'); +piCodeContainer = document.getElementById('pi-code-container'); +freqContainer = document.getElementById('freq-container'); freqUpButton.addEventListener("click", tuneUp); freqDownButton.addEventListener("click", tuneDown); +piCodeContainer.addEventListener("click", copyPi); +freqContainer.addEventListener("click", function() { + textInput.focus(); +}); function tuneUp() { if (socket.readyState === WebSocket.OPEN) { getCurrentFreq(); - socket.send((currentFreq + 0.10).toFixed(3)); + socket.send((currentFreq + 0.10).toFixed(1)); } } function tuneDown() { if (socket.readyState === WebSocket.OPEN) { 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(); + } } } \ No newline at end of file diff --git a/web/styles.css b/web/styles.css index a57358b..d38afa5 100644 --- a/web/styles.css +++ b/web/styles.css @@ -2,8 +2,8 @@ @import url('https://fonts.googleapis.com/css2?family=Monomaniac+One&display=swap'); :root { - --color-main: #1d1838; - --color-main-bright: #8069fa; + --color-main: #111; + --color-main-bright: #aaa; --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)); @@ -20,7 +20,8 @@ body { font-family: 'Titillium Web', sans-serif; color: white; - background: var(--color-main); + background-color: var(--color-main); + transition: 0.3s ease-in-out background-color; } a { @@ -33,7 +34,10 @@ a { } #wrapper { - margin: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: auto; max-width: 1240px; } @@ -89,12 +93,18 @@ h2 { .panel-33 { width: 33%; - background: var(--color-1); + background-color: var(--color-1); margin-left: 10px; margin-right: 10px; border-radius: 30px; text-align: center; margin-top: 30px; + transition: 0.3s ease-in-out background-color; +} + +.hover-brighten:hover { + cursor: pointer; + background-color: var(--color-2); } .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"] { margin: 0; /* removing default appearance */ diff --git a/web/themes.js b/web/themes.js index c6bde55..988d9db 100644 --- a/web/themes.js +++ b/web/themes.js @@ -18,6 +18,10 @@ const themes = { theme5: { '--color-main': '#171106', '--color-main-bright': '#f5b642', + }, + theme6: { + '--color-main': '#21091d', + '--color-main-bright': '#ed51d3', } };