feat(ui): grid toggle and opacity control for chart

irudoy · SomethingNew71 · commit 65cb2c0f8891 · 2026-04-25T18:45:23.000-04:00
Add a Show Grid checkbox in the View menu and a Show Grid /
Opacity slider in Settings → Display. Both knobs persist in
UserSettings so the choice survives across sessions.

Wire egui_plot's show_grid([x, y]) and grid_color() into both
Plot::new chains (single and multi-area). The opacity slider
overrides only the alpha of the base grid color, leaving the
distance-based fade and theme RGB intact.

Adds en/ru translations for menu.show_grid, settings.show_grid,
settings.show_grid_desc, settings.grid_opacity.
diff --git a/i18n/ar.yaml b/i18n/ar.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "تصدير كـ PDF..."
   export_histogram_pdf: "تصدير المدرج التكراري كـ PDF..."
   view: "عرض"
+  show_grid: "إظهار الشبكة"
   tool_mode: "وضع الأداة"
   log_viewer: "عارض السجل"
   scatter_plots: "المخططات المبعثرة"
@@ -61,6 +62,9 @@ settings:
   window: "النافذة:"
   scroll_to_zoom: "التمرير للتكبير"
   scroll_to_zoom_desc: "عجلة الماوس تكبر المخطط مباشرة بدلاً من الإزاحة"
+  show_grid: "إظهار الشبكة"
+  show_grid_desc: "رسم شبكة الخلفية للرسم البياني"
+  grid_opacity: "الشفافية:"
   field_names: "أسماء الحقول"
   field_normalization: "توحيد الحقول"
   field_normalization_desc: "توحيد أسماء القنوات عبر أنواع ECU"
diff --git a/i18n/bn.yaml b/i18n/bn.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "PDF হিসেবে রপ্তানি..."
   export_histogram_pdf: "হিস্টোগ্রাম PDF হিসেবে রপ্তানি..."
   view: "দৃশ্য"
+  show_grid: "গ্রিড দেখান"
   tool_mode: "টুল মোড"
   log_viewer: "লগ ভিউয়ার"
   scatter_plots: "স্ক্যাটার প্লট"
@@ -61,6 +62,9 @@ settings:
   window: "উইন্ডো:"
   scroll_to_zoom: "স্ক্রল করে জুম করুন"
   scroll_to_zoom_desc: "মাউস হুইল সরাসরি চার্টকে জুম করে প্যানিং এর পরিবর্তে"
+  show_grid: "গ্রিড দেখান"
+  show_grid_desc: "চার্ট পটভূমি গ্রিড আঁকুন"
+  grid_opacity: "স্বচ্ছতা:"
   field_names: "ফিল্ড নাম"
   field_normalization: "ফিল্ড নরমালাইজেশন"
   field_normalization_desc: "ECU টাইপ জুড়ে চ্যানেল নাম মানসম্মত করুন"
diff --git a/i18n/de.yaml b/i18n/de.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Als PDF exportieren..."
   export_histogram_pdf: "Histogramm als PDF exportieren..."
   view: "Ansicht"
+  show_grid: "Gitter anzeigen"
   tool_mode: "Werkzeugmodus"
   log_viewer: "Log-Betrachter"
   scatter_plots: "Streudiagramme"
@@ -61,6 +62,9 @@ settings:
   window: "Fenster:"
   scroll_to_zoom: "Scrollen zum Zoomen"
   scroll_to_zoom_desc: "Mausrad zoomt direkt in das Diagramm, anstatt es zu verschieben"
+  show_grid: "Gitter anzeigen"
+  show_grid_desc: "Gitter im Hintergrund anzeichnen"
+  grid_opacity: "Deckkraft:"
   field_names: "Feldnamen"
   field_normalization: "Feldnormalisierung"
   field_normalization_desc: "Kanalnamen über ECU-Typen hinweg standardisieren"
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Export as PDF..."
   export_histogram_pdf: "Export Histogram as PDF..."
   view: "View"
+  show_grid: "Show Grid"
   tool_mode: "Tool Mode"
   log_viewer: "Log Viewer"
   scatter_plots: "Scatter Plots"
