i4designer Knowledgebase

i4designer Utilities components tutorials

Abstract

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

These tutorials demonstrate how to use the Utility components to achieve the following:

  • 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 let's 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 of 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 is 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 has 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 return its binary conversion.

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

  6. In order to test our results, in simulation mode, let's 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 of 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 let's 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 displays more meaningful information. In our case, we named it Bit 2.

      2. Set the Signal name. In our case, we used 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 displays more meaningful information. In our case, we named it Bit 3.

      2. Set the Signal name. In our case, we used 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 displays more meaningful information. In our case, we named it Bit 1.

      2. Set the Signal name. In our case, we used 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
Using the Custom CSS component
Abstract

Check out this step-based tutorial to learn how to change the default color of the project page, using the Custom CSS component.

The Custom CSS component allows you to customize the appearance of your project and the appearance of other components, without the worry of general system and project updates overwriting your customizations.

Using the Custom CSS component to change the color of your project page

To inject a different color to the background of your project page, please proceed as follows:

  1. Open an i4designer project in Designer.

  2. Go to the Project Properties panel and select a color for the default project page.

    Properties.jpg
  3. Open the Components Toolbox panel and drag the Custom CSS component to the project page.

    Custom_CSS.jpg

    Tip

    The component can be added anywhere on the drawing surface since it will not be visible at run-time.

  4. Double-click the Custom CSS component to open the Properties panel. In this view, proceed with the following settings:

    1. Add your script to the CSS body field. For this tutorial, we added the following script:

      .i4d-artboard-container {
        background-color: red;
      }

      The above script was composed as follows:

      • Selector - the class selector for the project page, which in our case is "i4d-artboard-container"

      • Declaration block - containing the property (background-color) and the property value (red)

      Therefore, our run-time expectation is to have a red project page, despite the fact that the page color was set to green.

    2. Make sure to save your changes.

  5. Next, build and publish the project to your target environment.

    Tip

    For more details, please also check the dedicated tutorials, here.

  6. Open the project visualization. The project page's color is red.

    red.jpg
Using the Custom CSS component to change the color of a component, using the component's ID

To inject a different color to a component on your project page, please proceed as follows:

  1. Open an i4designer project in Designer.

  2. Open the Components Toolbox panel and drag the Custom CSS component to the project page.

    Custom_Css_2.jpg

    Tip

    The component can be added anywhere on the drawing surface since it will not be visible at run-time.

  3. Next, add a Button component to the project page and change its default color.

    Button_comp.jpg
  4. Double-click the Custom CSS component to open the Properties panel. In this view, proceed with the following settings:

    1. Add your script to the CSS body field. For this tutorial, we added the following script:

      #WfButton12 button {
         background-color: yellow;
      }

      The above script was composed as follows:

      • Selector - the ID of the element we want to style can be obtained by selecting the design-time component and copying its ID, along with the component type.

        Copy_id.jpg
      • Declaration block - containing the property (background-color) and the property value (yellow)

      Therefore, our run-time expectation is to have a yellow button component, despite the fact that the component's color was set to pink.

    2. Make sure to save your changes

  5. Next, build and publish the project to your target environment.

    Tip

    For more details, please also check the dedicated tutorials, here.

  6. Open the project visualization. The Button component's background color is yellow.

    Button_comp_at_run-time.jpg
Using the Custom CSS component to change the color of a component, using the component's element

To inject a different color to a component on your project page, please proceed as follows:

  1. Open an i4designer project in Designer.

  2. Open the Components Toolbox panel and drag the Custom CSS component to the project page.

    Custom_Css_2.jpg

    Tip

    The component can be added anywhere on the drawing surface since it will not be visible at run-time.

  3. Next, add a Label component to the project page and change its default color.

    Label_color.jpg
  4. Double-click the Custom CSS component to open the Properties panel. In this view, proceed with the following settings:

    1. Add your script to the CSS body field. For this tutorial, we added the following script:

      #Label11 div.stretched {
         background-color: #e8d6b2ff;
      }
      

      The above script was composed as follows:

      • Selector - the ID of the element we want to style can be obtained by selecting the design-time component and copying its ID, along with the component element.

        Label_ID.jpg
      • Declaration block - containing the property (background-color) and the property value (#e8d6b2ff)

      Therefore, our run-time expectation is to have a beige label component, despite the fact that the component's color was set to green.

    2. Make sure to save your changes

  5. Next, build and publish the project to your target environment.

    Tip

    For more details, please also check the dedicated tutorials, here.

  6. Open the project visualization. The Label component's background color is beige.

    Label_beige.jpg
Using the Custom Script component
Abstract

Check out this article and learn how to use the Custom Script component to append a script body to customize another component.

The Custom Script component allows you to customize the behavior of other components, without the worry of general system and project updates overwriting your customizations.

Since the trigger method for the Custom script component is different from the ones used by the Local script component, please follow the below-described steps to obtain (get) the value of a Signal and write a different value for it, using a custom script, in asynchronous mode.

  1. Open an i4designer project in Designer.

  2. Open the Components Toolbox panel and drag the Custom Script component to the project page.

    Custom_Script_comp.jpg

    Tip

    The component can be added anywhere on the drawing surface since it will not be visible at run-time.

  3. Add two Signal control components on the project page, as well, and configure them as follows:

    1. Double-click the first Signal control component to open the Properties panel. Select your Signal and enable the ReadWrite mode.

      Signal_1.jpg
    2. Double-click the second Signal control component to open the Properties panel and select your Signal.

      Signal_2.jpg

    Tip

    The first Signal control component will be used to view the value of a Signal, and the other one will be used for writing the new value(s).

    components_on_page.jpg
  4. Next, double-click the Custom script component to open the Properties panel and proceed as follows:

    Script_setting.jpg
    1. Enable the Is async property.

    2. Fill in your JS script.

    3. Set the Time interval property to 1000 milliseconds and the Trigger mode property to "onRecuringTimeInterval" setting. This means that every 1000 milliseconds the second Signal value will be changed, according to our script.

    4. Make sure that your changes are saved.

  5. Next, build and publish the project to your target environment.

    Tip

    For more details, please also check the dedicated tutorials, here.

  6. Open the project visualization. The two Signal control components display the current Signal value, where "Setpoint 1" has value "0" and within one second, "Setpoint 2" displays value "1", as defined by the script.

    Run-time_1.jpg
  7. Change the value of "Setpoint 1" to "5". Within a second, the value of "Setpoint 2" is updated to "6".

    Run-time_2.jpg