geoffsee/yachtpit
1
0
Fork 0
mirror of https://github.com/seemueller-io/yachtpit.git synced 2025-09-08 22:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Update UI components to use transparent backgrounds instead of solid colors.

Browse Source 
- Standardize text formatting and color usage across instrument clusters and gauges.
- Add new `BACKGROUND_COLOR_TRANSPARENT` definition in theme constants.
- Minor cleanup and adjustments for consistency in UI layouts.
This commit is contained in:
geoffsee
2025-07-02 23:11:48 -04:00
parent 1abe0047fc
commit 5711d84698
6 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
crates/components/src/compass_gauge.rs
View File

@@ -3,3 +3,4 @@ use bevy::prelude::*;
/// Compass gauge component for displaying vessel heading /// Compass gauge component for displaying vessel heading
#[derive(Component)] #[derive(Component)]
pub struct CompassGauge; pub struct CompassGauge;

41
crates/components/src/instrument_cluster.rs
View File

@@ -9,6 +9,7 @@ use super::navigation_display::NavigationDisplay;
use super::system_display::{SystemDisplay, SystemIndicator, SystemDisplayArea}; use super::system_display::{SystemDisplay, SystemIndicator, SystemDisplayArea};
use super::wind_display::WindDisplay; use super::wind_display::WindDisplay;
/// Main instrument cluster component /// Main instrument cluster component
#[derive(Component)] #[derive(Component)]
pub struct InstrumentCluster; pub struct InstrumentCluster;
@@ -21,7 +22,8 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
// Create main container using composition // Create main container using composition
commands.spawn(( commands.spawn((
main_container_node(), main_container_node(),
BackgroundColor(BACKGROUND_COLOR_PRIMARY), // this container should be transparent
BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
InstrumentCluster, InstrumentCluster,
)) ))
.with_children(|parent| { .with_children(|parent| {
@@ -31,20 +33,20 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
// Speed Gauge // Speed Gauge
row.spawn(( row.spawn((
circular_gauge_node(), circular_gauge_node(),
BackgroundColor(BACKGROUND_COLOR_PRIMARY), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY), BorderColor(BORDER_COLOR_PRIMARY),
SpeedGauge, SpeedGauge,
)) ))
.with_children(|gauge| { .with_children(|gauge| {
gauge.spawn(create_text("SPEED", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY)); gauge.spawn(create_text("SPEED", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
gauge.spawn(create_text("12.5", FONT_SIZE_LARGE, TEXT_COLOR_SUCCESS)); gauge.spawn(create_text("12.5", FONT_SIZE_LARGE, TEXT_COLOR_SUCCESS));
gauge.spawn(create_text("KTS", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY)); gauge.spawn(create_text("KTS", FONT_SIZE_SMALL, TEXT_COLOR_SECONDARY));
}); });
// Central Navigation Display // Central Navigation Display
row.spawn(( row.spawn((
navigation_display_node(), navigation_display_node(),
BackgroundColor(BACKGROUND_COLOR_ACCENT), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY), BorderColor(BORDER_COLOR_PRIMARY),
NavigationDisplay, NavigationDisplay,
)) ))
@@ -56,19 +58,19 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
create_text("045°", FONT_SIZE_LARGE, TEXT_COLOR_PRIMARY).2, create_text("045°", FONT_SIZE_LARGE, TEXT_COLOR_PRIMARY).2,
CompassGauge, CompassGauge,
)); ));
nav.spawn(create_text("HEADING", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY)); nav.spawn(create_text("HEADING", FONT_SIZE_NORMAL, TEXT_COLOR_SECONDARY));
}); });
// Depth Gauge // Depth Gauge
row.spawn(( row.spawn((
circular_gauge_node(), circular_gauge_node(),
BackgroundColor(BACKGROUND_COLOR_PRIMARY), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY), BorderColor(BORDER_COLOR_PRIMARY),
DepthGauge, DepthGauge,
)) ))
.with_children(|gauge| { .with_children(|gauge| {
gauge.spawn(create_text("DEPTH", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY)); gauge.spawn(create_text("DEPTH", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
gauge.spawn(create_text("15.2", FONT_SIZE_LARGE, Color::linear_rgb(0.0, 1.0, 0.8))); gauge.spawn(create_text("15.2", FONT_SIZE_LARGE, TEXT_COLOR_SUCCESS));
gauge.spawn(create_text("M", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY)); gauge.spawn(create_text("M", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
}); });
}); });
@@ -79,24 +81,24 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
// Engine Status Panel // Engine Status Panel
row.spawn(( row.spawn((
status_panel_node(200.0, 150.0), status_panel_node(200.0, 150.0),
BackgroundColor(BACKGROUND_COLOR_PRIMARY), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY), BorderColor(BORDER_COLOR_PRIMARY),
EngineStatus, EngineStatus,
)) ))
.with_children(|panel| { .with_children(|panel| {
panel.spawn(create_text("ENGINE", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY)); panel.spawn(create_text("ENGINE", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY));
panel.spawn(create_text("82°C", FONT_SIZE_LARGE, TEXT_COLOR_SUCCESS)); panel.spawn(create_text("82 C", FONT_SIZE_LARGE, TEXT_COLOR_SUCCESS));
panel.spawn(create_text("TEMP NORMAL", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY)); panel.spawn(create_text("TEMP NORMAL", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
}); });
// System Status Grid // System Status Grid
row.spawn(( row.spawn((
status_panel_node(250.0, 150.0), status_panel_node(250.0, 150.0),
BackgroundColor(BACKGROUND_COLOR_SECONDARY), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_SECONDARY), BorderColor(BORDER_COLOR_PRIMARY),
)) ))
.with_children(|grid| { .with_children(|grid| {
grid.spawn(create_text("SYSTEMS", 12.0, TEXT_COLOR_SECONDARY)); grid.spawn(create_text("SYSTEMS", 12.0, TEXT_COLOR_PRIMARY));
// Fuel Level Bar // Fuel Level Bar
grid.spawn(progress_bar_node()) grid.spawn(progress_bar_node())
@@ -109,7 +111,7 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
BackgroundColor(TEXT_COLOR_SUCCESS), BackgroundColor(TEXT_COLOR_SUCCESS),
)); ));
}); });
bar.spawn(create_text("75%", FONT_SIZE_SMALL, TEXT_COLOR_SUCCESS)); bar.spawn(create_text("75%", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
}); });
// Battery Level Bar // Battery Level Bar
@@ -123,7 +125,7 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
BackgroundColor(TEXT_COLOR_SUCCESS), BackgroundColor(TEXT_COLOR_SUCCESS),
)); ));
}); });
bar.spawn(create_text("88%", FONT_SIZE_SMALL, TEXT_COLOR_SUCCESS)); bar.spawn(create_text("88%", FONT_SIZE_SMALL, TEXT_COLOR_PRIMARY));
}); });
// System Indicators Row // System Indicators Row
@@ -161,7 +163,7 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
}, },
)) ))
.with_children(|indicator| { .with_children(|indicator| {
indicator.spawn(create_text("RADAR", FONT_SIZE_NORMAL, Color::linear_rgb(0.0, 1.0, 0.0))); indicator.spawn(create_text("RADAR", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY));
}); });
// AIS Indicator // AIS Indicator
@@ -183,14 +185,14 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
// Wind Information // Wind Information
row.spawn(( row.spawn((
status_panel_node(200.0, 150.0), status_panel_node(200.0, 150.0),
BackgroundColor(BACKGROUND_COLOR_ACCENT), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY), BorderColor(BORDER_COLOR_PRIMARY),
WindDisplay, WindDisplay,
)) ))
.with_children(|panel| { .with_children(|panel| {
panel.spawn(create_text("WIND", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY)); panel.spawn(create_text("WIND", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY));
panel.spawn(create_text("8.3 KTS", FONT_SIZE_NORMAL, TEXT_COLOR_SUCCESS)); panel.spawn(create_text("8.3 KTS", FONT_SIZE_NORMAL, TEXT_COLOR_SUCCESS));
panel.spawn(create_text("120° REL", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY)); panel.spawn(create_text("120 deg REL", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY));
}); });
}); });
@@ -206,13 +208,12 @@ pub fn setup_instrument_cluster(mut commands: Commands) {
padding: UiRect::all(Val::Px(20.0)), padding: UiRect::all(Val::Px(20.0)),
..default() ..default()
}, },
BackgroundColor(BACKGROUND_COLOR_PRIMARY), BackgroundColor(BACKGROUND_COLOR_TRANSPARENT),
BorderColor(BORDER_COLOR_PRIMARY),
SystemDisplay, SystemDisplay,
)) ))
.with_children(|display| { .with_children(|display| {
display.spawn(( display.spawn((
Text::new("Select a system above to view details"), create_text("", FONT_SIZE_NORMAL, TEXT_COLOR_PRIMARY).0,
TextFont { TextFont {
font_size: FONT_SIZE_SMALL, font_size: FONT_SIZE_SMALL,
..default() ..default()

2
crates/components/src/theme.rs
View File

@@ -4,6 +4,8 @@ use bevy::color::Color;
pub const BACKGROUND_COLOR_PRIMARY: Color = Color::linear_rgb(0.05, 0.05, 0.1); pub const BACKGROUND_COLOR_PRIMARY: Color = Color::linear_rgb(0.05, 0.05, 0.1);
pub const BACKGROUND_COLOR_SECONDARY: Color = Color::linear_rgb(0.1, 0.1, 0.15); pub const BACKGROUND_COLOR_SECONDARY: Color = Color::linear_rgb(0.1, 0.1, 0.15);
pub const BACKGROUND_COLOR_ACCENT: Color = Color::linear_rgb(0.1, 0.15, 0.2); pub const BACKGROUND_COLOR_ACCENT: Color = Color::linear_rgb(0.1, 0.15, 0.2);
pub const BACKGROUND_COLOR_TRANSPARENT: Color = Color::srgba(0.0, 0.0, 0.0, 0.0);
pub const BORDER_COLOR_PRIMARY: Color = Color::linear_rgb(0.0, 0.8, 1.0); pub const BORDER_COLOR_PRIMARY: Color = Color::linear_rgb(0.0, 0.8, 1.0);
pub const BORDER_COLOR_SECONDARY: Color = Color::linear_rgb(0.8, 0.4, 0.0); pub const BORDER_COLOR_SECONDARY: Color = Color::linear_rgb(0.8, 0.4, 0.0);

4
crates/components/src/yacht_data.rs
View File

@@ -71,9 +71,7 @@ pub fn update_instrument_displays(
// Update compass display // Update compass display
for mut text in compass_query.iter_mut() { for mut text in compass_query.iter_mut() {
if text.0.contains('°') { text.0 = format!("{:03.0}", yacht_data.heading);
text.0 = format!("{:03.0}°", yacht_data.heading);
}
} }
} }

2
crates/systems/src/systems.rs
View File

@@ -120,7 +120,7 @@ pub fn update_system_display(
); );
} }
None => { None => {
text.0 = "Select a system above to view details".to_string(); text.0 = "".to_string();
} }
} }
} }

3
crates/yachtpit/mobile/src/lib.rs
View File

@@ -31,6 +31,8 @@ fn main() {
primary_window: Some(Window { primary_window: Some(Window {
resizable: false, resizable: false,
mode: WindowMode::BorderlessFullscreen(MonitorSelection::Current), mode: WindowMode::BorderlessFullscreen(MonitorSelection::Current),
transparent: true,
canvas: Some("#yachtpit-canvas".to_string()),
..default() ..default()
}), }),
..default() ..default()
@@ -39,3 +41,4 @@ fn main() {
)) ))
.run(); .run();
} }