|
| 1 | +# Examples |
| 2 | + |
| 3 | +There are several different kind of examples, some demonstrate one particular |
| 4 | +Druid concept, some are tools used for testing and debugging, and |
| 5 | +others are more complete examples of how to tie everything together. |
| 6 | +The latter are listed separately under [showcases](##Showcases). |
| 7 | + |
| 8 | +## Anim |
| 9 | +``` |
| 10 | +cargo run --example anim |
| 11 | +``` |
| 12 | +This example shows how to make a simple animation using `Event::AnimFrame`. |
| 13 | + |
| 14 | +## Async Event |
| 15 | +``` |
| 16 | +cargo run --example async_event |
| 17 | +``` |
| 18 | +Demonstrates receiving data from some outside source, and updating the UI in response. This is similar to [blocking function](##Blocking Function) but here the data source is fully independent, and runs for the lifetime of the program. |
| 19 | + |
| 20 | +## Blocking Functions |
| 21 | +``` |
| 22 | +cargo run --example blocking_functions |
| 23 | +``` |
| 24 | +Sometimes you need to fetch some data from disk or from the internet, |
| 25 | +but you should never block the UI thread with long running operations! |
| 26 | +Instead you should run this task in a separate thread, and have it send |
| 27 | +you the data as it arrives. This is very similar to [async event](##Async Event) |
| 28 | + except the event is initiated by the main thread. |
| 29 | + |
| 30 | +## Cursor |
| 31 | +``` |
| 32 | +cargo run --example cursor |
| 33 | +``` |
| 34 | +This example demonstrates how to set the cursor icon, and how to use a custom cursor. |
| 35 | + |
| 36 | +## Custom Widget |
| 37 | +``` |
| 38 | +cargo run --example custom_widget |
| 39 | +``` |
| 40 | +This shows how to use all of the methods on `PaintCtx` used for drawing on a canvas. |
| 41 | +You can use this to draw everything from text to images to curves. |
| 42 | + |
| 43 | +## Either |
| 44 | +``` |
| 45 | +cargo run --example either |
| 46 | +``` |
| 47 | +This example shows how to use the `Either` widget, which shows one of two children based on some predicate. |
| 48 | +This can be useful for loading screens, error messages, and other situations where you want to show one of |
| 49 | +two possible widgets. |
| 50 | + |
| 51 | +## Hello |
| 52 | +``` |
| 53 | +cargo run --example hello |
| 54 | +``` |
| 55 | +This shows some of the basics of druid. If you need a start of how to build an application with a text-box and some labels this is where to start. |
| 56 | + |
| 57 | +## Hello_web |
| 58 | +``` |
| 59 | +cd druid/examples/hello_web |
| 60 | +wasm-pack build --out-dir pkg --out-name hello_web |
| 61 | +``` |
| 62 | +This is an example of how to get almost any druid application can be used on the web. This is just the hello_world example but should work for all of them. |
| 63 | + |
| 64 | +## Identity |
| 65 | +``` |
| 66 | +cargo run --example identity |
| 67 | +``` |
| 68 | +In druid identity is used to send specific widgets commands. Instead of a command going to all the widgets, you can send them to just the one you need. This example has some colorwells and some buttons that interact with them. All of them are identical, except the identity, which makes it possible for the buttons to only affect a single colorwell. |
| 69 | + |
| 70 | +## Invalidation |
| 71 | +``` |
| 72 | +cargo run --example invalidation --features="im" |
| 73 | +``` |
| 74 | +A demonstration how to use debug invalidation regions in your own widgets, including some examples of builtin widgets. |
| 75 | + |
| 76 | +## Layout |
| 77 | +``` |
| 78 | +cargo run --example layout |
| 79 | +``` |
| 80 | +An example of how basic widget composition works in druid. There are no custom widgets just compositions of builtin ones. |
| 81 | + |
| 82 | +## Lens |
| 83 | +``` |
| 84 | +cargo run --example lens |
| 85 | +``` |
| 86 | +Lenses are a core part of druid, they allow you to zoom into a part of the app state. |
| 87 | + |
| 88 | +## List |
| 89 | +``` |
| 90 | +cargo run --example list --features="im" |
| 91 | +``` |
| 92 | +This shows you how you could, for example, add items to lists and delete them. |
| 93 | + |
| 94 | +## Multiple Windows |
| 95 | +``` |
| 96 | +cargo run --example multiwin |
| 97 | +``` |
| 98 | +Having multiple windows is a super nice tool to have when developing applications. This shows you the basic setup you need for a second window. |
| 99 | + |
| 100 | +## Open Save |
| 101 | +``` |
| 102 | +cargo run --example open_save |
| 103 | +``` |
| 104 | +Opening and saving files is crucial for a lot of applications. This shows you how to get opening and saving files working cross platform. |
| 105 | + |
| 106 | +## Panels |
| 107 | +``` |
| 108 | +cargo run --example panels |
| 109 | +``` |
| 110 | +Very similar to [layout](##Layout) but it splits the screen into 2 segments |
| 111 | + |
| 112 | +## Value Formatting |
| 113 | + |
| 114 | +To run this example, make sure you are in `druid/examples/value_formatting` |
| 115 | +And then run `cargo run` |
| 116 | + |
| 117 | +Druid doesnt have numeric specific texboxes, instead you have to parse the input as if it were a numeric value. |
| 118 | +This example shows you how to parse, and validate text input. |
| 119 | + |
| 120 | +## Split |
| 121 | +``` |
| 122 | +cargo run --example split_demo |
| 123 | +``` |
| 124 | + |
| 125 | +The split widget allows you to put multiple widgets next, or on top of each other. |
| 126 | +This also allows the user to resize them. |
| 127 | + |
| 128 | +## Scroll |
| 129 | +``` |
| 130 | +cargo run --example scroll |
| 131 | +``` |
| 132 | +Scrolling is a great way to show more content then can be displayed on the screen at a time. This is an example showing you how to use them. |
| 133 | + |
| 134 | +## Split |
| 135 | +``` |
| 136 | +cargo run --example split_demo |
| 137 | +``` |
| 138 | +An example of how to split a widget in 2 in various ways. This also includes having the user drag the border!! |
| 139 | + |
| 140 | +## Sub Window |
| 141 | +``` |
| 142 | +cargo run --example sub_window |
| 143 | +``` |
| 144 | + |
| 145 | +This shows you how to make a completely new window with shared state. |
| 146 | + |
| 147 | +## Styled_text |
| 148 | +``` |
| 149 | +cargo run --example styled_text |
| 150 | +``` |
| 151 | +Not all text should look the same. You are able to change a lot of things, color, size, and monospace. This example shows how to change these propperties. |
| 152 | + |
| 153 | +## Svg |
| 154 | +``` |
| 155 | +cargo run --example svg --features="svg" |
| 156 | +``` |
| 157 | +This shows you how to display an SVG as a widget. |
| 158 | + |
| 159 | +## Switches |
| 160 | +``` |
| 161 | +cargo run --example switches |
| 162 | +``` |
| 163 | +Switches are useful in many ways, this example shows how to use the druid built-in ones. This includes on/off and up/down for incrementing numeric values. |
| 164 | + |
| 165 | +## Tabs |
| 166 | +``` |
| 167 | +cargo run --example tabs |
| 168 | +``` |
| 169 | +Tabs allow you to seperate different portions of the UI. This example shows you how to use them in druid. similar to [view switcher](##View Switcher) but with with a different purpose. |
| 170 | + |
| 171 | +## Timers |
| 172 | +``` |
| 173 | +cargo run --example timers |
| 174 | +``` |
| 175 | +Timers allow you to send events to your widgets at a certain points inthe future. This example shows how to use them. |
| 176 | + |
| 177 | +## Transparency |
| 178 | +``` |
| 179 | +cargo run --example transparency |
| 180 | +``` |
| 181 | +This shows you how to make the window transparent, so the rest of the desktop shows behind it. |
| 182 | + |
| 183 | +## View Switcher |
| 184 | +``` |
| 185 | +cargo run --example view_switcher |
| 186 | +``` |
| 187 | +Very similar to [tabs](##Tabs) but this allows you to have more control over it. This allows you to switch out widgets on the fly. |
| 188 | + |
| 189 | +# Showcases |
| 190 | + |
| 191 | +## Calc |
| 192 | +``` |
| 193 | +cargo run --example calc |
| 194 | +``` |
| 195 | + |
| 196 | +## Disabled |
| 197 | +``` |
| 198 | +cargo run --example disabled |
| 199 | +``` |
| 200 | + |
| 201 | +This showcases all the widgets that can have disabled input. Disabling a widget is usefull for preventing the user from entering input. |
| 202 | + |
| 203 | +## Event Viewer |
| 204 | +``` |
| 205 | +cargo run --example event_viewer |
| 206 | +``` |
| 207 | + |
| 208 | +Used as a debugging tool, this prints out mouse and keyboard events as they are received by Druid. |
| 209 | + |
| 210 | +## Flex |
| 211 | +``` |
| 212 | +cargo run --example flex |
| 213 | +``` |
| 214 | + |
| 215 | +Flex shows off all the things you can do with flex elements. You can play with all the setings and it will change in real-time. |
| 216 | + |
| 217 | +## Game Of Life |
| 218 | +``` |
| 219 | +cargo run --example game_of_life |
| 220 | +``` |
| 221 | + |
| 222 | +A simple implementation of Conway's game of life. You can change the evolution speed, and pauze so you can take your time making your own creations! |
| 223 | + |
| 224 | +## Image |
| 225 | +``` |
| 226 | +cargo run --example image |
| 227 | +``` |
| 228 | + |
| 229 | +Image shows off all the knobs you can turn on images. You can play with them with real time results, which you to figure out what settings are best for you. |
| 230 | + |
| 231 | +Please note that the image is exported with some kind of interpolation. So even when you turn interpolation off/NearestNeighbor in druid, you will still see this because that's how the image actually looks. |
| 232 | + |
| 233 | +## Scroll Colors |
| 234 | +``` |
| 235 | +cargo run --example scroll_colors |
| 236 | +``` |
| 237 | + |
| 238 | +This is a showcase is scrolling through an image gradient square. The square is divided into smaller squares each with a unique color. There are other ways to to this like one big widget with an image for example. |
| 239 | + |
| 240 | +## Styled Text |
| 241 | +``` |
| 242 | +cargo run --example styled_text |
| 243 | +``` |
| 244 | + |
| 245 | +In druid you can change all kinds of styling aspects of text. This shows off some of them. |
| 246 | + |
| 247 | +## Widget Gallery |
| 248 | +``` |
| 249 | +cargo run --example widget_gallery |
| 250 | +``` |
| 251 | + |
| 252 | +This is a showcase of some simple widgets with their default styling. These are interactive, but you cannot change any of their styling. |
0 commit comments