Going online (with Cables.gl)
In this article we will cover all the steps necessary to publish a Cables patch online, from exporting it to integrating it into a web page with HTML and CSS.
In Cables there are several ways to export patches. Here we will focus on two main ways, embedding via <IFrame> and direct download as HTML.
IFrame Method
Exporting a patch as an IFrame is one of the quickest options. Before starting to export, ensure the patch visibility it is not set to private; otherwise, it might not display correctly. Then, select the Export option from the patch menu and choose Embed.
Cables will provide a code snippet similar to the following:
<iframe style="width:100%;height:100%;border:0px;" allow="autoplay; camera; microphone" src="https://cables.gl/view/zqUznz"></iframe>
To integrate the IFrame into your web page, create an HTML file named index.html containing the basic structure of the page. Within the file, paste the code provided by Cables in the<body> section. This way, the patch will be displayed on the web page via an IFrame while remaining hosted on Cables' servers. Any changes made to the patch in Cables will automatically be reflected in the IFrame.Then, create a style.css file to control the style of the page content.
Basic structure example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cables Patch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<iframe style="width:100%;height:100%;border:0px;" allow="autoplay; camera; microphone" src="https://cables.gl/view/zqUznz"></iframe>
</body>
</html>In the style.css file, you can set the IFrame to full screen and position it in the background relative to other HTML elements:
iframe {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}Embedding via IFrame has some limitations. An embedded patch is not stored locally, so any changes made in Cables will affect the patch displayed on the website. Additionally, you cannot access the variables and functions of Cables externally through JavaScript.
Canvas Method
To overcome the limitations of IFrame, you can export the patch by downloading a zip folder containing the HTML page and the JavaScript file where the patch resides. Instead of selecting Embed, choose Download HTML. A compressed folder will be downloaded containing an index.html file and a patch.js file. These files are preconfigured by Cables and ready to be modified or customized as needed.
After extracting the zip folder, it is recommended to organize the files by separating the CSS code from the HTML file. Create a new file called style.css to host the styling code and link it to index.html via a <link> element.
<link rel="stylesheet" href="style.css">
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Cables Patch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>/* style.css */
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
overflow: hidden;
height:100vh;
}
canvas {
display: block;
position: absolute;
outline:0;
}Within the script element we can access and get variables and functions from Cables.
<script type="text/javascript">
document.addEventListener("CABLES.jsLoaded", function (event) {
CABLES.patch = new CABLES.Patch({
patch: CABLES.exportedPatch,
"prefixAssetPath": "",
"assetPath": "assets/",
"jsPath": "js/",
"glCanvasId": "glcanvas",
"glCanvasResizeToWindow": true,
"onError": showError,
"onPatchLoaded": patchInitialized,
"onFinishedLoading": patchFinishedLoading,
"canvas": {"alpha":true, "premultipliedAlpha":true } // make canvas transparent
});
// Accesso alle variabili e funzioni della patch
});
</script>