beta
cables is under heavy development.
There might be one or another bug, please let us know about it!
cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsintermediateImage CompositionsPost-Processing 3D Scenescommunicationcables APICommunication with an Arduino via SerialCommunicating with Arduino over MQTTExporting And EmbeddingHow to serve files externally and fix CORS headersExporting PatchesExport using the cables command line interfaceExport via IframeExport creating a standalone executableExport to github (pages)Export and deploy to netlifyExport a ZIP fileExternal triggers / functionsUsing variablesPreviewing / uploading exported cables patchescoding opsCreating AttachmentsGeneral op/Port CallbacksPortsDynamic PortsArray PortsBoolean portsInteger Number PortsObject PortsString portsTrigger PortsFloating Point Number PortsGUI/UI attributesHello Op - Part 1LibrariesDeveloping OpsGuidelinesObject PortsWriting ShadersWeb Audio Op DevelopmentHTML and CSS in cablesLightingLightsShadowsWorking with audioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationFAQEmbeddingHow to integrate my cables patch into my CMS (webflow/wix/squarespace/...)?getting a warning when running the patch in electronHow to remove grey rectangles on touch (mobile)?Why doesn't the DownloadTexture op work on iOS?How to disable page scrolling on mobile?Mobile tippsTransparent CanvasFeatures and SupportWill there be support for (animated) GIFs?Hot to report a bug in cablesGeneral questionsLicences and paymentWhat 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?ShadertoyTechnical questionsUI / EditorGuide to VR in cablesWebGL1 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