@@ -61,6 +62,9 @@ settings:
   window: "Window:"
   scroll_to_zoom: "Scroll to Zoom"
   scroll_to_zoom_desc: "Scroll wheel zooms the chart directly instead of panning"
+  show_grid: "Show Grid"
+  show_grid_desc: "Draw the chart background grid"
+  grid_opacity: "Opacity:"
   field_names: "Field Names"
   field_normalization: "Field Normalization"
   field_normalization_desc: "Standardize channel names across ECU types"
diff --git a/i18n/es.yaml b/i18n/es.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Exportar como PDF..."
   export_histogram_pdf: "Exportar Histograma como PDF..."
   view: "Vista"
+  show_grid: "Mostrar cuadrícula"
   tool_mode: "Modo de Herramienta"
   log_viewer: "Visor de Log"
   scatter_plots: "Graficos de Dispersion"
@@ -61,6 +62,9 @@ settings:
   window: "Ventana:"
   scroll_to_zoom: "Desplazar para Zoom"
   scroll_to_zoom_desc: "La rueda de desplazamiento amplía el gráfico directamente en lugar de desplazarse"
+  show_grid: "Mostrar cuadrícula"
+  show_grid_desc: "Mostrar la cuadrícula de fondo del gráfico"
+  grid_opacity: "Opacidad:"
   field_names: "Nombres de Campos"
   field_normalization: "Normalizacion de Campos"
   field_normalization_desc: "Estandarizar nombres de canales entre tipos de ECU"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Exporter en PDF..."
   export_histogram_pdf: "Exporter l'histogramme en PDF..."
   view: "Affichage"
+  show_grid: "Afficher la grille"
   tool_mode: "Mode outil"
   log_viewer: "Visionneuse de journaux"
   scatter_plots: "Nuages de points"
@@ -61,6 +62,9 @@ settings:
   window: "Fenetre :"
   scroll_to_zoom: "Scroll pour Zoomer"
   scroll_to_zoom_desc: "La molette de la souris zoome le graphique directement au lieu de faire defiler"
+  show_grid: "Afficher la grille"
+  show_grid_desc: "Afficher la grille de fond du graphique"
+  grid_opacity: "Opacité :"
   field_names: "Noms des champs"
   field_normalization: "Normalisation des champs"
   field_normalization_desc: "Standardiser les noms de canaux entre les types d'ECU"
diff --git a/i18n/hi.yaml b/i18n/hi.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "PDF के रूप में निर्यात करें..."
   export_histogram_pdf: "हिस्टोग्राम PDF के रूप में निर्यात करें..."
   view: "दृश्य"
+  show_grid: "ग्रिड दिखाएं"
   tool_mode: "टूल मोड"
   log_viewer: "लॉग व्यूअर"
   scatter_plots: "स्कैटर प्लॉट"
@@ -61,6 +62,9 @@ settings:
   window: "विंडो:"
   scroll_to_zoom: "स्क्रॉल करके ज़ूम करें"
   scroll_to_zoom_desc: "माउस व्हील सीधे चार्ट को ज़ूम करता है, पैन करने के बजाय"
+  show_grid: "ग्रिड दिखाएं"
+  show_grid_desc: "चार्ट पृष्ठभूमि ग्रिड बनाएं"
+  grid_opacity: "अस्पष्टता:"
   field_names: "फ़ील्ड नाम"
   field_normalization: "फ़ील्ड नॉर्मलाइज़ेशन"
   field_normalization_desc: "ECU प्रकारों में चैनल नामों को मानकीकृत करें"
diff --git a/i18n/id.yaml b/i18n/id.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Ekspor sebagai PDF..."
   export_histogram_pdf: "Ekspor Histogram sebagai PDF..."
   view: "Tampilan"
+  show_grid: "Tampilkan Kisi"
   tool_mode: "Mode Alat"
   log_viewer: "Penampil Log"
   scatter_plots: "Diagram Sebar"
@@ -61,6 +62,9 @@ settings:
   window: "Jendela:"
   scroll_to_zoom: "Gulir untuk Zoom"
   scroll_to_zoom_desc: "Roda mouse memperbesar grafik secara langsung daripada menggeser"
