Change Detector Unit Test

Change Detector Unit Test

This application explains how to setup and use the Change Detector custom widget plugin

Purpose

The purpose of the Change Detector Unit Test is to allow users to learn and understand how to setup and use the Timer custom widget in their Tulip applications. Custom widgets are coded widgets that sit on top of the Tulip platform to give additional functionality that is not currently part of the main platform. The Change Detector Custom Widget is used to detect a change in one of the inputs and fire an event when the change is detected.

Setup

Custom Widget Plugins interact with your application through the use of properties and events. Properties are the shared data that exists between your application and widget, while events are signals that your widget can send to your application. In your app editor you can build triggers based off these events. Events can be made to send data to your application as well.

The Timer Custom Widget makes use of three properties and three events. The first property being used is called 'Label' and is of type text and is read-only. This is the text that will display as the label. The second property being used is called 'Input Text' and is of type text and is read-only. This is the text input to be monitored for change in state. The next property is called 'Input Number' and is of type Number and is read-only. This is the number input to be monitored for change in state.

The first event being used in this custom widget is called 'Change Detected' and this event fires when there is any change to Input Text or Input Number variables. The second event being used in this custom widget is called 'Text Changed' and this event fires when there is a change in Input Text and returns the new text value.. The third event being used in this custom widget is called 'Number Changed' and this fires when there is a change in Input Number and returns the new number value.

How it Works

The Change Detector Custom Widget is used to detect a change in one of the inputs and fire an event when the change is detected. An example of how the Change Detector custom widget works can be seen in the GIF below.