beta
cables is under heavy development.
There might be one or another bug, please let us know about it!
cables Documentation      How To Use            Working with files            Keyboard Shortcuts            User Interface Walkthrough      Beginner Tutorial            Beginner 1: Drawing A Circle            Beginner 2: Transformations            Beginner 3: Color            More Transformations      intermediate            Image Compositions            Post-Processing 3D Scenes      communication            cables API            Communication with an Arduino via Serial            Communicating with Arduino over MQTT      Exporting And Embedding            How to serve files externally and fix CORS headers            Embedding Patches            External triggers / functions            Embedding Patches            Previewing / uploading exported cables patches      coding ops            Creating Attachments            General op/Port Callbacks            Ports                  Dynamic Ports                  Array Ports                  Boolean ports                  Integer Number Ports                  Object Ports                  String ports                  Trigger Ports                  Floating Point Number Ports            GUI/UI attributes            Hello Op - Part 1            Libraries            Developing Ops            Guidelines            Object Ports            Writing Shaders            Web Audio Op Development      HTML and CSS in cables      Lighting            Lights            Shadows      FAQ            Embedding                  How to remove grey rectangles on touch (mobile)?                  Why doesn't the DownloadTexture op work on iOS?                  How to disable page scrolling on mobile?                  Transparent Canvas            Features and Support                  Will there be support for (animated) GIFs?            General questions            Licences and payment                  What licence do i need to use cables?                  Will I have to pay for it in the future?                  How is my work licenced when using cables?            Does cables support midi and OSC?            Shadertoy            Technical questions            UI / Editor            WebGL1 and WebGL2

External triggers / functions

Triggering cables ops from outside

Sometimes you need to trigger a cables-port from outside cables, e.g. when you embed a cables-patch into a website.

Using the op Ops.Patch.Function you can define a function name which is visble from outside cables, just give it a name by setting the input-port Function Name, e.g. myFunction and you can trigger the op from your website’s JavaScript-code using CABLES.patch.config.myFunction();

If you need to pass a parameter, you can set a cables variable first (see Variables) and then trigger it.

Calling external functions

If you want to call an external JavaScript-function from inside cables you need to define it as a property of CABLES.patch.config.

Let’s create a function helloFromOutside():

In cables add the op Callback. Set its parameter Callback Name to helloFromOutside. Now connect a Mouse op to it so it gets triggered whenever the mouse was clicked (Mouse – click —> Callback - exe).

Export the project and open the index.html file in a text editor. Let’s define the function helloFromOutside right before the closing script tag:

<script>
        function showError(err) {
            alert(err);
        }

        document.addEventListener('CABLES.jsLoaded', function(event) {
            CABLES.patch=new CABLES.Patch({
                patchFile: 'js/Callback_Example_Patch.json',
                prefixAssetPath: '',
                glCanvasId: 'glcanvas',
                glCanvasResizeToWindow: true,
                onError: showError
            });

            CABLES.patch.config.helloFromOutside = function(parameters) {
                console.log('cables called... hello!?');
            };
        });
</script>

Start a local webserver to serve the website and open it in your browser. Once you click the mouse on the canvas you should see cables called... hello!? inside the console.

If you pass any parameters with the Callback-op, these will be bundled as the parameters-array

Testing external functions

If you want to test the above callback without leaving cables you can define a test-function in the browser console:

Open the developer tools by pressing cmd + alt + i and enter:

gui.corePatch().config.helloFromOutside = function() {
    console.log('cables called... hello!?');
};

Based on the example above you should now be able to click somewhere on the canvas and see cables called... hello!? printed in the console.

Summarising: Inside cables test-callbacks have to be defined as a property of gui.corePatch().config, in your outside JavaScript-code they must be defined as a property of CABLES.patch.config .


help cables get better and edit this file on github