i4SCADA Knowledge Base

Info popover modal dialogs

Abstract

Check out this article and learn more about the possibility to add a pop-up info menu to your extensions using the wf-popover-info-layer extension.

The wf-popup-info-layer extension can be used as a container for the i4SCADA SmartEditor extensions. At run-time, this layer extension opens a pop-up menu, which contents are configurable at design-time. Just as the previously described Modal Dialogs functionality, the scope of the pop-up info menu is to reduce the amount of extensions, on the project page.

wf-popup-info-layer_extension.jpg

The wf-popup-info-layer at design-time

The wf-popup-info-layer extension is available in the Toolbox panel under the Navigation category. At design time, the extension Object Properties can be configured to define the object layout, colors, appearance, dialog and security.

This extension features also a set of three placeholder parameters:

  • Object ID - the value of this parameter can be used as a placeholder [OID] inside other properties of the extensions contained by the wf-popup-info-layer.

    Tip

    Check out this tutorial and learn how to use the Object ID as a parameter placeholder.

  • Signal Prefix - the prefix is used to construct Signal names in the signal lists of trends. Also the value of this parameter can be used as a placeholder [SP] inside other properties of the extensions contained by the wf-popup-info-layer.

    Tip

    Check out this tutorial to learn how to user the Signal Prefix as a parameter placeholder.

  • Object Name ID - the value of this parameter can be used as a placeholder [ONID] inside other properties of the extensions contained by the wf-popup-info-layer.

    Tip

    Check out this tutorial to learn how to user the Object Name ID as a parameter placeholder.

Additionally, the user can also configure the popover settings, as follows:

  • Show popover - allows the user to enable or disable the display of the popover modal dialog. By default this option is set to true.

  • Popover placement - sets the position of the opened popover in relation with the popover button. By default this option is to right, but the user can decide to display the popover at the bottom, left or top.

  • Popover CSS Class - optional CSS class name for the popover dialog container.

  • Popover Header Class - sets the style of the Popover Dialog header.

  • Close Button CSS Class - sets the CSS class for the close button.

  • Popover Style - sets the style of the opened popover. By default this option is set to value primary, but the user can decide to display the popover as danger, default, info, success, variant-dark or warning.

When the user clicks on the extension contained by the wf-popup-info-layer, at run-time, a menu pops up displaying the following options:

the_info_menu.jpg

The pop up info menu

  • Taginfo

  • Setpoint

  • Settings

  • Control

  • Trend

The contents of the pop-up menu can be enabled or disabled in the Object Properties panel of the extension, as described in the below sections.

The Taginfo button

The Taginfo scope is to enable a list of all Signals with their live values. The Signal list provides the user with a set of functionalities, such as filtering, enabling advanced security and writing Signal values, that we shall describe in this article.

Taginfo_Signal_list.jpg

Signal list opened by the Taginfo option

To enable this button the user needs to set the property Tag Info to true, in the Object Properties panel of the wf-popup-info-layer extension, under Info Dialogs category.

Enable_Tag_Info_menu.jpg

Taginfo menu enabled

By clicking the contained extension, at run-time, the modal dialog pops up displaying the Taginfo button.

Taginfo_button.jpg

The Taginfo button

Further on, the user can set the button style, choosing from the drop-down list options of property Tag Info Button Style.

Button_Style_options.jpg

The Button Style options

Hence, by selecting a different style, such as the "btn-info" style, the run-time button appearance is updated correspondingly.

Button_style_btn-info.jpg

Button style "btn-info"

By clicking the Taginfo button at run-time, the list displaying all the Signals in the current database pops up. The values of the Signals are displayed in real-time.

Taginfo_Signal_list_runtime.jpg

The Taginfo Signal list with real-time values

The Taginfo Signal list view provides a simple filtering mechanism allowing the user to search Signals by typing in the name or part of a Signal name.

Serach_field.jpg

Example of a filter applied to the Signal List

