update documentation (#252)

* fix documenter script

* update docs and notebook

.travis.yml

@@ -17,4 +17,4 @@ notifications:
 #   - julia -e 'cov=(VERSION < v"0.5-" || !is_apple() || VERSION >= v"0.6-"); Pkg.test("Interact"; coverage=cov)'
 after_success:
   - julia --color=yes -e 'import Pkg; Pkg.add("Coverage"); using Coverage; Codecov.submit(Codecov.process_folder())'
-  - julia -e 'import Pkg; Pkg.add("Documenter", "Literate"); include(joinpath("docs", "make.jl"))'
+  - julia -e 'import Pkg; Pkg.add("Documenter"); Pkg.add("Literate"); include(joinpath("docs", "make.jl"))'

doc/notebooks/tutorial.ipynb

@@ -275,13 +275,15 @@
     "import Colors\n",
     "using Plots\n",
     "\n",
-    "@widget wdg function mycolorpicker()\n",
-    "    :r = slider(0:255, label = \"red\")\n",
-    "    :g = slider(0:255, label = \"green\")\n",
-    "    :b = slider(0:255, label = \"blue\")\n",
-    "    @output! wdg Colors.RGB($(:r)/255, $(:g)/255, $(:b)/255)\n",
-    "    @display! wdg plot(sin, color = $(_.output)) ## choose how to display the output, optional\n",
-    "    @layout! wdg hbox(_.display, vbox(:r, :g, :b)) ## custom layout: by default things are stacked vertically\n",
+    "function mycolorpicker()\n",
+    "    r = slider(0:255, label = \"red\")\n",
+    "    g = slider(0:255, label = \"green\")\n",
+    "    b = slider(0:255, label = \"blue\")\n",
+    "    output = Interact.@map Colors.RGB(&r/255, &g/255, &b/255)\n",
+    "    plt = Interact.@map plot(sin, color = &output)\n",
+    "    wdg = Widget{:mycolorpicker}([\"r\" => r, \"g\" => g, \"b\" => b], output = output)\n",
+    "    @layout! wdg hbox(plt, vbox(:r, :g, :b))\n",
+    "    wdg ## custom layout: by default things are stacked vertically\n",
     "end"
    ],
    "metadata": {},
@@ -308,8 +310,8 @@
    "outputs": [],
    "cell_type": "markdown",
    "source": [
-    "Note the `$(:r)` syntax: it means automatically update the widget as soon as the\n",
-    "slider changes value. See `Widgets.@map` for more details.\n",
+    "Note the `&r` syntax: it means automatically update the widget as soon as the\n",
+    "slider changes value. See `Interact.@map` for more details.\n",
     "If instead we wanted to only update the plot when a button is pressed we would do:"
    ],
    "metadata": {}
@@ -318,14 +320,15 @@
    "outputs": [],
    "cell_type": "code",
    "source": [
-    "@widget wdg function mycolorpicker()\n",
-    "    :r = slider(0:255, label = \"red\")\n",
-    "    :g = slider(0:255, label = \"green\")\n",
-    "    :b = slider(0:255, label = \"blue\")\n",
-    "    :update = button(\"Update plot\")\n",
-    "    @output! wdg ($(:update); Colors.RGB(:r[]/255, :g[]/255, :b[]/255))\n",
-    "    @display! wdg plot(sin, color = $(_.output)) ## choose how to display the output, optional\n",
-    "    @layout! wdg hbox(_.display, vbox(:r, :g, :b, :update)) ## custom layout: by default things are stacked vertically\n",
+    "function mycolorpicker()\n",
+    "    r = slider(0:255, label = \"red\")\n",
+    "    g = slider(0:255, label = \"green\")\n",
+    "    b = slider(0:255, label = \"blue\")\n",
+    "    update = button(\"Update plot\")\n",
+    "    output = Interact.@map (&update; Colors.RGB(r[]/255, g[]/255, b[]/255))\n",
+    "    plt = Interact.@map plot(sin, color = &output)\n",
+    "    wdg = Widget{:mycolorpicker}([\"r\" => r, \"g\" => g, \"b\" => b, \"update\" => update], output = output)\n",
+    "    @layout! wdg hbox(plt, vbox(:r, :g, :b, :update)) ## custom layout: by default things are stacked vertically\n",
     "end"
    ],
    "metadata": {},
@@ -581,11 +584,11 @@
    "file_extension": ".jl",
    "mimetype": "application/julia",
    "name": "julia",
