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 changes, accessibility stuff

Browse Source
This commit is contained in:
NoobishSVK
2024-07-18 14:57:43 +02:00
parent 3a6deecc02
commit 3d608ae8e8
17 changed files with 259 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/js/init.js
View File

@@ -1,9 +1,9 @@
var currentDate = new Date('Jul 15, 2024 23:00:00');
var currentDate = new Date('Jul 18, 2024 15:00:00');
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
var year = currentDate.getFullYear();
var formattedDate = day + '/' + month + '/' + year;
var currentVersion = 'v1.2.3 [' + formattedDate + ']';
var currentVersion = 'v1.2.4 [' + formattedDate + ']';
getInitialSettings();

26
web/js/main.js
View File

@@ -239,6 +239,7 @@ function initCanvas(parsedData) {
maxDataPoints,
pointWidth,
color2: null,
color3: null,
color4: null,
signalUnit: localStorage.getItem('signalUnit'),
offset: 0,
@@ -264,9 +265,11 @@ function initCanvas(parsedData) {
function updateChartSettings(signalChart) {
// Update colors
const newColor2 = getComputedStyle(document.documentElement).getPropertyValue('--color-2').trim();
const newColor3 = getComputedStyle(document.documentElement).getPropertyValue('--color-3').trim();
const newColor4 = getComputedStyle(document.documentElement).getPropertyValue('--color-4').trim();
if (newColor2 !== signalChart.color2 || newColor4 !== signalChart.color4) {
signalChart.color2 = newColor2;
signalChart.color3 = newColor3;
signalChart.color4 = newColor4;
}
@@ -284,7 +287,7 @@ function updateChartSettings(signalChart) {
}
function updateCanvas(parsedData, signalChart) {
const { context, canvas, maxDataPoints, pointWidth, color2, color4, offset } = signalChart;
const { context, canvas, maxDataPoints, pointWidth, color2, color3, color4, offset } = signalChart;
if (data.length > maxDataPoints) {
data = data.slice(data.length - maxDataPoints);
@@ -319,11 +322,11 @@ function updateCanvas(parsedData, signalChart) {
}
context.strokeStyle = color4;
context.lineWidth = 1;
context.lineWidth = 2;
context.stroke();
// Draw horizontal lines for lowest, highest, and average values
context.strokeStyle = color2;
context.strokeStyle = color3;
context.lineWidth = 1;
// Draw the lowest value line
@@ -422,6 +425,10 @@ function getCurrentFreq() {
function checkKey(e) {
e = e || window.event;
if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) {
return;
}
if ($('#password:focus').length > 0
|| $('#chat-send-message:focus').length > 0
|| $('#volumeSlider:focus').length > 0
@@ -706,7 +713,18 @@ const updateDataElements = throttle(function(parsedData) {
}
updateHtmlIfChanged($dataPs, parsedData.ps === '?' ? "<span class='opacity-half'>?</span>" : processString(parsedData.ps, parsedData.ps_errors));
updateHtmlIfChanged($dataSt, `<span class='opacity-${parsedData.st ? 'full' : 'half'}'>${parsedData.st_forced ? 'MO' : 'ST'}</span>`);
let stereoColor;
if(parsedData.st) {
stereoColor = 'var(--color-4)';
} else {
stereoColor = 'var(--color-3)';
}
if(parsedData.st_forced) {
stereoColor = 'gray';
}
$dataSt.css('border', '2px solid ' + stereoColor);
//updateHtmlIfChanged($dataSt, `<span class='opacity-${parsedData.st ? 'full' : 'half'}'>${parsedData.st_forced ? 'MO' : 'ST'}</span>`);
updateHtmlIfChanged($dataRt0, processString(parsedData.rt0, parsedData.rt0_errors));
updateHtmlIfChanged($dataRt1, processString(parsedData.rt1, parsedData.rt1_errors));

44
web/js/settings.js
View File

@@ -1,19 +1,20 @@
/**
* Themes
* @param first color
* @param second color
* @param main color
* @param main-bright color
* @param text color
* @param background filter color
*/
const themes = {
theme1: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ], // Retro (Default)
theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)' ], // Cappuccino
theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Nature
theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Ocean
theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Terminal
theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)' ], // Nightlife
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)' ], // Construction
theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // AMOLED
theme1: [ 'rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)', 'rgba(11, 12, 14, 1)' ], // Retro (Default)
theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)', 'rgba(7, 11, 12, 1)' ], // Cappuccino
theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)', 'rgba(6, 6, 4, 1)' ], // Nature
theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)', 'rgba(4, 10, 9, 1)' ], // Ocean
theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)', 'rgba(8, 6, 2, 1)' ], // Terminal
theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)', 'rgba(12, 3, 10, 1)' ], // Nightlife
theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)', 'rgba(5, 4, 7, 1)' ], // Blurple
theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)', 'rgba(252, 186, 3, 1)' ], // Construction
theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 1)' ], // AMOLED
};
// Signal Units
@@ -141,22 +142,27 @@ $(document).ready(() => {
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]);
const newOpacity = opacity * 0.75;
// Constructing the new RGBA string with the adjusted opacity
const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`;
// Extracting the RGBA components from themeColors[2] for --color-text-2
const rgbaComponentsText = themeColors[2].match(/(\d+(\.\d+)?)/g);
const opacityText = parseFloat(rgbaComponentsText[3]);
const newOpacityText = opacityText * 0.75;
const textColor2 = `rgba(${rgbaComponentsText[0]}, ${rgbaComponentsText[1]}, ${rgbaComponentsText[2]}, ${newOpacityText})`;
// Extracting the RGBA components from themeColors[0] for background color
const rgbaComponentsBackground = themeColors[3].match(/(\d+(\.\d+)?)/g);
const backgroundOpacity = 0.85;
const backgroundColorWithOpacity = `rgba(${rgbaComponentsBackground[0]}, ${rgbaComponentsBackground[1]}, ${rgbaComponentsBackground[2]}, ${backgroundOpacity})`;
$(':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);
$('#wrapper-outer').css('background-color', backgroundColorWithOpacity);
}
}
function setBg() {
if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme8') {
if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme9') {
$('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
} else {
$('body').css('background', 'var(--color-main)');

34
web/js/setup.js
View File

@@ -148,6 +148,40 @@ $(document).ready(function() {
if($("#console-output").length > 0) {
$("#console-output").scrollTop($("#console-output")[0].scrollHeight);
}
const $tabs = $('.nav li[role="presentation"]');
let currentTabIndex = 0;
function updateTabFocus(index) {
$tabs.each(function(i) {
const $link = $(this).find('a');
if (i === index) {
$(this).attr('aria-selected', 'true');
$link.attr('tabindex', '0').focus();
} else {
$(this).attr('aria-selected', 'false');
$link.attr('tabindex', '-1');
}
});
}
function handleKeyDown(event) {
if (event.key === 'ArrowRight') {
event.preventDefault();
currentTabIndex = (currentTabIndex + 1) % $tabs.length;
updateTabFocus(currentTabIndex);
} else if (event.key === 'ArrowLeft') {
event.preventDefault();
currentTabIndex = (currentTabIndex - 1 + $tabs.length) % $tabs.length;
updateTabFocus(currentTabIndex);
} else if (event.key === 'Enter') {
event.preventDefault();
$tabs.eq(currentTabIndex).find('a')[0].click();
}
}
updateTabFocus(currentTabIndex);
$tabs.on('keydown', handleKeyDown);
});
function MapCreate() {