Custom JS Components
This video shows how to use a custom, IFrame-based symbol to implement your custom JavaScript:
To create this effect:
- Create an HTML file that contains your JavaScript or a reference to your JavaScript.
- Upload your HTML file, or HTML and JS files, to your DGLux5 project by dragging them into the Project panel.
- Upload
dgframe.js
to the same folder in the Project panel that contains your HTML and JS. - Create an IFrame component by dragging the HTML file from your Project panel to the Document window.
- Convert the IFrame to a symbol:
- Right-click the IFrame component, and select Convert to Symbol.
- Specify a name for the symbol.
- Add custom parameters to the symbol:
- In the Outline or Document window, right-click the symbol, and select Edit Properties.
- In the dialog that appears, drag the correct data types from the left panel into the right panel. For example, if you want one number and one string property, drag an instance of number and an instance of string from the left panel into the right panel.
- Double-click each property label in the right panel to name it. These names must match the names of your
dgParams
in step 9. - Exit the symbol editor by double-clicking the Stage.
- Update your HTML code:
- In the Project panel, click the HTML file.
- In the Details panel, click Edit in Window to open a pop-up for editing the HTML.
- Add the following code to your HTML:
<script type='text/javascript' src='dgframe.js'></script>
This ensures that
dgframe.js
is included, so that your HTML variables can correspond with your symbol properties.
Add
dgParams
to your HTML, as an object of functions. Refer to the example below. These dynamic variables must match the symbol property names in step 6.The symbol properties now correspond with the dynamic properties in your script.
Example HTML
<!DOCTYPE html> <!-- https://github.com/web-animations/web-animations-js --> <html> <body> <div class="pulse" style="width:150px;">Hello world!</div> <script type='text/javascript' src='dgframe.js'></script> <script type='text/javascript'> //DEFINE VARIABLES var duration = 500; var header = "Hello world!"; var element = document.querySelector(".pulse"); var animate = { direction: "alternate", duration: 500, iterations: Infinity }; //DEFINE DYNAMIC PROPERTIES var dgParams = { "duration": function(val) { if (typeof(val) == "number") { duration = val; } }, "header": function(val) { if (typeof(val) == "string") { header = val; } } }; //APPLY TEXT AND ANIMATION TO ELEMENT element.textContent = header; element.animate([ {opacity: 0.5, transform: "scale(0.5)"}, {opacity: 1.0, transform: "scale(1)"} ], animate); //DEFINE ON LOAD SCRIPT window.onload = function() { //DEFINE REQUEST ANIMATION FRAME FROM BROWSER window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); //DEFINE WHAT HAPPENS ON LOOP function update() { if (element.textContent != header) { element.textContent = header; } if (animate.duration != duration) { animate.duration = duration; element.animate([ {opacity: 0.5, transform: "scale(0.5)"}, {opacity: 1.0, transform: "scale(1)"} ], animate); } } //DEFINE THE LOOP ITSELF function loop() { requestAnimFrame(loop); update(); } loop(); } </script> </body> </html>
dgframe.js
// test if a parameter value is dglux table function dgIsParamTable(val){ return (val != null && typeof(val)=='object' && val.hasOwnProperty('cols') && val.hasOwnProperty('rows')); } // interface to the dglux5 application function onDGFrameMessage(e){ var data = e.data; if (typeof(data)=='object'){ if (data.hasOwnProperty('dgIframeInit')){ dgIframeId = data['dgIframeInit']; if (window.parent != null){ // the first post back shouldn't contain any data change window.parent.postMessage({'dgIframe':dgIframeId},'*'); } } else if (data.hasOwnProperty('dgIframeUpdate')){ var updates = data['updates']; if (typeof(updates)=='object'){ if (typeof(dgParams) == 'object'){ for (key in dgParams){ if (updates.hasOwnProperty(key)){ dgParams[key](updates[key]); } } } if (typeof(dgParamsUpdated) == 'function'){ dgParamsUpdated(); } } } } } window.addEventListener('message',onDGFrameMessage); // push parameter changes back to dglux function dgUpdateParams(changes) { if (dgIframeId != null) { window.parent.postMessage({'dgIframe':dgIframeId, changes:changes},'*'); } else { throw 'dgUpdateParams failed, handshake not finished'; } }
Changing the Symbol Properties from JavaScript
Use the following syntax to change the symbol properties from JavaScript:
dgUpdateParams({'a':300});
- Replace
a
with the name of the property. - Replace
300
with the new value of the property.