dioxus-tui 0.4.3

TUI-based renderer for Dioxus
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

use dioxus::{events::MouseData, prelude::*};
use dioxus_core::Event;
use std::convert::TryInto;
use std::fmt::Write;
use std::rc::Rc;

fn main() {
    dioxus_tui::launch(app);
}

fn app(cx: Scope) -> Element {
    fn to_str(c: &[i32; 3]) -> String {
        let mut result = String::new();
        result += "#";
        for c in c.iter() {
            write!(result, "{c:02X?}").unwrap();
        }
        result
    }

    fn get_brightness(m: &Rc<MouseData>) -> i32 {
        let b: i32 = m.held_buttons().len().try_into().unwrap();
        127 * b
    }

    let q1_color = use_state(cx, || [200; 3]);
    let q2_color = use_state(cx, || [200; 3]);
    let q3_color = use_state(cx, || [200; 3]);
    let q4_color = use_state(cx, || [200; 3]);

    let q1_color_str = to_str(q1_color);
    let q2_color_str = to_str(q2_color);
    let q3_color_str = to_str(q3_color);
    let q4_color_str = to_str(q4_color);

    let page_coordinates = use_state(cx, || "".to_string());
    let element_coordinates = use_state(cx, || "".to_string());
    let buttons = use_state(cx, || "".to_string());
    let modifiers = use_state(cx, || "".to_string());

    let update_data = move |event: Event<MouseData>| {
        let mouse_data = event.inner();

        page_coordinates.set(format!("{:?}", mouse_data.page_coordinates()));
        element_coordinates.set(format!("{:?}", mouse_data.element_coordinates()));

        // Note: client coordinates are also available, but they would be the same as the page coordinates in this example, because there is no scrolling.
        // There are also screen coordinates, but they are currently the same as client coordinates due to technical limitations

        buttons.set(format!("{:?}", mouse_data.held_buttons()));
        modifiers.set(format!("{:?}", mouse_data.modifiers()));
    };

    cx.render(rsx! {
        div {
            width: "100%",
            height: "100%",
            flex_direction: "column",

            div {
                width: "100%",
                height: "50%",
                flex_direction: "row",
                div {
                    border_width: "1px",
                    width: "50%",
                    height: "100%",
                    justify_content: "center",
                    align_items: "center",
                    background_color: "{q1_color_str}",
                    onmouseenter: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
                    onmousedown: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
                    onmouseup: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
                    onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta().strip_units().y) as i32, 0, 0]),
                    onmouseleave: move |_| q1_color.set([200; 3]),
                    onmousemove: update_data,
                    "click me"
                }
                div {
                    width: "50%",
                    height: "100%",
                    justify_content: "center",
                    align_items: "center",
                    background_color: "{q2_color_str}",
                    onmouseenter: move |m| q2_color.set([get_brightness(m.inner()); 3]),
                    onmousedown: move |m| q2_color.set([get_brightness(m.inner()); 3]),
                    onmouseup: move |m| q2_color.set([get_brightness(m.inner()); 3]),
                    onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta().strip_units().y) as i32;3]),
                    onmouseleave: move |_| q2_color.set([200; 3]),
                    onmousemove: update_data,
                    "click me"
                }
            }

            div {
                width: "100%",
                height: "50%",
                flex_direction: "row",
                div {
                    width: "50%",
                    height: "100%",
                    justify_content: "center",
                    align_items: "center",
                    background_color: "{q3_color_str}",
                    onmouseenter: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
                    onmousedown: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
                    onmouseup: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
                    onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta().strip_units().y) as i32, 0]),
                    onmouseleave: move |_| q3_color.set([200; 3]),
                    onmousemove: update_data,
                    "click me"
                }
                div {
                    width: "50%",
                    height: "100%",
                    justify_content: "center",
                    align_items: "center",
                    background_color: "{q4_color_str}",
                    onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
                    onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
                    onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
                    onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta().strip_units().y) as i32]),
                    onmouseleave: move |_| q4_color.set([200; 3]),
                    onmousemove: update_data,
                    "click me"
                }
            },
            div {"Page coordinates: {page_coordinates}"},
            div {"Element coordinates: {element_coordinates}"},
            div {"Buttons: {buttons}"},
            div {"Modifiers: {modifiers}"},
        }
    })
}