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

added status ui

Browse source
This commit is contained in:
RaffaelW 2024-12-19 17:27:32 +01:00
parent 90f8d7c07e
commit 9e83851ddf
3 changed files with 211 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
data/index.html
View file

@ -31,6 +31,73 @@
</section>
<section class="content hidden">
<div class="status">
<span>RSSI: <span class="rssi"></span></span>
<span>Heap: <span class="heap-percentage"></span>%</span>
<span>PSRAM: <span class="psram-percentage"></span>%</span>
<span>Uptime: <span class="uptime"></span></span>
<button type="button" class="expand-status">Mehr</button>
</div>
<dialog class="dialog-status">
<h2 class="model"></h2>
<div class="dialog-status-content">
<div class="card">
<span>Signalstärke</span>
<span class="rssi"></span>
</div>
<div class="card">
<span>Uptime</span>
<span class="uptime"></span>
</div>
<div class="card">
<span>CPU-Taktfrequenz</span>
<span><span class="cpu-freq"></span> MHz</span>
</div>
<div class="card">
<span>CPU Cycle Count</span>
<span class="cpu-cycle-count"></span>
</div>
<div class="card">
<span>Heap</span>
<span><span class="heap-percentage"></span>%</span>
<span
><span class="heap-used"></span> /
<span class="heap-total"></span
></span>
</div>
<div class="card">
<span>PSRAM</span>
<span><span class="psram-percentage"></span>%</span>
<span
><span class="psram-used"></span> /
<span class="psram-total"></span
></span>
</div>
<div class="card">
<span>MAC-Adresse</span>
<span class="mac"></span>
</div>
<div class="card">
<span>SDK-Version</span>
<span class="sdk-version"></span>
</div>
</div>
<form method="dialog">
<button type="submit">Schließen</button>
</form>
</dialog>
<form class="config">
<h1>Konfiguration</h1>
<fieldset>

88
data/status.js Normal file
View file

@ -0,0 +1,88 @@
const statusDialog = document.querySelector(".dialog-status");
const expandButton = document.querySelector(".expand-status");
expandButton.addEventListener("click", () => {
statusDialog.showModal();
});
async function loadStatus() {
try {
const res = await fetch("/status");
if (!res.ok) {
throw new Error(
`Response status: ${res.status}\n${await res.text()}`
);
}
const data = await res.json();
console.log(data);
return data;
} catch (e) {
console.error(e);
return null;
}
}
function setStatus(status) {
setValue("model", status.chip.model);
setValue("mac", status.chip.mac.toString(16).toUpperCase());
setValue("sdk-version", status.sdkVersion);
setValue("rssi", status.connection.signalStrength);
setValue("cpu-freq", status.chip.cpuFreqMHz);
setValue("cpu-cycle-count", status.chip.cycleCount);
const usedHeap = status.heap.total - status.heap.free;
setValue("heap-used", formatBytes(usedHeap));
setValue("heap-total", formatBytes(status.heap.total));
setValue(
"heap-percentage",
Math.round((usedHeap / status.heap.total) * 100)
);
const usedPsram = status.psram.total - status.psram.free;
setValue("psram-used", formatBytes(usedPsram));
setValue("psram-total", formatBytes(status.psram.total));
setValue(
"psram-percentage",
Math.round((usedPsram / status.psram.total) * 100)
);
setValue("uptime", parseDuration(status.uptime));
}
function setValue(className, value) {
document.querySelectorAll("." + className).forEach((element) => {
element.innerText = value;
});
}
function parseDuration(ms) {
const date = new Date(ms);
console.log(date);
const time =
date.getUTCHours().toString().padStart(2, "0") +
":" +
date.getUTCMinutes().toString().padStart(2, "0") +
" h";
const days = Math.floor(date.getTime() / (1000 * 60 * 60 * 24));
return days !== 0 ? `${days} Tage, ${time}` : time;
}
function formatBytes(bytes) {
const units = ["Bytes", "KB", "MB", "GB"];
let value = bytes;
let index = 0;
while (value >= 1000) {
value /= 1000;
index++;
}
return `${Math.round(value * 10) / 10} ${units[index]}`;
}
setStatus(await loadStatus());

56
data/style.css
View file

@ -2,6 +2,7 @@
--color-primary: #087e8b;
--color-on-primary: white;
--color-background: #222;
--color-surface: #333;
--color-danger: #fa2b58;
--icon-button-size: 2.5rem;
}
@ -141,6 +142,37 @@ label.switch input:checked + .slider::before {
translate: -100% -50%;
}
dialog {
width: 80%;
max-width: 500px;
max-height: 80%;
overflow: scroll;
background-color: var(--color-background);
color: white;
border: none;
border-radius: 8px;
padding: 16px;
}
dialog::backdrop {
background-color: #000a;
}
.card {
background-color: var(--color-surface);
padding: 8px;
border-radius: 8px;
}
.card > * {
display: block;
}
.card > :first-child {
color: var(--color-primary);
margin-bottom: 8px;
}
.buttons {
display: flex;
flex-direction: row;
@ -223,3 +255,27 @@ button.reload {
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.status {
background-color: var(--color-surface);
padding: 8px;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.dialog-status-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dialog-status button {
display: block;
margin: 0 auto;
margin-top: 32px;
}