Title of your website

myDESIGNER USER MANUAL
  1. Introduction
    1. About myDESIGNER
  2. Tutorial videos
    1. myDESIGNER
    2. myREPORTS
    3. myMOBILE
  3. Getting started with myDESIGNER
    1. Creating a project
    2. Workspace management
  4. Checking project
  5. Projects’ visual appearance
  6. GUI/HMI Editor
    1. Creating views
    2. Selecting objects
    3. Drawing primitives
    4. Creating text elements
    5. Insert image
    6. Poly-lines
    7. Moving objects
    8. Resizing objects
    9. Rotating objects
    10. Skewing objects
    11. Filleting
    12. Combining objects
    13. Fill and stroke
    14. Rulers and guides
    15. Layers
    16. Copying and pasting elements
    17. Object's order
    18. Grouping
    19. Repeated actions mode
    20. View scripts
    21. Used tags
    22. Zoom on zone
    23. Undo and redo
    24. View properties
  7. Components
    1. Default components
    2. Custom components
    3. Used components
    4. Editing components
    5. Replacements
    6. On touch actions
    7. Entering advanced functions (equations)
  8. Components library
    1. Combo box, List box and Text box
      1. Inserting into view
      2. Components parameters
      3. Using components in view scripts
      4. Supported functions
    2. Chart component
  9. Active area
    1. Introduction
    2. Creating active areas
    3. External web page in active area
    4. HTML code
    5. DIV type
  10. Layout views
    1. Page layout
    2. Adding layout view
    3. Creating new layout
  11. Entering tags and math expressions
    1. Entering tags
    2. Entering mathematical expressions
  12. Tree tags database
    1. Changing tag value
    2. Engineering units
    3. Filtering data
    4. Usage count
    5. MS Excel import and export
    6. Tag import
    7. Deleting unused tags
    8. Restoring tag database
    9. Specifying a new tag during development
  13. Formatting numerical values
  14. Linking views with PLC
    1. Introduction
    2. Animations
    3. Show value animation
    4. Value to text mapping animation
    5. Visibility animation
    6. Opacity animation
    7. Color animation
    8. Moving animation
    9. Size animation
    10. Scale animation
    11. Rotate animation
    12. Circular sector animation
    13. Zoom visibility animation
    14. Sounds
    15. Sounds triggered by tag value
    16. Effects
  15. Time Sequence
    1. Example
    2. Triggering time sequences
    3. Modifying time settings
    4. Adding new sequences
    5. Renaming time sequence
    6. Switching among time sequence
    7. Modifying timing
    8. Combining multiple time sequences
  16. Open command
    1. Open type
    2. Target
    3. Popup (face plate) window
    4. View type
  17. Write/Set command
    1. Using batches
    2. Specifying set command parameters
    3. Value options
  18. Scaling set values
    1. Set example
  19. Key shortcuts
  20. On touch
    1. On touch in views
    2. On touch in component
    3. On touch example
    4. Lock element
    5. Lock key
    6. Slider
  21. Parametric views
    1. Opening parametric views
    2. Symbolic text replacements
    3. Symbolic tag creation
    4. Replacing connections
    5. Nesting parametric views
    6. Usage example:
  22. View scripts
    1. Using script in views
    2. Declaring variables
    3. Script writing
    4. Using variables in animations and effects
    5. Debugging view scripts
    6. Using debug screen on your view
    7. Using web browsers integrated debugger
    8. Using JavaScript libraries - Includes
    9. Linking external JavaScript libraries – Remote includes
  23. View scripts - list of functions
    1. Dealing with elements
    2. ListBox, TextBox and ComboBox functions
    3. Animations
    4. Effects
    5. Error frames
    6. Zoom
    7. Open command
    8. Users, language and login
    9. Retrieving files
    10. Communicating with server side scripts
    11. Tables
    12. Alarms and aggregated alarms
    13. Data - Log data
    14. Custom charts
    15. Tag info
    16. Other useful functions
  24. Documents
  25. Reports
    1. Creating report templates
    2. Designing report
    3. Inserting text
    4. Adding picture – logo
    5. Table data
    6. Table summary
    7. Previewing report during design
    8. Showing report in runtime
    9. Creating custom report in runtime
    10. Creating report on demand
  26. CAS alarms
    1. Digital alarms
    2. Analog alarms
    3. Alarm window
    4. Alarm history
      1. CAS alarms occurrence - Chart/Table
    5. CAS alarms in view - example
    6. CAS alarms preview of appearance
  27. Data logging
    1. Data - logs
    2. Defining connection
    3. Defining data points
    4. Continuous data logging
    5. Triggered data logs
    6. Triggered logging example
    7. Simple periodic export to CSV and Microsoft Power BI
    8. Data-logs properties
  28. Data - Log views
    1. Data points selection
    2. Data grouping
    3. Filtering data
    4. 3D chart
    5. Data-logs preview - appearance editor
  29. Aggregated data logs
    1. Creating aggregated data log
    2. Aggregated values:
    3. Time aggregates
    4. Value change aggregates
    5. Aggregates based on alarm activation
    6. Running the aggregation periodically
  30. Advanced trends
    1. Using multiple axes
    2. Advanced trends – visual appearance
    3. Gantt chart
  31. Connections
    1. Creating new connection
    2. Creating PLC type connection
    3. Creating database type connection
    4. Creating IoT type connection
    5. Deleting connections
    6. Advanced options - optimizations
  32. User accesses
    1. Access levels
    2. Access groups
    3. User accounts
    4. Limiting access for whole project
    5. Limited access for views and trends
    6. Limited access of arbitrary object in views
    7. User edit in runtime
    8. RFID
  33. Multi - language support
    1. Providing translations inside a project
    2. Translating names of Views
    3. Translating Data - logs
    4. Translating CAS alarms
    5. Translating advanced trends
  34. Server-side scripts
    1. Introduction
    2. Server-side scripts folder
    3. Server-side scripts folder structure
    4. Variables tables
    5. Script data-logs
    6. Global variables
    7. Sources folder
    8. Organizing project into modules
    9. Importing modules
    10. Using the event-driven asynchronous callbacks
    11. Creating server side reports
    12. mySCADA specific functions
    13. Debugging
    14. Script status (on myBOX devices only)
    15. Ser2Net (on myBOX devices only)
  35. View and server side scripts – common tasks
    1. Graphical guides
    2. Read/Write data from/to PLC
    3. Generating report
    4. Other guides
    5. Server side scripts – examples
    6. Reading data from PLC
    7. Writing data into PLC
    8. Timers – eg. run code in given time intervals
    9. Scheduled execution e.g run code every Monday at 2:00 PM
    10. Generating a report at given time interval
    11. Limiting access to generated files
    12. Processing data-log data
    13. Exporting data-log data into CSV files
    14. Using virtual PLC
    15. Sending data from view script into server side scripts
  36. Devices
  37. EtherNet/IP driver
  38. MicroLogix and SLC driver
  39. Modbus driver
    1. Tag name syntax
    2. 32-bit registers in Modbus
    3. Floating point numbers
    4. 32-bit integers
    5. Address mapping
    6. Signed and unsigned numbers
  40. Siemens S7 family PLCs driver
    1. Memory types
    2. S7 data types
    3. S7 1200/1500 notes
    4. Protection
    5. LOGO! 0BA7/0BA8 configuration
    6. S7-200 (via CP243-1) configuration
  41. OPC UA driver
    1. Connection configuration
    2. Tag name syntax
  42. MELSEC-Q driver
    1. Tag name syntax
    2. Connection settings
  43. SigFox driver
    1. Datatype
    2. Reverse order
  44. Databases driver
    1. Reading values from SQL database
    2. Examples
    3. Writing values to SQL database
    4. Using SQL connectivity in Server Side Scripts
  45. Download/Upload from/to device
    1. Download to device
    2. Upload from device
  46. Recipes
  47. Running hours
  48. Timeline
  49. mySCADA TIA portal connector

