Update examples README

This commit is contained in:
Héctor Ramón Jiménez 2019-11-20 10:54:40 +01:00
parent 409b2db994
commit 08aa862a42

View File

@ -4,29 +4,17 @@ you want to learn about a specific release, check out [the release list].
[the release list]: https://github.com/hecrj/iced/releases [the release list]: https://github.com/hecrj/iced/releases
## [Tour](tour.rs) ## [Tour](tour.rs)
A simple UI tour showcasing different widgets that can be built using Iced.
The example can run both on native and web platforms, using the same GUI code! A simple UI tour that can run both on native platforms and the web! It showcases different widgets that can be built using Iced.
[![Tour - Iced][gui_gif]][gui_gfycat] The __[`tour`]__ file contains all the code of the example! All the cross-platform GUI is defined in terms of __state__, __messages__, __update logic__ and __view logic__.
[gui_gif]: https://thumbs.gfycat.com/VeneratedSourAurochs-small.gif <div align="center">
[gui_gfycat]: https://gfycat.com/veneratedsouraurochs <a href="https://gfycat.com/politeadorableiberianmole">
<img src="https://thumbs.gfycat.com/PoliteAdorableIberianmole-small.gif">
On native, the example uses: </a>
- [`iced_winit`], as a bridge between [`iced_native`] and [`winit`]. </div>
- [`iced_wgpu`], a WIP Iced renderer built on top of [`wgpu`] and supporting
Vulkan, Metal, D3D11, and D3D12 (OpenGL and WebGL soon!).
The web version uses [`iced_web`], which is still a work in progress. In
particular, the styling of elements is not finished yet (text color, alignment,
sizing, etc).
The __[`tour`]__ file contains all the code of the example! All the
cross-platform GUI is defined in terms of __state__, __messages__,
__update logic__ and __view logic__.
[`tour`]: tour.rs [`tour`]: tour.rs
[`iced_winit`]: ../winit [`iced_winit`]: ../winit
@ -36,42 +24,49 @@ __update logic__ and __view logic__.
[`winit`]: https://github.com/rust-windowing/winit [`winit`]: https://github.com/rust-windowing/winit
[`wgpu`]: https://github.com/gfx-rs/wgpu-rs [`wgpu`]: https://github.com/gfx-rs/wgpu-rs
#### Running the native version You can run the native version with `cargo run`:
Use [Cargo](https://doc.rust-lang.org/cargo/reference/manifest.html#examples)
to run the example:
``` ```
cargo run --example tour cargo run --example tour
``` ```
#### Running the web version The web version can be run by following [the usage instructions of `iced_web`] or by accessing [iced.rs](https://iced.rs/)!
Build using the `wasm32-unknown-unknown` target and use the [`wasm-bindgen`] CLI
to generate appropriate bindings in a `tour` directory.
[the usage instructions of `iced_web`]: ../web#usage
## [Todos](todos.rs)
A simple todos tracker inspired by [TodoMVC]. It showcases dynamic layout, text input, checkboxes, scrollables, icons, and async actions! It automatically saves your tasks in the background, even if you did not finish typing them.
All the example code is located in the __[`todos`]__ file.
<div align="center">
<a href="https://gfycat.com/littlesanehalicore">
<img src="https://thumbs.gfycat.com/LittleSaneHalicore-small.gif" height="400px">
</a>
</div>
You can run the native version with `cargo run`:
``` ```
cd examples cargo run --example todos
cargo build --example tour --target wasm32-unknown-unknown
wasm-bindgen ../target/wasm32-unknown-unknown/debug/examples/tour.wasm --out-dir tour --web
``` ```
We have not yet implemented a `LocalStorage` version of the auto-save feature. Therefore, it does not work on web _yet_!
Finally, serve the `examples` directory using an HTTP server and access the [`todos`]: todos.rs
`tour.html` file. [TodoMVC]: http://todomvc.com/
[`wasm-bindgen`]: https://github.com/rustwasm/wasm-bindgen
## [Coffee] ## [Coffee]
Since [Iced was born in May], it has been powering the user interfaces in Since [Iced was born in May], it has been powering the user interfaces in
[Coffee], an experimental 2D game engine. [Coffee], an experimental 2D game engine.
If you want to give Iced a try without having to write your own renderer,
the __[`ui` module]__ in [Coffee] is probably your best choice as of now.
[![Tour - Coffee][coffee_gui_gif]][coffee_gui_gfycat] <div align="center">
<a href="https://gfycat.com/gloomyweakhammerheadshark">
<img src="https://thumbs.gfycat.com/GloomyWeakHammerheadshark-small.gif">
</a>
</div>
[Iced was born in May]: https://github.com/hecrj/coffee/pull/35 [Iced was born in May]: https://github.com/hecrj/coffee/pull/35
[`ui` module]: https://docs.rs/coffee/0.3.2/coffee/ui/index.html [`ui` module]: https://docs.rs/coffee/0.3.2/coffee/ui/index.html
[Coffee]: https://github.com/hecrj/coffee [Coffee]: https://github.com/hecrj/coffee
[coffee_gui_gif]: https://thumbs.gfycat.com/GloomyWeakHammerheadshark-small.gif
[coffee_gui_gfycat]: https://gfycat.com/gloomyweakhammerheadshark