3 files changed, 42 insertions, 29 deletions
diff --git a/web/examples/tour/Cargo.toml b/web/examples/tour/Cargo.toml
index 15f38fa7..c2db46ec 100644
--- a/web/examples/tour/Cargo.toml
+++ b/web/examples/tour/Cargo.toml
@@ -11,6 +11,7 @@ crate-type = ["cdylib"]
 [dependencies]
 iced_web = { path = "../.." }
 wasm-bindgen = "0.2.50"
+futures = "0.1"
 log = "0.4"
 console_error_panic_hook = "0.1.6"
 console_log = "0.1.2"
diff --git a/web/examples/tour/src/lib.rs b/web/examples/tour/src/lib.rs
index e747a193..30855e8b 100644
--- a/web/examples/tour/src/lib.rs
+++ b/web/examples/tour/src/lib.rs
@@ -1,8 +1,35 @@
+use futures::{future, Future};
+use iced_web::UserInterface;
 use wasm_bindgen::prelude::*;
 
+mod tour;
+
+use tour::Tour;
+
 #[wasm_bindgen(start)]
 pub fn run() {
     console_error_panic_hook::set_once();
     console_log::init_with_level(log::Level::Trace)
         .expect("Initialize logging");
+
+    let tour = Tour::new();
+
+    tour.run();
+}
+
+impl iced_web::UserInterface for Tour {
+    type Message = tour::Message;
+
+    fn update(
+        &mut self,
+        message: tour::Message,
+    ) -> Box<dyn Future<Item = tour::Message, Error = ()>> {
+        self.update(message);
+
+        Box::new(future::err(()))
+    }
+
+    fn view(&mut self) -> iced_web::Element<tour::Message> {
+        self.view()
+    }
 }
diff --git a/web/examples/tour/src/tour.rs b/web/examples/tour/src/tour.rs
index d0be99b0..6c24622e 100644
--- a/web/examples/tour/src/tour.rs
+++ b/web/examples/tour/src/tour.rs
@@ -1,12 +1,8 @@
-use super::widget::{
-    button, slider, Button, Checkbox, Column, Element, Image, Radio, Row,
-    Slider, Text,
+use iced_web::{
+    button, slider, text::HorizontalAlignment, Align, Button, Checkbox, Color,
+    Column, Element, Image, Radio, Row, Slider, Text,
 };
 
-use ggez::graphics::{self, Color, FilterMode, BLACK};
-use ggez::Context;
-use iced::{text::HorizontalAlignment, Align};
-
 pub struct Tour {
     steps: Steps,
     back_button: button::State,
@@ -15,9 +11,9 @@ pub struct Tour {
 }
 
 impl Tour {
-    pub fn new(context: &mut Context) -> Tour {
+    pub fn new() -> Tour {
         Tour {
-            steps: Steps::new(context),
+            steps: Steps::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
             debug: false,
@@ -72,7 +68,7 @@ impl Tour {
             .into();
 
         if self.debug {
-            element.explain(BLACK)
+            element.explain(Color::BLACK)
         } else {
             element
         }
@@ -92,7 +88,7 @@ struct Steps {
 }
 
 impl Steps {
-    fn new(context: &mut Context) -> Steps {
+    fn new() -> Steps {
         Steps {
             steps: vec![
                 Step::Welcome,
@@ -109,19 +105,10 @@ impl Steps {
                     size_slider: slider::State::new(),
                     size: 30,
                     color_sliders: [slider::State::new(); 3],
-                    color: BLACK,
+                    color: Color::BLACK,
                 },
                 Step::Radio { selection: None },
                 Step::Image {
-                    ferris: {
-                        let mut image =
-                            graphics::Image::new(context, "/ferris.png")
-                                .expect("Load ferris image");
-
-                        image.set_filter(FilterMode::Linear);
-
-                        image
-                    },
                     width: 300,
                     slider: slider::State::new(),
                 },
@@ -183,7 +170,6 @@ enum Step {
         selection: Option<Language>,
     },
     Image {
-        ferris: graphics::Image,
         width: u16,
         slider: slider::State,
     },
@@ -273,11 +259,7 @@ impl<'a> Step {
                 color_sliders,
                 color,
             } => Self::text(size_slider, *size, color_sliders, *color).into(),
-            Step::Image {
-                ferris,
-                width,
-                slider,
-            } => Self::image(ferris.clone(), *width, slider).into(),
+            Step::Image { width, slider } => Self::image(*width, slider).into(),
             Step::RowsAndColumns {
                 layout,
                 spacing_slider,
@@ -489,13 +471,16 @@ impl<'a> Step {
     }
 
     fn image(
-        ferris: graphics::Image,
         width: u16,
         slider: &'a mut slider::State,
     ) -> Column<'a, StepMessage> {
         Self::container("Image")
             .push(Text::new("An image that tries to keep its aspect ratio."))
-            .push(Image::new(ferris).width(width).align_self(Align::Center))
+            .push(
+                Image::new("resources/ferris.png")
+                    .width(width)
+                    .align_self(Align::Center),
+            )
             .push(Slider::new(
                 slider,
                 100.0..=500.0,