9.2.Creating active areas #

Active Areas (or multiple active areas) can be created in any view.

1. Click on the Active Area icon in the GUI Toolbar.

 

9.2.1

 

2. Draw the Active Area:

9.2.2

 

3. Click on the Init State in the Properties window and select the content you wish to display.

9.2.3

 

In this dialog, you can set up the type of Active Area. In other words, you can set up how the Active Area will be initialized when the view is shown.

  • Note: If you do not activate the initial state (e.g. you leave the Active check box unchecked), the Active area will not be visible. You can set a new state later when using open command.

 

View type

If you select this option, you can specify the view to be shown in the active area. You can display any view you have previously designed. For best results, use a window with the same resolution or at least the same aspect ratio as your active area. If you need to change the active area size to an exact width and height, you can do so in the Properties window.

9.2.4

 

  • TIP: If you specify the option “Previous View,” open command will jump back to previously open window.

Parametric View type

If you select this option, you can specify the parametric view to be shown in the active area. You can display any view you have previously designed. For the best results, use a view with the same resolution or at least the same aspect ratio as your active area. If you need to change the active area size to an exact width and height, you can do so in the Properties window.

9.2.5

 

Aside from the Parametric View name, you can also specify the Indexes and Connection indexes. For more details on how to deal with parametric views, please see chapter Parametric Views.

Document type

