更新ui中

This commit is contained in:
lenn
2026-07-21 17:36:46 +08:00
parent 0a9fea0f0a
commit 0d1296c482
16 changed files with 323 additions and 190 deletions

253
src/ui.rs
View File

@@ -7,7 +7,9 @@ use crate::{
serial_core::serial::{SerialIoStats, SerialProtocol},
style::{
self, ACCENT_BLUE, ACCENT_GREEN, ACCENT_ORANGE, ACCENT_RED, METRICS, ONE_DARK_PRO,
dim_text, group_frame, layout, panel_frame, rich_tag_button, tag_button,
dim_text, group_frame,
layout::{self},
panel_frame, rich_tag_button, tag_button,
},
utils::serial_enum,
};
@@ -51,6 +53,7 @@ pub struct ConnectPanelState {
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum SerialMode {
Finger,
// Finger3D,
Hand,
}
@@ -101,7 +104,7 @@ impl Default for ConfigPanelState {
let port = available_ports
.first()
.cloned()
.unwrap_or_else(|| "COM3".to_owned());
.unwrap_or_else(|| "无可用串口".to_owned());
Self {
mode: SerialMode::Finger,
@@ -241,8 +244,8 @@ pub fn draw_connect_panel(
ui.vertical(|ui| {
draw_connect_port_row(ui, config);
ui.add_space(6.0);
draw_connect_matrix_row(ui, config);
// ui.add_space(8.0);
// draw_connect_matrix_row(ui, config);
});
});
});
@@ -297,13 +300,12 @@ fn draw_connect_port_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
))
.on_hover_text("刷新串口")
.clicked()
&& let Ok(ports) = serial_enum()
{
if let Ok(ports) = serial_enum() {
if !ports.contains(&config.selected_port) {
config.selected_port = ports.first().cloned().unwrap_or_default();
}
config.port = ports;
if !ports.contains(&config.selected_port) {
config.selected_port = ports.first().cloned().unwrap_or_default();
}
config.port = ports;
}
ui.add_space(METRICS.item_gap);
@@ -385,43 +387,94 @@ fn draw_connect_action_row(
});
}
#[allow(clippy::too_many_arguments)]
pub fn draw_config_panel(
ctx: &egui::Context,
panel: &mut FloatingPanelState,
config: &mut ConfigPanelState,
connection: &ConnectionManager,
recorder: &Recorder,
_state: SerialIoStats,
_sample_rate_hz: f32,
_render_rate_hz: f32,
) -> Option<SerialMode> {
let mut changed_mode = None;
let conn_state = connection.state();
let stats = connection.stats();
let panel_width = responsive_panel_width(ctx, 560.0, 340.0);
let screen = ctx.content_rect();
let bar_rect = egui::Rect::from_min_size(
screen.left_top() + egui::vec2(0.0, layout::TITLE_BAR_HEIGHT),
egui::vec2(screen.width(), layout::CONFIG_BAR_HEIGHT),
);
config.connected = matches!(
conn_state,
ConnectionState::Connected | ConnectionState::Streaming
);
panel.visible = true;
draw_floating_panel(ctx, panel, "配置", "config_panel", 560.0, 340.0, |ui| {
ui.set_min_width(panel_width);
ui.set_max_width(panel_width);
egui::Area::new(egui::Id::new("config_panel_bar"))
.fixed_pos(bar_rect.min)
.order(egui::Order::Foreground)
.show(ctx, |ui| {
ui.set_min_size(bar_rect.size());
ui.set_max_size(bar_rect.size());
if let Some(mode) = draw_mode_row(ui, config) {
changed_mode = Some(mode);
}
config_bar_frame().show(ui, |ui| {
ui.set_min_width(bar_rect.width());
ui.set_max_width(bar_rect.width());
ui.spacing_mut().item_spacing = egui::vec2(METRICS.item_gap, 6.0);
// draw_mode_row(ui, config);
ui.separator();
draw_connection_row(ui, config, connection, recorder, conn_state);
ui.add_space(8.0);
// Legacy serial parameter grid is intentionally kept commented for future hardware:
// draw_serial_grid(ui, config);
// ui.add_space(8.0);
draw_mode_body(ui, config, conn_state, stats);
});
ui.horizontal(|ui| {
ui.label(style::panel_title("配置面板"));
ui.add_space(12.0);
if let Some(mode) = draw_config_bar_mode(ui, config) {
changed_mode = Some(mode);
}
ui.add_space(12.0);
draw_config_bar_connection(ui, config, connection, recorder, conn_state);
// ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
// draw_conf
// })
})
})
});
// let stats = connection.stats();
// let panel_width = responsive_panel_width(ctx, 560.0, 340.0);
// config.connected = matches!(
// conn_state,
// ConnectionState::Connected | ConnectionState::Streaming
// );
// draw_floating_panel(ctx, panel, "配置", "config_panel", 560.0, 340.0, |ui| {
// ui.set_min_width(panel_width);
// ui.set_max_width(panel_width);
// if let Some(mode) = draw_mode_row(ui, config) {
// changed_mode = Some(mode);
// }
// // draw_mode_row(ui, config);
// ui.separator();
// draw_connection_row(ui, config, connection, recorder, conn_state);
// ui.add_space(8.0);
// // Legacy serial parameter grid is intentionally kept commented for future hardware:
// // draw_serial_grid(ui, config);
// // ui.add_space(8.0);
// draw_mode_body(ui, config, conn_state, stats);
// });
changed_mode
}
fn draw_mode_row(ui: &mut egui::Ui, config: &mut ConfigPanelState) -> Option<SerialMode> {
fn config_bar_frame() -> egui::Frame {
egui::Frame::new()
.fill(ONE_DARK_PRO.panel_deep)
.inner_margin(egui::Margin::symmetric(8, 8))
}
fn draw_config_bar_mode(ui: &mut egui::Ui, config: &mut ConfigPanelState) -> Option<SerialMode> {
let mut changed_to = None;
ui.horizontal_wrapped(|ui| {
ui.colored_label(dim_text(), "模式");
@@ -445,6 +498,86 @@ fn draw_mode_row(ui: &mut egui::Ui, config: &mut ConfigPanelState) -> Option<Ser
changed_to
}
fn draw_config_bar_connection(
ui: &mut egui::Ui,
config: &mut ConfigPanelState,
connection: &ConnectionManager,
recorder: &Recorder,
conn_state: ConnectionState,
) {
ui.colored_label(dim_text(), "端口");
egui::ComboBox::from_id_salt("config_bar_ports")
.selected_text("config_bar_ports")
.width(170.0)
.selected_text(if config.port.is_empty() {
"无可用串口".to_owned()
} else {
config.port.clone()
})
.show_ui(ui, |ui| {
for port in &config.available_ports {
ui.selectable_value(&mut config.port, port.clone(), port.as_str());
}
});
if ui
.add(style::icon_button(
egui::RichText::new("\u{f021}")
.color(ONE_DARK_PRO.text)
.size(16.0),
egui::vec2(30.0, METRICS.field_height),
))
.on_hover_text("刷新串口")
.clicked()
{
refresh_config_ports(config);
}
ui.add_space(4.0);
ui.colored_label(dim_text(), "波特率");
ui.label(style::value_text(config.baud_rate.to_string()));
ui.add_space(4.0);
ui.colored_label(dim_text(), "状态");
ui.colored_label(
connection_status_color(conn_state),
connection_status_text(conn_state),
);
ui.add_space(6.0);
let is_connected = matches!(
conn_state,
ConnectionState::Connected | ConnectionState::Streaming
);
let button_text = if is_connected { "\u{f127}" } else { "\u{f0c1}" };
if ui
.add_sized(
egui::vec2(88.0, METRICS.button_height),
if is_connected {
style::danger_button(button_text)
} else {
style::primary_button(button_text)
},
)
.clicked()
{
if is_connected {
connection.disconnect();
} else if !config.port.is_empty() {
connection.connect(
&config.port,
12,
7,
config.mode.baud_rate(),
config.mode.protocol(),
recorder.clone(),
);
}
}
}
fn draw_connection_row(
ui: &mut egui::Ui,
config: &mut ConfigPanelState,
@@ -457,7 +590,7 @@ fn draw_connection_row(
ui.horizontal_wrapped(|ui| {
ui.label(style::field_label("端口"));
egui::ComboBox::from_id_salt("config_ports")
.width(ui.available_width().min(150.0).max(104.0))
.width(ui.available_width().clamp(104.0, 150.0))
.selected_text(if config.port.is_empty() {
"无可用串口".to_owned()
} else {
@@ -717,7 +850,7 @@ pub fn icon_button_sized<'a>(
),
}
.fill(ONE_DARK_PRO.panel_strong)
.stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
.stroke(egui::Stroke::new(1.0_f32, ONE_DARK_PRO.border))
.corner_radius(egui::CornerRadius::same(ONE_DARK_PRO.radius))
.min_size(size);
@@ -885,9 +1018,8 @@ pub fn draw_hand_force_panels(ctx: &egui::Context, visible: bool, histories: &[V
let left_top = (screen.center().y - left_height * 0.5).max(min_top);
let right_top = (screen.center().y - right_height * 0.5).max(min_top);
for index in 0..HAND_FORCE_PANEL_TITLES.len() {
for (index, &(code, title)) in HAND_FORCE_PANEL_TITLES.iter().enumerate() {
let history = histories.get(index).map(Vec::as_slice).unwrap_or(&[]);
let (code, title) = HAND_FORCE_PANEL_TITLES[index];
let (target_x, target_y) = if index < left_count {
(left_x, left_top + index as f32 * (panel_height + gap))
} else {
@@ -911,6 +1043,7 @@ pub fn draw_hand_force_panels(ctx: &egui::Context, visible: bool, histories: &[V
}
}
#[allow(clippy::too_many_arguments)]
fn draw_force_chart_area(
ctx: &egui::Context,
id: egui::Id,
@@ -987,7 +1120,7 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32], chart_height:
painter.rect_stroke(
rect,
radius,
egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.accent, 95)),
egui::Stroke::new(1.0_f32, color_alpha(ONE_DARK_PRO.accent, 95)),
egui::StrokeKind::Outside,
);
@@ -1036,11 +1169,11 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32], chart_height:
if points.len() >= 2 {
plot_painter.add(egui::Shape::line(
points.clone(),
egui::Stroke::new(4.0, color_alpha(ONE_DARK_PRO.accent, 45)),
egui::Stroke::new(4.0_f32, color_alpha(ONE_DARK_PRO.accent, 45)),
));
plot_painter.add(egui::Shape::line(
points.clone(),
egui::Stroke::new(1.7, ONE_DARK_PRO.accent),
egui::Stroke::new(1.7_f32, ONE_DARK_PRO.accent),
));
}
@@ -1050,7 +1183,7 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32], chart_height:
last,
5.0 + pulse * 12.0,
egui::Stroke::new(
1.0,
1.0_f32,
color_alpha(ACCENT_GREEN, ((1.0 - pulse) * 120.0) as u8),
),
);
@@ -1074,7 +1207,7 @@ fn paint_force_grid(
egui::pos2(chart_rect.left(), y),
egui::pos2(chart_rect.right(), y),
],
egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.border, 78)),
egui::Stroke::new(1.0_f32, color_alpha(ONE_DARK_PRO.border, 78)),
);
painter.text(
egui::pos2(rect.left() + 8.0, y),
@@ -1092,7 +1225,7 @@ fn paint_force_grid(
egui::pos2(x, chart_rect.top()),
egui::pos2(x, chart_rect.bottom()),
],
egui::Stroke::new(1.0, color_alpha(ONE_DARK_PRO.border_soft, 42)),
egui::Stroke::new(1.0_f32, color_alpha(ONE_DARK_PRO.border_soft, 42)),
);
}
@@ -1201,24 +1334,22 @@ fn draw_floating_panel(
window_rect = Some(response.response.rect);
}
if hide_requested {
if let Some(rect) = window_rect {
let screen = ctx.content_rect();
let tag_size = egui::vec2(86.0, 22.0);
if hide_requested && let Some(rect) = window_rect {
let screen = ctx.content_rect();
let tag_size = egui::vec2(86.0, 22.0);
let distance_to_left = rect.left();
let distance_to_right = screen.right() - rect.right();
let distance_to_left = rect.left();
let distance_to_right = screen.right() - rect.right();
let x = if distance_to_left <= distance_to_right {
screen.left()
} else {
screen.right() - tag_size.x
};
let x = if distance_to_left <= distance_to_right {
screen.left()
} else {
screen.right() - tag_size.x
};
let y = rect.top().clamp(screen.top(), screen.bottom() - tag_size.y);
let y = rect.top().clamp(screen.top(), screen.bottom() - tag_size.y);
panel.tag_pos = egui::pos2(x, y);
}
panel.tag_pos = egui::pos2(x, y);
}
panel.visible = open && !hide_requested;
}
@@ -1401,11 +1532,11 @@ fn paint_integrated_handle(
ui.painter().add(egui::Shape::convex_polygon(
points.clone(),
fill,
egui::Stroke::new(1.0, ONE_DARK_PRO.border),
egui::Stroke::new(1.0_f32, ONE_DARK_PRO.border),
));
ui.painter().line_segment(
[points[2], points[3]],
egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft),
egui::Stroke::new(1.0_f32, ONE_DARK_PRO.border_soft),
);
}
@@ -1426,14 +1557,14 @@ fn paint_integrated_handle(
arrow_center + egui::vec2(-6.0, -2.0 * arrow),
arrow_center + egui::vec2(0.0, 4.0 * arrow),
],
egui::Stroke::new(1.7, arrow_color),
egui::Stroke::new(1.7_f32, arrow_color),
);
ui.painter().line_segment(
[
arrow_center + egui::vec2(6.0, -2.0 * arrow),
arrow_center + egui::vec2(0.0, 4.0 * arrow),
],
egui::Stroke::new(1.7, arrow_color),
egui::Stroke::new(1.7_f32, arrow_color),
);
if !label.is_empty() {
@@ -1459,8 +1590,8 @@ fn paint_integrated_center_panel(
handle_on_bottom: bool,
) {
let painter = ui.painter();
let stroke = egui::Stroke::new(1.0, ONE_DARK_PRO.border);
let accent_stroke = egui::Stroke::new(1.2, ONE_DARK_PRO.border_soft);
let stroke = egui::Stroke::new(1.0_f32, ONE_DARK_PRO.border);
let accent_stroke = egui::Stroke::new(1.2_f32, ONE_DARK_PRO.border_soft);
let top = rect.top();
let left = rect.left();
let right = rect.right();
@@ -1605,7 +1736,7 @@ pub fn draw_signal_chart(ui: &mut egui::Ui, values: &[f32], label: &str, color:
})
.collect();
painter.add(egui::Shape::line(points, egui::Stroke::new(1.5, color)));
painter.add(egui::Shape::line(points, egui::Stroke::new(1.5_f32, color)));
});
}
@@ -1666,10 +1797,8 @@ pub fn draw_recording_toolbar(ui: &mut egui::Ui, recorder: &Recorder, export_pat
ui.add_space(4.0);
// Pause/Resume
if is_recording {
if ui.add(tag_button("⏸ 暂停")).clicked() {
let _ = recorder.pause_recording();
}
if is_recording && ui.add(tag_button("⏸ 暂停")).clicked() {
let _ = recorder.pause_recording();
}
ui.add_space(8.0);