Overview

The Custom control is an advanced control that allows you to script your own custom control from within the DAQConnect editor.  The rendering of the script is totally controlled by your script.  The control is entirely made up of events.  There are three:

Load: this event script is called when the control first loads.  On the tab for editing the Load event there is a refresh button.  If you Apply your changes then click the refresh button, it will execute your Load script.  This is designed for testing purposes so you don't have to save your changes and refresh the browser every time you change your load event script.

Refresh: this event script is called whenever the page refreshes

Resize: this event script is called when the control is resized by dragging

All these events are called in the scope of the DOM <div> element that contains the control.  Therefore, any additional rendering should be added to this element.  When the control is first created, it is filled with a default element so it actually renders and is visible.  Therefore, you will likely want to empty() the element in your load event first.

We strongly recommend using jQuery in your scripts.  jQuery is already loaded and available for you to use.

An example will probably help:

Load:

$(this).empty();
$(this).append("<div>The time:</div>");
$(this).append("<div class = 'val'>---</div>");  
 

Refresh: 
 

$(this).find(".val").text(dateTime.systemTime());

The script above will create a control that displays the current system time in milliseconds since 1970 along with a caption.  You could achieve basically the same thing (except having them on separate lines) using the variable value control, but this is just a simple example.  There are more compact ways of achieving the same thing as well, but this gets the point.

In the first line of Load, we clear out any existing content:  $(this).empty()

In the next two lines we add two <div> elements to our control.  The second div element we've giving a class of "val" so that we can access it from the Refresh event.

In Refresh, we find the element with the class of "val" and change its text to the current system time.

Technically we could empty and recreate the content with every refresh by moving the Load script into the refresh event, but its much more efficient to create content that doesn't change in Load, and then only update the required content in Refresh.