From c2bb770f82e286d9a78d02b75172546af619c942 Mon Sep 17 00:00:00 2001 From: NoobishSVK Date: Fri, 23 Feb 2024 14:05:23 +0100 Subject: [PATCH] UI changes --- README.md | 10 +++++--- datahandler.js | 4 ++-- index.js | 45 +++++++++++++++++++++++++++++++++++- package.json | 2 +- web/css/breadcrumbs.css | 12 ++++++++-- web/css/buttons.css | 14 ++++++----- web/css/helpers.css | 6 ++++- web/css/main.css | 25 ++++++++++++-------- web/css/modal.css | 2 +- web/images/speaker.svg | 7 ++++++ web/index.ejs | 28 +++++++++++----------- web/js/main.js | 19 +-------------- web/js/settings.js | 51 +++++++++++++++++++++++++++-------------- web/setup.ejs | 33 +++++++++++++++----------- 14 files changed, 168 insertions(+), 90 deletions(-) create mode 100644 web/images/speaker.svg diff --git a/README.md b/README.md index 5c7c293..078faa8 100644 --- a/README.md +++ b/README.md @@ -54,10 +54,14 @@ Join our **Discord community** to get the latest development update info, share 5. Open your web browser and navigate to `http:/localhost:8080` to access the web interface. -## Dependencies +## Utilized projects -This project utilizes the [librdsparser](https://github.com/kkonradpl/librdsparser) library for RDS parsing. Make sure to check out the library for more information. -Pre-built version of this library is bundled with the webserver. +This project utilizes these libraries: +- [librdsparser](https://github.com/kkonradpl/librdsparser) library by Konrad Kosmatka for RDS parsing +- [3LAS](https://github.com/jojobond/3LAS) library by JoJoBond for Low Latency Audio Streaming +- [flat-flags](https://github.com/luishdez/flat-flags) library by luishdez for RDS country flags + +All of these libraries are already bundled with the webserver. ## Contributing diff --git a/datahandler.js b/datahandler.js index 858c9ca..1a23561 100644 --- a/datahandler.js +++ b/datahandler.js @@ -204,8 +204,8 @@ const clientUpdateIntervals = new Map(); // Store update intervals for each clie // Initialize the data object var dataToSend = { pi: '?', - freq: 87.500, - previousFreq: 87.500, + freq: 87.500.toFixed(3), + previousFreq: 87.500.toFixed(3), signal: 0, st: false, st_forced: false, diff --git a/index.js b/index.js index a6a2759..e2bcf3f 100644 --- a/index.js +++ b/index.js @@ -271,6 +271,48 @@ const authenticate = (req, res, next) => { app.set('view engine', 'ejs'); // Set EJS as the template engine app.set('views', path.join(__dirname, '/web')) +function parseMarkdown(parsed) { + parsed = parsed.replace(/<\/?[^>]+(>|$)/g, ''); + + var grayTextRegex = /--(.*?)--/g; + parsed = parsed.replace(grayTextRegex, '$1'); + + var boldRegex = /\*\*(.*?)\*\*/g; + parsed = parsed.replace(boldRegex, '$1'); + + var italicRegex = /\*(.*?)\*/g; + parsed = parsed.replace(italicRegex, '$1'); + + var linkRegex = /\[([^\]]+)]\(([^)]+)\)/g; + parsed = parsed.replace(linkRegex, '$1'); + + var breakLineRegex = /\\n/g; + parsed = parsed.replace(breakLineRegex, '
'); + + return parsed; +} + +function removeMarkdown(parsed) { + parsed = parsed.replace(/<\/?[^>]+(>|$)/g, ''); + + var grayTextRegex = /--(.*?)--/g; + parsed = parsed.replace(grayTextRegex, '$1'); + + var boldRegex = /\*\*(.*?)\*\*/g; + parsed = parsed.replace(boldRegex, '$1'); + + var italicRegex = /\*(.*?)\*/g; + parsed = parsed.replace(italicRegex, '$1'); + + var linkRegex = /\[([^\]]+)]\(([^)]+)\)/g; + parsed = parsed.replace(linkRegex, '$1'); + + var breakLineRegex = /\\n/g; + parsed = parsed.replace(breakLineRegex, ''); + + return parsed; +} + app.get('/', (req, res) => { if (!fs.existsSync(configName + '.json')) { parseAudioDevice((result) => { @@ -285,7 +327,8 @@ app.get('/', (req, res) => { isAdminAuthenticated: req.session.isAdminAuthenticated, isTuneAuthenticated: req.session.isTuneAuthenticated, tunerName: serverConfig.identification.tunerName, - tunerDesc: serverConfig.identification.tunerDesc, + tunerDesc: parseMarkdown(serverConfig.identification.tunerDesc), + tunerDescMeta: removeMarkdown(serverConfig.identification.tunerDesc), tunerLock: serverConfig.lockToAdmin, publicTuner: serverConfig.publicTuner }) diff --git a/package.json b/package.json index 01e004f..61d19a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fm-dx-webserver", - "version": "1.0.8", + "version": "1.0.9", "description": "", "main": "index.js", "scripts": { diff --git a/web/css/breadcrumbs.css b/web/css/breadcrumbs.css index bfbb35f..e7f0ab7 100644 --- a/web/css/breadcrumbs.css +++ b/web/css/breadcrumbs.css @@ -78,7 +78,7 @@ label { #settings, #back-btn, #users-online-container { background: transparent; border: 0; - color: white; + color: var(--color-text); position: absolute; top: 15px; right: 15px; @@ -189,7 +189,7 @@ label { #data-pi { font-size: 24px; margin-top: 50px; - color: #aaa; + color: var(--color-text-2) } h2.show-phone { display: inline; @@ -272,4 +272,12 @@ label { margin-bottom: 10px; font-size: 18px; } + + h2.mb-0 { + margin-bottom: 0; + margin-top: 2px !important; + } + #af-list ul { + max-height: 330px; + } } \ No newline at end of file diff --git a/web/css/buttons.css b/web/css/buttons.css index 4f573a9..ea34e92 100644 --- a/web/css/buttons.css +++ b/web/css/buttons.css @@ -25,7 +25,7 @@ input[type="text"], textarea, input[type="password"] { box-sizing: border-box; border: 2px solid transparent; outline: 0; - color: white; + color: var(--color-text); background-color: var(--color-1); font-family: 'Titillium Web', sans-serif; } @@ -38,7 +38,7 @@ input[type="text"], textarea, input[type="password"] { box-sizing: border-box; border: 2px solid transparent; outline: 0; - color: white; + color: var(--color-text); background-color: var(--color-1); font-family: 'Titillium Web', sans-serif; } @@ -112,10 +112,12 @@ input[type="range"]::-moz-range-thumb { box-sizing: border-box; height: 48px; width: 48px; - background-color: var(--color-4); - border-radius: 0px 30px 30px 0px; - border: 0; - outline: none; + background: url('../images/speaker.svg') center no-repeat, var(--color-5); + background-position: center; + background-size: 20px; + border-radius: 30px; + outline: 4px solid var(--color-5); + outline-offset: -3px; /* slider progress trick */ box-shadow: -420px 0 0 400px var(--color-4); } diff --git a/web/css/helpers.css b/web/css/helpers.css index a159a7a..fe47ce9 100644 --- a/web/css/helpers.css +++ b/web/css/helpers.css @@ -99,10 +99,14 @@ font-weight: 300; } +.text-color-default { + color: var(--color-text); +} + .text-medium { font-size: 24px; - color: #aaa; font-weight: 300; + opacity: 0.6; } .text-medium-big { diff --git a/web/css/main.css b/web/css/main.css index 7dc33ad..ed56d6e 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -1,13 +1,16 @@ :root { - --color-main: #111; - --color-main-bright: #aaa; + --color-main: #000; + --color-main-bright: #ccc; + --color-text: white; - --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-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright)); - --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); - --color-5: color-mix(in srgb, var(--color-main) 0%, var(--color-main-bright)); + --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 */ + --color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright)); /* 50% Brightness */ + --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; } * { @@ -41,7 +44,7 @@ body { font-family: 'Titillium Web', sans-serif; - color: white; + color: var(--color-text); background-color: var(--color-main); transition: 0.3s ease-in-out background-color; margin: 0 auto; @@ -72,5 +75,9 @@ body { a { text-decoration: none; - color: white; + color: var(--color-text-2); +} + +a:hover { + border-bottom: 1px solid var(--color-4); } \ No newline at end of file diff --git a/web/css/modal.css b/web/css/modal.css index bf9f877..4c8cd8a 100644 --- a/web/css/modal.css +++ b/web/css/modal.css @@ -47,7 +47,7 @@ } .close:hover { - color: white; + color: var(--color-text); } .modal-content .button-close { diff --git a/web/images/speaker.svg b/web/images/speaker.svg new file mode 100644 index 0000000..cac52d1 --- /dev/null +++ b/web/images/speaker.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/web/index.ejs b/web/index.ejs index 7b9ca58..b1674cd 100644 --- a/web/index.ejs +++ b/web/index.ejs @@ -12,7 +12,7 @@ - + @@ -53,7 +53,7 @@