In this view, the user can also manually write Signal values and confirm them by clicking the commit Ok_button.jpg button. The avoid confusion, an orange highlight is applied to the new Signal value field. The highlight is removed when the Signal update is stored in the server.

Confirm_new_value.jpg

Write Signal values

Note

It may be the case that the new entered Signal value is reset by the server to a different value than the entered one. To indicate the user that the written value was reset, a visual feedback is provided by means of a short blink and by removing the new value highlight.

The Tag Info Write To Buffer property enables the batch buffer writing, when it is set to value true.

Enable_batch_buffer_writing.jpg

Batch buffer writing enabled

Having this option enabled, the user can manually input one or multiple values at runtime, that will be buffered locally and written in the database only after clicking the Apply button.

Batch_buffer_writing.jpg

Batch buffer writing

Note

If the Signal list view is closed by the user, before applying the new values, the updated fields are highlighted in blue, in order to let the user know that new values are currently buffered locally.

Example_of_buffered_value.jpg

Example of buffered value

The Taginfo button can be configured from Security point of view by means of the following Object Properties properties:

Security_settings.jpg

Taginfo Security settings

  • Tag Info Button Project Authorization - allows the user with possibility to input a Project Authorization required for displaying the button. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Tag Info Project Authorization - allow the user with possibility to input a Project Authorization required for displaying the Tag Info controls. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

The Setpoint button

The Setpoint button enables a list of Signals with their real-time values.

To enable the Setpoint button the user needs to set the property Setpoint to true, in the Object Properties panel of the wf-popup-info-layer extension, under Info Dialogs category.

Enable_Setpoint_button.jpg

Enabling the Setpoint button

Having this option enabled, the run-time project will display the Setpoint button in the pop-up info modal dialog.

Setpoint_button_at_runtime.jpg

The Setpoint button at runtime

The button appearance can be customised by changing the value of the Setpoint Button Style Object property.

Setpoint_button_style.jpg

The Setpoint Button Style property

The appearance of the Setpoint button will reflect the changes only at run-time, when its style can be seen.

Button_style_btn-danger.jpg

Button style "btn-danger"

By clicking the Setpoint button, at run-time, the list of all the Signals in the database will pop-up. In this view, the user can read and write Signal values, in real-time.

Setpoint_Signal_list_view.jpg

The Setpoint Signal list view

Unlike the Taginfo button, the Setpoint Object Properties allow the user with possibility to define the Signals to be displayed in the list view. This can be achieved by filling in the Signal names in the Setpoint Postfixes property, at design-time. This field allows input of multiple Signals, separated by semicolon ";", as visible in below screenshot.

Setpoint_Postfixes.jpg

The Setpoint Postfixes property

At run-time, the Signals list will only display the Signals defined as Setpoint Postfixes.

List_of_Postfixes_Signals.jpg

The list of Setpoint Postfixes

The Signal list provides a simple filtering mechanism allowing the user to search by Signal name or part of Signal name.

Example_filtered_list.jpg

Example of filtered Setpoint Signal list

At run-time the user can also manually input Signal values that will be automatically applied to the server. To indicate the fact that a new value is being typed, an orange highlight is applied on the Signal value field. To confirm the new value the user must click on the green confirmation button.

Adding_new_values.jpg

Writing new values

Note

It may be the case that the new entered Signal value is reset by the server to a different value than the entered one. To indicate the user that the written value was reset, a visual feedback is provided by means of a short blink and by removing the new value highlight.

As the Taginfo Signal list, the Setpoint list allows the user with possibility to write buffer values for the listed Signals, by enabling property Setpoint Write to Buffer.

Setpoint_Write_Buffer_Signals.jpg

The Setpoint Write to Buffer property

Hence, the new Signal values will not be immediately applied to the Server, but they will be buffered locally. A blue highlight is applied to mark the Signal values that have been changed but not yet applied.

Applying the buffered Signal values can be done by clicking the bottom Apply button.

Buffered_values.jpg

Buffered Values

Further on, the Setpoint button and list contents can be also configured from security point of view, as follows:

Setpoint_security_properties.jpg

