(cache) Nexus Mobile Audio Interface

How to Use Nexus UI

Creating Elements

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

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

use valid nexusUI elements
See the NexusUI API for a complete list of valid NexusUI objects

Nexus elements include:
dial • position • keyboard • button • toggle • slider • multislider • matrix • select • tilt • metroball • pixels • colors • sandbox • joints

<head>	
	<script src="http://megalodon.jp/get_contents/172812822"></script>
	<script src="http://megalodon.jp/get_contents/172812823"></script>	
</head>

<body>
	<canvas nx="toggle"></canvas>
	<canvas nx="button"></canvas>
	<canvas nx="multislider"></canvas>
</body>

Working with Nexus 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 Nexus elements should be done only after NexusUI 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.

<script>
	nx.onload {
		
	  matrix1.row = 2;
	  matrix1.col = 2;
	  matrix1.draw();
	  
	  beatmatrix5.matrix = [ [1,0,0],[0,1,0],[0,0,1] ];
	  beatmatrix5.draw();
	  
	}	
</script>
						
<canvas nx="matrix"></canvas>
<canvas nx="matrix" id="beatmatrix5"></canvas>

Sending data to Max

with AJAX

NexusUI includes a PHP file, nexusOSCRelay.php, that forwards data from your interface to a specified IP and port (default IP 127.0.0.1 and port 7475).
The PHP code is in the NexusUI folder /servers/php.

nx.sendsTo( )
To forward with AJAX and PHP, use the global nx.sendsTo("ajax") method to tell all UI elements to forward data using AJAX. You can override individual elements' paths by setting their .sendsTo() property directly.

nx.usesScript( )
To specify the file path for the PHP script Nexus should use, use nx.usesScript(), for example nx.usesScript("../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.

				
nx.onload = function() {
	
  nx.sendsTo("ajax");
  nx.usesScript("nexusPHP/nexusOSCRelay.php");
  
  // or set an element individually
  
  dial1.sendsTo("ajax");
  
}

Integrating with Web Audio in JS

or with HTML5 graphics, other NexusUI elements, or other JavaScript

To make UI data accessible from within JavaScript, simply use nx.sendsTo("js")

.response( )
Define individual .response( ) functions for each element you wish to use data from.

nx.allTraffic( )
Or use nx.allTraffic( ) which will receive data from all objects that are sending to js.

<script>

	nx.onload = function() {
		
	  nx.sendsTo("js");
	  
	  // set individual receiver
	  
	  dial1.response = function(data) {
	    dial2.val = data;
	    dial2.draw();
	  }
		
	}

</script>

<canvas nx="dial"></canvas>
<canvas nx="dial"></canvas>

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.

<script>

	nx.onload {
		
	  nx.colorize("#00CCFF"); // sets accent (default)
	  nx.colorize("border", "#222222");
	  nx.colorize("fill", "#222222");
		
	  dial3.colors.accent = "#FF00CC";
	  dial3.draw();
	  
	}

</script>

<canvas nx="dial" height="150" width="150"></canvas>
<canvas nx="dial" height="100" width="100"></canvas>
<canvas nx="dial" height="75" width="75"></canvas>
<canvas nx="dial" height="50" width="50"></canvas>

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");

nx.startPulse()
Nexus has a centralized animation pulse that you should turn on if you have any animated objects. Turn on the pulse with nx.startPulse()

current elements supporting animation
position
dial

<script>

	nx.onload {
		
	  position1.animate("bounce");
	  nx.startPulse();
	  
	}

</script>

<canvas nx="position"></canvas>

experimental music & digital media @ louisiana state univeristy 2013

NexusUI mobile music interfaces

How to Use Nexus UI