You can show a PDF document linked to the project in an active area. The PDF document will be automatically scaled to the size of the active area.

9.2.6

 

Select a PDF document. You can also specify on which page to open the document.

Alarms type

This feature can show online alarms and alarm history in the active area. There are several parameters you can use to set up the specific visual appearance of the alarm table that will be shown in the active area. You can also limit shown data using filters.

9.2.7

 

  • Show Top Toolbar check box allows you to show or hide the top toolbar with filters and alarm settings.
  • Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g., the date selection controls).
  • Parameters allow you to specify which columns will be visible in the alarm table. In addition, you can set a filter for severity and text filters for the message, area, and device.

9.2.8

 

  • Time Scale [min] parameter specifies the time interval that will be shown in the alarm history table. Units are in minutes.
  • Background Color can be set to transparent or to a specific If you set this parameter to color, you can specify which color will be shown as the background.
  • Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

9.2.9

 

Example on showing filtered Alarm data

Suppose you want to show the alarm table on the screen, but only show data in respect to the given view.

1. Create alarm definitions in CAS Alarm Windows. To designate which alarms belong to the view you plan to show, specify the name of the view in the Area column.

9.2.10

 

2. Create a new view and insert an Active area into it. (If you want to show filtered and unfiltered data in one view, insert two active areas.)

9.2.11

 

3. Set up its init state.

9.2.12

 

4. Set up data filter as follows:

9.2.13

 

5. Test your view.

 

Example of using Row Click Call-back

Suppose you have an alarm table shown in the Active area, and you want to detect when a user selects a row in the table.

1. Create a new view and insert an Active area into it.

9.2.14

 

2.Set up its init state.

9.2.15

 

3.Set up row click callback as follows:

9.2.16

 

4. Now whenever a user clicks in the alarm table, the function you have defined will be called. You can retrieve the row and column on which the user has clicked (variable arguments[1] is the row number and variable arguments[2] is the column number). In addition, you will get all values in the selected row; they are in the variable arguments[0].

5. Now test your view.

9.2.17

 

DOWNLOAD DEMO PROJECT HERE:

 

Advanced Trend type

You can show trends, as defined in the Advanced Trends section. The size of the trend is automatically adjusted to the size of the active area.

 

9.2.18

 

  • Show Top Toolbar check box allows you to show or hide the top toolbar with filters and advanced trend settings.
  • Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g., the date selection controls).
  • Filters allow you to set a time range for the advanced trend shown. You can specify Time From value (in UNIX UTC time; e.g. seconds since the year 1970), Time To value, or Time Scale You can use constants, or you can use tags from PLCs or variables from View Scripts. If you use variables or tags in the bellow fields, you can change the time interval of the advanced trend dynamically.

2.9.19

 

  • Time Scale [min] parameter specifies the time interval that will be shown by the Advanced Trend. Units are minutes.
  • Background Color can be set to transparent or to a concrete color. If you set this parameter to color, you can specify the color that will be shown as the background.
  • Row Click Callback is a neat feature. When a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

 

Showing Trend in active area with time interval specified by the user

This example demonstrates how to use the dynamic filters in Advanced trend shown in an active area. The goal is to create the simple view with Advanced Trend shown. Users can specify  the interval shown by the Advanced Trend using multiple buttons.

1. Create View and insert Active Area into it.

9.2.20

 

2. Create buttons as shown in the following picture:

9.2.21

 

3. Now open View Scripts and create the following variables:

dateFrom

dateTo

9.2.22

 

4. Each button will set the corresponding variable dateFrom and dateTo to specify the Advanced trend interval.

9.2.23

 

5. Now set up the SHOW button to open the Advanced trend.

9.2.24

 

6. The Filter will be set as follows:

9.2.25

 

7. Now when the user clicks on the button, the new time interval is shown in the Advanced trend.

9.2.26

 

DOWNLOAD DEMO PROJECT HERE

Data-log View type

You can show data-log view, as defined in the Data-log section. The size of the data-log view will be automatically adjusted to the size of the active area.

9.2.27

 

  • Show Top Toolbar check box allows you to show or hide the top toolbar with filters and data-log view settings.
  • Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g. the date selection controls).
  • Filters allow you to limit the data shown by time, number of records, or by parameters.

9.2.28

 

Time filter allows you to set time ranges for records shown. You can specify a Time From value (in UNIX UTC time; e.g. seconds since the year 1970), Time To value, or Time Scale value. You can use constants, or you can use tags from PLCs or variables from View Scripts.

1. Using constants: just write the value in seconds in the text field

2. Using Tag: enter the tag value or use “…” button to specify a tag.

3. Using Variable: enter an = followed by the variable name.

 

