readme fixes

README.md

@@ -3,7 +3,15 @@
 This package is used to create GUIs, most suitable for lab applications. See DoubleTankLab for a larger implementation.
 
 
-To create a gui, do `gui = GUI()`, and to get the GUI graphics use `gui()`. The set! function sets widgets or DOM objects to the gui and add! adds them. The following example produces a hello world gui and serves it with Mux
+## Installation
+
+First, install [WebIO](https://github.com/JuliaGizmos/WebIO.jl) by following the instructions in the link. Then install [InteractNext](https://github.com/JuliaGizmos/InteractNext.jl) by following the instructions in the link. Then run
+```julia
+Pkg.add("LabGUI")
+```
+and the package should be installed.
+## Usage
+To create a gui, use `gui = GUI()`, and to get the GUI graphics use `gui()`. The set! function sets widgets or DOM objects to the gui and add! adds them. The following example produces a hello world gui and serves it with Mux
 
 ```julia
 using LabGUI
@@ -16,9 +24,9 @@ webio_serve(page("/", req -> gui()))
 
 It can now be accessed in a browser at <http://0.0.0.0:8000>.
 
-# Widgets and the construct macro
+### Widgets and the construct macro
 
-The construct macro is a modified version of the @manipulate macro from InteractNext, which permits rearranging UI as the designer sees fit. Example:
+The construct macro is a modified version of the @manipulate macro from InteractNext, which permits rearranging the ui as the designer sees fit. Example:
 
 ```julia
 using LabGUI
@@ -43,21 +51,21 @@ set!(gui, widgets)
 set!(gui, Node(:div, ui)) 
 ```
 
-Now, the widget is not shown, but it can be changed from the julia side by typing `gui[:x] = 2` for example in the REPL. Generally, set! will be used once for first widgets and once for the complete ui.
+Now, the widget is not shown, but it can be changed from the julia side by typing (for example) `gui[:x] = 2` in the REPL. Generally, set! will be used once for the first widgets and once for the complete ui. Any additional widgets are then be added with add!
 
-# Making Grids
+### Making Grids
 
 Some methods are provided which intend to make overall ui design easier, found in src/gridmaker.jl. The function `make_grid(n,m)` creates an n by m grid node. We can then access its elements using the following syntax:
 
 ```julia
 grid = make_grid(3,5)
-grid[1,3] # access of element
+grid[1,3] ### access of element
 grid = setindex_(grid, "newvalue", i,j) #assignment of "newvalue" at index [i,j]
 ```
 
 The grid is a dom object, so we can use `set!(gui, grid)` to make it the layout of the gui. Grids can also have other grids as their elements.
 
-# SVG Graphics
+### SVG Graphics
 
 In the file svg_helper.jl one can find some routines used to create SVG graphics with a slightly simpler syntax.
 ```julia
@@ -80,18 +88,17 @@ set!(gui, layout)
 webio_serve(page("/", req -> gui()))
 ```
 
-# Data fields
+### Data fields
 
 The GUI class contains an array container to store lab data in the field gui.data. This makes it easier to plot inside the GUI and to implement functionality such as buttons to export the data (see the DoubleTankLab repository for an example of this). There is also some syntactic sugar to make pushing data to the GUI easier:
 ```julia
-
 push!(gui, value, index) #pushes value to gui.data[index]
 push!(gui, values, indices::Tuple) #pushes values to data[index] for index in indices
 ```
 
-# Animation
+### Animation
 
-Some methods are provided to faciliate animation of the GUI or parts of it. Example:
+Some methods are provided to facilitate animation of the GUI or parts of it. Example:
 
 ```julia
 gui = GUI()
@@ -109,7 +116,7 @@ animate(gui, :t, 0.05)
 ```
 
 Generally, when animating we want to use a dummy variable to get a fixed framerate and to make the GUI more responsive:
-```
+```julia
 gui = GUI()
 
 widgets, dummyui = @construct for t in 0:200