-   "version": "0.6.3"
+   "version": "1.0.0"
   },
   "kernelspec": {
-   "name": "julia-0.6",
-   "display_name": "Julia 0.6.3",
+   "name": "julia-1.0",
+   "display_name": "Julia 1.0.0",
    "language": "julia"
   }
  },

docs/src/custom_widgets.md

@@ -1,6 +1,6 @@
 # Custom widgets
 
-Besides the standard widgets, Interact provides a framework to define custom GUIs. This is currently possible with two approaches, the full featured [`@widget`](@ref) macro and the simple to use but more basic [`@manipulate`](@ref) macro.
+Besides the standard widgets, Interact provides a framework to define custom GUIs. This is currently possible with two approaches, the full featured `Widget` type and the simple to use but more basic [`@manipulate`](@ref) macro.
 
 ## The Widget type
 
@@ -10,7 +10,7 @@ For example:
 
 ```julia
 d = OrderedDict(:label => "My label", :button => button("My button"))
-w = Interact.Widget{:mywidget}(d)
+w = Widget{:mywidget}(d)
 ```
 
 Children can be accessed and modified using `getindex` and `setindex!` on the `Widget` object:
@@ -34,6 +34,11 @@ Finally the [`@layout!`](@ref) macro allows us to set the layout of the widget:
 @layout! w hbox(vbox(:label, :button), observe(_)) # observe(_) refers to the output of the widget
 ```
 
+```@docs
+@layout!
+Interact.@layout
+```
+
 ## Auxiliary functions
 
 Some auxiliary functions are provided to make working with `Observables` easier in the recipe process:

docs/src/tutorial.jl

@@ -85,28 +85,31 @@ observe(s)[]
 import Colors
 using Plots
 
-@widget wdg function mycolorpicker()
-    :r = slider(0:255, label = "red")
-    :g = slider(0:255, label = "green")
-    :b = slider(0:255, label = "blue")
-    @output! wdg Colors.RGB($(:r)/255, $(:g)/255, $(:b)/255)
-    @display! wdg plot(sin, color = $(_.output)) ## choose how to display the output, optional
-    @layout! wdg hbox(_.display, vbox(:r, :g, :b)) ## custom layout: by default things are stacked vertically
+function mycolorpicker()
+    r = slider(0:255, label = "red")
+    g = slider(0:255, label = "green")
+    b = slider(0:255, label = "blue")
+    output = Interact.@map Colors.RGB(&r/255, &g/255, &b/255)
+    plt = Interact.@map plot(sin, color = &output)
+    wdg = Widget{:mycolorpicker}(["r" => r, "g" => g, "b" => b], output = output)
+    @layout! wdg hbox(plt, vbox(:r, :g, :b))
+    wdg ## custom layout: by default things are stacked vertically
 end
 
 # And now you can simply instantiate the widget with
 mycolorpicker()
-# Note the `$(:r)` syntax: it means automatically update the widget as soon as the
-# slider changes value. See [`Widgets.@map`](@ref) for more details.
+# Note the `&r` syntax: it means automatically update the widget as soon as the
+# slider changes value. See [`Interact.@map`](@ref) for more details.
 # If instead we wanted to only update the plot when a button is pressed we would do:
-@widget wdg function mycolorpicker()
-    :r = slider(0:255, label = "red")
-    :g = slider(0:255, label = "green")
-    :b = slider(0:255, label = "blue")
-    :update = button("Update plot")
-    @output! wdg ($(:update); Colors.RGB(:r[]/255, :g[]/255, :b[]/255))
-    @display! wdg plot(sin, color = $(_.output)) ## choose how to display the output, optional
-    @layout! wdg hbox(_.display, vbox(:r, :g, :b, :update)) ## custom layout: by default things are stacked vertically
+function mycolorpicker()
+    r = slider(0:255, label = "red")
+    g = slider(0:255, label = "green")
+    b = slider(0:255, label = "blue")
+    update = button("Update plot")
+    output = Interact.@map (&update; Colors.RGB(r[]/255, g[]/255, b[]/255))
+    plt = Interact.@map plot(sin, color = &output)
+    wdg = Widget{:mycolorpicker}(["r" => r, "g" => g, "b" => b, "update" => update], output = output)
+    @layout! wdg hbox(plt, vbox(:r, :g, :b, :update)) ## custom layout: by default things are stacked vertically
 end
 
 # ## A simpler approach for simpler cases