From 1fa390401112b3a346d3e7869b4ca73ea57c3d24 Mon Sep 17 00:00:00 2001 From: ardocrat Date: Thu, 18 May 2023 22:48:36 +0300 Subject: [PATCH] gui: optimize network metrics and node ui --- locales/en.yml | 2 +- locales/ru.yml | 2 +- src/gui/colors.rs | 3 +- src/gui/views/network_metrics.rs | 36 ++++---- src/gui/views/network_node.rs | 136 +++++++++++++++++-------------- src/gui/views/views.rs | 8 +- 6 files changed, 96 insertions(+), 91 deletions(-) diff --git a/locales/en.yml b/locales/en.yml index ae940f8..371b3ee 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -36,4 +36,4 @@ inflation: Inflation supply: Supply block_time: Block time reward: Reward -difficulty_at_blocks: 'Difficulty on %{size} blocks' \ No newline at end of file +difficulty_at_window: 'Difficulty at window %{size}' \ No newline at end of file diff --git a/locales/ru.yml b/locales/ru.yml index 62fdbc1..b241c3c 100644 --- a/locales/ru.yml +++ b/locales/ru.yml @@ -36,4 +36,4 @@ inflation: Инфляция supply: Предложение block_time: Время блока reward: Награда -difficulty_at_blocks: 'Сложность на %{size} блоках' \ No newline at end of file +difficulty_at_window: 'Сложность в окне %{size}' \ No newline at end of file diff --git a/src/gui/colors.rs b/src/gui/colors.rs index 90e1559..5e50579 100644 --- a/src/gui/colors.rs +++ b/src/gui/colors.rs @@ -16,4 +16,5 @@ pub const COLOR_YELLOW: egui::Color32 = egui::Color32::from_rgb(254, 241, 2); pub const COLOR_LIGHT: egui::Color32 = egui::Color32::from_gray(240); pub const COLOR_DARK: egui::Color32 = egui::Color32::from_gray(60); pub const COLOR_GRAY: egui::Color32 = egui::Color32::from_gray(120); -// pub const COLOR_LIGHT_GRAY: egui::Color32 = egui::Color32::from_gray(230); \ No newline at end of file +pub const COLOR_GRAY_LIGHT: egui::Color32 = egui::Color32::from_gray(220); +pub const COLOR_GRAY_DARK: egui::Color32 = egui::Color32::from_gray(80); diff --git a/src/gui/views/network_metrics.rs b/src/gui/views/network_metrics.rs index 5509c9f..d3af72b 100644 --- a/src/gui/views/network_metrics.rs +++ b/src/gui/views/network_metrics.rs @@ -17,7 +17,7 @@ use eframe::epaint::{Color32, Rounding, Stroke}; use egui::{RichText, ScrollArea, Spinner, Widget}; use grin_servers::DiffBlock; -use crate::gui::colors::{COLOR_DARK, COLOR_GRAY}; +use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_GRAY_LIGHT}; use crate::gui::icons::{AT, CALENDAR_PLUS, COINS, CUBE, CUBE_TRANSPARENT, HASH, HOURGLASS_LOW, HOURGLASS_MEDIUM, TIMER}; use crate::gui::views::{NetworkTab, View}; use crate::node::Node; @@ -56,7 +56,7 @@ impl NetworkTab for NetworkMetrics { // Show emission info ui.vertical_centered_justified(|ui| { - View::sub_title(ui, format!("{} {}", COINS, t!("emission")), COLOR_DARK); + View::sub_title(ui, format!("{} {}", COINS, t!("emission"))); }); ui.add_space(4.0); @@ -83,12 +83,12 @@ impl NetworkTab for NetworkMetrics { [false, true, false, true]); }); }); - ui.add_space(5.0); + ui.add_space(6.0); // Show difficulty window info ui.vertical_centered_justified(|ui| { - let title = t!("difficulty_at_blocks", "size" => stats.diff_stats.window_size); - View::sub_title(ui, format!("{} {}", HOURGLASS_MEDIUM, title), COLOR_DARK); + let title = t!("difficulty_at_window", "size" => stats.diff_stats.window_size); + View::sub_title(ui, format!("{} {}", HOURGLASS_MEDIUM, title)); }); ui.add_space(4.0); ui.columns(3, |columns| { @@ -117,7 +117,7 @@ impl NetworkTab for NetworkMetrics { let blocks_size = stats.diff_stats.last_blocks.len(); ScrollArea::vertical().auto_shrink([false; 2]).stick_to_bottom(true).show_rows( ui, - DIFF_BLOCK_HEIGHT, + DIFF_BLOCK_UI_HEIGHT, blocks_size, |ui, row_range| { for index in row_range { @@ -138,20 +138,19 @@ impl NetworkTab for NetworkMetrics { } } -const DIFF_BLOCK_HEIGHT: f32 = 75.0; +const DIFF_BLOCK_UI_HEIGHT: f32 = 77.0; fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) { // Add space before first item if rounding[0] { - ui.add_space(5.0); + ui.add_space(4.0); } ui.horizontal(|ui| { ui.add_space(6.0); ui.vertical(|ui| { let mut rect = ui.available_rect_before_wrap(); - rect.set_height(DIFF_BLOCK_HEIGHT); - + rect.set_height(DIFF_BLOCK_UI_HEIGHT); ui.painter().rect( rect, Rounding { @@ -161,21 +160,21 @@ fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) { se: if rounding[1] { 8.0 } else { 0.0 }, }, Color32::WHITE, - Stroke { width: 1.0, color: Color32::from_gray(230) } + Stroke { width: 1.0, color: COLOR_GRAY_LIGHT } ); ui.add_space(2.0); ui.horizontal_top(|ui| { - ui.add_space(6.0); + ui.add_space(5.0); ui.heading(RichText::new(HASH) .color(Color32::BLACK) - .size(16.0)); - ui.add_space(3.0); + .size(18.0)); + ui.add_space(2.0); // Draw block hash ui.heading(RichText::new(db.block_hash.to_string()) .color(Color32::BLACK) - .size(16.0)); + .size(18.0)); }); ui.horizontal_top(|ui| { ui.add_space(6.0); @@ -218,12 +217,7 @@ fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) { .size(16.0)); } }); - ui.add_space(4.0); + ui.add_space(2.0); }); }); - - // Add space after last item - if rounding[1] { - ui.add_space(5.0); - } } \ No newline at end of file diff --git a/src/gui/views/network_node.rs b/src/gui/views/network_node.rs index 8013cf5..a62fe90 100644 --- a/src/gui/views/network_node.rs +++ b/src/gui/views/network_node.rs @@ -17,7 +17,7 @@ use egui::{Color32, RichText, Rounding, ScrollArea, Spinner, Widget}; use grin_servers::common::stats::TxStats; use grin_servers::PeerStats; -use crate::gui::colors::{COLOR_DARK, COLOR_GRAY}; +use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_GRAY_LIGHT}; use crate::gui::icons::{AT, CUBE, DEVICES, FLOW_ARROW, HANDSHAKE, PACKAGE, PLUGS_CONNECTED, SHARE_NETWORK}; use crate::gui::views::{NetworkTab, View}; use crate::node::Node; @@ -55,7 +55,7 @@ impl NetworkTab for NetworkNode { .show(ui, |ui| { // Show header stats ui.vertical_centered_justified(|ui| { - View::sub_title(ui, format!("{} {}", FLOW_ARROW, t!("header")), COLOR_DARK); + View::sub_title(ui, format!("{} {}", FLOW_ARROW, t!("header"))); }); ui.add_space(4.0); ui.columns(2, |columns| { @@ -89,9 +89,9 @@ impl NetworkTab for NetworkNode { }); // Show block stats - ui.add_space(5.0); + ui.add_space(6.0); ui.vertical_centered_justified(|ui| { - View::sub_title(ui, format!("{} {}", CUBE, t!("block")), COLOR_DARK); + View::sub_title(ui, format!("{} {}", CUBE, t!("block"))); }); ui.add_space(4.0); ui.columns(2, |columns| { @@ -125,9 +125,9 @@ impl NetworkTab for NetworkNode { }); // Show data stats - ui.add_space(5.0); + ui.add_space(6.0); ui.vertical_centered_justified(|ui| { - View::sub_title(ui, format!("{} {}", SHARE_NETWORK, t!("data")), COLOR_DARK); + View::sub_title(ui, format!("{} {}", SHARE_NETWORK, t!("data"))); }); ui.add_space(4.0); ui.columns(2, |columns| { @@ -174,13 +174,14 @@ impl NetworkTab for NetworkNode { // Show peers stats when available if stats.peer_count > 0 { - ui.add_space(5.0); + ui.add_space(6.0); ui.vertical_centered_justified(|ui| { - View::sub_title(ui,format!("{} {}", HANDSHAKE, t!("peers")), COLOR_DARK); + View::sub_title(ui,format!("{} {}", HANDSHAKE, t!("peers"))); }); ui.add_space(4.0); - for (index, ps) in stats.peer_stats.iter().enumerate() { + for index in 0..stats.peer_stats.len() { + let ps = stats.peer_stats.get(index).unwrap(); let rounding = if stats.peer_count == 1 { [true, true] } else if index == 0 { @@ -200,64 +201,73 @@ impl NetworkTab for NetworkNode { } fn draw_peer_stats(ui: &mut egui::Ui, peer: &PeerStats, rounding: [bool; 2]) { - let mut rect = ui.available_rect_before_wrap(); - rect.set_height(77.0); + ui.vertical(|ui| { + let mut rect = ui.available_rect_before_wrap(); + rect.set_height(77.0); - ui.painter().rect( - rect, - Rounding { - nw: if rounding[0] { 8.0 } else { 0.0 }, - ne: if rounding[0] { 8.0 } else { 0.0 }, - sw: if rounding[1] { 8.0 } else { 0.0 }, - se: if rounding[1] { 8.0 } else { 0.0 }, - }, - Color32::WHITE, - Stroke { width: 1.0, color: Color32::from_gray(230) } - ); + ui.painter().rect( + rect, + Rounding { + nw: if rounding[0] { 8.0 } else { 0.0 }, + ne: if rounding[0] { 8.0 } else { 0.0 }, + sw: if rounding[1] { 8.0 } else { 0.0 }, + se: if rounding[1] { 8.0 } else { 0.0 }, + }, + Color32::WHITE, + Stroke { width: 1.0, color: COLOR_GRAY_LIGHT } + ); - ui.add_space(2.0); - ui.horizontal_top(|ui| { - ui.add_space(6.0); - ui.heading(RichText::new(PLUGS_CONNECTED) - .color(Color32::BLACK) - .size(18.0)); - ui.add_space(6.0); - - // Draw peer address - ui.heading(RichText::new(&peer.addr) - .color(Color32::BLACK) - .size(18.0)); - }); - ui.horizontal_top(|ui| { - ui.add_space(6.0); - ui.heading(RichText::new(PACKAGE) - .color(COLOR_DARK) - .size(16.0)); - ui.add_space(6.0); - - // Draw peer difficulty and height - ui.heading(RichText::new(peer.total_difficulty.to_string()) - .color(COLOR_DARK) - .size(16.0)); ui.add_space(2.0); - ui.heading(RichText::new(AT).color(COLOR_DARK).size(16.0)); + ui.horizontal_top(|ui| { + ui.add_space(5.0); + ui.heading(RichText::new(PLUGS_CONNECTED) + .color(Color32::BLACK) + .size(18.0)); + ui.add_space(3.0); + + // Draw peer address + ui.heading(RichText::new(&peer.addr) + .color(Color32::BLACK) + .size(18.0)); + }); + ui.horizontal_top(|ui| { + ui.add_space(6.0); + ui.heading(RichText::new(PACKAGE) + .color(COLOR_DARK) + .size(16.0)); + ui.add_space(4.0); + + // Draw peer difficulty and height + ui.heading(RichText::new(peer.total_difficulty.to_string()) + .color(COLOR_DARK) + .size(16.0)); + ui.add_space(2.0); + ui.heading(RichText::new(AT).color(COLOR_DARK).size(16.0)); + ui.add_space(2.0); + ui.heading(RichText::new(peer.height.to_string()) + .color(COLOR_DARK) + .size(16.0)); + }); + + ui.horizontal_top(|ui| { + ui.add_space(6.0); + ui.heading(RichText::new(DEVICES) + .color(COLOR_GRAY) + .size(16.0)); + ui.add_space(4.0); + + // Draw peer user-agent + ui.heading(RichText::new(&peer.user_agent) + .color(COLOR_GRAY) + .size(16.0)); + }); ui.add_space(2.0); - ui.heading(RichText::new(peer.height.to_string()) - .color(COLOR_DARK) - .size(16.0)); }); - ui.horizontal_top(|ui| { - ui.add_space(6.0); - ui.heading(RichText::new(DEVICES) - .color(COLOR_GRAY) - .size(16.0)); - ui.add_space(6.0); - - // Draw peer user-agent - ui.heading(RichText::new(&peer.user_agent) - .color(COLOR_GRAY) - .size(16.0)); - }); - ui.add_space(2.0); + // Add space after last item + if !rounding[0] && rounding[1] { + ui.add_space(5.0); + } else if rounding[0] && rounding[1] { + ui.add_space(2.0); + } } \ No newline at end of file diff --git a/src/gui/views/views.rs b/src/gui/views/views.rs index 7cb1bdd..5c3645b 100644 --- a/src/gui/views/views.rs +++ b/src/gui/views/views.rs @@ -16,7 +16,7 @@ use eframe::epaint::{Color32, FontId, Rounding, Stroke}; use eframe::epaint::text::{LayoutJob, TextFormat, TextWrapping}; use egui::{RichText, Sense, Widget}; -use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_LIGHT}; +use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_LIGHT, COLOR_GRAY_LIGHT, COLOR_GRAY_DARK}; pub struct View; @@ -64,8 +64,8 @@ impl View { }; } - pub fn sub_title(ui: &mut egui::Ui, text: String, color: Color32) { - ui.label(RichText::new(text).size(17.0).color(color)); + pub fn sub_title(ui: &mut egui::Ui, text: String) { + ui.label(RichText::new(text.to_uppercase()).size(16.0).color(COLOR_GRAY_DARK)); } /// Draw rounded box with some value and label in the middle @@ -86,7 +86,7 @@ impl View { se: if r[3] { 8.0 } else { 0.0 }, }, Color32::WHITE, - Stroke { width: 1.0, color: Color32::from_gray(230) }, + Stroke { width: 1.0, color: COLOR_GRAY_LIGHT }, ); ui.vertical_centered_justified(|ui| {