Quartz Composer WebSocket Plug-In
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Compositions rfc6455 Feb 8, 2013
CoreJSON @ aeca8fd Fix for CoreJSON YAJL/yajl incorrect ref May 10, 2011
CoreWebSocket @ 0af22fb
WebPages rfc6455 Feb 8, 2013
quartzcomposer-websocket.xcodeproj rfc6455 Feb 8, 2013
quartzcomposer-websocket rfc6455 Feb 8, 2013
.gitignore
.gitmodules
Readme.mkdn Readme update May 17, 2011

Readme.mkdn

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