Getting Started        API       

NexusUI

audio interfaces in the browser


Download NexusUI.js View on GitHub
Overview
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
News:

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
Your browser does not support HTML5. Please update!



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

<canvas nx="slider"></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
Working with NexusUI in JavaScript
nx
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 127.0.0.1 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!
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, black, white.

Animation
.animate()
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
position
dial

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