The Setpoint security properties

  • Setpoint Button Project Authorization - allows the user with possibility to input a Project Authorization required for displaying the button. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Setpoint Project Authorization - allow the user with possibility to input a Project Authorization required for displaying the Tag Info controls. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Setpoint Security Deny Access Behavior - sets the behaviour of the element when the logged in user does not belong to the project authorization indicated by the respective property. In this case, the element can be either disabled or hidden.

The Settings button

The Settings scope is to enable a list of Signals displaying Signals with their live values. Each of the Signal lists provide the user with a set of functionalities, such as filtering, enabling advanced security and writing Signal values.

To enable the Settings button the Object Property Settings needs to be set to true, for the wf-popup-info-layer SmartEditor extension, under Info Dialogs category.

Enable_Settings_button.jpg

Enabling the Settings button

Having this option enabled, the run-time project will display the Settings button in the pop-up info modal dialog.

Settings_button.jpg

The Settings button at run-time

The user can also customise the Settings button appearance by changing the style in the Settings Button Style Object Property. The selection of the property is set to btn-default, but user can select another style from the drop-down list.

Settings_button_styles.jpg

Settings Button Style property

By changing the style of the Settings button to option btn-primary, the appearance of the button at run-time is changed.

Btn_Primary.jpg

Button style "btn-primary"

By clicking the Settings button, at run-time, the list of all the Signals in the database will pop-up. In this view, the user can read and write Signal values, in real-time.

Signal_list_Settings.jpg

The run-time Signal list

The Signals list provides a simple filtering mechanism allowing the user to search for Signals by name or a part of the Signal name.

Example_of_filtered_list.jpg

Example of filtered list of Signals

Similar with the Setpoint button, the Settings Object Properties allow the user to define a set of Signals to be displayed in the list view. This can be achieved by filling in the Signal names in the Settings Postfixes property, at design-time. The user can add in this field multiple Signals separated by semicolon ";", as displayed in below screenshot.

Settings_Postfixes.jpg

The Settings Postfixes property

By publishing the SmartEditor project, the list of Signals popping up by clicking the Settings button will only list the applied Signals.

customized_Signals_list.jpg

The Postfixes Signals list

At run-time the user can also manually input Signal values that will be automatically applied to the server. To indicate the fact that a new value is being typed, an orange highlight is applied on the Signal value field. To confirm the new value the user must click on the green confirmation button, hence removing the highlight.

New_value.jpg

Changing the Signal value

Note

It may be the case that the new entered Signal value is reset by the server to a different value than the entered one. To indicate the user that the written value was reset, a visual feedback is provided by means of a short blink and by removing the new value highlight.

As the Taginfo and the Setpoint Signal list, the Settings list allows the user with possibility to write buffer values for the listed Signals, by enabling property Settings Write to Buffer.

Settings_Write_to_Buffer.jpg

The Setting Write to Buffer property

Enabling this setting will allow the user to add new Signal values, that can be buffered locally. A blue highlight will mark the buffered values, until the Apply button is selected to confirm the values delivery to the server.

Buffered_values.jpg

Buffered Signal values

Last but not least, the Settings button can be configured from security point of view, as follows:

Settings_security_properties.jpg

The Settings security settings

  • Settings Button Project Authorization - allows the user with possibility to input a Project Authorization required for displaying the button. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Settings Project Authorization - allow the user with possibility to input a Project Authorization required for displaying the Tag Info controls. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Settings Security Deny Access Behavior - sets the behaviour of the element when the logged in user does not belong to the project authorization indicated by the respective property. In this case, the element can be either disabled or hidden.

The Control button

The scope of the Control button is to enable a set of custom Signal settings that can be processed in a modal dialog, opened when user clicks the extension contained in the layer.

The Control button can be enabled by setting the Object Property Control to true, under the Info Dialog category of the wf-popup-info-layer extension.

Enable_Control_button.jpg

Enabling the Control button

Having this option enabled, the run-time project will display the Control button in the pop-up info modal dialog.

