magges/aoostar-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify specs display layout
Build And Push Container / build-and-push (push) Successful in 59s
Details

Browse Source
This commit is contained in:
magges
2026-06-30 23:54:04 +02:00
parent 33967f3b7b
commit c650d63299
4 changed files with 74 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/aster-webui/src/system.rs
+61 -130
View File
@@ -157,96 +157,74 @@ pub(crate) fn render_system_panel(mode: &str) -> RgbImage {
fn render_system_panel_cards() -> RgbImage {
let system = collect_system_view();
let mut canvas = RgbImage::from_pixel(DISPLAY_WIDTH, DISPLAY_HEIGHT, Rgb([10, 14, 18]));
let host_name = System::host_name().unwrap_or_else(|| "Unraid".into());
let timestamp = Local::now().format("%d.%m.%Y %H:%M:%S").to_string();
draw_filled_rect_mut(
&mut canvas,
Rect::at(0, 0).of_size(DISPLAY_WIDTH, 84),
Rgb([18, 27, 36]),
Rect::at(0, 0).of_size(DISPLAY_WIDTH, 64),
Rgb([14, 20, 28]),
);
draw_filled_rect_mut(
&mut canvas,
Rect::at(0, 84).of_size(DISPLAY_WIDTH, DISPLAY_HEIGHT - 84),
Rect::at(0, 64).of_size(DISPLAY_WIDTH, DISPLAY_HEIGHT - 64),
Rgb([8, 11, 15]),
);
draw_text_line(
&mut canvas,
Rgb([216, 253, 114]),
28,
20,
36.0,
"AOOSTAR Native Specs",
);
draw_text_line(
&mut canvas,
Rgb([146, 163, 181]),
30,
58,
20.0,
&format!("{host_name} | {timestamp}"),
24,
16,
30.0,
"SYSTEM SPECS",
);
let cards = [
(
24,
106,
"CPU",
20,
84,
"CPU USAGE",
format!("{} %", system.cpu_usage_percent),
format!(
"Load {} / {} / {}",
system.load_avg_one, system.load_avg_five, system.load_avg_fifteen
),
format!("Load {}", system.load_avg_one),
Rgb([124, 231, 191]),
),
(
332,
106,
"Memory",
334,
84,
"RAM USAGE",
format!("{} %", system.mem_usage_percent),
format!("{} / {}", system.mem_used, system.mem_total),
Rgb([125, 196, 255]),
),
(
640,
106,
"Storage",
format!(
"C {}% U {}%",
system.cache_usage_percent, system.user_usage_percent
),
format!(
"/mnt/cache {} / {} | /mnt/user {} / {}",
system.cache_used, system.cache_total, system.user_used, system.user_total
),
648,
84,
"GPU TEMP",
system.temperature_gpu.as_deref().unwrap_or("-").to_string(),
format!("CPU {}", system.temperature_cpu.as_deref().unwrap_or("-")),
Rgb([255, 199, 115]),
),
(
24,
236,
"Swap",
format!("{} %", system.swap_usage_percent),
format!("{} / {}", system.swap_used, system.swap_total),
20,
226,
"CACHE",
format!("{} %", system.cache_usage_percent),
format!("{} / {}", system.cache_used, system.cache_total),
Rgb([194, 167, 255]),
),
(
332,
236,
"Temperatures",
format!("CPU {}", system.temperature_cpu.as_deref().unwrap_or("-")),
format!("GPU {}", system.temperature_gpu.as_deref().unwrap_or("-")),
334,
226,
"USER",
format!("{} %", system.user_usage_percent),
format!("{} / {}", system.user_used, system.user_total),
Rgb([255, 127, 115]),
),
(
640,
236,
"System",
system.uptime.clone(),
format!(
"{} cores | {} procs",
system.cpu_count, system.process_count
),
648,
226,
"SWAP",
format!("{} %", system.swap_usage_percent),
format!("{} / {}", system.swap_used, system.swap_total),
Rgb([216, 253, 114]),
),
];
@@ -261,53 +239,36 @@ fn render_system_panel_cards() -> RgbImage {
fn render_system_panel_meters() -> RgbImage {
let system = collect_system_view();
let mut canvas = RgbImage::from_pixel(DISPLAY_WIDTH, DISPLAY_HEIGHT, Rgb([9, 13, 17]));
let host_name = System::host_name().unwrap_or_else(|| "Unraid".into());
let timestamp = Local::now().format("%d.%m.%Y %H:%M:%S").to_string();
draw_filled_rect_mut(
&mut canvas,
Rect::at(0, 0).of_size(DISPLAY_WIDTH, 72),
Rgb([15, 23, 30]),
Rect::at(0, 0).of_size(DISPLAY_WIDTH, 56),
Rgb([14, 20, 28]),
);
draw_text_line(
&mut canvas,
Rgb([216, 253, 114]),
26,
18,
32.0,
"AOOSTAR System Monitor",
);
draw_text_line(
&mut canvas,
Rgb([146, 163, 181]),
28,
48,
18.0,
&format!("{host_name} | {timestamp}"),
24,
14,
28.0,
"HTOP STYLE",
);
draw_meter_row(
&mut canvas,
26,
102,
"CPU",
24,
84,
"CPU USAGE",
&format!("{}%", system.cpu_usage_percent),
parse_metric_percent(&system.cpu_usage_percent),
Rgb([110, 231, 183]),
&format!(
"Load {} / {} / {} {} cores {} procs",
system.load_avg_one,
system.load_avg_five,
system.load_avg_fifteen,
system.cpu_count,
system.process_count
),
&format!("Load {} {} cores", system.load_avg_one, system.cpu_count),
);
draw_meter_row(
&mut canvas,
26,
170,
"RAM",
24,
178,
"RAM USAGE",
&format!("{}%", system.mem_usage_percent),
parse_metric_percent(&system.mem_usage_percent),
Rgb([120, 189, 247]),
@@ -315,46 +276,16 @@ fn render_system_panel_meters() -> RgbImage {
);
draw_meter_row(
&mut canvas,
26,
238,
"GPU",
24,
272,
"GPU TEMP",
system.temperature_gpu.as_deref().unwrap_or("-"),
normalize_temperature_bar(system.temperature_gpu.as_deref()),
Rgb([241, 132, 121]),
&format!(
"Temp meter CPU {} Cache {}% User {}%",
"CPU {} {} procs",
system.temperature_cpu.as_deref().unwrap_or("-"),
system.cache_usage_percent,
system.user_usage_percent
),
);
draw_filled_rect_mut(
&mut canvas,
Rect::at(26, 308).of_size(908, 42),
Rgb([12, 18, 24]),
);
draw_hollow_rect_mut(
&mut canvas,
Rect::at(26, 308).of_size(908, 42),
Rgb([31, 44, 58]),
);
draw_text_line(
&mut canvas,
Rgb([146, 163, 181]),
42,
321,
18.0,
&format!(
"Swap {}% {} / {} Cache {} / {} User {} / {} Uptime {}",
system.swap_usage_percent,
system.swap_used,
system.swap_total,
system.cache_used,
system.cache_total,
system.user_used,
system.user_total,
system.uptime
system.process_count
),
);
@@ -439,10 +370,10 @@ fn draw_meter_row(
accent: Rgb<u8>,
meta: &str,
) {
draw_text_line(canvas, accent, x, y, 19.0, label);
draw_text_line(canvas, Rgb([237, 242, 247]), x + 112, y, 19.0, value);
draw_meter_bar(canvas, x, y + 28, 840, 20, percent, accent);
draw_text_line(canvas, Rgb([146, 163, 181]), x, y + 56, 17.0, meta);
draw_text_line(canvas, accent, x, y, 21.0, label);
draw_text_line(canvas, Rgb([237, 242, 247]), x + 248, y, 21.0, value);
draw_meter_bar(canvas, x, y + 32, 900, 24, percent, accent);
draw_text_line(canvas, Rgb([146, 163, 181]), x, y + 64, 18.0, meta);
}
fn draw_meter_bar(
@@ -457,12 +388,12 @@ fn draw_meter_bar(
draw_filled_rect_mut(
canvas,
Rect::at(x, y).of_size(width, height),
Rgb([19, 27, 35]),
Rgb([15, 21, 28]),
);
draw_hollow_rect_mut(
canvas,
Rect::at(x, y).of_size(width, height),
Rgb([36, 50, 67]),
Rgb([52, 68, 86]),
);
let fill_width =
((width.saturating_sub(2)) as f32 * (percent.clamp(0.0, 100.0) / 100.0)).round() as u32;
@@ -505,9 +436,9 @@ fn draw_metric_card(
draw_hollow_rect_mut(canvas, Rect::at(x, y).of_size(284, 112), Rgb([36, 50, 67]));
draw_filled_rect_mut(canvas, Rect::at(x + 1, y + 1).of_size(6, 110), accent);
draw_text_line(canvas, accent, x + 20, y + 16, 19.0, title);
draw_text_line(canvas, Rgb([237, 242, 247]), x + 20, y + 44, 28.0, value);
draw_text_line(canvas, Rgb([146, 163, 181]), x + 20, y + 82, 18.0, meta);
draw_text_line(canvas, accent, x + 20, y + 16, 18.0, title);
draw_text_line(canvas, Rgb([237, 242, 247]), x + 20, y + 44, 30.0, value);
draw_text_line(canvas, Rgb([146, 163, 181]), x + 20, y + 84, 17.0, meta);
}
fn draw_text_line(canvas: &mut RgbImage, color: Rgb<u8>, x: i32, y: i32, size: f32, text: &str) {
crates/aster-webui/src/ui.rs
+9 -5
View File
@@ -63,6 +63,12 @@ const INDEX_HTML: &str = r##"<!DOCTYPE html>
gap: 16px;
margin-bottom: 14px;
}
.topbar-actions {
display: inline-flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.brand {
display: flex;
align-items: center;
@@ -145,7 +151,7 @@ const INDEX_HTML: &str = r##"<!DOCTYPE html>
.subtle { color: var(--faint); font-size: .82rem; }
.controls {
display: grid;
grid-template-columns: 132px minmax(220px, 1fr) 180px auto;
grid-template-columns: 132px minmax(220px, 1fr) 180px;
gap: 10px;
align-items: end;
}
@@ -482,8 +488,9 @@ const INDEX_HTML: &str = r##"<!DOCTYPE html>
<p>AOOSTAR display control</p>
</div>
</div>
<div class="actions">
<div class="topbar-actions">
<button id="apply" class="primary" type="button">Apply Rotation</button>
<button id="disable" class="danger" type="button">Disable</button>
<button id="refresh" class="ghost" type="button">Refresh</button>
</div>
</header>
@@ -517,9 +524,6 @@ const INDEX_HTML: &str = r##"<!DOCTYPE html>
<option value="meters">Htop Style</option>
</select>
</label>
<div class="actions">
<button id="disable" class="danger" type="button">Disable</button>
</div>
</div>
<div class="toggle-row">
<label class="toggle-pill"><input id="specsEnabled" type="checkbox"> System Specs</label>