ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-19 10:32:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add connection icons for signal strength

Browse source
This commit is contained in:
RaffaelW 2024-12-19 23:35:45 +01:00
parent e3bc5f8bdc
commit b5999364e2
3 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
data/index.html
View file

@ -33,7 +33,8 @@
<section class="content hidden"> <section class="content hidden">
<div class="status"> <div class="status">
<span>Signalstärke: <span class="rssi"></span> dBm</span> <!-- placeholder for wifi icon -->
<img class="connection-icon" src="" alt="" />
<span>Temp.: <span class="cpu-temp"></span> °C</span> <span>Temp.: <span class="cpu-temp"></span> °C</span>
<span>Heap: <span class="heap-percentage"></span> %</span> <span>Heap: <span class="heap-percentage"></span> %</span>
<span>PSRAM: <span class="psram-percentage"></span> %</span> <span>PSRAM: <span class="psram-percentage"></span> %</span>
@ -48,7 +49,9 @@
<div class="dialog-status-content"> <div class="dialog-status-content">
<div class="card"> <div class="card">
<span>Signalstärke</span> <span>Signalstärke</span>
<span class="rssi"> dBm</span> <!-- placeholder for wifi icon -->
<img class="connection-icon" src="" alt="" />
<span><span class="rssi"></span> dBm</span>
</div> </div>
<div class="card"> <div class="card">

30
data/status.js
View file

@ -1,3 +1,5 @@
import { data } from "./load-data.js";
const statusDialog = document.querySelector(".dialog-status"); const statusDialog = document.querySelector(".dialog-status");
const expandButton = document.querySelector(".expand-status"); const expandButton = document.querySelector(".expand-status");
@ -30,6 +32,10 @@ function setStatus(status) {
setValue("sdk-version", status.sdkVersion); setValue("sdk-version", status.sdkVersion);
setValue("rssi", status.connection.signalStrength); setValue("rssi", status.connection.signalStrength);
const icon = selectConnectionIcon(status.connection.signalStrength);
document.querySelectorAll(".connection-icon").forEach((img) => {
img.src = `/icons/${icon}`;
});
setValue("cpu-freq", status.chip.cpuFreqMHz); setValue("cpu-freq", status.chip.cpuFreqMHz);
setValue("cpu-cycle-count", status.chip.cycleCount); setValue("cpu-cycle-count", status.chip.cycleCount);
@ -86,4 +92,28 @@ function formatBytes(bytes) {
return `${Math.round(value * 10) / 10} ${units[index]}`; return `${Math.round(value * 10) / 10} ${units[index]}`;
} }
function selectConnectionIcon(signalStrength) {
// access point
if (data.connection == 1) {
return "hotspot.svg";
}
// ethernet
if (data.connection == 2) {
return "lan.svg";
}
// station
if (signalStrength >= -50) {
return "signal4.svg";
}
if (signalStrength >= -60) {
return "signal3.svg";
}
if (signalStrength >= -70) {
return "signal2.svg";
}
return "signal1.svg";
}
setStatus(await loadStatus()); setStatus(await loadStatus());

6
data/style.css
View file

@ -302,3 +302,9 @@ div:has(.range-value) {
margin: 0 auto; margin: 0 auto;
margin-top: 32px; margin-top: 32px;
} }
.connection-icon {
width: 24px;
height: 24px;
padding: 8px;
}