Control_button_at_runtime.jpg

The Control button at run-time

The Control button appearance can be customised by changing the values of the Control Button Style property. The user can select the desired style from a list of predefined values.

Control_Button_Style.jpg

The Control Button Style property

By selecting the 'btn-dark" style, the Control Button appearance is updated at run-time.

Button_style_btn-dark.jpg

The Control Button Style "btn-dark"

The security settings available for the Control button and contents are as follows:

Control_security_settings.jpg

The Control security settings

  • Control Button Project Authorization - allows the user with possibility to input a Project Authorization required for displaying the button. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Control Project Authorization - allow the user with possibility to input a Project Authorization required for displaying the Tag Info controls. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

  • Control Security Deny Access - sets the behaviour of the element when the logged in user does not belong to the project authorization indicated by the respective property. In this case, the element can be either disabled or hidden.

The Control button guards three use cases enabled by means of the Control Mode Object property. The drop-down list is populated with the following options: Switch, Slider and 3-State.

Control_Mode_property.jpg

The Control Mode property

The Switch mode

The Switch mode can be configured as follows:

Control_Switch_settings.jpg

The Switch Control mode

  • Control Postfix - defines the Signal name shown in the modal Control.

    Important

    Switch mode cannot be applied for multiple Signals.

  • Control Mode - applies the Switch mode for the modal Control.

  • Control Value 1 - defines the value applied as OnValue

  • Control Value 2 - defines the value applied as OffValue

At run-time, by clicking the Control button a modal dialog pops-up where the user can turn On or Off a Signal value.

Tip

This example shows the Signal "Setpoint 1" which value is currently set to Off = 0.

Value_OFF_Switch.jpg

Setpoint 1 value is Off

By clicking the On button, the value will be switched to On = 1. The value change will be parsed to the server immediately.

Value_turned_On.jpg

Setpoint 1 value is turned On

The Slider mode

The Control Slider mode can be configured as follows:

Control_Slider_settings.jpg

The Control Slider settings

  • Control Postfix - defines the Signal name shown in the modal Control.

    Important

    Slider mode cannot be applied for multiple Signals.

  • Control Mode - applies the Slider mode for the modal Control.

  • Control Value 1 - defines the Slider Start value.

  • Control Value 2 - defines the Slider End value.

  • Control Value 3 - defines the Slider step value. Based on the selected value in this field, that slider will be capable to increase / decrease the Signal value from step to step.

At run-time, the Control button enables a modal dialog with a horizontal slider control, used to follow up or adjust a Signal value in real time.

Tip

This example shows the Signal "Setpoint 1" which value is 1. The Slider control reflects the Signal value, as well.

Slider_on_value_1.jpg

Slider set to Setpoint 1 with value 1

To change the Signal value, the user can drag the slider indicator up to value 19.

drag_slider_to_value_19.jpg

Changing the Setpoint 1 value

The value of the Signal "Setpoint 1" is changed in real-time and updated to display the selected value.

Slider_on_value_19.jpg

Setpoint 1 value changed to value 19

The 3-State mode

The 3-State mode can be configured as follows:

3-State_mode_configuration.jpg

The 3-State mode configuration properties

  • Control Postfix - defines the Signal name shown in the modal Control

    Important

    3-State mode cannot be applied for multiple Signals.

  • Control Mode - applies the 3-State mode for the modal Control

  • Control Value 1 - defines the State 1 value

  • Control Value 2 - defines the State 2 value

  • Control Value 3 - defines the State 3 value

At run-time the Control button opens a modal dialog where all 3 defined states are listed as radio-buttons, allowing the user to change the configured Signal value, using the 3 states.

Tip

This example shows the Signal "Setpoint 1" whose value is currently set to 1. By opening the popup info modal dialog, the radio-buttons list reflects the Signal value, as State 1.

State_1_active.jpg

State 1 active

To change the Signal value to 3 the respective radio button needs to be checked. The value of the Signal is also passed to the server, and updated accordingly.

Value_3.jpg

