mirui 0.28.1

A lightweight, no_std ECS-driven UI framework for embedded, desktop, and WebAssembly
Documentation
extern crate alloc;

#[cfg(feature = "std")]
use crate::app::{App, RendererFactory};
use crate::components::assets::*;
use crate::components::{Button, Checkbox, Image, ProgressBar};
use crate::ecs::{Entity, World};
use crate::prelude::*;
#[cfg(feature = "std")]
use crate::surface::Surface;
use crate::widget::{Children, Parent};

pub fn build_widgets(world: &mut World, parent: Entity) {
    let _header_root = ui! {
        :(
            parent: parent
            world: world
        :)

        View (
            bg_color: Color::rgb(30, 102, 245),
            height: 40,
            border_radius: 8,
            direction: FlexDirection::Row,
            align: AlignItems::Center,
            padding: Padding::all(8)
        ) {
            View (text: "mirui Components", grow: 1.0) {}
            View (bg_color: Color::rgb(255, 200, 50), width: 16, height: 16, border_radius: 8) {}
        }
    };

    let badge_img = WidgetBuilder::new(world)
        .layout(LayoutStyle {
            width: Dimension::Px(Fixed::from_int(IMG_THUMBS_UP.width as i32)),
            height: Dimension::Px(Fixed::from_int(IMG_THUMBS_UP.height as i32)),
            ..Default::default()
        })
        .id();
    world.insert(badge_img, Image::new(&IMG_THUMBS_UP));
    world.insert(badge_img, Parent(parent));
    if let Some(children) = world.get_mut::<Children>(parent) {
        children.0.push(badge_img);
    }

    let btn_ok = WidgetBuilder::new(world)
        .text("OK")
        .border_radius(6)
        .layout(LayoutStyle {
            grow: Fixed::from_f32(1.0),
            height: Dimension::px(36),
            ..Default::default()
        })
        .id();
    world.insert(
        btn_ok,
        Button::new()
            .with_normal_color(Color::rgb(63, 185, 80))
            .with_pressed_color(Color::rgb(40, 140, 55)),
    );

    let btn_cancel = WidgetBuilder::new(world)
        .text("Cancel")
        .border_radius(6)
        .layout(LayoutStyle {
            grow: Fixed::from_f32(1.0),
            height: Dimension::px(36),
            ..Default::default()
        })
        .id();
    world.insert(
        btn_cancel,
        Button::new()
            .with_normal_color(Color::rgb(248, 81, 73))
            .with_pressed_color(Color::rgb(200, 50, 45)),
    );

    let btn_row = WidgetBuilder::new(world)
        .layout(LayoutStyle {
            direction: FlexDirection::Row,
            height: Dimension::px(36),
            ..Default::default()
        })
        .child(btn_ok)
        .child(btn_cancel)
        .id();
    world.insert(btn_row, Parent(parent));
    if let Some(children) = world.get_mut::<Children>(parent) {
        children.0.push(btn_row);
    }

    let pb1 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            height: Dimension::px(12),
            ..Default::default()
        })
        .id();
    world.insert(pb1, ProgressBar::new());
    if let Some(pb) = world.get_mut::<ProgressBar>(pb1) {
        pb.value = 0.7;
    }

    let pb2 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            height: Dimension::px(12),
            ..Default::default()
        })
        .id();
    world.insert(
        pb2,
        ProgressBar::new().with_fill_color(Color::rgb(63, 185, 80)),
    );
    if let Some(pb) = world.get_mut::<ProgressBar>(pb2) {
        pb.value = 0.4;
    }

    let pb3 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            height: Dimension::px(12),
            ..Default::default()
        })
        .id();
    world.insert(
        pb3,
        ProgressBar::new().with_fill_color(Color::rgb(248, 81, 73)),
    );
    if let Some(pb) = world.get_mut::<ProgressBar>(pb3) {
        pb.value = 0.9;
    }

    let pb_col = WidgetBuilder::new(world)
        .layout(LayoutStyle {
            direction: FlexDirection::Column,
            height: Dimension::px(50),
            justify: JustifyContent::SpaceBetween,
            ..Default::default()
        })
        .child(pb1)
        .child(pb2)
        .child(pb3)
        .id();
    world.insert(pb_col, Parent(parent));
    if let Some(children) = world.get_mut::<Children>(parent) {
        children.0.push(pb_col);
    }

    let cb1 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            width: Dimension::px(24),
            height: Dimension::px(24),
            ..Default::default()
        })
        .id();
    world.insert(
        cb1,
        Checkbox::new()
            .with_checked_color(Color::rgb(88, 166, 255))
            .with_unchecked_color(Color::rgb(80, 80, 100)),
    );
    if let Some(cb) = world.get_mut::<Checkbox>(cb1) {
        cb.checked = true;
    }

    let cb2 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            width: Dimension::px(24),
            height: Dimension::px(24),
            ..Default::default()
        })
        .id();
    world.insert(
        cb2,
        Checkbox::new()
            .with_checked_color(Color::rgb(63, 185, 80))
            .with_unchecked_color(Color::rgb(80, 80, 100)),
    );

    let cb3 = WidgetBuilder::new(world)
        .border_radius(4)
        .layout(LayoutStyle {
            width: Dimension::px(24),
            height: Dimension::px(24),
            ..Default::default()
        })
        .id();
    world.insert(
        cb3,
        Checkbox::new()
            .with_checked_color(Color::rgb(248, 81, 73))
            .with_unchecked_color(Color::rgb(80, 80, 100)),
    );
    if let Some(cb) = world.get_mut::<Checkbox>(cb3) {
        cb.checked = true;
    }

    let cb_row = WidgetBuilder::new(world)
        .layout(LayoutStyle {
            direction: FlexDirection::Row,
            height: Dimension::px(30),
            align: AlignItems::Center,
            ..Default::default()
        })
        .child(cb1)
        .child(cb2)
        .child(cb3)
        .id();
    world.insert(cb_row, Parent(parent));
    if let Some(children) = world.get_mut::<Children>(parent) {
        children.0.push(cb_row);
    }

    ui! {
        :(
            parent: parent
            world: world
        :)

        View (
            bg_color: Color::rgb(40, 40, 55),
            height: 30,
            border_radius: 6,
            text: "Button | ProgressBar | Checkbox | Image"
        ) {}
    };
}

#[cfg(feature = "std")]
pub fn setup_app<B, F>(app: &mut App<B, F>, parent: Entity)
where
    B: Surface,
    F: RendererFactory<B>,
{
    build_widgets(&mut app.world, parent);
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::widget::IdMap;
    use crate::widget::builder::WidgetBuilder;

    #[test]
    fn build_widgets_smoke() {
        let mut world = World::new();
        world.insert_resource(IdMap::new());
        let parent = WidgetBuilder::new(&mut world).id();
        build_widgets(&mut world, parent);
        assert!(
            world
                .get::<Children>(parent)
                .is_some_and(|c| !c.0.is_empty()),
        );
    }
}