<%= tunerName %> <% if (!publicTuner) { %> <% } else if (tunerLock) { %><% } %>

-

<%= tunerDesc %>

+

<%- tunerDesc %>

@@ -74,7 +74,7 @@

-
+

TP @@ -103,7 +103,7 @@

SIGNAL

+ --> dBf
@@ -154,13 +154,15 @@
-

+

,

- kW [] • km • ° + + kW [] • km • ° +
@@ -180,7 +182,7 @@

-
+

TP @@ -216,7 +218,8 @@
  • Orange
  • Pink
  • Blurple
    • -
  • AMOLED
    • +
  • Bee
    • +
  • Retro

    • @@ -269,13 +272,8 @@

    -

    FM-DX WebServer
    by Noobish & the OpenRadio community.

    - v1.0.8 [19/2/2024] -

    - librds & maps.fmdx.pl by Konrad Kosmatka
    - 3LAS by JoJoBond
    - flat-flags by luishdez
    -

    +

    FM-DX WebServer
    by Noobish, kkonradpl & the OpenRadio community.

    + v1.0.9 [23/2/2024]
    diff --git a/web/js/main.js b/web/js/main.js index ef4f543..8d2dc4f 100644 --- a/web/js/main.js +++ b/web/js/main.js @@ -39,23 +39,6 @@ $(document).ready(function () { } }); - var input = $("#tuner-desc").text(); - var parsed = input; - - var grayTextRegex = /--(.*?)--/g; - parsed = parsed.replace(grayTextRegex, '$1'); - - var boldRegex = /\*\*(.*?)\*\*/g; - parsed = parsed.replace(boldRegex, '$1'); - - var italicRegex = /\*(.*?)\*/g; - parsed = parsed.replace(italicRegex, '$1'); - - var breakLineRegex = /\\n/g; - parsed = parsed.replace(breakLineRegex, '
    '); - - $("#tuner-desc").html(parsed); - const textInput = $('#commandinput'); textInput.on('change', function (event) { @@ -568,7 +551,7 @@ function updateDataElements(parsedData) { parsedData.ps = parsedData.ps.replace(/\s/g, '_'); } $('#data-ps').html(parsedData.ps === '?' ? "?" : processString(parsedData.ps, parsedData.ps_errors)); - $('.data-tp').html(parsedData.tp === false ? "TP" : "TP"); + $('.data-tp').html(parsedData.tp === 0 ? "TP" : "TP"); $('.data-ta').html(parsedData.ta === 0 ? "TA" : "TA"); $('.data-ms').html(parsedData.ms === 0 ? "MS" diff --git a/web/js/settings.js b/web/js/settings.js index 66969ce..8bec139 100644 --- a/web/js/settings.js +++ b/web/js/settings.js @@ -1,14 +1,20 @@ - // Themes + /** + * Themes + * @param first color + * @param second color + * @param text color + */ const themes = { - theme1: ['#111', '#aaa'], - theme2: ['#1f0c0c', '#ff7070'], - theme3: ['#121c0c', '#a9ff70'], - theme4: ['#0c1c1b', '#68f7ee'], - theme5: ['#171106', '#f5b642'], - theme6: ['#21091d', '#ed51d3'], - theme7: ['#0d0b1a', '#8069fa'], - theme8: ['#000', '#888'], - }; + theme1: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // Monochrome (Default) + theme2: [ 'rgba(31, 12, 12, 1)', 'rgba(255, 112, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Red + theme3: [ 'rgba(18, 28, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Green + theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Cyan + theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Orange + theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(237, 81, 211, 1)', 'rgba(255, 255, 255, 1)' ], // Pink + theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)' ], // Blurple + theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)' ], // Sunny + theme9: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ] // Retro + }; // Signal Units const signalUnits = { @@ -129,10 +135,21 @@ }); - function setTheme(themeName) { - const themeColors = themes[themeName]; - if (themeColors) { - $(':root').css('--color-main', themeColors[0]); - $(':root').css('--color-main-bright', themeColors[1]); - } - } +function setTheme(themeName) { + const themeColors = themes[themeName]; + if (themeColors) { + // Extracting the RGBA components and opacity value + const rgbaComponents = themeColors[2].match(/(\d+(\.\d+)?)/g); + const opacity = parseFloat(rgbaComponents[3]); + // Calculating 80% of the opacity + const newOpacity = opacity * 0.75; + // Constructing the new RGBA string with the adjusted opacity + const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`; + + $(':root').css('--color-main', themeColors[0]); + $(':root').css('--color-main-bright', themeColors[1]); + $(':root').css('--color-text', themeColors[2]); + $(':root').css('--color-text-2', textColor2); + } +} + diff --git a/web/setup.ejs b/web/setup.ejs index 4e1573f..5c64ef6 100644 --- a/web/setup.ejs +++ b/web/setup.ejs @@ -85,10 +85,13 @@
    - +
      -
    • 128k (saves bandwidth)
      • +
    • 64k (lowest quality)
      • +
    • 96k (low quality)
      • +
    • 128k (standard)
    • 192k (higher quality)
      • +
    • 256k (highest quality)
    @@ -138,18 +141,20 @@

    MAINTENANCE

    -
    - - -

    -
    - - -

    -
    - - -

    +
    +
    + + +

    +
    + + +

    +
    + + +

    +