CustomJSComponent

CustomJSComponent

This class is used to create a custom canvas used to draw custom widgets.

All the interation are done using the scripts associated to the events of the widget.

There is a function for each event. The canvas used in this widget is a 2D context
See:

Methods

# (static) onClose()

Function called during the closing of the canvas

In the script associated to this event, it is possible to stop the refresh of the canvas
Example

Sample of script associated to the event 

let context = null;
if (param1)
{
	context = param1.context;
	if (!context)
	{
		return;
	}
	// cancel using last request id
	if (context.reqAnimationFrameClock != undefined)
	{
		cancelAnimationFrame(context.reqAnimationFrameClock);
	}
}

# (static) onData(tagIndex, tagValue)

Function called all times that a tag changes its value.

Each time that a tag changes its value, the canvas will be refreshed and redrawed
Parameters:
Name Type Description
tagIndex number Index of the tag
tagValue number Value of the tag
Example

Sample of script associated to the event 

let context = null;
if (param1)
{
	context = param1.context;
	if (!context)
	{
		return;
	}

	let tData = param1.tags[0];
	if (!tData)
	{
		return;
	}

	// change color
	// in this example, tagIndex is not used
	context.tagFill = tData.tagValue;
}

# (static) onOpen()

Function called during the opening of the canvas.

In the script associated to this event, it is possible to create the custom widgets
Example

Sample of script associated to the event 

let context = null;
let canvasContext = null;
if (param1)
{
	context = param1.context;
	if (!context)
	{
		return;
	}
	// define context variables
	context.tagFill = 0;
	
	// read canvas context
	canvasContext = param1.canvasContext;
	if (!canvasContext)
	{
		return;
	}

	// define function
	var drawRect = function() 
	{
		let ctx = canvasContext;
		let rectColor = "red";

		// change color
		if (context.tagFill >= 10 && context.tagFill < 20)
		{
			rectColor = "yellow";
		}
		else if (context.tagFill >= 20 && context.tagFill < 50)
		{
			rectColor = "blue";
		}
		else
		{
			rectColor = "red";
		}
		
		ctx.clearRect(0, 0, 150, 150);

		// rectangle
		ctx.save();
		ctx.beginPath();
		ctx.lineWidth = "1";
		ctx.fillStyle = rectColor;
		ctx.fillRect(50, 50, 150, 80);
		ctx.stroke();

		// animation. Use this code to refresh the canvas
		context.reqAnimationFrameClock = window.requestAnimationFrame(drawRect);
	}

	context.reqAnimationFrameClock = window.requestAnimationFrame(drawRect);
}