i4designer Knowledgebase

i4designer Utilities components tutorials

Abstract

Check out this articles and learn how to use the Local script and Local array splitter components in your projects.

These tutorials demonstrate how to use the Utilities components to achieve the followings:

  • Convert a numerical signal value to binary, using the Local script component

  • Break the obtained binary value into multiple arrays, using the Local array splitter

Using the Local script to convert a signal value from numerical to binary
Abstract

Check out this article and learn how to use the Local script component to convert a signal value from numerical to binary.

To convert the value of a signal from numerical to binary, please follow the below described steps:

  1. Open an i4designer project in design mode. For the present tutorial we shall use an i4SCADA platform project.

  2. Go to the Signal configurations menu and open it, in order to upload your target system signals in the Designer. As we are working on a SCADA platform project, we shall upload the i4SCADA Demo project Signals.

    Upload_signals.jpg
  3. After the needed signals have been uploaded return to the default project page and drag on it the following components:

    Components.jpg
    • two Signal control components

    • one Local script component

  4. Now lets proceed with configuring the first Signal control component, as follows:

    First_signal_control_comp.jpg
    1. Select your desired signal at Signal name property. For this demonstration, we shall select the i4SCADA Demo project signal "Setpoint 1".

    2. Set the Signal name label property to True, in order that we have a better overview upon each project component.

    3. Set the Mode property to ReadWrite mode in order that we can both read and write signals.

    4. Make sure you saved the settings done so far.

  5. To configure the Local script component, proceed as follows:

    Tip

    The Local script component provides the user with access to an Input signal name series, hence, each time one of the Input signal values are changing , the user will have access to the Input signal values and to other complex signal services.

    1. Select the same signal as the one used for the first Signal control component, for the Input signal name field (in our case, the "Setpoint 1").

      Script_input_signal.jpg
    2. Fill in a Client-side signal in the Output signal name field.

      Output_signal_name.jpg

      Tip

      A Client-side signal is a signal that only exists in the client application and have a lifetime that is directly related to the session lifetime. Client-side signals are identified by the case sensitive prefix: "local://". For more details about Client-side signals please visit the documentation article of the Local script component.

    3. Fill in the Script body used to convert values from numerical to binary.

      The Script body editor can support any Java script.

      Script_body.jpg

      Tip

      For the present tutorial, we used the following script:

      const value = values["Setpoint 1"];
      return (value >>> 0).toString(2);

      Hence, each time the value of Setpoint 1 the script will be retriggered to retrun its binary conversion.

    4. Make sure you saved the settings done so far.

  6. In order to test our results, in simulation mode, lets proceed with configuring the second Signal control component, as follows:

    Second_signal_control_component.jpg
    1. Fill in the Signal name field the Client-side signal used as Output for the Local script component. In our case, we shall use the "local://SetpointBinary" signal.

    2. Set the Signal name label property to True, in order that we have a better overview upon each project component.

    3. Set the Mode property to ReadWrite mode in order that we can both read and write signals.

    4. Set the Is alphanumeric property to True.

    5. Make sure you saved the settings done so far.

  7. As soon as saving all the changes done so far, you will recognize that the second Signal control component displays the Setpoint 1 signal value, converted to binary code.

    Conversion_in_design_mode.jpg
  8. Now lets proceed with building and publishing our project, to check it at run-time, as well.

    Tip

    For more details on how to build and publish your i4designer projects, please also visit our tutorials section here.

  9. At run-time, the value of the first Signal control component converts the value of the second Signal control component from numeric to binary.

    Runtime_prj_1.jpg
Using the Local array splitter to break a binary values into single bits
Abstract

Check out this article and learn how to break a binary value into single bits, using the Local array splitter component.

The Local array splitter component allows the user to break a binary value into single bits.

During the previously created i4designer project we have already converted the values of a numerical signal into binary value, using the Local script component. In our case, the second Signal Control component outputs the binary value of the Client-side signal "local://SetpointBinary".

Our goal is to break the Input signal "local://SetpointBinary" into multiple Output signals, each getting its value as single bits:

  • Input signal - local://SetpointBinary

    • Output signal 1 - SetpointBinaryValue_1

    • Output signal 2 - SetpointBinaryValue_2

    • Output signal 3 - SetpointBinaryValue_3

    • Output signal 4 - SetpointBinaryValue_4

