A browser-based GUI for libmapper network
- Authors: Stephen Sinclair, Joseph Malloch, Aaron Krajeski & Jon Wilansky
- Email: firstname.lastname@example.org
- Discussion: https://groups.google.com/forum/#!forum/dot_mapper
- Web: http://libmapper.org
All libmapper GUIs function as “dumb terminals” — no handling of mapping connection commands takes place in the GUI, but rather they are only responsible for representing the current state of the network links and connections, and issuing commands on behalf of the user. This means that an arbitrary number of GUIs can be open simultaneously supporting both remote network management and collaborative creation and editing during the mapping task.
- browsing active devices and their signals
- drag-and-drop mapping connections
- mode and function editor for connections
- collaborative undo/redo
- filtering parameter lists by OSC prefix or string-matching
- saving and loading mapping sets (including consideration of mapping transportability per the GDIF project)
- multiple "views" of the mapping network, using different visualization techniques
- Build and install libmapper
mapper.pyfrom the directory /libmapper/swig into /webmapper directory.
- Run webmapper.py from terminal
- Terminal will display "serving at port #####"
- Open a browser
- Type "localhost:#####" into the address bar, where ##### is the same string of numbers displayed in terminal
A note on saving and loading:
As of now saving and loading work via a naïve approach. In the list view (currently the only view tested for saving and loading) the
save button saves data for the active tab. Similarly, loading only loads connections for signals in the active tab. Our development roadmap includes improvements to the save/load functionality.
We have explored several alternative visualization and interaction techniques, which allow more informed and flexible interaction with the mapping network. Crucially, we believe that there is no need for a single “correct” user interface; rather, different network representations and interaction approaches may be useful to different users, for different mapping tasks, or at different times.
Webmapper includes four different views:
Balloon. These views can be enabled by choosing them from the "Display" menu located on the top left of the running GUI.
The primary view used in our mapping GUIs is based on the common structure of diagrams used to describe DMI mapping in the literature – a bipartite graph representation of the connections, in which sources of data appear on the left-hand side of the visualization and destinations or sinks for data appear on the right. Lines representing inter-device links and inter-signal connections may be drawn between the entities on each side, and properties are set by first selecting the connection(s) to work on and then setting properties in a separate “edit bar”. The GUI contains multiple "tabs": the leftmost tab always displays the network overview (links between devices) and subsequent tabs provide sub-graph representations of the connections belonging to a specific linked device.
- 'c' : Connect selected devices/signals
- 'delete': Delete selected links/connections
- 'cmd+a' : Select all links/connections
- 'alt+tab' : Change tab to the right
- 'alt+shift+tab' : Change tab to the left
- hold down 'm' while connecting to create muted connection
Grid View (tested on Chrome only):
There are 2 grids. The left side is the DEVICES grid, the right is the SIGNALS grid. To view signals in the SIGNALS grid: select cells (or labels) on the DEVICES grid and press the "Add"/"Remove" button ('a'/'s' keyboard shortcut). This will include/exclude the selected devices in the SIGNALS grid. Vertical/horizontal lines indicate if the device is included.
You can use the keyboard arrows to move the selected cell around. All keyboard shortcuts affect the 'active' grid, indicated by the little square in the upper left corner of the grid.
You can save the current view in the SIGNALS grid as a 'preset' using the "SaveNew" button on the top right hand side. Note that changes to the current preset will not be remembered unless you press the "Update" button.
Note the keyboard shortcuts for changing the active grid, moving the selected cell, toggling cells, loading presets, … they enable you to use the interface much more efficiently:
- click on cell: set the cell as selected
- COMMAND click a cell: select multiple cells
- arrows: move selected cell
- SHIFT + arrows: move selected cell by 3
- space: toggle selected cell(s)
- c: connect selected cell(s)
d: disconnect selected cell(s)
CTRL +: zoom in on active grid
- CTRL -: zoom out on active grid
- CTRL 0: zoom-to-fit on active grid
- CTRL 1: switch to SPLIT view
- CTRL 2: switch to DEVICES only view
CTRL 3: switch to SIGNALS only view
ALT leftArrow: set DEVICES grid as active
- ALT rightArrow: set SIGNALS grid as active
- ALT up/down arrows: cycle through presets
Hive plot view:
The hive plot is a method for visualizing networks. In this view, the upper half of the plot is designated for source devices, and the lower for destinations. In view mode 1, an adapted hive plot, each device is given its own axis. In view mode 2, a traditional hive plot, source/destination devices are grouped along a single axis.
Although designed mainly as an aid for visualization, this view also provides the basic functionality to configure connections. Mouse over a device or signal in the list on the left hand side (or in the plot) to highlight its connections. Select signals by clicking its name in the list (or its node in the plot). Once a source and destination signal is selected, you can create or remove the connection by clicking on the blue bar at the bottom (or by using the keyboard shortcuts).
Connections on specific devices can be shown or hidden from view using the checkboxes in the list next to the device names.
- c: connect selected cell(s)
d: disconnect selected cell(s)
CTRL 1: switch to view mode 1 (adapted Hive plot)
- CTRL 2: switch to view mode 2 (Hive plot)
Balloon plot view:
Balloon plot is brand new and has not yet been thoroughly tested.