mirui 0.42.0

A lightweight, no_std ECS-driven UI framework for embedded, desktop, and WebAssembly
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

extern crate alloc;

use crate::prelude::*;
use crate::render::command::CompositeMode;
use crate::ui::widgets::Image;

const MODES: &[(&str, &str, CompositeMode)] = &[
    ("source-over", "opaque overlay", CompositeMode::SourceOver),
    ("add", "lighten / glow", CompositeMode::Add),
    ("screen", "soft glow", CompositeMode::Screen),
    ("multiply", "tint / shadow", CompositeMode::Multiply),
    ("darken", "keep darker", CompositeMode::Darken),
    ("lighten", "keep brighter", CompositeMode::Lighten),
    ("difference", "invert / FX", CompositeMode::Difference),
];

const CELL_W: i32 = 96;
const CELL_H: i32 = 96;
const FG: i32 = 72;

#[compose]
pub fn build_widgets() {
    ui! {
        Column (
            grow: 1.0,
            bg_color: ColorToken::Surface,
            padding: Padding::all(12),
            align: AlignItems::Center
        ) {
            View (
                text: "Composite modes — yellow thumbs-up over an R/G/B/black stripe backdrop. Each mode rewrites the overlap differently.",
                height: 36
            )
            Row (
                justify: JustifyContent::SpaceBetween,
                align: AlignItems::FlexStart,
                grow: 1.0
            ) {
                walk MODES.iter() with cell {
                    Column (align: AlignItems::Center) {
                        View (
                            width: CELL_W,
                            height: CELL_H,
                            border_radius: 4,
                            direction: FlexDirection::Row
                        ) {
                            View (
                                bg_color: Color::rgb(220, 40, 40),
                                width: CELL_W / 4,
                                height: CELL_H
                            )
                            View (
                                bg_color: Color::rgb(40, 200, 80),
                                width: CELL_W / 4,
                                height: CELL_H
                            )
                            View (
                                bg_color: Color::rgb(60, 110, 230),
                                width: CELL_W / 4,
                                height: CELL_H
                            )
                            View (
                                bg_color: Color::rgb(20, 20, 20),
                                width: CELL_W / 4,
                                height: CELL_H
                            )
                            Image (
                                position: Position::Absolute,
                                left: (CELL_W - FG) / 2,
                                top: (CELL_H - FG) / 2,
                                width: FG,
                                height: FG,
                                src: "thumbs_up",
                                composite: cell.2
                            )
                        }
                        View (text: cell.0, height: 18)
                        View (text: cell.1, height: 16)
                    }
                }
            }
        }
    };
}

#[cfg(feature = "std")]
pub fn setup_app<B, F>(app: &mut App<B, F>, parent: Entity)
where
    B: crate::surface::Surface,
    F: crate::app::RendererFactory<B>,
{
    use crate::app::plugins::{ImageResourcesPlugin, StdInstantClockPlugin};
    app.add_plugin(StdInstantClockPlugin)
        .add_plugin(ImageResourcesPlugin::default());
    app.compose(parent, build_widgets);
}