eric/Crosspoint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dont freeze UI on calculation

Browse Source
This commit is contained in:
jpirnay
2026-03-19 11:20:07 +01:00
parent 12bf78592f
commit def6c2063a
3 changed files with 179 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/activities/settings/SystemInformationActivity.cpp
+18 -2
View File
@@ -24,6 +24,7 @@ static std::string formatBytes(uint64_t bytes) {
void SystemInformationActivity::onEnter() { void SystemInformationActivity::onEnter() {
Activity::onEnter(); Activity::onEnter();
status_.reset();
requestUpdate(); requestUpdate();
} }
@@ -32,6 +33,13 @@ void SystemInformationActivity::onExit() { Activity::onExit(); }
void SystemInformationActivity::loop() { void SystemInformationActivity::loop() {
if (mappedInput.wasPressed(MappedInputManager::Button::Back)) { if (mappedInput.wasPressed(MappedInputManager::Button::Back)) {
finish(); finish();
return;
}
// Collect status (includes the potentially slow SD FAT walk) outside of render()
// so the screen is shown with a "Reading..." placeholder first.
if (!status_.has_value()) {
status_ = SystemStatus::collect();
requestUpdate();
} }
} }
@@ -45,8 +53,6 @@ void SystemInformationActivity::render(RenderLock&&) {
GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, tr(STR_SYSTEM_INFO), GUI.drawHeader(renderer, Rect{0, metrics.topPadding, pageWidth, metrics.headerHeight}, tr(STR_SYSTEM_INFO),
CROSSPOINT_VERSION); CROSSPOINT_VERSION);
const auto status = SystemStatus::collect();
// Layout: label on the left, value right of the midpoint // Layout: label on the left, value right of the midpoint
const int leftX = metrics.verticalSpacing * 3; const int leftX = metrics.verticalSpacing * 3;
const int valueX = pageWidth / 2; const int valueX = pageWidth / 2;
@@ -59,6 +65,16 @@ void SystemInformationActivity::render(RenderLock&&) {
renderer.drawText(UI_10_FONT_ID, valueX, y, value.c_str()); renderer.drawText(UI_10_FONT_ID, valueX, y, value.c_str());
}; };
if (!status_.has_value()) {
// Stats not yet collected — show a placeholder so the screen updates immediately
drawRow(0, "Version", CROSSPOINT_VERSION);
drawRow(3, "SD card", "Reading...");
renderer.displayBuffer();
return;
}
const auto& status = *status_;
// Device // Device
drawRow(0, "Version", status.version); drawRow(0, "Version", status.version);
drawRow(1, "Free heap", std::to_string(status.freeHeapBytes / 1024) + " KB"); drawRow(1, "Free heap", std::to_string(status.freeHeapBytes / 1024) + " KB");
src/activities/settings/SystemInformationActivity.h
+6
View File
@@ -1,5 +1,8 @@
#pragma once #pragma once
#include <optional>
#include "SystemStatus.h"
#include "activities/Activity.h" #include "activities/Activity.h"
class SystemInformationActivity final : public Activity { class SystemInformationActivity final : public Activity {
@@ -11,4 +14,7 @@ class SystemInformationActivity final : public Activity {
void onExit() override; void onExit() override;
void loop() override; void loop() override;
void render(RenderLock&&) override; void render(RenderLock&&) override;
private:
std::optional<SystemStatus> status_;
}; };
src/network/html/HomePage.html
+21 -4
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -15,6 +16,7 @@
--accent-color: rgb(110, 154, 130); --accent-color: rgb(110, 154, 130);
--accent-hover-color: #5a8c73; --accent-hover-color: #5a8c73;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--font-color: #f5f5f5; --font-color: #f5f5f5;
@@ -26,6 +28,7 @@
color-scheme: dark; color-scheme: dark;
} }
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, sans-serif; Oxygen, Ubuntu, sans-serif;
@@ -35,15 +38,18 @@
background-color: var(--bg); background-color: var(--bg);
color: var(--font-color); color: var(--font-color);
} }
h1 { h1 {
color: var(--title-color); color: var(--title-color);
border-bottom: 2px solid var(--accent-color); border-bottom: 2px solid var(--accent-color);
padding-bottom: 10px; padding-bottom: 10px;
} }
h2 { h2 {
color: var(--title-color); color: var(--title-color);
margin-top: 0; margin-top: 0;
} }
.card { .card {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
@@ -51,6 +57,7 @@
margin: 15px 0; margin: 15px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.info-row { .info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -58,16 +65,20 @@
padding: 8px 0; padding: 8px 0;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.info-row:last-child { .info-row:last-child {
border-bottom: none; border-bottom: none;
} }
.label { .label {
font-weight: 600; font-weight: 600;
color: var(--label-color); color: var(--label-color);
} }
.value { .value {
color: var(--title-color); color: var(--title-color);
} }
.status { .status {
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
@@ -76,27 +87,32 @@
color: white; color: white;
font-size: 0.9em; font-size: 0.9em;
} }
.nav-links { .nav-links {
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.nav-links a { .nav-links a {
padding: 10px 20px; padding: 10px 20px;
color: var(--font-color); color: var(--font-color);
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: 4px;
} }
.nav-links a.active { .nav-links a.active {
background-color: var(--accent-color); background-color: var(--accent-color);
color: white; color: white;
} }
.nav-links a:not(.active):hover { .nav-links a:not(.active):hover {
background-color: var(--accent-hover-color); background-color: var(--accent-hover-color);
color: white; color: white;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>📚 CrossPoint Reader</h1> <h1>📚 CrossPoint Reader</h1>
@@ -110,7 +126,7 @@
<h2>Device Status</h2> <h2>Device Status</h2>
<div class="info-row"> <div class="info-row">
<span class="label">Version</span> <span class="label">Version</span>
<span class="value" id="version"></span> <span class="value" id="version">Loading...</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label">WiFi Status</span> <span class="label">WiFi Status</span>
@@ -118,15 +134,15 @@
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label">IP Address</span> <span class="label">IP Address</span>
<span class="value" id="ip-address"></span> <span class="value" id="ip-address">Loading...</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label">Free Memory</span> <span class="label">Free Memory</span>
<span class="value" id="free-heap"></span> <span class="value" id="free-heap">Loading...</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label">SD Card</span> <span class="label">SD Card</span>
<span class="value" id="sd-space"></span> <span class="value" id="sd-space">Loading...</span>
</div> </div>
</div> </div>
@@ -168,4 +184,5 @@
window.onload = fetchStatus; window.onload = fetchStatus;
</script> </script>
</body> </body>
</html> </html>