+  show_grid: "Tampilkan Kisi"
+  show_grid_desc: "Gambar kisi latar belakang bagan"
+  grid_opacity: "Opacity:"
   field_names: "Nama Field"
   field_normalization: "Normalisasi Field"
   field_normalization_desc: "Standarisasi nama kanal antar jenis ECU"
diff --git a/i18n/it.yaml b/i18n/it.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Esporta come PDF..."
   export_histogram_pdf: "Esporta Istogramma come PDF..."
   view: "Visualizza"
+  show_grid: "Mostra griglia"
   tool_mode: "Modalita' Strumento"
   log_viewer: "Visualizzatore Log"
   scatter_plots: "Grafici a Dispersione"
@@ -61,6 +62,9 @@ settings:
   window: "Finestra:"
   scroll_to_zoom: "Scroll per Zoom"
   scroll_to_zoom_desc: "La rotella del mouse ingrandisce il grafico direttamente invece di scorrere"
+  show_grid: "Mostra griglia"
+  show_grid_desc: "Disegna la griglia di sfondo del grafico"
+  grid_opacity: "Opacità:"
   field_names: "Nomi dei Campi"
   field_normalization: "Normalizzazione Campi"
   field_normalization_desc: "Standardizza i nomi dei canali tra diversi tipi di ECU"
diff --git a/i18n/ja.yaml b/i18n/ja.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "PDFとしてエクスポート..."
   export_histogram_pdf: "ヒストグラムをPDFでエクスポート..."
   view: "表示"
+  show_grid: "グリッドを表示"
   tool_mode: "ツールモード"
   log_viewer: "ログビューア"
   scatter_plots: "散布図"
@@ -61,6 +62,9 @@ settings:
   window: "ウィンドウ:"
   scroll_to_zoom: "スクロールしてズーム"
   scroll_to_zoom_desc: "マウスホイールでチャートを直接ズームします（パンの代わりに）"
+  show_grid: "グリッドを表示"
+  show_grid_desc: "チャートの背景グリッドを描画"
+  grid_opacity: "不透明度:"
   field_names: "フィールド名"
   field_normalization: "フィールド正規化"
   field_normalization_desc: "ECUタイプ間でチャンネル名を標準化"
diff --git a/i18n/pt-BR.yaml b/i18n/pt-BR.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Exportar como PDF..."
   export_histogram_pdf: "Exportar Histograma como PDF..."
   view: "Visualizar"
+  show_grid: "Mostrar Grade"
   tool_mode: "Modo de Ferramenta"
   log_viewer: "Visualizador de Logs"
   scatter_plots: "Gráficos de Dispersão"
@@ -61,6 +62,9 @@ settings:
   window: "Janela:"
   scroll_to_zoom: "Scroll para Ampliar"
   scroll_to_zoom_desc: "A roda do mouse amplia o gráfico diretamente em vez de fazer pan"
+  show_grid: "Mostrar Grade"
+  show_grid_desc: "Desenhar a grade de fundo do gráfico"
+  grid_opacity: "Opacidade:"
   field_names: "Nomes dos Campos"
   field_normalization: "Normalização de Campos"
   field_normalization_desc: "Padronizar nomes de canais entre tipos de ECU"
diff --git a/i18n/pt-PT.yaml b/i18n/pt-PT.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Exportar como PDF..."
   export_histogram_pdf: "Exportar Histograma como PDF..."
   view: "Ver"
+  show_grid: "Mostrar Grelha"
   tool_mode: "Modo de Ferramenta"
   log_viewer: "Visualizador de Registos"
   scatter_plots: "Gráficos de Dispersão"
@@ -61,6 +62,9 @@ settings:
   window: "Janela:"
   scroll_to_zoom: "Scroll para Ampliação"
   scroll_to_zoom_desc: "A roda do rato amplia o gráfico diretamente em vez de fazer pan"
+  show_grid: "Mostrar Grelha"
+  show_grid_desc: "Desenhar a grelha de fundo do gráfico"
+  grid_opacity: "Opacidade:"
   field_names: "Nomes dos Campos"
   field_normalization: "Normalização de Campos"
   field_normalization_desc: "Uniformizar nomes de canais entre tipos de ECU"