State 3 active

The Trend button

The scope of the Trend button is to enable the display of trend chart showing value fluctuations of a set of Signals, after clicking the run-time extension contained in the info layer.

To enable the Trend button the Object Property Trend needs to be set to true, for the wf-popup-info-layer SmartEditor extension, under Info Dialogs category.

Trend_enabled.jpg

The Trend button enabled

Having this option enabled the run-time project will display the Trend button.

Trend_button.jpg

The Trend button at run-time

The appearance of the Trend button can be configured in SmartEditor under the Object Properties of the wf-popup-info-layer extension, by changing the value of the Trend Button Styles property.

Trend_Button_Style_property.jpg

The Trend Button Style property

At run-time, the Trend button will inherit the appearance injected by the selected style.

Trend_buton_btn-warning.jpg

The Trend button with "btn-warning" style

By clicking the Trend button an info dialog pops-up displaying the trend chart of the configured Signal values. By default, the trend chart displays all the Studio Signals, having an active Log Tag.

Trend_chart.jpg

The Trend Chart pop-up dialog

By default, the run-time Trend Chart displays the live log value measurements for a predefined time range. While at design-time the user can select the Trend Time Offset, selecting from the drop-down list options: 1 hour, 2 hours, 8 hours, 12 hours and 24 hours.

Trend_Time_Offset.jpg

The Trend Time Offset property

The Object Properties panel of the wf-popup-info-layer extension hosts the Trend Postfixes property which allows the user to customise the Signals that will be illustrated by the Trend chart. The user can add any amount of Signal names as long as they are separated by the semicolon symbol ";".

Important

The Trend chart will NOT display Signals without an active Log Tag.

Trend_postfixes_property.jpg

The Trend Postfixes property

By publishing a SmartEditor project having Trend Postfixes defined, will generate a chart showing only the configured Signals measurements.

Trend_chart_customized.jpg

Trend chart with configured Postfixes

The Trend chart toolbar provides the user with the following options

  • Export - allows the user to export the current chart contents via CSV format. By clicking the Export toolbar button, the download will be immediately organised directly in browser.

    Export_button.jpg

    The Export button

  • Pause - allows the user to pause the Signals log flow.

    Pause_button.jpg

    The Pause button

    As soon as the Pause button is pressed, the following options are enabled in the toolbar:

    Start_and_Next_buttons.jpg

    Start and Next toolbar buttons

    • Start - allows the user to resume the cyclic update of the Signal log flow.

    • Next time span backwards - allows the user to skip through the Signal log flow (1hour and 30 minutes) backwards.

    • Next time span forwards - allows the user to skip through the Signal log flow (1hour and 30 minutes) forwards.

  • Configurations Manager - allows the user to save and reuse particular chart configurations, considering the time interval and other involved settings. By clicking the Configurations Manager button a 3 TABs dialog is opened:

    Configurations_Manager_button.jpg

    The Configurations Manager dialog

    • Save - in this view, the user can preserve the currently applied filters. To save the new configuration, a new name is required. By means of the Save button the user can preserve the Configuration, while the Close button will close the dialog without saving any changes.

      Save_new_Configuration.jpg

      Saving a new configuration

    • Load - in this view, the user can select from previously saved configurations and reuse them. To load a saved configuration the user can simply click the Load button. The filtering configuration is immediately applied to the Trend chart.

      Note

      By enabling the option Show only own configurations the list is updated to display only those configurations defined by the currently logged in user.

      Load_configurations.jpg

      Loading configurations

    • Delete - at any point, the user can decide to remove unwanted configurations, by switching to the TAB Delete and clicking the Remove button.

      Note

      By enabling the option Show only own configurations the list is updated to display only those configurations defined by the currently logged in user.

      Delete_configuration.jpg

      Deleting configurations

    The Configurations saved at run-time can be added to the wf-popoup-info-layer extension, under Object Property Trend Configuration Namespace.

    Config_Namespace.jpg

    The Trend Configuration Name property

  • Log Tag Settings - allows the user to manage the applied Signals and add new ones. The Signal Settings dialog provides the user with the following options:

    Signal_Settings_dialog.jpg

    Signals Settings dialog

    • Search by signal name - allows the user to filter the Signals list by Signal name or part of a Signal name.

      Search_by_signal_name.jpg

      Example of filtered Signals list

    • Adding new Signals to the Trend chart - allows the user to select a Signal and its Log Tag and adds it to the list of Signals for the Trend chart.

      Adding_new_Signals.jpg

      Adding new Signals to the Trend chart

    • Manage the chart Signals - allows the user to change a set of Signal chart settings:

      • Color can be selected from a color picker tool.

      • Axis can be selected from the drop down list, selecting from axis y1 or y2.

      • Type can be selected from the drop down list choosing from the following options: line, step, spline, bar, area, area-spline, area-step.

    • Remove chart Signals - allows the user to remove Signals from the list applied for the Trend chart, by clicking the Delete button.

  • Settings - allows the user with possibility to change multiple chart settings.

    Settings_button.jpg

    The Settings button

    By clicking the Settings toolbar button, the Settings dialog is opened where the user can organise the following chart settings:

    Settings_dialog.jpg

    The Settings dialog

    • Time range from and Time range to - these settings allow the user to customise the Start and End date.

    • Maximum number of records - this setting allows the user to define a maximum amount of records that can be processed by the Trend chart.

    • X-axis label - allows possibility to add a label for the X-axis

    • Y-axes Configuration

      • Y-axis label - allows possibility to add a label for the Y-axis

      • Y-axis right label - allows possibility to add a label for the Y-axis right

      • Minimum for Y-axis - allows possibility to set the minimum Signal value for the Y-axis

      • Minimum for Y-axis right - allows possibility to set the minimum Signal value for the Y-axis right

      • Maximum for Y-axis - allows possibility to set the maximum Signal value for the Y-axis

      • Maximum for Y-axis right - allows possibility to set the maximum Signal value for the Y-axis right

