LabGUI
This package is used to create GUIs, most suitable for lab applications. See DoubleTankLab for a larger implementation.
Installation
First, install WebIO by following the instructions in the link. Then install InteractNext by following the instructions in the link. Then run
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
using LabGUI, Mux
gui = GUI()
set!(gui, Node(:div, "Hello world!"))
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
The construct macro is a modified version of the @manipulate macro from InteractNext, which permits rearranging the ui as the designer sees fit. Example:
using LabGUI, Mux
gui = GUI()
widgets, ui = @construct for x in 1:10
Node(:div, "$x")
end
set!(gui, widgets) #widgets are set
set!(gui, Node(:div, ui, gui.widgets[:x])) #dom field is set
webio_serve(page("/", req -> gui()))
The layout is independent of the number of widgets, and is completely determined by the dom field of the gui. We don't even have to include the widgets in the responder:
widgets, ui = @construct for x in 1:10
Node(:div, "$x")
end
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 (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
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:
grid = make_grid(3,5)
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
In the file svg_helper.jl one can find some routines used to create SVG graphics with a slightly simpler syntax.
using LabGUI, InteractNext, Mux
gui = GUI()
widgets, ui = @construct for x in vslider(5:5:100),
y in vslider(5:5:100)
Node(svgsvg_symb, #This makes the node an SVG container
svg_circle(100, 100, x, s_color(s_red)),
svg_rect(100, y, 0, y, s_color(s_blue)))
end
set!(gui, widgets)
layout = make_grid(1,3)
layout = setindex_(layout, gui.widgets[:x], 1, 1)
layout = setindex_(layout, gui.widgets[:y] , 1, 2)
layout = setindex_(layout, ui , 1, 3)
set!(gui, layout)
webio_serve(page("/", req -> gui()))
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:
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
Some methods are provided to facilitate animation of the GUI or parts of it. Example:
gui = GUI()
widgets, ui = @construct for t in 0:200
Node(svgsvg_symb, style=stdattr,
svg_rect(300,300),
svg_circle(50+t, 250-200*sin(time())^2, 50,
s_color((255*sin(time()/3)^2, 255*sin(time()/5)^2, 255*sin(time()/7)^2))))
end
set!(gui, widgets)
set!(gui, Node(:div, gui.widgets[:t], ui))
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:
gui = GUI()
widgets, dummyui = @construct for t in 0:200
Node(:div)
end
set!(gui, widgets) #This allows us to access symbol access gui[:t] of the value of t below
dummywidgets, ui = @construct for dummy in 0:200
Node(svgsvg_symb, style=stdattr,
svg_rect(300,300),
svg_circle(50+gui[:t], 250-200*sin(time())^2, 50,
s_color(s_blue)))
end
add!(gui, dummywidgets)
set!(gui, Node(:div, gui.widgets[:t], ui, dummyui)) #dummyui must be included in the dom, or widgets associated with it (t) will time out
animate(gui, :dummy, 0.05)