diff --git a/i18n/ru.yaml b/i18n/ru.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "Экспортировать в PDF..."
   export_histogram_pdf: "Экспортировать гистограмму в PDF..."
   view: "Вид"
+  show_grid: "Показывать сетку"
   tool_mode: "Режим инструмента"
   log_viewer: "Просмотр логов"
   scatter_plots: "Диаграммы рассеяния"
@@ -61,6 +62,9 @@ settings:
   window: "Окно:"
   scroll_to_zoom: "Прокрутка для увеличения"
   scroll_to_zoom_desc: "Колесико мыши увеличивает график напрямую вместо панорамирования"
+  show_grid: "Показывать сетку"
+  show_grid_desc: "Отображать координатную сетку на графике"
+  grid_opacity: "Прозрачность:"
   field_names: "Имена полей"
   field_normalization: "Нормализация полей"
   field_normalization_desc: "Стандартизировать имена каналов для разных типов ECU"
diff --git a/i18n/ur.yaml b/i18n/ur.yaml
@@ -11,6 +11,7 @@ menu:
   export_pdf: "PDF کے طور پر برآمد کریں..."
   export_histogram_pdf: "ہسٹوگرام PDF کے طور پر برآمد کریں..."
   view: "منظر"
+  show_grid: "گرڈ دکھائیں"
   tool_mode: "ٹول موڈ"
   log_viewer: "لاگ ویور"
   scatter_plots: "سکیٹر پلاٹس"
@@ -62,6 +63,9 @@ settings:
   window: "ونڈو:"
   scroll_to_zoom: "سکرول کریں تاکہ تقریب ہو"
   scroll_to_zoom_desc: "ماؤس وہیل براہ راست چارٹ کو بڑھاتا ہے بجائے پیننگ کے"
+  show_grid: "گرڈ دکھائیں"
+  show_grid_desc: "چار्ट کی پس منظر کی شبکہ کھینچیں"
+  grid_opacity: "شفافیت:"
   field_names: "فیلڈ کے نام"
   field_normalization: "فیلڈ نارملائزیشن"
   field_normalization_desc: "ECU اقسام میں چینل ناموں کو معیاری بنائیں"
diff --git a/i18n/zh-CN.yaml b/i18n/zh-CN.yaml
@@ -10,6 +10,7 @@ menu:
   export_pdf: "导出为 PDF..."
   export_histogram_pdf: "导出直方图为 PDF..."
   view: "视图"
+  show_grid: "显示网格"
   tool_mode: "工具模式"
   log_viewer: "日志查看器"
   scatter_plots: "散点图"
@@ -61,6 +62,9 @@ settings:
   window: "窗口:"
   scroll_to_zoom: "滚动以缩放"
   scroll_to_zoom_desc: "鼠标滚轮直接缩放图表，而不是平移"
+  show_grid: "显示网格"
+  show_grid_desc: "绘制图表背景网格"
+  grid_opacity: "不透明度:"
   field_names: "字段名称"
   field_normalization: "字段标准化"
   field_normalization_desc: "统一不同 ECU 类型的通道名称"