Row Filter limits the total number of records shown. Again, you can use constants, or you can use tags from PLCs or variables from View Scripts.

 

Key Filter can limit the data shown by specifying filters for data items. Keys must be enabled in data-log definition to show up in the filter. For each defined key, you can specify the value. To specify a value, you can use constants, or you can use tags from PLCs or variables from View Scripts.

 

  • Time Scale [min] parameter specifies the time interval that will be shown by the Advanced Trend. Units are minutes.
  • Background Color can be set to transparent or to a specific color. If you set this parameter to color, you can specify which color will be shown as the background.
  • Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

Example on showing filtered datalog data

Suppose you want to show an on-screen data-log view table, but only show data filtered by user input.

1. Create data-log and data-log view. In the data-log tag definition, check the Key check box to enable filtering using this tag value.

9.2.29

 

2. Create a new view and insert Active area into it.

9.2.30

 

3. Set up its init state.

9.2.31

 

4. Set up data filter as follows:

 

9.2.32

 

5. Test your view.

9.2.33

 

DOWNLOAD DEMO PROJECT HERE

User Actions type

You can show the history of all user actions. The size of the user actions view will be automatically adjusted to the size of the active area.

9.2.34

 

  • Show Top Toolbar check box allows you to show or hide the top toolbar with filters.
  • Show Bottom Toolbar check box allows you to show or hide the bottom toolbar (e.g. the date selection controls).
  • Time Scale [min] parameter specifies the time interval that will be shown in the alarm history table. Units are minutes.
  • Background Color can be set to transparent or to color. If you set this parameter to color, you can specify which color will be shown as the background.
  • Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback in the specified JavaScript function. This function must be defined in View Script.

 

SQL Table

The SQL Table feature allows you to show values from the SQL database in a table. To get data from the database, specify your connection first. In the connection settings, you can modify the SQL selection to suit your requirements.

 

  • TIP: You can create a new SQL connection specifically for use with this table.

9.2.35

 

Parameters

Once is your connection set up, you can use parameters to modify your SQL query. In the Parameters, you can put multiple parameters. Each parameter can be a constant or you can use tag or variable from View Scripts.

  • using constants: just write the value into the text field
  • using Tag: enter the tag value or use the “…” button to specify a tag.
  • using Variable: enter an = followed by the variable name.

 

Connections

By passing the connection parameters, you can override the connection that will be used to show the SQL table. This option is especially useful if you are working with parametric views. To set your connection parameters, click on the “…” button next to the Connections field.

 

Show Header

This option enables you to show the header row. If you select this option, you can fine-tune the parameters by pressing the “Customize” button.

9.2.36

 

The default option is “Columns from SQL.” If you use this option, your table will show a top row with a description of columns taken directly from the SQL.

You can also set custom columns to set up names of columns manually. In addition, with this option, you can specify the Width of the column in pixels. If you leave with=-1, column width will be set to auto-scale. The final option is Alignment, where you can specify whether a given column should be aligned on the left, right, or in the center.

 

Background Color

The background Color can be set to transparent or to a given color. If you set this parameter to color, you can specify which color will be shown as the background.

 

Row Click Callback

Row Click Callback is a neat feature: when a user selects a row in a table, you will get a callback into the specified JavaScript function. This function must be defined in View Script.

Modifying Query

Specifying parameters enables mySCADA to modify an SQL query and insert the specified parameters into the SQL query during communication. To do so:

1. Create a connection to be used with the SQL Table. Put $1$, $2$, … into the SQL query whenever you want to replace the parameter.

9.2.37

 

2. Now set up Parameters and pass those parameters to the query.

9.2.38

 

3. When mySCADA processes the SQL Query, it will replace $1$ for valve1 and $2$ for the value of the variable

 

Example

Let’s say you need to read data from a database in a given time interval. The time range is specified by the View Script variables timeFrom and timeTo. The SQL command could look like this:

SELECT * FROM table_name WHERE

“dateFrom” >= to_timestamp($1$) and

“dateFrom” <= to_timestamp($2$);

 

1. This SQL command should be specified in the Connection definition.

9.2.39

 

2. Now create a new view. Insert it into the active area.

9.2.40

 

3. Now create DateFrom, DateTo, and show buttons:

9.2.41

 

4. Now open the view script and create two variables dateFrom and dateTo:

9.2.42

 

5. Create a set command for the dateFrom and dateTo buttons. We will set the date into the view script variables dateFrom and dateTo:

9.2.43

 

6. Now use the show buttons to open SQL table into Active Area:

9.2.44

 

As you can see, we are using two parameters that are automatically placed into SQL before the readout.

7. Now test your view:

 

DOWNLOAD DEMO PROJECT HERE

Suggest Edit