https://github.com/mirek/quartzcomposer-websocket

Quartz Composer WebSocket Plug-In
https://github.com/mirek/quartzcomposer-websocket

Last synced: about 1 month ago
JSON representation

Quartz Composer WebSocket Plug-In

• Host: GitHub
• URL: https://github.com/mirek/quartzcomposer-websocket
• Owner: mirek
• Created: 2011-04-29T15:21:55.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2021-12-21T22:07:00.000Z (about 3 years ago)
• Last Synced: 2024-05-09T16:18:05.480Z (8 months ago)
• Language: Objective-C
• Homepage: http://github.com/mirek/quartzcomposer-websocket
• Size: 262 KB
• Stars: 40
• Watchers: 6
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: Readme.mkdn

Awesome Lists containing this project

README

        
# 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:

    

    

      

        

        

      

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

        

        

      

    

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