Getting Started        API       


audio interfaces in the browser

Download NexusUI.js View on GitHub
NexusUI is a JavaScript library of HTML5 audio interface components that can control web audio or transmit OSC data to other applications such as Max or SuperCollider.

NexusUI 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.

Matrix Demo
Waveform Demo

NexusUI 1.0 is here!

We're happy to announce a major update to NexusUI, which features improvements to several widgets (matrix, keyboard, and vinyl are much more user-friendly), a sturdier codebase, and a much more complete API. That's right, the API might actually have what you're looking for now!

Please poke around the new documentation as some syntax has changed, hopefully for the better. These changes include the way inerface data is accessed in JavaScript, the output data of some objects, and the removal or addition of a few widgets (for example, metroball has been replaced by a simpler metro widget).

We also spruced things up under the hood to make the codebase cleaner and zippier. The code has been updated to CommonJS syntax and is now installable via npm.

Ben 12/20/14

Example Interfaces
Outputs x & y aftertouch data
With automation
Drag Or Type
Captures mobile device gestures
Includes a function for Conway's Game of Life
For the boom bap
With region selection
Example HTML

<canvas nx="slider"></canvas>

<canvas nx="slider" min="0" max="40" label="Mod Depth"></canvas>

Creating Elements
Link to nexusUI.js
Nexus requires a link to the nexusUI.js library in the head of your HTML document

Add elements with <canvas>
Any canvas with a valid nx attribute will turn into a NexusUI interface widget.

Valid NexusUI widget names
See the NexusUI API for a complete list of valid NexusUI objects

NexusUI elements include:
dial  •  position  •  multitouch  •  keyboard  •  button  •  toggle  •  slider  •  multislider  •  crossfade  •  range  •  matrix  •  envelope  •  select  •  text  •  number  •  tilt  •  motion  •  meter (decibel meter)  •  metro  •  metroball  •  tabs  •  string  •  typewriter  •  mouse  •  colors  •  joints  •  vinyl
Element Attributes and Labels
All elements accept a label attribute in HTML. The label text is shown beneath the rendered element.

Label size and spacing
Labels are 30 px tall. Therefore, a slider canvas given height 100px will render a 70px tall slider and use the remaining 30px of space to draw the text label. To change the label size, use nx.labelSize(50) (to make labels 50px tall).

Min and max values
Dials and Sliders accept declarative min and max values as HTML attributes. This will scale the output of dial or slider.

Working with NexusUI in JavaScript
NexusUI is globally instantiated in JavaScript as nx

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

Naming elements
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.

Integrating with Web Audio
or with HTML5 graphics, other NexusUI elements, or other JavaScript
By default, NexusUI emits interface event data to custom event listeners which you define.

.on( )
Define individual .on( ) functions for each element you wish to use data from. Data output from each widget is listed in the API.

nx.allTraffic( )
Or use nx.allTraffic( ) which will receive data from all objects that are sending to js.
Sending data to Max
or another application, with AJAX
We provide templates for OSC communication within several server paradigms. In the Ajax Demo template, we use a PHP file nexusOSCRelay.php to forward data from your interface to a specified IP and port (default IP and port 7475).

nx.sendsTo( )
This template uses nx.sendsTo("ajax") to tell all UI elements to forward data using AJAX. You can override individual elements' paths by setting their .sendsTo() property directly.

nx.setAjaxPath( )
To specify the file path for the PHP script Nexus should use, use nx.setAjaxPath(), for example nx.setAjaxPath("lib/nexusOSCRelay.php")

OSC naming conventions
Each element's OSC name will be the same as its JavaScript variable name. I.e. the first dial on the page will be /dial1, the third dial will be /dial3, etc., unless you set its name with an ID.

This strategy relies on the PHP files in our Ajax Demo and will not work without it unless you provide your own script for the AJAX to execute!
Elements auto-adjust to fit the CSS or inline style of the canvas.

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

A few elements have options for animation and simple physics. To animate an object, give it an animation type with .animate()
e.g. dial1.animate("bounce");

current elements supporting animation

Gallery of Recent Nexus Projects
Add your own by posting to Instagram with #nexusui
experimental music & digital media @ louisiana state univeristy 2013
Fork me on GitHub