format BinaryWithGroups and ASCII

frontend/src/platform/browser.rs

@@ -102,7 +102,8 @@ fn signal_to_timeline(
     block_height: u32,
 ) -> shared::Timeline {
     const MIN_BLOCK_WIDTH: u32 = 3;
-    const LETTER_WIDTH: u32 = 15;
+    // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs`
+    const LETTER_WIDTH: f64 = 9.61;
     const LETTER_HEIGHT: u32 = 21;
     const LABEL_X_PADDING: u32 = 10;
 
@@ -137,9 +138,11 @@ fn signal_to_timeline(
             continue;
         }
 
+        // @TODO cache?
         let value = shared::VarFormat::default().format(value);
 
-        let value_width = value.chars().count() as u32 * LETTER_WIDTH;
+        let value_width = (value.chars().count() as f64 * LETTER_WIDTH) as u32;
+        // @TODO Ellipsis instead of hiding?
         let label = if (value_width + (2 * LABEL_X_PADDING)) <= block_width {
             Some(shared::TimeLineBlockLabel {
                 text: value,

frontend/src/waveform_panel.rs

@@ -155,13 +155,14 @@ impl WaveformPanel {
         let (hovered, hovered_signal) = Mutable::new_and_signal(false);
         Button::new()
             .s(Height::exact(ROW_HEIGHT))
+            .s(Width::growable())
             .s(Background::new().color_signal(
                 hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
             ))
             .s(RoundedCorners::new().left(15).right(5))
             .label(
                 El::new()
-                    .s(Align::center())
+                    .s(Align::new().left())
                     .s(Padding::new().left(20).right(17).y(10))
                     .child(name),
             )

frontend/typescript/bundles/pixi_canvas.js

@@ -35221,7 +35221,7 @@ var VarSignalRow = class {
     align: "center",
     fill: "White",
     fontSize: 16,
-    fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
+    fontFamily: '"Courier New", monospace'
   });
   constructor(signal_ref_index, timeline, app, owner, rows_container, row_height, row_gap) {
     this.signal_ref_index = signal_ref_index;

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -125,7 +125,7 @@ class VarSignalRow {
         align: "center",
         fill: "White",
         fontSize: 16,
-        fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+        fontFamily: '"Courier New", monospace',
     });    
 
     constructor(

shared/src/var_format.rs

@@ -3,10 +3,9 @@ pub enum VarFormat {
     ASCII,
     Binary,
     BinaryWithGroups,
-    // #[default]
+    #[default]
     Hexadecimal,
     Octal,
-    #[default]
     Signed,
     Unsigned,
 }
@@ -44,16 +43,29 @@ impl VarFormat {
         }
         match self {
             VarFormat::ASCII => {
-                // @TODO
+                let mut formatted_value = String::new();
-                value
+                for group_index in 0..value.len() / 8 {
-            },
+                    let offset = group_index * 8;
-            VarFormat::Binary => {
+                    let group = &value[offset..offset + 8];
-                value
+                    if let Ok(byte_char) = u8::from_str_radix(group, 2) {
-            },
+                        formatted_value.push(byte_char as char);
+                    }
+                }
+                formatted_value
+            }
+            VarFormat::Binary => value,
             VarFormat::BinaryWithGroups => {
-                // @TODO
                 value
-            },
+                    .chars()
+                    .enumerate()
+                    .fold(String::new(), |mut value, (index, one_or_zero)| {
+                        value.push(one_or_zero);
+                        if (index + 1) % 4 == 0 {
+                            value.push(' ');
+                        }
+                        value
+                    })
+            }
             VarFormat::Hexadecimal => {
                 let ones_and_zeros = value
                     .chars()
@@ -68,7 +80,7 @@ impl VarFormat {
                     .map(|number| char::from_digit(number, 16).unwrap())
                     .collect();
                 value
-            },
+            }
             VarFormat::Octal => {
                 let ones_and_zeros = value
                     .chars()
@@ -83,7 +95,7 @@ impl VarFormat {
                     .map(|number| char::from_digit(number, 8).unwrap())
                     .collect();
                 value
-            },
+            }
             VarFormat::Signed => {
                 let mut ones_and_zeros = value
                     .chars()
@@ -92,16 +104,16 @@ impl VarFormat {
                     .collect::<Vec<_>>();
 
                 // https://builtin.com/articles/twos-complement
-                let sign = if ones_and_zeros.last().unwrap() == &0 { "" } else { "-" };
+                let sign = if ones_and_zeros.last().unwrap() == &0 {
+                    ""
+                } else {
+                    "-"
+                };
                 if sign == "-" {
                     let mut one_found = false;
                     for one_or_zero in &mut ones_and_zeros {
                         if one_found {
-                            *one_or_zero = if one_or_zero == &0 {
+                            *one_or_zero = if one_or_zero == &0 { 1 } else { 0 }
-                                1
-                            } else {
-                                0
-                            }
                         } else if one_or_zero == &1 {
                             one_found = true;
                         }
@@ -118,7 +130,7 @@ impl VarFormat {
                 // @TODO chain `sign` before collecting?
                 let value = sign.to_owned() + &value_without_sign;
                 value
-            },
+            }
             VarFormat::Unsigned => {
                 let ones_and_zeros = value
                     .chars()
@@ -133,7 +145,7 @@ impl VarFormat {
                     .map(|number| char::from_digit(number, 10).unwrap())
                     .collect();
                 value
-            },
+            }
         }
     }
 }

src-tauri/src/lib.rs

@@ -96,7 +96,8 @@ fn signal_to_timeline(
     block_height: u32,
 ) -> shared::Timeline {
     const MIN_BLOCK_WIDTH: u32 = 3;
-    const LETTER_WIDTH: u32 = 15;
+    // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs`
+    const LETTER_WIDTH: f64 = 9.61;
     const LETTER_HEIGHT: u32 = 21;
     const LABEL_X_PADDING: u32 = 10;
 
@@ -131,9 +132,11 @@ fn signal_to_timeline(
             continue;
         }
 
+        // @TODO cache?
         let value = shared::VarFormat::default().format(value);
 
-        let value_width = value.chars().count() as u32 * LETTER_WIDTH;
+        let value_width = (value.chars().count() as f64 * LETTER_WIDTH) as u32;
+        // @TODO Ellipsis instead of hiding?
         let label = if (value_width + (2 * LABEL_X_PADDING)) <= block_width {
             Some(shared::TimeLineBlockLabel {
                 text: value,