feat: add timeline relbar, peek banner, notification sheet, action menu, and rich text widgets with showcase

Author: leftger

Cargo.toml

@@ -122,3 +122,8 @@ name = "relative_anchors_and_flex_justify_showcase"
 path = "examples/basics/relative_anchors_and_flex_justify_showcase.rs"
 required-features = ["std"]
 
+[[example]]
+name = "wearable_os_subsystems_showcase"
+path = "examples/basics/wearable_os_subsystems_showcase.rs"
+required-features = ["std"]
+

examples/basics/wearable_os_subsystems_showcase.rs

@@ -0,0 +1,119 @@
+//! Showcase: Wearable OS Subsystems & UI Patterns
+//!
+//! Demonstrates:
+//! 1. **Timeline Relationship Bars (`TimelineNodeWidget`)**: Chronological connective bars linking past, active, and future event pins.
+//! 2. **Reactive Peek Banners (`PeekBannerWidget`)**: Heads-up reminder ribbon modifying unobstructed screen canvas.
+//! 3. **Modal Notification Sheets (`NotificationSheetWidget`)**: Priority alert popups with action choices and auto-dismiss countdowns.
+//! 4. **Cascading Action Menus (`ActionMenuWidget`)**: Hierarchical nested action sheets with highlight cursor.
+//! 5. **Rich Multi-Span Text Nodes (`RichTextNodeWidget`)**: Formatted inline text tags and badge spans.
+
+use embedded_graphics_core::pixelcolor::{Rgb565, WebColors};
+use embedded_gui::{
+    framebuffer::Framebuffer,
+    geometry::Rect,
+    render::RenderCtx,
+    round::UnobstructedArea,
+    widgets::{
+        ActionMenuWidget, NotificationPriority, NotificationSheetWidget, PeekBannerWidget,
+        RichTextNodeWidget, TextSpan, TimelineNodeState, TimelineNodeWidget,
+    },
+};
+
+fn main() {
+    println!("=== embedded-gui: Wearable OS Subsystems Showcase ===");
+
+    let screen = Rect::new(0, 0, 240, 240);
+    let mut fb = Framebuffer::<{ 240 * 240 }>::new(240, 240);
+    let mut ctx = RenderCtx::new(&mut fb, screen);
+
+    // 1. Timeline Connective RelBar Demonstration
+    println!("\n1. Timeline Relationship Connector Bars:");
+    let past_node = TimelineNodeWidget::new(TimelineNodeState::Past);
+    let mut active_node = TimelineNodeWidget::new(TimelineNodeState::ActiveNow);
+    active_node.active_color = Rgb565::CSS_ORANGE;
+    let future_node = TimelineNodeWidget::new(TimelineNodeState::Future);
+
+    let past_slot = Rect::new(12, 10, 16, 40);
+    let active_slot = Rect::new(12, 50, 16, 40);
+    let future_slot = Rect::new(12, 90, 16, 40);
+
+    past_node.render(&mut ctx, past_slot).unwrap();
+    active_node.render(&mut ctx, active_slot).unwrap();
+    future_node.render(&mut ctx, future_slot).unwrap();
+
+    println!("  Past pin connector:   {:?}", past_slot);
+    println!("  Active NOW pin node:  {:?}", active_slot);
+    println!("  Upcoming pin node:    {:?}", future_slot);
+
+    // 2. Reactive Peek Banner adapting UnobstructedArea
+    println!("\n2. Reactive Canvas Peek Banner:");
+    let mut unobstructed = UnobstructedArea::new(screen);
+    let peek = PeekBannerWidget::new("TEAM SYNC (10m)");
+    peek.apply_to_unobstructed_area(&mut unobstructed);
+
+    let banner_rect = Rect::new(screen.x, screen.y, screen.w, peek.height as u32);
+    peek.render(&mut ctx, banner_rect).unwrap();
+    println!("  Peek banner rendered at: {:?}", banner_rect);
+    println!(
+        "  Canvas area adjusted to: {:?}",
+        unobstructed.visible_rect()
+    );
+
+    // 3. Multi-Span Rich Text Flow Node
+    println!("\n3. Multi-Span Rich Text Node with Badges:");
+    let mut text_node = RichTextNodeWidget::<4>::new();
+    text_node
+        .push_span(TextSpan::badge(
+            "CRITICAL",
+            Rgb565::CSS_WHITE,
+            Rgb565::new(28, 4, 4),
+        ))
+        .unwrap();
+    text_node
+        .push_span(TextSpan::plain("CPU core temp 48C", Rgb565::CSS_WHITE))
+        .unwrap();
+
+    let text_rect = Rect::new(40, 60, 190, 24);
+    text_node.render(&mut ctx, text_rect).unwrap();
+    println!(
+        "  Rendered {} styled text spans in {:?}",
+        text_node.spans.len(),
+        text_rect
+    );
+
+    // 4. Modal Notification Sheet with Action Buttons & Progress Bar
+    println!("\n4. Modal Notification Sheet:");
+    let mut notif = NotificationSheetWidget::<3>::new(
+        "CALENDAR REMINDER",
+        "Architecture Design Review @ 10:00",
+        NotificationPriority::Important,
+    );
+    notif.add_action("DISMISS", 101).unwrap();
+    notif.add_action("SNOOZE", 102).unwrap();
+    notif.auto_dismiss_progress = 0.75; // 75% timer remaining
+
+    let notif_rect = Rect::new(20, 140, 200, 85);
+    notif.render(&mut ctx, notif_rect).unwrap();
+    println!(
+        "  Rendered modal notification card with {} actions & 75% countdown timer.",
+        notif.actions.len()
+    );
+
+    // 5. Cascading Hierarchical Action Menu
+    println!("\n5. Cascading Action Menu:");
+    let mut menu = ActionMenuWidget::<4>::new(Some("SYSTEM ACTIONS"));
+    menu.add_item("Wireless Sync", 1, true).unwrap();
+    menu.add_item("Do Not Disturb", 2, false).unwrap();
+    menu.add_item("Power Options", 3, true).unwrap();
+    menu.selected_index = 0;
+
+    let menu_rect = Rect::new(30, 40, 180, 75);
+    menu.render(&mut ctx, menu_rect).unwrap();
+    println!(
+        "  Rendered action menu with {} items, highlighted index {}.",
+        menu.items.len(),
+        menu.selected_index
+    );
+
+    println!("\nWearable OS subsystems showcase executed and rendered successfully!");
+}