Now, lets start building our project:

  1. Open the previously created i4designer project in design mode.

  2. Add a Local array splitter component to the project page and proceed with the following settings:

    Local_array_splitter_comp.jpg
    1. Increase the Array max size up to the desired value. In our case, we shall increase it up to value 4.

    2. Configure the Array name template, considering the form that the Input signal should have at run-time. In our case, we shall fill in the SetpointBinaryValue_{Index} value.

      Tip

      The Array name template is built on basis of the following syntax:

      • Input signal name + {Input signal index}

      In order to automatically parse the Input signal name, the {InputSignalName} placeholder can be used.

      Array_name_template.jpg
    3. Make sure to set the Array value type to String or Integer, as our Input signal generates binary values.

    4. Fill in the Input signal name, which in our case is the binary values Client-side signal - local://SetpointBinary.

      Input_signal_name.jpg
    5. Proceed with other configurations and make sure to save your changes. As our Input signal does not require any separator, quotes and delimiters, we shall leave these fields either empty or unchanged.

      Tip

      For more details about the properties of the Local array splitter component, please also visit our article here.

  3. Next, add four Toggle button components on your project page. Our goal is to enable a set of states for each Toggle button component in order that they color is changed from green when Signal value is 0 to red when Signal value is 1. Now, lets configure them as follows:

    Toggle_buttons.jpg
    1. Open the Properties panel for the first Toggle button component and proceed as follows:

      1. Change the Button text in order that it display a more meaningful information. In our case, we named it Bit 1.

      2. Set the Signal name. In our case, we used for the Input Signal Array name, added at step 2b.

        Signal_value_1.jpg
      3. Add two new states to capture the signal value change by filling the condition rules.

        For the present tutorial we added:

        • State 1: Condition rule %local://SetpointBinaryValue_1% == 0 changes component's color to Red

        • State 2: Condition rule %local://SetpointBinaryValue_1% == 1 changes component's color to Green.

        States_1.jpg
    2. Open the Properties panel for the second Toggle button component and proceed as follows:

      1. Change the Button text in order that it display a more meaningful information. In our case, we named it Bit 2.

      2. Set the Signal name. In our case, we used for the Input Signal Array name, added at step 2b.

        Signal_value_2.jpg
      3. Add two new states to capture the signal value change by filling the condition rules.

        For the present tutorial we added:

        • State 1: Condition rule %local://SetpointBinaryValue_2% == 0 changes component's color to Red

        • State 2: Condition rule %local://SetpointBinaryValue_2% == 1 changes component's color to Green.

        States_2.jpg
    3. Open the Properties panel for the third Toggle button component and proceed as follows:

      1. Change the Button text in order that it display a more meaningful information. In our case, we named it Bit 3.

      2. Set the Signal name. In our case, we used for the Input Signal Array name, added at step 2b.

        Signal_value_3.jpg
      3. Add two new states to capture the signal value change by filling the condition rules.

        For the present tutorial we added:

        • State 1: Condition rule %local://SetpointBinaryValue_3% == 0 changes component's color to Red

        • State 2: Condition rule %local://SetpointBinaryValue_3% == 1 changes component's color to Green.

        States_3.jpg
    4. Open the Properties panel for the fourth Toggle button component and proceed as follows:

      1. Change the Button text in order that it display a more meaningful information. In our case, we named it Bit 1.

      2. Set the Signal name. In our case, we used for the Input Signal Array name, added at step 2b.

        Signal_value_4.jpg
      3. Add two new states to capture the signal value change by filling the condition rules.

        For the present tutorial we added:

        • State 1: Condition rule %local://SetpointBinaryValue_1% == 0 changes component's color to Red

        • State 2: Condition rule %local://SetpointBinaryValue_1% == 1 changes component's color to Green.

        States_4.jpg
  4. Make sure you saved all the changes and proceed with publishing your project.

    Tip

    For more details on how to build and publish your i4designer projects, please also visit our tutorials section here.

  5. At run-time we can follow up the colors of the Toggle buttons changing, as soon as the inserted conditions are met.

    Runtime_array.jpg