makepad_example_ui_zoo/
app.rs

1    use makepad_widgets::*;
2    use makepad_platform::live_atomic::*;
3
4    live_design!{
5        use link::theme::*;
6        use link::shaders::*;
7        use link::widgets::*;
8        use makepad_widgets::vectorline::*;
9        use crate::layout_templates::*;
10
11        use crate::tab_button::*;
12        use crate::tab_checkbox::*;
13        // use crate::tab_commandtextinput::*;
14        // use crate::tab_desktopbutton::*;
15        use crate::tab_dropdown::*;
16        use crate::tab_filetree::*;
17        // use crate::tab_foldbutton::*;
18        use crate::tab_html::*;
19        use crate::tab_icon::*;
20        use crate::tab_iconset::*;
21        use crate::tab_image::*;
22        use crate::tab_imageblend::*;
23        use crate::tab_label::*;
24        use crate::tab_layout::*;
25        use crate::tab_linklabel::*;
26        use crate::tab_markdown::*;
27        use crate::tab_pageflip::*;
28        use crate::tab_portallist::*;
29        use crate::tab_pageflip::*;
30        use crate::tab_radiobutton::*;
31        use crate::tab_rotary::*;
32        use crate::tab_rotatedimage::*;
33        use crate::tab_scrollbar::*;
34        use crate::tab_slider::*;
35        use crate::tab_slidesview::*;
36        use crate::tab_textinput::*;
37        use crate::tab_view::*;
38        use crate::tab_widgetsoverview::*;
39
40        UIZooTab = <RectView> {
41            height: Fill, width: Fill
42            flow: Down,
43            padding: 0
44            spacing: 0.
45        }
46
47        App = {{App}} {
48            ui: <Window> {
49                width: Fill, height: Fill,
50                show_bg: true,
51                draw_bg: {
52                    fn pixel(self) -> vec4 {
53                        return (THEME_COLOR_BG_APP);
54                    }
55                }
56
57                caption_bar = {
58                    visible: true,
59                    margin: {left: -100},
60                    caption_label = { label = {text: "Makepad UI Zoo "} }
61                },
62
63                body = <View> {
64                    width: Fill, height: Fill,
65                    flow: Down,
66                    spacing: 0.,
67                    margin: 0.,
68
69                    dock = <Dock> {
70                        height: Fill, width: Fill
71
72                        root = Splitter {
73                            axis: Horizontal,
74                            align: FromA(0.0),
75                            a: tab_set_1,
76                            b: tab_set_2
77                        }
78
79                        tab_set_1 = Tabs {
80                            tabs: [tab_a],
81                            selected: 0
82                        }
83
84                        tab_set_2 = Tabs {
85                            tabs: [
86                                tOverview,
87                                tLayoutDemos,
88                                tButton,
89                                tCheckBox,
90                                // tCommandTextInput,
91                                // tDesktopButton,
92                                tDropDown,
93                                tFiletree,
94                                // tFoldButton,
95                                tHTML,
96                                tIcon,
97                                tIconSet,
98                                tImage,
99                                tImageBlend,
100                                tLabel,
101                                tLinkLabel,
102                                tMarkdown,
103                                tPageFlip,
104                                tPortalList,
105                                tRadioButton,
106                                tRotary,
107                                tRotatedImage,
108                                tScrollbar,
109                                tSlider,
110                                tSlidesView,
111                                tTextInput,
112                                tView,
113
114                            ],
115                            selected: 0
116                        }
117
118                        tOverview = Tab { name: "Intro", template: PermanentTab, kind: TabOverview }
119                        tLayoutDemos = Tab { name: "Layout Demos", template: PermanentTab, kind: TabLayoutDemos }
120                        tButton = Tab { name: "Button", template: PermanentTab, kind: TabButton }
121                        tCheckBox = Tab { name: "CheckBox", template: PermanentTab, kind: TabCheckBox }
122                        // tCommandTextInput = Tab { name: "CommandTextInput", template: PermanentTab, kind: TabCommandTextInput }
123                        // tDesktopButton = Tab { name: "DesktopButton", template: PermanentTab, kind: TabDesktopButton }
124                        tDropDown = Tab { name: "DropDown & PopupMenu", template: PermanentTab, kind: TabDropDown }
125                        tFiletree = Tab { name: "FileTree", template: PermanentTab, kind: TabFiletree }
126                        // tFoldButton = Tab { name: "FoldButton", template: PermanentTab, kind: TabFoldButton }
127                        tHTML = Tab { name: "HTML", template: PermanentTab, kind: TabHTML }
128                        tIcon = Tab { name: "Icon", template: PermanentTab, kind: TabIcon }
129                        tIconSet = Tab { name: "IconSet", template: PermanentTab, kind: TabIconSet }
130                        tImage = Tab { name: "Image", template: PermanentTab, kind: TabImage }
131                        tImageBlend = Tab { name: "ImageBlend", template: PermanentTab, kind: TabImageBlend }
132                        tLabel = Tab { name: "Label", template: PermanentTab, kind: TabLabel }
133                        tLinkLabel = Tab { name: "LinkLabel", template: PermanentTab, kind: TabLinkLabel }
134                        tMarkdown = Tab { name: "Markdown", template: PermanentTab, kind: TabMarkdown }
135                        tPageFlip = Tab { name: "PageFlip", template: PermanentTab, kind: TabPageFlip }
136                        tPortalList = Tab { name: "PortalList", template: PermanentTab, kind: TabPortalList }
137                        tRadioButton = Tab { name: "RadioButton", template: PermanentTab, kind: TabRadioButton }
138                        tRotary = Tab { name: "Rotary", template: PermanentTab, kind: TabRotary }
139                        tRotatedImage = Tab { name: "RotatedImage", template: PermanentTab, kind: TabRotatedImage }
140                        tScrollbar = Tab { name: "Scrollbar", template: PermanentTab, kind: TabScrollbar }
141                        tSlider = Tab { name: "Slider", template: PermanentTab, kind: TabSlider }
142                        tSlidesView = Tab { name: "SlidesView", template: PermanentTab, kind: TabSlidesView }
143                        tTextInput = Tab { name: "TextInput", template: PermanentTab, kind: TabTextInput }
144                        tView = Tab { name: "View", template: PermanentTab, kind: TabView }
145                        
146                        TabOverview = <UIZooTab> { <WidgetsOverview> {} }
147                        TabLayoutDemos = <UIZooTab> { <DemoLayout> {} }
148                        TabButton = <UIZooTab> { <DemoButton> {} }
149                        TabCheckBox = <UIZooTab> { <DemoCheckBox> {} }
150                        // TabCommandTextInput = <UIZooTab> { <DemoCommandTextInput> {} }
151                        // TabDesktopButton = <UIZooTab> { <DemoDesktopButton> {} }
152                        TabDropDown = <UIZooTab> { <DemoDropdown> {} }
153                        TabFiletree = <UIZooTab> { <DemoFT> {} }
154                        // TabFoldButton = <UIZooTab> { <DemoFoldButton> {} }
155                        TabHTML = <UIZooTab> { <DemoHtml> {} }
156                        TabIcon = <UIZooTab> { <DemoIcon> {} }
157                        TabIconSet = <UIZooTab> { <DemoIconSet> {} }
158                        TabImage = <UIZooTab> { <DemoImage> {} }
159                        TabImageBlend = <UIZooTab> { <DemoImageBlend> {} }
160                        TabLabel = <UIZooTab> { <DemoLabel> {} }
161                        TabLinkLabel = <UIZooTab> { <DemoLinkLabel> {} } 
162                        TabMarkdown = <UIZooTab> { <DemoMarkdown> {} } 
163                        TabPageFlip = <UIZooTab> { <DemoPageFlip> {} } 
164                        TabPortalList = <UIZooTab> { <DemoPortalList> {} } 
165                        TabRadioButton = <UIZooTab> { <DemoRadioButton> {} }
166                        TabRotary = <UIZooTab> { <DemoRotary> {} }
167                        TabRotatedImage = <UIZooTab> { <DemoRotatedImage> {} }
168                        TabScrollbar = <UIZooTab> { <DemoScrollBar> {} }
169                        TabSlider = <UIZooTab> { <DemoSlider> {} }
170                        TabSlidesView = <UIZooTab> { <DemoSlidesView> {} }
171                        TabTextInput = <UIZooTab> { <DemoTextInput> {} }
172                        TabView = <UIZooTab> { <DemoView> {} }
173
174
175
176                    }
177
178                    <View> {
179                        width: Fill, height: Fit,
180                        flow: Right,
181                        spacing: (THEME_SPACE_2)
182                        align: { x: 0.0, y: 0.0 }
183                        padding: <THEME_MSPACE_2> {}
184                        margin: { bottom: (THEME_SPACE_1) }
185
186                        show_bg: true,
187
188                        draw_bg: {
189                            uniform color_dither: 1.0
190                            uniform border_radius: 0.
191                            uniform border_size: (THEME_BEVELING)
192                            uniform color_1: (THEME_COLOR_BG_APP * 0.9);
193                            uniform color_2: #282828;
194
195                            fn pixel(self) -> vec4 {
196                                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
197                                let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
198
199                                sdf.rect(
200                                    -2.,
201                                    1.,
202                                    self.rect_size.x + 2.,
203                                    self.rect_size.y + 30.
204                                )
205
206                                sdf.fill_keep((THEME_COLOR_U_1));
207
208                                sdf.stroke(
209                                    mix((THEME_COLOR_BEVEL_OUTSET_1), #fff0, pow(self.pos.y, 0.1)), self.border_size
210                                )
211                                return sdf.result
212                            }
213                        }
214
215                        theme_contrast = <Slider> { text: "Contrast", default: 1.0, min: 0.5 max: 2.0 }
216                        <View> {
217                            flow: Down
218                            spacing: 0.
219                            <Label> { margin: {top: (THEME_SPACE_1)}, padding: 0., width: Fit, text: "Tint Color"}
220                            theme_tint_color = <TextInput> { empty_text: "Hex color", text: "00f" }
221                        }
222                        theme_tint_amount = <Slider> { text: "Tint Amount", default: 0.0, min:0.0 max: 1.0  }
223                        <Vr> {}
224                        <Pbold> {
225                            width: Fit,
226                            text: "Font"
227                        }
228                        theme_font_size = <Slider> { text: "Size", default: 10.0, min: 3.0 max: 12.0  }
229                        theme_font_size_contrast = <Slider> { text: "Size Contrast", default: 2.5, min:1.0 max: 5.0  }
230                        <Vr> {}
231                        theme_bevel = <Slider> { text: "Bevel", default: 0.75, min:0.0 max: 1.5   }
232                        theme_rounding = <Slider> { text: "Rounding", default: 2.5, min:1.0 max: 5.0   }
233                        theme_space = <Slider> { text: "Space", default: 6.0, min:1.0 max: 10.0   }
234                        /*
235                        reload_button = <ButtonFlatterIcon> {
236                            height: Fill, width: Fit,
237                            margin: { right: (THEME_SPACE_1) }
238                            icon_walk: { width: 12.5, height: Fit, }
239                            draw_icon: {
240                                color: (THEME_COLOR_MAKEPAD),
241                                color_hover: (THEME_COLOR_LABEL_INNER_HOVER),
242                                color_down: (THEME_COLOR_LABEL_INNER_DOWN),
243                                svg_file: dep("crate://self/resources/Icon_Reload.svg"),
244                            }
245                        }*/
246                    }
247
248
249                }
250            }
251        }
252    }
253
254    app_main!(App);
255
256    #[derive(Live, LiveHook, PartialEq, LiveAtomic, Debug, LiveRead)]
257    pub enum DropDownEnum {
258        #[pick]
259        ValueOne,
260        ValueTwo,
261        Third,
262        FourthValue,
263        OptionE,
264        Hexagons,
265    }
266
267    #[derive(Live, LiveHook, LiveRead, LiveRegister)]
268    pub struct DataBindingsForApp {
269        #[live] fnumber: f32,
270        #[live] inumber: i32,
271        #[live] dropdown: DropDownEnum,
272        #[live] dropdown_customized: DropDownEnum,
273        #[live] dropdown_below: DropDownEnum,
274        #[live] dropdown_flat: DropDownEnum,
275        #[live] dropdown_flat_below: DropDownEnum,
276        #[live] dropdown_flatter: DropDownEnum,
277        #[live] dropdown_flatter_below: DropDownEnum,
278        #[live] dropdown_gradient_x: DropDownEnum,
279        #[live] dropdown_gradient_x_below: DropDownEnum,
280        #[live] dropdown_gradient_y: DropDownEnum,
281        #[live] dropdown_gradient_y_below: DropDownEnum,
282    }
283    #[derive(Live, LiveHook)]
284    pub struct App {
285        #[live] ui: WidgetRef,
286        #[rust] counter: usize,
287        #[rust(DataBindingsForApp::new(cx))] bindings: DataBindingsForApp
288    }
289
290impl LiveRegister for App {
291        fn live_register(cx: &mut Cx) { 
292            crate::makepad_widgets::live_design(cx);
293            cx.link(live_id!(theme), live_id!(theme_desktop_dark));
294
295            crate::layout_templates::live_design(cx);
296            crate::demofiletree::live_design(cx);
297
298            crate::tab_button::live_design(cx);
299            crate::tab_checkbox::live_design(cx);
300            // crate::tab_commandtextinput::live_design(cx);
301            // crate::tab_desktopbutton::live_design(cx);
302            crate::tab_dropdown::live_design(cx);
303            crate::tab_filetree::live_design(cx);
304            // crate::tab_foldbutton::live_design(cx);
305            crate::tab_html::live_design(cx);
306            crate::tab_icon::live_design(cx);
307            crate::tab_iconset::live_design(cx);
308            crate::tab_image::live_design(cx);
309            crate::tab_imageblend::live_design(cx);
310            crate::tab_label::live_design(cx);
311            crate::tab_layout::live_design(cx);
312            crate::tab_linklabel::live_design(cx);
313            crate::tab_markdown::live_design(cx);
314            crate::tab_pageflip::live_design(cx);
315            crate::tab_portallist::live_design(cx);
316            crate::tab_radiobutton::live_design(cx);
317            crate::tab_rotary::live_design(cx);
318            crate::tab_rotatedimage::live_design(cx);
319            crate::tab_scrollbar::live_design(cx);
320            crate::tab_slider::live_design(cx);
321            crate::tab_slidesview::live_design(cx);
322            crate::tab_textinput::live_design(cx);
323            crate::tab_view::live_design(cx);
324            crate::tab_widgetsoverview::live_design(cx);
325          }
326    }
327
328
329    impl MatchEvent for App{
330        fn handle_actions(&mut self, cx: &mut Cx, actions:&Actions) {
331            let ui = self.ui.clone();
332
333            ui.radio_button_set(ids!(radios_demo_1.radio1, radios_demo_1.radio2, radios_demo_1.radio3, radios_demo_1.radio4)).selected(cx, actions);
334            ui.radio_button_set(ids!(radios_demo_2.radio1, radios_demo_2.radio2, radios_demo_2.radio3, radios_demo_2.radio4)).selected(cx, actions);
335            ui.radio_button_set(ids!(radios_demo_3.radio1, radios_demo_3.radio2, radios_demo_3.radio3, radios_demo_3.radio4)).selected(cx, actions);
336            ui.radio_button_set(ids!(radios_demo_4.radio1, radios_demo_4.radio2, radios_demo_4.radio3, radios_demo_4.radio4)).selected(cx, actions);
337            ui.radio_button_set(ids!(radios_demo_5.radio1, radios_demo_5.radio2, radios_demo_5.radio3, radios_demo_5.radio4)).selected(cx, actions);
338            ui.radio_button_set(ids!(radios_demo_6.radio1, radios_demo_6.radio2, radios_demo_6.radio3, radios_demo_6.radio4)).selected(cx, actions);
339            ui.radio_button_set(ids!(radios_demo_7.radio1, radios_demo_7.radio2, radios_demo_7.radio3, radios_demo_7.radio4)).selected(cx, actions);
340            ui.radio_button_set(ids!(radios_demo_8.radio1, radios_demo_8.radio2)).selected(cx, actions);
341            ui.radio_button_set(ids!(radios_demo_9.radio1, radios_demo_9.radio2, radios_demo_9.radio3, radios_demo_9.radio4)).selected(cx, actions);
342            ui.radio_button_set(ids!(radios_demo_10.radio1, radios_demo_10.radio2, radios_demo_10.radio3, radios_demo_10.radio4)).selected(cx, actions);
343            ui.radio_button_set(ids!(radios_demo_11.radio1, radios_demo_11.radio2, radios_demo_11.radio3, radios_demo_11.radio4)).selected(cx, actions);
344            ui.radio_button_set(ids!(radios_demo_12.radio1, radios_demo_12.radio2, radios_demo_12.radio3, radios_demo_12.radio4)).selected(cx, actions);
345            ui.radio_button_set(ids!(radios_demo_13.radio1, radios_demo_13.radio2, radios_demo_13.radio3, radios_demo_13.radio4)).selected(cx, actions);
346            ui.radio_button_set(ids!(radios_demo_14.radio1, radios_demo_14.radio2, radios_demo_14.radio3, radios_demo_14.radio4)).selected(cx, actions);
347            ui.radio_button_set(ids!(radios_demo_15.radio1, radios_demo_15.radio2, radios_demo_15.radio3, radios_demo_15.radio4)).selected(cx, actions);
348            ui.radio_button_set(ids!(radios_demo_16.radio1, radios_demo_16.radio2, radios_demo_16.radio3, radios_demo_16.radio4)).selected(cx, actions);
349            ui.radio_button_set(ids!(radios_demo_17.radio1, radios_demo_17.radio2, radios_demo_17.radio3, radios_demo_17.radio4)).selected(cx, actions);
350            ui.radio_button_set(ids!(radios_demo_18.radio1, radios_demo_18.radio2, radios_demo_18.radio3, radios_demo_18.radio4)).selected(cx, actions);
351            ui.radio_button_set(ids!(radios_demo_19.radio1, radios_demo_19.radio2, radios_demo_19.radio3, radios_demo_19.radio4)).selected(cx, actions);
352            ui.radio_button_set(ids!(radios_demo_20.radio1, radios_demo_20.radio2, radios_demo_20.radio3, radios_demo_20.radio4)).selected(cx, actions);
353
354            if let Some(txt) = self.ui.text_input(id!(simpletextinput)).changed(&actions){
355                log!("TEXTBOX CHANGED {}", self.counter);
356                self.counter += 1;
357                let lbl = self.ui.label(id!(simpletextinput_outputbox));
358                lbl.set_text(cx,&format!("{} {}" , self.counter, txt));
359            }
360            
361            for slider in [
362                (id!(theme_contrast), live_id!(THEME_COLOR_CONTRAST)),
363                (id!(theme_tint_amount), live_id!(THEME_COLOR_TINT_AMOUNT)),
364                (id!(theme_font_size), live_id!(THEME_FONT_SIZE_BASE)),
365                (id!(theme_font_size_contrast), live_id!(THEME_FONT_SIZE_CONTRAST)),
366                (id!(theme_bevel), live_id!(THEME_BEVELING)),
367                (id!(theme_rounding), live_id!(THEME_CORNER_RADIUS)),
368                (id!(theme_space), live_id!(THEME_SPACE_FACTOR)),
369            ]{
370                if let Some(value) = self.ui.slider(slider.0).end_slide(&actions){
371                    cx.set_dsl_value(
372                        live_id!(makepad_widgets),
373                        live_id!(theme_desktop_dark),
374                        slider.1,
375                        LiveValue::Float64(value)
376                    );
377                    cx.reload_ui_dsl(); 
378                }
379            }
380            
381            use makepad_platform::makepad_live_tokenizer::colorhex::hex_bytes_to_u32;
382            
383            if let Some(txt) = self.ui.text_input(id!(theme_tint_color)).changed(&actions){
384                cx.set_dsl_value(
385                    live_id!(makepad_widgets),
386                    live_id!(theme_desktop_dark),
387                    live_id!(THEME_COLOR_TINT),
388                    LiveValue::Color(hex_bytes_to_u32(&txt.into_bytes()).unwrap_or(0x777777ff))
389                );
390                cx.reload_ui_dsl(); 
391            }
392
393            if self.ui.button(id!(basicbutton)).clicked(&actions) {
394                log!("BASIC BUTTON CLICKED {}", self.counter);
395                self.counter += 1;
396                let btn = self.ui.button(id!(basicbutton));
397                btn.set_text(cx,&format!("Clicky clicky! {}", self.counter));
398            }
399
400            if self.ui.button(id!(blendbutton)).clicked(&actions) {
401                self.ui.image_blend(id!(blendimage)).switch_image(cx);
402            }
403
404            if self.ui.button(id!(pageflipbutton_a)).clicked(&actions) {
405                self.ui.page_flip(id!(page_flip)).set_active_page(cx, live_id!(page_a));
406            }
407
408            if self.ui.button(id!(pageflipbutton_b)).clicked(&actions) {
409                self.ui.page_flip(id!(page_flip)).set_active_page(cx, live_id!(page_b));
410            }
411
412            if self.ui.button(id!(pageflipbutton_c)).clicked(&actions) {
413                self.ui.page_flip(id!(page_flip)).set_active_page(cx, live_id!(page_c));
414            }
415
416            if self.ui.button(id!(styledbutton)).clicked(&actions) {
417                log!("STYLED BUTTON CLICKED {}", self.counter);
418                self.counter += 1;
419                let btn = self.ui.button(id!(styledbutton));
420                btn.set_text(cx,&format!("Styled button clicked: {}", self.counter));
421            }
422
423            if self.ui.button(id!(find)).clicked(&actions) {
424                
425            }
426
427            if self.ui.button(id!(iconbutton)).clicked(&actions) {
428                log!("ICON BUTTON CLICKED {}", self.counter);
429                self.counter += 1;
430                let btn = self.ui.button(id!(iconbutton));
431                btn.set_text(cx,&format!("Icon button clicked: {}", self.counter));
432            }
433
434
435            if let Some(check) = self.ui.check_box(id!(simplecheckbox)).changed(actions) {
436                log!("CHECK BUTTON CLICKED {} {}", self.counter, check);
437                self.counter += 1;
438                let lbl = self.ui.label(id!(simplecheckbox_output));
439                lbl.set_text(cx,&format!("{} {}" , self.counter, check));
440            }
441
442        let mut db = DataBindingStore::new();
443        db.data_bind(cx, actions, &self.ui, Self::data_bind);
444        self.bindings.apply_over(cx, &db.nodes);
445
446    }
447
448    fn handle_startup(&mut self, cx: &mut Cx) {
449        let ui = self.ui.clone();
450        let db = DataBindingStore::from_nodes(self.bindings.live_read());
451        Self::data_bind(db.data_to_widgets(cx, &ui));
452    }
453}
454
455impl AppMain for App {
456    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
457        self.match_event(cx, event);
458        self.ui.handle_event(cx, event, &mut Scope::empty());
459    }
460}
461
462impl App{
463    pub fn data_bind(mut db: DataBindingMap) {
464        db.bind(id!(dropdown), ids!(dropdown));
465        db.bind(id!(dropdown_disabled), ids!(dropdown_disabled));
466        db.bind(id!(dropdown_demo), ids!(dropdown_demo));
467        db.bind(id!(dropdown_flat), ids!(dropdown_flat));
468        db.bind(id!(dropdown_flatter), ids!(dropdown_flatter));
469        db.bind(id!(dropdown_gradient_x), ids!(dropdown_gradient_x));
470        db.bind(id!(dropdown_gradient_y), ids!(dropdown_gradient_y));
471        db.bind(id!(dropdown_custom), ids!(dropdown_custom));
472    }
473}
makepad_example_ui_zoo/app.rs

makepad_example_ui_zoo/
app.rs
