nexus UI

mobile audio interface elements

dial  •  position  •  keyboard  •  button  •  toggle  •  slider  •  multislider  •  matrix  •  select  •  tilt  •  metroball  •  pixels  •  colors  •  sandbox  •  joints
Download NexusUI
NexusUI is a library of audio interface components made with HTML5 that transmit OSC data locally or to other applications via AJAX.

Nexus can be used to integrate directly with the Web Audio API in the browser, or to communicate with Max, SuperCollider or Chuck via server-side applications.

Nexus is mobile-friendly and multi-touch compatible. It enables large-scale collaborative performances by distributing interfaces through a browser -- something that many people have at home, in their bag, or carry in their pocket.

Simple Sequencer DemoAnimated Matrix DemoMetroball Demo
(Thanks to Gibberish for the audio support!)
Example



Example - Macbook or Mobile Only

Creating Elements
link to nexus and jquery
Nexus requires links to jquery.js and nexusUI.js libraries

adding elements with <canvas>
Any canvas with a valid nx attribute will turn into a nexus element.

current nexus elements
dial  •  position  •  keyboard  •  button  •  toggle  •  slider  •  multislider  •  matrix  •  select  •  tilt  •  metroball  •  pixels  •  colors  •  sandbox  •  joints
Accessing elements with JS
nx
Nexus is globally instantiated as nx

nx.onload( )
When Nexus loads, it triggers the nx.onload function which you can define in your javascript. Accessing Nexus elements should be done only after Nexus loads.

element naming
By default, the first dial on the page will be given the js variable of dial1, the third toggle will be toggle3, etc. You can overwrite this default by giving the canvas an ID attribute in the HTML, which will become the element's js variable name.

Styling
size
Elements auto-adjust to fit the CSS or inline style of the canvas.

color
Nexus allows for global coloring with nx.colorize or setting individual elements with their .colors property. Parameters to set: accent (default), fill, border, accentborder, black, white.

Transmitting Data with AJAX
Download nexusOSCRelay.php
Nexus includes a PHP relay that forwards data from the UI to a specified IP and port (default 127.0.0.1).

nx.setTransmissionProtocol( )
To forward with AJAX and PHP, use the global nx.setTransmissionProtocol() method to set all UI elements to send with AJAX. You can override individual elements' paths by setting their .transmissionProtocol property directly.

nx.setTransmitCommand( )
An element's transmitCommand property specifies the location to send to. To use Nexus' PHP relay, set the transmitCommand to the filepath of nexusOSCRelay.php. transmitCommand can also be set for all elements with the nx.setTransmitCommand() method.
Transmitting Data locally to a callback function
(for Web Audio or controlling other Nexus elements)
To make UI data accessible from within JavaScript, set the global or local transmission protocol to "local"

.localTransmit( )
Define individual localTransmit functions for each element you wish to receive data from.

nx.globalLocalTransmit( )
Or define one function that receives all data sent from any object, with OSC name.



Component Docs

Shared properties and methods
properties
methods
.draw( )
Redraws the element (with any new values that have been set)

.nxTransmit( value to send )
Sends value to previously defined transmit location.

Dial
output data
0-1 float, rounded to 3 decimals.
properties
.value (default data output)
0-1 float, rounded to 3 decimals.
methods

Position
output data
An array [ x,y ] of floats scaled 0-1. If transmitted to another program like Max, the data may be received as a list.
properties
.nodePos
An array [ x,y ] of floats scaled to the width/height of the canvas.
methods
.animate( type )
Sets animation. Current valid types: "bounce", "none"
Keyboard
output data
A MIDI data note in a two-note array [ note number, on/off ].
Example: Middle C on a two-octave nexus keybaord sends [ 12, 1 ] when pressed and [ 12, 0 ] when unpressed. If transmitted to another program like Max, the data may be received as a list.
properties
methods

Button
output data
0 (off) or 1 (on).
properties
.value (default data output)
0 (off) or 1 (on).
methods

Toggle
output data
0 (off) or 1 (on).
properties
.value (default data output)
0 (off) or 1 (on).
methods

Slider
output data
0-1 float, rounded to 3 decimals.
properties
.value (default data output)
0-1 float, rounded to 3 decimals.
methods

Multislider
output data
An array of 0-1 float values. Length of array depends on the number of sliders in the multislider.
properties
.values (default data output)
An array of 0-1 float values. Length of array depends on the number of sliders in the multislider.
methods

Matrix
output data
An array of arrays of 0-1 floats. The inner arrays are rows.
A 2x2 matrix's output array will look like:
[ [ row1col1, row1col2 ] , [ row2col1, row2col2 ] ]
properties
.matrix (default data output)
An array of arrays of 0-1 floats. The inner arrays are rows.
A 2x2 matrix's output array will look like:
[ [ row1col1, row1col2 ] , [ row2col1, row2col2 ] ]
methods

Select
output data
String value of selected keyword.
properties
.choices (default data output)
An array of menu items.
methods

Tilt
output data
An array of tilt positions: [ x, y, z ];
properties

methods

Metroball
output data
forthcoming
properties

methods

Pixels
output data
forthcoming
properties

methods

Colors
output data
forthcoming
properties

methods

Sandbox
output data
forthcoming
properties

methods

Joints
output data
forthcoming
properties

methods

©
experimental music & digital media @ louisiana state univeristy 2013
Fork me on GitHub