src/lib.rs

@@ -153,8 +153,10 @@ pub use widget_animation::{
     WidgetAnimationError, WidgetAnimator, WidgetKeyframeState, WidgetPropertyKeyframe,
 };
 pub use widgets::{
-    ActionBarWidget, ContentIndicatorDirection, ContentIndicatorWidget, CrumbsIndicatorWidget,
-    SelectionWidget,
+    ActionBarWidget, ActionMenuError, ActionMenuItem, ActionMenuWidget, ContentIndicatorDirection,
+    ContentIndicatorWidget, CrumbsIndicatorWidget, NotificationAction, NotificationError,
+    NotificationPriority, NotificationSheetWidget, PeekBannerWidget, RichTextError,
+    RichTextNodeWidget, SelectionWidget, TextSpan, TimelineNodeState, TimelineNodeWidget,
 };
 pub use widgets::{
     ChartMode, KeyboardLayout, NotificationLevel, SurfaceState, WidgetKind, WidgetNode,

src/widgets/action_menu.rs

@@ -0,0 +1,140 @@
+//! Hierarchical Action Menu and Cascading Action Sheets.
+//!
+//! Provides `ActionMenuWidget` (contextual cascading action menu with submenus and highlight cursor).
+
+use embedded_graphics_core::{draw_target::DrawTarget, pixelcolor::Rgb565};
+use heapless::Vec;
+
+use crate::{
+    geometry::Rect,
+    render::RenderCtx,
+    style::{Border, Style},
+    widget::{PropertyKey, PropertyValue, Widget},
+};
+
+/// Error indicating action menu capacity exceeded.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct ActionMenuError;
+
+/// A single item in an Action Menu.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct ActionMenuItem<'a> {
+    pub label: &'a str,
+    pub action_id: u16,
+    pub is_submenu: bool,
+}
+
+/// Cascading Hierarchical Action Menu widget.
+#[derive(Clone, Debug, PartialEq)]
+pub struct ActionMenuWidget<'a, const MAX_ITEMS: usize = 8> {
+    pub title: Option<&'a str>,
+    pub items: Vec<ActionMenuItem<'a>, MAX_ITEMS>,
+    pub selected_index: usize,
+    pub background_color: Rgb565,
+    pub text_color: Rgb565,
+    pub selected_bg_color: Rgb565,
+    pub selected_text_color: Rgb565,
+    pub accent_color: Rgb565,
+}
+
+impl<'a, const MAX_ITEMS: usize> ActionMenuWidget<'a, MAX_ITEMS> {
+    pub const fn new(title: Option<&'a str>) -> Self {
+        Self {
+            title,
+            items: Vec::new(),
+            selected_index: 0,
+            background_color: Rgb565::new(3, 6, 9),
+            text_color: Rgb565::new(31, 63, 31),
+            selected_bg_color: Rgb565::new(0, 45, 30),
+            selected_text_color: Rgb565::new(31, 63, 31),
+            accent_color: Rgb565::new(0, 35, 30),
+        }
+    }
+
+    pub fn add_item(
+        &mut self,
+        label: &'a str,
+        action_id: u16,
+        is_submenu: bool,
+    ) -> Result<(), ActionMenuError> {
+        self.items
+            .push(ActionMenuItem {
+                label,
+                action_id,
+                is_submenu,
+            })
+            .map_err(|_| ActionMenuError)
+    }
+
+    pub fn render<D, C>(&self, ctx: &mut RenderCtx<'_, D, C>, bounds: Rect) -> Result<(), D::Error>
+    where
+        D: DrawTarget<Color = Rgb565>,
+        C: crate::render::Compositor<D>,
+    {
+        ctx.fill_rounded_rect(bounds, 4, self.background_color)?;
+        ctx.stroke_rounded_rect(bounds, 4, Border::one(self.accent_color))?;
+
+        let mut y = bounds.y + 4;
+
+        // Title (if present)
+        if let Some(title) = self.title {
+            ctx.draw_text(bounds.x + 8, y, title, Rgb565::new(15, 30, 20))?;
+            y += 14;
+        }
+
+        let item_h = 16;
+        for (i, item) in self.items.iter().enumerate() {
+            let is_selected = i == self.selected_index;
+            let item_rect = Rect::new(bounds.x + 4, y, bounds.w.saturating_sub(8), item_h as u32);
+
+            if is_selected {
+                ctx.fill_rounded_rect(item_rect, 2, self.selected_bg_color)?;
+            }
+
+            let fg = if is_selected {
+                self.selected_text_color
+            } else {
+                self.text_color
+            };
+            ctx.draw_text(bounds.x + 10, y + 3, item.label, fg)?;
+
+            // Submenu chevron hint '>'
+            if item.is_submenu {
+                ctx.draw_text(bounds.right() - 14, y + 3, ">", fg)?;
+            }
+
+            y += item_h + 2;
+        }
+
+        Ok(())
+    }
+}
+
+impl<'a, const MAX_ITEMS: usize> Widget for ActionMenuWidget<'a, MAX_ITEMS> {
+    fn render_widget_bounds(&self, _bounds: Rect, _style: &Style) {}
+
+    fn get_property(&self, key: PropertyKey) -> Option<PropertyValue<'_>> {
+        match key {
+            PropertyKey::Selected => Some(PropertyValue::Int(self.selected_index as i32)),
+            _ => None,
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::framebuffer::Framebuffer;
+
+    #[test]
+    fn test_action_menu_render() {
+        let mut menu = ActionMenuWidget::<4>::new(Some("SETTINGS"));
+        assert!(menu.add_item("Wi-Fi", 1, true).is_ok());
+        assert!(menu.add_item("Bluetooth", 2, true).is_ok());
+        assert!(menu.add_item("Restart", 3, false).is_ok());
+
+        let mut fb = Framebuffer::<24000>::new(160, 100);
+        let mut ctx = RenderCtx::new(&mut fb, Rect::new(0, 0, 160, 100));
+        assert!(menu.render(&mut ctx, Rect::new(0, 0, 160, 100)).is_ok());
+    }
+}

src/widgets/mod.rs

@@ -17,18 +17,28 @@ use crate::{
     },
 };
 
+pub mod action_menu;
 pub mod basic;
 pub mod cinematic;
 pub mod controls;
 pub mod data;
 pub mod gauges;
+pub mod notification;
+pub mod rich_text_node;
+pub mod timeline;
 pub mod wearable;
 
+pub use action_menu::{ActionMenuError, ActionMenuItem, ActionMenuWidget};
 pub use basic::{ButtonWidget, LabelWidget, PanelWidget, SpacerWidget};
 pub use cinematic::GlanceTileWidget;
 pub use controls::{CheckboxWidget, SliderWidget, ToggleWidget};
 pub use data::ListWidget;
 pub use gauges::ProgressBarWidget;
+pub use notification::{
+    NotificationAction, NotificationError, NotificationPriority, NotificationSheetWidget,
+};
+pub use rich_text_node::{RichTextError, RichTextNodeWidget, TextSpan};
+pub use timeline::{PeekBannerWidget, TimelineNodeState, TimelineNodeWidget};
 pub use wearable::{
     ActionBarWidget, ContentIndicatorDirection, ContentIndicatorWidget, CrumbsIndicatorWidget,
     SelectionWidget,