quartzcomposer websocket

Quartz Composer WebSocket Plug-In

Objective-C

Quartz Composer WebSocket Plug-In

WebSocket Patch enables low-latency, bi-directional, full-duplex communication with web browsers - Firefox 4, Google Chrome 4, Opera 11 and Apple Safari 5 (including iOS Safari) as well as Adobe Flash/Flex/AIR applications.

The patch acts as a server listening on specified TCP port (default 60001).

To make connection to the patch you could use the following JavaScript code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8">
  
      // WebSocket
      var ws = null;
  
      // When the page is loaded...
      window.addEventListener('load', function(e) {
    
        // Check if the browser supports WebSockets...
        if ("WebSocket" in window) {
      
          // ...it does, let's connect to localhost default port.
          // Make sure Quartz Composer composition is running with
          // the WebSocket Patch set to port 60001. 
          ws = new WebSocket('ws://localhost:60001');
        
          // Invoked when there was an error with the connection. 
          ws.onerror = function(e) {
            console.log('error', e);
          }
        
          // Invoked when the socket has been opened successfully.
          ws.onopen = function(e) {
            console.log('open', e);
          }
        
          // Callback invoked when incoming messages arrive. Event `data` attribute
          // holds the string passed. WebSocket in current spec supports utf8 text-based
          // communication only. Binary data  is base64 encoded.
          ws.onmessage = function(e) {
            var json = JSON.parse(e.data);
            console.log('message', json);
          }
        
          // Invoked when the socket has been closed
          ws.onclose = function(e) {
            console.log('close', e);
          }
        
        } else {
      
          // ...seems like the web browser doesn't support WebSockets.
          alert('WebSocket not supported by your browser, use Safari, Chrome or Firefox');
        
        }
      }, false);
    
    </script>
  </head>
</html>

Messages are JSON encoded into tuples [name, value]. Example messages:

// Number input port
['/foo/bar', 3.14]

// Boolean
['/my/toggle', true]

// Array
['/foo/numbers', [1, 3, 5, 7, 11]]

// Structure
['/structure', { 'foo': 'bar' }]

// Image
['/foo/bar', 'R0lGODlhDwAPALMAAAAAAL+/v///AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAEALAAAAAAPAA8AAAQ0MEgJap04VMH5xUAnelM4jgAlmOtqpqzlxewpbjZa565nvxrfjRScyYjFXwbX+WQ0lhQmAgA7']

In order to send values from web page to Quartz Composer, in JavaScript JSON encode the tuple, ie:

var value = 3.14;
ws.send( JSON.stringify(['/foo/bar', value]) );

If the WebSocket Patch has foo/bar output port defined with Number format, the value will arrive to Quartz Composer for further processing.

## Installation

# Clone the repository including all submodules
git clone --recursive git://github.com/mirek/quartzcomposer-websocket.git

# Build the plugin and install in ~/Library/Graphics/Quartz Composer Plug-Ins/WebSocket.plugin
cd quartzcomposer-websocket
xcodebuild clean install

# Open example composition and run it
open Compositions/Example.qtz

# Open example web page
open WebPages/example.html