The view in the Trend chart pop-up modal dialog is split up as follows:

  • The central view of the Trend dialog is the main chart displaying Signal Log Tag values, in real time. The main chart supports a maximum of two vertical axes (left and right).

    Main_chart.jpg

    The main Trend chart

    By hovering the mouse cursor above the chart, a tooltip is displayed providing the user with information upon the timestamp, the SignaI name and the log tag value.

    Tooltip_chart.jpg

    The Trend chart tooltip

  • The zoom chart is displayed at the bottom of the main chart. In this view, the user can narrow down (zoom in) on a specific area of the time range. The zoomed area can be expanded or moved anywhere in the original time interval.

    The zoom chart shows the overall data trends and helps the user to easily locate a specific section by displaying the general data variation for the whole time range. The main chart's resolution and data is updated for every change in the zoom chart.

    When dragging a rectangle on the zoom chart, the selected area becomes highlighted. The zoom manipulation is done using the left and right limit bars. The limit bars can be dragged using the mouse to the desired location within the time range. The zoomed area can also be panned by dragging it using the mouse. The changes in the zoom chart are applied to the main chart automatically.

    Zoom_chart.jpg

    The zoom chart

    By zooming in the certain area of the chart, the toolbar displays an additional button is added, allowing the user to Reset Zoom.

    Reset_zoom_button.jpg

    The Reset Zoom button

  • At the bottom of the main and the zoom chart the chart legend displays the selected Signals. While hovering the mouse cursor over a legend label, the line trend corresponding to that Signal will be emphasised in the chart by dimming down the other trend lines.

    Chart_legend.jpg

    The Chart legend

Last but not least, the Trend button allows possibility to enable a visibility security setting by adding an authorisation for the Trend Button Project Authorization property, at design-time. The selected Project Authorization will be at run-time required for displaying the button. If the logged in user does not have this Project Authorization, the button will not be visible. If the property is left empty, the button will be visible to all users.

Trend_security_settings.jpg

The Trend Button Project Authorisation property