Chuck <=> Browser communication with OSC

17.06.17

As Whole-Play becomes more complex, the need to monitor various values of the composition has increased, and logging to a console is not particularly comfortable. Since I'm a web developer, I thought that creating a UI in the browser would be the best solution for me, so I set out to find a way to make Chuck talk to a browser. Here's my findings, using node.js and OSC.

I'm using two modules: socket.io (to use WebSockets) and osc-web (to provide OSC communication). The information can go from Chuck to the browser or viceversa, for this post I'll just illustrate the first scenario. Here's the step-by-step guide:

  1. Set up the node application
  2. Send OSC from Chuck
  3. Create the web page that will receive the OSC messages

Set up the node.js application

The first thing to do is to set up a a node.js application that will use WebSockets to listen to OSC messages.

  • Install node.js
  • Install the socket.io module. Simply typing npm install socket.io in the terminal will do it.
  • Install the osc-web module (instructions at https://github.com/automata/osc-web)
  • Run the bridge from osc-web, which is located in the /osc-web folder created in the step before. In the terminal: node bridge.js

Now we have a node app running, which can send/listen to OSC messages.

Send OSC from Chuck

The code to send OSC from Chuck changed in version 1.3.4.0. The old classes OscRecv and OscSend still work, but it's recommended to use the new support classes OscOut, OscIn and OscMsg. There are samples in the /examples folder of the Chuck installation. I'm only going to cover sending messages in this post, which is fairly simple:

OscOut out;
// Prepare the connection
out.dest("127.0.0.1", 3333); // choose the host/port that you want
// Generate OSC message
out.start(messageType); // a string with the message type
// Add parameters
out.add(myInt);
out.add(myFloat);
out.add(myString);
// Send the message
out.send();

Create the web page that will receive the OSC messages

To receive the OSC messages, we'll create an HTML page listening to OSC messages coming from a specific port. Here's the skeleton code:

<html>
...
<body>
<div id="log-panel"></div>
...
<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>
<script>
socket = io.connect('http://127.0.0.1', { port: 8081, rememberTransport: false});
socket.on('connect', function() {
  // sends to socket.io server the host/port of oscServer and oscClient
  socket.emit('config', {
    server: {
      port: 3333,
      host: '127.0.0.1'
    },
    client: {
      port: 3334,
      host: '127.0.0.1'
    }
  });
});

// Handle the incoming OSC messages
socket.on('message', function(obj) {
  // access the arguments from obj with obj[i], i.e.:
  document.getElementById('log-panel').innerHTML = "Received:" + obj[0]
  // obj[0] is the messageType in the Chuck code
  // obj[1] is the first argument, and so on
});
</script>
...
</body>
</html>

The handler function receives the OSC message as a parameter, which is an array with all the info from the OSC message. This can then be used in any way you want to modify the web page (in the example I'm just printing the message type to a div).

What next?

You can also send messages from the web page to Chuck. The code in the web page is:

socket.emit('message', '/foobar');

And then Chuck would listen to OSC events (I won't cover this in this post, you can find samples in the /examples folder of the Chuck installation).

Now imagination is the limit: initially I'm creating a graphical interface to show various parameters in Whole-Play (as the music unfolds), but there's endless possibilities about how to manipulate a web page from Chuck, can't wait to mess around with this new e-frienship. :)

Whole-Play Mind Map

Move to Tracktion's Waveform

0 comments

Add a comment


[ change image ]

PS: no links allowed in comment.


End of page. Back to page navigation.