Introduction:
Within this document, we will go over how to use the JavaScript object to create a simple animation using the JS canvas widget.
Warning
JS objects provide powerful customization features, but using them incorrectly can result in system error or performance degradation. Please use JS objects carefully.
Software Version:
The JS Object is exclusive to cMT-X series HMIs
EasyBuilder Pro 6.05.01+
Related Tutorials:
How to transfer device data using the JS object
Video - Introduction to Weintek’s JS Object (JavaScript)
Video - How to draw shapes with Weintek’s JS Object (JavaScript)
JS Action/Object SDK Documentation
Overview
This example demonstrates an animation where a small dot moves across the canvas within the JS Object. The animation is triggered upon clicking the JavaScript object.
Instructions
- First, to access the JavaScript object, navigate to the object tab and select the “JS Object” within the “JS-related” object:
- Open the “Source Code” tab to access the JavaScript code editor. You can also configure the number of states and create new JS objects within the “Config” tab:
- Within the “Source Code” tab, the open space is where the code will be written. For full documentation, click the “JS Object SDK” link on the bottom right of the page:
- Within the first section, we will initialize values for the canvas and placeholders for the dot object :
// First create canvas
var canvas = new Canvas(); // assign Canvas object to variable
this.widget.add(canvas); // instantiate canvas object in project
// Make the canvas as big as page
// Allow width and length to dynamically change as user places object on project
canvas.width = this.widget.width;
canvas.height = this.widget.height;
// Save dot object dimensions.
//Allows user to change position of object during animation.
let dot = {
x: 0, // Starting x position of object
y: canvas.height / 2, // Starting y position of object
radius: 10, // Distance of center of circle to outter ring
speed: 2 // The distance that will be added on to x value to animate object
};
IMAGE
- Next, we will create the animate function. This function is called upon to create the canvas and dot, while also updating the dot placement for the animation effect:
// Function that will create canvas, create dot, and animate dot each time
// its called
function animate() {
// Clear canvas on each start. Therefore old objects on canvas is removed
canvas.clearRect(0, 0, canvas.width, canvas.height); // Will clear the canvas
// Draw the dot
canvas.beginPath(); // Starter function to start making the canvas of the animation
// Draw the outer circle of dot
canvas.arc(dot.x,dot.y, dot.radius, 0, 2 * Math.PI);
//fill in circle
canvas.fillStyle = "blue"; // fill in color is set to blue
canvas.fill(); // fills in object
//Ending function to signify end of creating the canvas
canvas.closePath();
// Update the dot's position
dot.x += dot.speed; // x value is update to give visual of dot animating across canvas.
// Ensure the dot does not go off screen
if(dot.x - dot.radius > canvas.width){
// When the center of the dot reaches the end of the screen x value is set to zero.
// Gives effect of dot restarting off screen going back around.
dot.x = 0 // Go back left
}
// Ensure the animate function is called again to allow the animation to be on going.
requestAnimationFrame(animate);
}
IMAGE
- Next, we will create the object needed to trigger the animation on the canvas. This is done by setting up the MouseArea function:
// set up object to trigger animation of dot.
var mouseArea = new MouseArea(); // Initalize MouseArea object with mouseArea variable
this.widget.add(mouseArea); //Instantiate the mouseArea object within the project
// "ONCLICK" function. As when the object is clicked on
//the animate function will activate
mouseArea.on('click', (mouseEvent) => {
// the 'click' action can be changed. Look at documentation for other triggers
animate(); // call of function when click is triggered on canvas by user
});
IMAGE
-
To save this script, I will first check for errors using the icon at the top right of the script. Then press the “Apply” button at the bottom right to save the code to the object. Lastly, close the tab by pressing the “OK” button. This will allow you to place your object within EasyBuilder Pro:
-
To view a simulated project, navigate to the “Project” tab and select the “Offline Simulation” button to run your project:
Note: I manipulated the shape of my object within the “Shape” tab" using the picture library to better visualize the example.
-
Lastly, upon running the project, the dot will travel to the end of the canvas and restart on the left end after reaching the end of the canvas continuously:
Full Code:
// First create canvas
var canvas = new Canvas();
this.widget.add(canvas);
// Make the canvas as big as page
canvas.width = this.widget.width;
canvas.height = this.widget.height;
// Give dimensions of dot
let dot = {
x: 0, // Starting x position
y: canvas.height / 2, // Starting y position
radius: 10,
speed: 2
};
// Animate the dot func. Will call the clear canvas, make the dot, and update the dot postion so that it will animate
function animate()
// Clear canvas on each start
canvas.clearRect(0, 0, canvas.width, canvas.height);
// Draw the dot
canvas.beginPath();
canvas.arc(dot.x,dot.y, dot.radius, 0, 2 * Math.PI); // Draw the outter circle of dot
//fill in circle
canvas.fillStyle = "blue";
canvas.fill();
//End path
canvas.closePath();
// Update the dot's position
dot.x += dot.speed;
// Ensure the dot does not go off screen
if(dot.x - dot.radius > canvas.width){
dot.x = 0 // Go back left
}
// Call animate again for the next frame
requestAnimationFrame(animate);
}
// When clicked on area the dot will animate
var mouseArea = new MouseArea();
this.widget.add(mouseArea);
mouseArea.on('click', (mouseEvent) => {
animate();
});