diff --git a/src/app.rs b/src/app.rs
@@ -86,6 +86,10 @@ pub struct UltraLogApp {
     pub(crate) initial_view_seconds: f64,
     /// When true, scroll wheel zooms chart directly instead of panning
     pub(crate) scroll_to_zoom: bool,
+    /// When true, draw the chart background grid
+    pub(crate) show_grid: bool,
+    /// Grid line opacity (0..=255) used as the alpha of the base grid color
+    pub(crate) grid_opacity: u8,
     // === Unit Preferences ===
     /// User preferences for display units
     pub(crate) unit_preferences: UnitPreferences,
@@ -190,6 +194,8 @@ impl Default for UltraLogApp {
             field_normalization: true, // Enabled by default for better readability
             initial_view_seconds: 60.0, // Start with 60 second view
             scroll_to_zoom: false,
+            show_grid: true,
+            grid_opacity: 255,
             unit_preferences: UnitPreferences::default(),
             font_scale: FontScale::default(),
             custom_normalizations: HashMap::new(),
@@ -271,6 +277,8 @@ impl UltraLogApp {
             user_settings: user_settings.clone(),
             language: user_settings.language,
             scroll_to_zoom: user_settings.scroll_to_zoom,
+            show_grid: user_settings.show_grid,
+            grid_opacity: user_settings.grid_opacity,
             ..Self::default()
         };
 
diff --git a/src/settings.rs b/src/settings.rs
@@ -19,18 +19,35 @@ pub struct UserSettings {
     /// When true, scroll wheel zooms chart directly instead of panning
     #[serde(default)]
     pub scroll_to_zoom: bool,
+    /// When true, draw the chart background grid
+    #[serde(default = "default_show_grid")]
+    pub show_grid: bool,
+    /// Grid line opacity, 0..=255. Modulates the base grid color's alpha
+    /// before egui_plot's distance-based fade
+    #[serde(default = "default_grid_opacity")]
+    pub grid_opacity: u8,
 }
 
 fn default_version() -> u32 {
     1
 }
 
+fn default_show_grid() -> bool {
+    true
+}
+
+fn default_grid_opacity() -> u8 {
+    255
+}
+
 impl Default for UserSettings {
     fn default() -> Self {
         Self {
             version: 1,
             language: Language::default(),
             scroll_to_zoom: false,
+            show_grid: default_show_grid(),
+            grid_opacity: default_grid_opacity(),
         }
     }
 }
diff --git a/src/ui/chart.rs b/src/ui/chart.rs
@@ -135,6 +135,8 @@ impl UltraLogApp {
         let initial_view_seconds = self.initial_view_seconds;
         let jump_to_time = self.get_jump_to_time();
         let scroll_to_zoom = self.scroll_to_zoom;
+        let show_grid = self.show_grid;
+        let grid_color = grid_color_with_opacity(ui, self.grid_opacity);
 
         // Read scroll input before plot consumes it (for scroll-to-zoom mode)
         let scroll_delta_y = if scroll_to_zoom && !cursor_tracking {
@@ -153,6 +155,8 @@ impl UltraLogApp {
             .legend(egui_plot::Legend::default())
             .y_axis_label("") // Hide Y axis label since values are normalized
             .show_axes([true, false]) // Show X axis (time), hide Y axis (normalized 0-1)
+            .show_grid([show_grid, show_grid])
+            .grid_color(grid_color)
             .allow_zoom([true, false]) // Only allow X-axis zoom
             .allow_drag([!cursor_tracking, false]) // Only allow X-axis drag, never Y
             .allow_scroll([!cursor_tracking && !scroll_to_zoom, false]); // Disable scroll-pan when scroll-to-zoom enabled
@@ -550,12 +554,17 @@ impl UltraLogApp {
         const Y_MIN: f64 = -0.05;
         const Y_MAX: f64 = 1.05;
 
+        let show_grid = self.show_grid;
+        let grid_color = grid_color_with_opacity(ui, self.grid_opacity);
+
         // Build plot with fixed height
         let plot = Plot::new(format!("plot_{}", plot_area_id))
             .height(height)
             .legend(egui_plot::Legend::default())
             .y_axis_label("")
             .show_axes([true, false])
+            .show_grid([show_grid, show_grid])
+            .grid_color(grid_color)
             .allow_zoom([true, false])
             .allow_drag([!cursor_tracking, false])
             .allow_scroll([!cursor_tracking, false]);
@@ -1035,3 +1044,12 @@ impl UltraLogApp {
         result
     }
 }
+
+/// Build a grid color matching the active theme but with a user-controlled
+/// alpha override. The base RGB comes from `Visuals::text_color`, which is
+/// what egui_plot uses by default; we just substitute the alpha so the
+/// distance-based fade still applies on top.
+fn grid_color_with_opacity(ui: &egui::Ui, alpha: u8) -> egui::Color32 {
+    let c = ui.visuals().text_color();
+    egui::Color32::from_rgba_unmultiplied(c.r(), c.g(), c.b(), alpha)
+}
diff --git a/src/ui/menu.rs b/src/ui/menu.rs
diff --git a/src/ui/settings_panel.rs b/src/ui/settings_panel.rs
diff --git a/tests/core/settings_tests.rs b/tests/core/settings_tests.rs
