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. LOGO! 0BA7/0BA8 configuration
    5. 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

1.Introduction #

Purpose of this Manual

This manual is a reference guide for the myDESIGNER software. It will:

  • explain how to install and use myDESIGNER project development tool
  • give you an overview of its features and functions

 

Who Should Use This Manual

Use this manual if you are responsible for designing, installing or programming of the project.

It is not necessary to have an advanced knowledge of this project creation tool. All information is available in this manual as well as the tutorial videos and examples.

 

Getting help

For technical support, please visit the RESOURCES section on our website, where you can find most of the necessary information – product information, video tutorials, other manuals.

If you do not find information you need, go to https://www.myscada.org/submit-ticket and submit a ticket. Our qualified personnel is ready to help you. For quick and effective communication, please send detailed information about the project.

 

 

 


* The examples and diagrams in this manual are included solely for illustrative purposes. In no event will mySCADA technologies. be responsible or liable for indirect or consequential damages resulting from the use or application of this equipment. Reproduction of the contents of this manual, in whole or in part, without written permission of  mySCADA Technologies, is prohibited. mySCADA Technologies reserves the right to change this manual at any time without notification.

Copyright – © mySCADA Technologies s.r.o.

Trademark – the names used for identification are all registered trademarks of their respective companies.

1.1.About myDESIGNER #

myDESIGNER, part of the mySCADA bundle, is an integrated development environment used for configuring, developing, and managing HMI/SCADA applications. In this manual, you will find everything you need to create a full-feature SCADA (Supervisory Control and Data Acquisition) project. With this tool, you can create and manage mySCADA projects; configure connections with devices; and enter tags, alarms, and trends. It also allows you to design advanced mimic graphics with specific animations, corresponding with PLC tag values.

An easy-to-use interface allows for simple manipulation of the project’s configuration and data processing. The project data are stored in a single directory for easy backup and restoration. myDESIGNER has an integrated GUI (Graphical User Interface) visualization editor for easy creation of professional looking mimic graphics. The graphics are based on the Scalable Vector Graphic (SVG) format, which means that your controlled technology will always look sharp.

Key Features

  • Free for personal and business use
  • Simple to use
  • GUI design in Scalable Vector Graphics (SVG)
  • Animations and effects can be added to any shape or object
  • Support for background images (JPEG, GIF, and PNG)
  • Ability to attach PDF documents to the project
  • Ability to attach MP3 sound files to the project
  • Built-in script editor
  • Available for Mac OS X, Windows, and Linux

Drawing Possibilities

  • Shape tools: rectangles, circles, ellipses, paths, texts, and images
  • Path tools: Bezier curves, conversion to a path, union, subtraction, intersection, merge
  • Group editing
  • Advanced text support
  • Images import (.jpg, .png)
  • Transformations: resize, rotate, skew, align, distribute
  • Properties manager
  • Resource manager: gradients, patterns, and markers
  • Layers
  • Smart Guidelines, snap to points, grid

Project Management

Key components of mySCADA projects are the visualization screen views. This is where the schematic visualizations of controlled devices are displayed. Single objects or groups of objects can be created and defined especially for communication with connected PLCs. These specified objects can then be animated, changing their visual appearance based on the PLC tag values.

The graphic screens are internally represented as SVG files, defined project connections as configuration JSON files, and alarm states and trends stored in separate JSON files. The configuration files can be edited directly in myDESIGNER, so you do not have to edit them individually. The visual and server side scripts are also stored into external files with the .js extension. Complete mySCADA projects consist of configuration files, SVG files, scripts, documents and sound files, and they are saved directly to your hard drive. For more information about exact project structure, see the following table:

File

Description

settings.json

Complete settings of project

*.dlg.json

Data-log definition file

datalogs.json

Settings for data-logs such as its names, translations, size distribution, etc.

trends.json

Settings for trends such as its names, translations, etc.

views.json

Settings for views such as its names, translations, etc.

*.trnd

Advanced trend definition file

cas.json

CAS Alarms definition file

*.svg

Mimic diagram (view) definition.

*.svg.js

View Script. Has the same name as the corresponding view. Contains a list of functions in JavaScript language.

scripts

Directory containing all server side scripts. Can be empty if no server-side scripts are defined.

 

In the following sections, you will learn how to create a project; add, configure, or delete connections; define alarms and trends; and manage other project settings.

2.Tutorial videos #

To get you started using myDESIGNER quickly and efficiently, we have prepared a set of tutorial videos. These videos cover most of myDESIGNER’s functionalities. Here is the list of all tutorial videos:

3.Getting started with myDESIGNER #

The first screen you will see after opening the application is the Start Page.

start page

 

Click on the blue arrow in the bottom left-hand corner for a brief tutorial to get to know the capabilities of myDESIGNER. The Start Page always opens up upon the start of the application – if you wish to prevent this, click on the Show On Startup button at the bottom. You can close the by clicking on the cross in the header tab. If you wish to display the Start Page again, go to the main menu, Help section, and select Start Page.

Look at the picture below to get to know the myDESIGNER interface:

3.0.2

 

Main menu

  • File: manipulation of project files and printing
  • Project: has the same structure as the Project Window
    • Projects: manipulation of projects
    • View: working with views
    • Layouts: viewing Layout definitions
    • Documents: loading, copying, and deletion of attached PDF documents
    • Advanced Trends: opening up and closing trends
    • CAS Alarms: opening up and closing complex alarms
    • Data-logs: defining data logging
    • Tag Database: managing your tags
    • Connections: connections to your PLCs
    • Server-side Scripts:  managing JavaScript in mySCADA
    • Sound: loading and deletion of MP3 files
    • Users: managing users
    • Devices: equipment with installed mySCADA application, accessible from editor
  • Tools: language selection
  • Window: direct access to different editor tabs and window control
  • Help: opens the help menu

 

Main toolbar

The basic toolbar consists of the following functions:

toolbar

 

  • Save – saves your work
  • Save all files – saves all opened files
  • Undo – undo the last operation
  • Redo – redo last operation
  • Upload from a Device – downloads a project from the selected mySCADA device
  • Download to a Device – uploads a project to the selected mySCADA device
  • New Project – creates a new empty project or from the wizard, opens existing projects, and imports projects from .mep file
  • Check Project – checks the selected project
  • Customize the Look – customizes colors, fonts, and look of a project
  • Project Up – moves the project up the list
  • Project Down – moves the project down the list

 

The main toolbar content may change depending on a selected project element (i.e. project, view, sound, script, document, alarm, etc.). The set of described icons only concerns the project elements; other possible sets are described in the chapters devoted to the relevant elements.

3.1.Creating a project #

Start using myDESIGNER by creating a new project.

1. Click on the New Project icon in the main toolbar or use the command New Project from the main menu Project-> Projects.

new project

 

2. A new dialog window will show up with 4 options:

dialog

 

Empty project

With this option, you can create a new empty project.

1. Choose the directory where your empty project will be located.

2. If the selected directory is not empty, all its files will be deleted.

3. Click on the Finish button to create an empty project.

empty project

 

Import Project

This option imports another project from an MEP file (all exported projects of mySCADA Designer use this extension).

 

1. Choose the directory where the project to be imported should be located and click Next.

import project directory

 

2. Click on Import File (suffix *.mep) and then on the Finish button – an imported project will be created in the selected directory.

3. If the directory is not empty, all its files will be deleted!

4. Click Finish to finalize the import.

import project file

 

Project wizard

This feature helps you step-by-step to create a functional base for your new project. It will create a connection to the PLC, set up a simple screen with animations, and pre-configure alarms and data logging.

1. Select the directory where you want your new project to be located and then clickNext.

  • Note: You have to click on Clear Directory first if the selected directory is not empty.

project wizard directory

 

2. Set the connection to your device and click Next.

project wizard connection

 

3. Set the Tag (Address) and click Next.

project wizard create tag

 

4. You can now set the Tag Value Range and Alarm limits.

project wizard finish

 

5. Click on Finish to close the Project Wizard.

Existing project

With this feature, you can open an already existing project:

existing project

 

Navigate to the project directory and click on “select project directory.” It the directory contains project files, the project will be opened in myDESIGNER.

3.2.Workspace management #

All myDESIGNER windows are organized into panes. You can move the windows arbitrarily as the designer remembers the positions of both automatically and manually closed windows until the next time they are opened.

Each window can be dragged away from the workspace and will stay undocked until you dock them again using the key combination Alt+Shift+D. You may resize the windows as well.

Resetting Windows Positions

If you wish to return all the windows to their default state, use the Reset Windows command from the menu Window –> Reset Windows.

windows

Moving windows

Click on the window header and drag it to the desired position,

  • Note: The red preview box indicates where the window will appear once you drop it.

moving windows

Automatically Appearing Windows

Some windows appear only when you are performing a task to which they are related. For example, the Layers window appears only when you are designing a screen view. In the Window menu, you can select which windows will appear automatically.

Useful shortcuts

Shift + Escape Maximizes a currently opened window
Ctrl + Shift + W Closes all open documents in the Source Editor
Alt + Shift + D Pins a detached window to the Main window

Project window

This window displays a tree structure of all opened projects and the list of devices running mySCADA.

Project (Your project name)

  • Viewsall HMI screens in a project
  • Layouts – all defined graphical layouts for given project
  • Documents – PDF-documents attached to the project
  • Advanced Trends – trends used with data logs for retrieving online and historical data
  • CAS Alarmshere you can configure the Complex Alarm System
  • Data-logs – configured data-logs
  • Tags Database – managing your tags
  • Connections – PLC connections for a given project
  • Server-side Scripts – user-defined scripts
  • Sounds – associated sounds in MP3 files
  • Users – defined project users

Devices

List of available devices from/to which you can load a project. Here you can find all iPods, iPhones, iPad Touches, Android devices, Raspberry PI devices, mySCADA Boxes, mySCADA Pros, and server PCs to which you can connect. You can also specify the device manually to access remote network devices. Note that it may take a few minutes to find all devices available in the local network.

Overview Window

This window shows a preview of the selected view; otherwise, it is blank.

Properties Window

This window allows access to object and project properties. The properties of specific objects are described in the relevant chapters.

Main Window

This window is your main working area where the content of all project elements is displayed. It gives you the ability to draw graphic visualizations, change connection details, and alter alarms or trend details. The script editor also uses this window.

main window

 

expands

This button expands the list of all opened projects and selects one of them. The arrow next to the project name will point to the project that is currently being displayed.

maximizes

This button maximizes the main window by docking all other open windows.

switch

These buttons are used to switch between different opened tabs when the tabs do not fit into the main window.

4.Checking project #

If you want to make sure your mySCADA applications run properly, you have to comply with certain rules when creating a project. For this purpose, you can use the Check Project function, which checks if your project complies with these rules.

Use the command Check Project from Project->Projects or click on the Check Project icon in  the main toolbar.

 

Example:

1. Select the parts of your project that require checking:

 

2. The Syntax Settings button opens the error list, where you can set the errors to be ignored:

 

3. The Check button starts checking the project syntax. If the check is successful, a confirmation dialog box will show up:

If the check finds errors, an error dialog box will show up:

 

4. Click on the Show button to display all errors.

 

  • Note: All errors are divided into categories on the left; selected error categories such as View, Documents, etc. are displayed on the right. If you wish to correct the errors that were found, click on Repair.

5.Projects’ visual appearance #

mySCADA is a very flexible tool that allows you to modify the visual appearance of your project in a runtime environment freely. You are free to change the fonts, colors, and icons to fit your company’s visual guidelines.

 

For visual appearance set up, click on your project and then click on the color palette icon in the Main Toolbar.

visual appearance

 

The Visual Appearance Dialog Window will show up:

visual dialog

 

In the dialog, you can see options for the visual appearance of your project in a runtime environment. If you change any color or visual option, you can immediately see how this option is displayed in the runtime environment.

Changing the Default Color

The simplest way to change the default visual appearance is to set a new default color. To do so, click on a corresponding color in the “Default Colors” section.

color1

 

The change is immediately reflected:

color2

 

Changing Master Colors

You can very easily change the color scheme to any colors you like. Just click and change the Primary, Secondary, and Text colors.

Changes are reflected in all GUI sections:

master colors

 

Changing Icon Colors

You can change the Icon colors in the section “Icon Colors.” For each visual section of the runtime environment, you can specify different icon colors.

icons colors

 

Fine Tuning

You can fine-tune the visual appearance of any on-screen element. To do so, click on the option “Show Color Tables.” The color tables for your project are shown:

fine tuning

 

They are split into two parts: Alarms and Other Colors. In the Alarms section, you can set the colors of the text for any type of alarm. In the Other Colors section, you can fine-tune the appearance of almost any element in the runtime environment.

Saving Custom Appearance

You can save your changes for use in other projects. When you change any color or parameter, the “save to custom” button is automatically shown.

custom

 

When you press the “Save to Custom” Button, all your changes are saved under a given name. Your custom appearance settings are automatically added to the combo box selection:

custom save

 

You can delete your custom saved appearance by clicking the “Delete” button.

6.GUI/HMI Editor #

The GUI editor is a drawing interface based on Scalable Vector Graphics (SVG).

6.1.Creating views #

To create views for visualization, open the Views folder in the Project Window; the main toolbar will show you these options: Open View, Add View, Duplicate View, Delete View, Print View, and Show Used Tags.

6.1.1

 

1. Click on the Add View icon located above the main screen or use the command from the main menu Project->Views->New View.

A new dialog window opens to allow you to set the visualization parameters:

6.1.2

 

Name: view name

Description: additional comments about visualization

Parametric Window: option to create a parametric view – use parametric views when you need multiple views different only in a data source; such sources are specified by the received index when a parametric view is prompted (see Commands – Open command and Parametric window).

Connection: list of PLC connections defined in the current project. This is a default connection – if you enter the tag and do not specify the connection, this connection will be assumed as the default.

Refresh: refresh rate of the visualization; time in milliseconds

Page Orientation:

  • Portrait predefined vertical display
  • Landscape predefined horizontal display
  • Note: If your device uses a pop-up menu toolbar (iPhone, Smartphones, etc.) you can set up its width in pixels, and it will be automatically subtracted from the final screen size.

New View Size:

  • Parameter Based – here you can set the aspect ratio and the canvas size
  • Device Based – variations of pre-defined settings for many types of devices
  • Custom – allows you to define your own view settings
  • Note: You can change the screen dimensions at a later time if you right-click on the canvas and select ’Resize canvas’ from the pop-up menu.

 

2. Click on Add to create a view with the selected parameters or press Cancel to exit without creating or saving the view.

In the Project Window, you can see all the views listed in the Views folder.  In the Properties window, you can see the parameters of the currently selected view. To open an existing view, simply double click on its name. You can also click on the Open View icon or on select Open View from the Project->Views menu. You may also use the other options such as copy, delete, import a view, etc.

6.1.3

 

Menu

6.1.4

 

File

This menu allows you to manipulate an opened view:

Export – exports the current view into other formats: JPG, PNG, BMP, and PDF

Print – prints the current file (shortcut Ctrl+P).

Check – performs a check of your view; use this if you experience malfunctions, and it will check for possible duplicity of IDs, objects misplaced outside of the canvas, etc.

Close – closes the current file (shortcut Ctrl+W).

Edit

This menu provides basic operations like undo, redo, copy, cut, delete, group, lock, select, etc.

Undo – erases the last change made in the program (shortcut Ctrl+Z)

Redo – reverts the change (shortcut Ctrl+Y)

Copy – creates a copy of a selected object or area on the clipboard (shortcut Ctrl+C)

Paste – pastes the object or area from the clipboard (shortcut Ctrl+V)

Paste on the same location – pastes the copied or cut object to the same location as the source.

Cut – cuts a selected object and places it on the clipboard (shortcut Ctrl+X)

Delete – deletes a selected object (shortcut Ctrl +D)

Paste dimensions – transfers certain parameters of a selected object:

  • Paste size – modifies selected objects, setting the size to that of the object being copied
  • Paste width – modifies selected objects, setting the overall width to the size of the object being copied
  • Paste height – modifies selected objects, setting the overall height to the size of the object being copied
  • Paste size separately – resizes selected objects one by one
  • Paste width separately – changes the width of selected objects one by one
  • Paste height separately – changes the height of selected objects one by one

Group – groups multiple objects together (shortcut Ctrl+G)

Ungroup – splits the grouped objects

Enter group – allows access to individual objects inside an object group (shortcut Ctrl+E)

Exit group – returns to normal selection mode, i.e. the whole group will be selected at once (shortcut Ctrl+Shift+E)

Select all – selects all objects on the canvas (shortcut Ctrl+A)

Deselect all – deselects all objects on the canvas

 

Drawing

In this menu you can create figures, lines, and curves; add pictures and texts; etc.

It contains the same features as the main toolbar; for detailed information, see the toolbar section of this chapter.

Transforms

In this menu you can align, center, distribute, order, flip, and rotate objects and resize the canvas.

Display

In this menu, you can enable grid and rulers; different zoom options are available too.Fonetický přepis

Dialogs

This menu includes the Memory Monitor utility.

Memory Monitor – shows the amount of memory being used by myDESIGNER

Help

This menu offers additional information about myDESIGNER.

  • TIP: The most frequently used functions from these menus are also available in the main toolbar or in the right-click menu.

GUI Toolbar

In the upper part of the GUI editor window, there is a secondary GUI toolbar where you can find all of the necessary functions for designing and animating the views.

6.1.5

 

Properties Bar

This bar is located right below the GUI toolbar. It allows you to view and change the properties of selected objects or set default drawing properties such as fill and stroke color; line type and line thickness; font family, type, and size.

If there is no object selected, you can specify the default properties for new objects to be created. If you click on an existing object, you will see its current properties that you can modify.

In the following example, all of the new objects will have transparent fill and black solid line stroke:

6.1.6

 

With the Properties bar, you can easily change the properties of multiple objects at once: stroke width, stroke style, stroke color, fill color, and also the font family and size.

6.1.7

 

Options Bar

This bar is located in the left lower part of the Main window.

6.1.8

 

Here you can activate the repeat action mode; turn on/off the smart guidelines, snap-to-points, and square mode function; enable the grid; set the discrete rotation step; force horizontal/vertical line drawing; and automatically close the drawn paths. Detailed explanations of each function will follow.

6.2.Selecting objects #

Click on the canvas and drag the mouse to select object(s). If the objects are selected correctly, the selection border shows up and the object properties will be displayed in the Properties window. To add objects to your current selection, press and hold the Shift key and click on more objects.

6.2.1

 

  • Note: If you drag the mouse from the left to the right, only the objects fully enclosed in the selection window will be selected. If you drag the mouse from the right to the left, all the objects that intersect with the selection window will be selected.

6.3.Drawing primitives #

 

In the DRAW section of the GUI toolbar, you can choose the type of object you want to draw (line, polyline, square, rectangle, circle, ellipse, text) or insert an active area window, picture, or ready-made components.

6.3.1

 

6.3.2

 

Rectangles and Squares

To create a rectangles or squares, click on the Create Rectangle icon in the GUI toolbar (you can also find it in the menu under Drawing). Click on the canvas, hold, and drag the mouse to get the desired shape and size.

Ellipses and Circles

To create ellipses or circles, click on the Create Ellipse icon in the GUI toolbar (you can also find it in the menu under Drawing). Click on the canvas, hold, and drag the mouse to get the desired size and shape of the object.

6.4.Creating text elements #

This feature allows you to add text on the drawing canvas. Click on the Text tool icon in the main toolbar and then click on the canvas in the desired location. This will open a new window for the text input.

6.4.1

 

Type in the text to be displayed and click on OK. The text is now placed on the canvas and can be moved, resized, rotated, etc., like any other object.

6.4.2

 

  • Note: The text in the element can be changed at a later time – select Properties on the right side of the window and look at the Text cell.

6.5.Insert image #

With this function, you can insert images in PNG, JPG, and JPEG formats.

Click on the Insert Image icon in the main toolbar, then click on the canvas, drag the mouse to set the picture size, and release the mouse button.

6.5.1

 

This will open a dialog window to select the picture.

6.5.2

 

In this dialog, you can see all pictures that you have used in your project. You can add new pictures by clicking on the From File button.

  • TIP: When you want to remove pictures that are not used anywhere in your project, you can use the button “Remove Unused”.

If your project does not have any imported pictures yet, an open File dialog will be shown. If you already have pictures in your project, they will be listed in the Picture Chooser Dialog. Either select pictures that have already been imported or import new ones by clicking on the button “From file”.

6.5.3

 

The picture is now on the canvas and can be moved, resized, rotated, etc. like any other object.

  • Note: You can import images in their original size by a single-click on the canvas.

6.6.Poly-lines #

With this function you can create independent and continuous lines, arcs, splines, or any combination of these elements.

6.6.1

Line

Click to set the start point, move the mouse to the end point of the line, and then click again.

 

6.6.2

 

Arc

Click and hold the mouse button while moving from the start point, release the button at the control vertex point, and then click again to set the end point.

 

6.6.3

 

Spline

Click on the start point and move the mouse to the endpoint, then click again and hold down the mouse button while forming the curve, and release the mouse button to finish the drawing.

 

6.6.4

 

Double-click or press the ESC key to finishing the polyline drawing.

 

6.6.5

 

When you finish drawing the object, you will see all the control, end, and vertex points, which you can modify.

 

6.6.6

 

Editing Segments

You can add, remove, or delete segments from a spline you have created. Click on the arrow on the right side of the Create Spline / Bezier Curves icon (you can also use the right-click) to display the Options menu.

6.6.7

 

Add segment

Select a segment you would like to add from the options menu. Click on the control point of the polyline where you want to add the new segment.

Delete segment

Select Delete segment from the options menu. Click on the end control point of the segment you want to delete.

Close path

If this option is active, all the polylines being drawn will close automatically.

6.6.8

 

6.7.Moving objects #

Select the object(s) you want to move. Move the mouse inside the selection border, click and drag the object to the desired position, and then release the mouse button.

6.8.Resizing objects #

You can resize object(s) by dragging the selection border.

1. Select an object you want to resize – you will see the blue arrows selection border.

 

6.8.1

 

2. Drag the arrows to change the size of the object.

If you drag using the arrows at the corners, the object will retain its aspect ratio. If you use the arrows on the sides, the object will change its horizontal / vertical size only.

 

6.8.2

 

6.9.Rotating objects #

1. Double click on an object you want to rotate; blue arrows will appear around the selected object.

 

6.9.1

 

2. Drag the corner arrows until you get the desired angle of rotation.

 

6.9.2

 

  • Note:  You can also change the center of rotation for the selected object. To do so, move the blue circle located at the geometric center of the object.

6.10.Skewing objects #

1. Double-click on the object you want to skew

2. Drag the blue arrow in the middle to get the desired skew.

6.10.1

 

6.11.Filleting #

The rectangles and squares can have their corners filleted.

1. Triple click on an object to show the blue point in its corner.

 

6.11.1

 

2. Click on the blue corner point, hold, and drag the mouse to get the desired shape.

 

6.11.2

 

6.12.Combining objects #

You can combine multiple simple objects that overlap; together with the Merge, Subtract, Intersect, and Turn-to-Path functions, you can create one complex object of arbitrary shape and color.

6.12.1

 

Merge

This feature can merge two objects into one, including the contours:

1. Create objects you want to use to create the final object

 

6.12.2

 

2. Select both objects using your mouse

 

6.12.3

 

3. Go to the menu Drawing –> Path operations and select Merge selected objects together – the two objects will merge into one. You can also select the desired function from the GUI Toolbar.

 

6.12.4

 

Subtract

This feature is opposite to the Merge function. You can subtract portions of a bigger object to create  a new object of the desired shape.

1. Select objects and make sure the outline is in the desired shape of the final object. Then select the inner object that you want to remove.

 

6.12.5

 

2. Go to the menu Drawing –> Path operations and select Subtract objects. You can also select the desired function from the GUI Toolbar.

3. Now you have a new cutting that can be modified – use the same steps as described for shaping objects

 

6.12.6

 

Intersect

This feature creates a new object from an overlapped area of two different objects.

1. Arrange two arbitrary objects so their overlapping pieces make a desired shape, and then select the objects.

 

6.12.7

 

2. Go into the menu Drawing –>Path operations and select Intersect. You can also select the desired function from the GUI Toolbar.

 

6.12.8

 

Now you have a new cutting ready to be formed into a desired shape by clicking and dragging the surrounding dots.

Turn-to-Path

This feature allows you to transform the objects e.g. Changing primitive objects to complex paths. Go to Drawing->Path operations->Convert Selected Objects to General Path Objects. You can also select the desired function from the GUI Toolbar. You will see a series of points appear around the object.

Simply drag the surrounding points to achieve the desired shape.

 

6.12.9

 

6.13.Fill and stroke #

Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern.

 

6.13.1

 

Change a fill or stroke:

1. Select the object(s) whose color you want to change

2. Click on the Color, Gradients, and Patterns button in the GUI Toolbar

6.13.2

 

3. Choose a solid color, gradient, or pattern.

4. Confirm the changes by clicking on the OK

Solid Color

Navigate to the Colors tab in the Resources tab where you will see a few options for solid colors:

Swatches – select the color from the pre-defined palette

6.16.3

 

HSV – mix your desired color by determining the Hue, Saturation, and Value and setting Transparency

6.13.4

 

HSL – mix your desired color by determining the Hue, Saturation, and Lightness values and setting Transparency

6.13.5

 

RGB – mix your desired color by determining the Red Green and Blue values and setting Alpha level

6.13.6

 

CMYK – select your color from the Cyan, Magenta, Yellow, Key (Black) color palette and set Alpha

6.13.7

 

SVG – select your color from the pre-defined SVG standard colors palette

6.13.8

 

Gradients

Using gradients enables you to create your own custom color blends and give your objects a plastic look. You can create smooth color gradations over one or more objects and save them for later use   on other objects.

6.13.9

 

The Resources tab contains pre-defined linear and radial gradients and patterns. You may create new gradients and patterns or modify the existing ones.

 

Linear gradient

The linear gradient function enables you to create horizontal, vertical, and diagonal gradient fills.

6.13.10

You can choose from pre-defined linear gradients in the Resources tab:

6.13.11

 

When you click on a pre-defined gradient, you will see its properties in the right side panel.

You can see the gradient preview in the small top window, and if you click on the tab Preview, you will see how the object will look.

6.13.12

 

The bottom part of the panel is divided into two tabs, Basic and Advanced:

 

Basic – you will find all defined colors for a selected gradient

6.13.13

 

On the basic tab panel, each color has its own controls.

6.13.14

 

Therefore, each color has the following properties:

  • Color – sets the color and corresponding color code

6.13.15

 

  • Opacity – specifies the alpha channel (transparency)

6.13.16

 

  • Position – specifies the starting point of this color. Move the slider to the side to change the color position.

6.13.17

 

To remove a color, press the “X” button.

6.13.18

 

To add a new color, press the + Add Color button.

Advanced – you can fine-tune your custom gradient and define the id, angle, and fill options

6.13.19

 

  • Id – you can name the newly created gradient
  • Angle – you can change the angle of the gradient from horizontal to a custom angle
  • x1, y1, x2,y2 – linear gradients are defined by the bounding box of an object they fill; x1 and y1 specify the initial point of the gradient of the bounding box; x2 and y2 represent the end point of the gradient
  • Spread method – Pad – basic fill option, no reflection or repeating
    • Repeat (repeats the shading)
    • Reflect (reflects the shading)

 

Radial gradients

This function operates with circular gradient fills; this is the same principal as for the linear gradients, only the Advanced section is slightly different:

6.13.20

 

  • Id – you can name the newly created gradient
  • Radius – sets the gradient radius
  • cx, cy, and r define the outermost circle of the radial gradient
  • fx and fy define the focal point of the radial gradient
  • Spread method – Pad – basic fill option, no reflection or repeating
    • Repeat (repeats the shading)
    • Reflect (reflects the shading)

 

Patterns

Different objects or images can be used as a pattern for other objects. myDESIGNER lets you choose from pre-defined patterns or create new ones, either by modification of the existing ones or by importing a file (jpg, png, jpeg) or selection. Patterns can be either raster images or vectors. If you use raster images, you might experience pixelation on tighter zoom, so if you can choose, use vector image where possible.

6.13.21

 

Predefined Patterns

Predefined patterns are simple but effective patterns for you to use. Please keep in mind that you can very easily change color or rotate gradients to suit your requirements. Usage is quite simple; select a pattern you wish to use, and if necessary, modify the parameters and hit the save button.

6.13.22

 

User Defined Patterns

All the patterns used in your view are listed here. You can also create new ones from predefined patterns or import them from files or selections.

6.13.23

 

To use a user-defined pattern, just select it and click on the OK button.

Buttons on the bottom allow you to create new patterns, either from a file or from a selection, as well as delete and duplicate existing patterns.

 

Pattern Import

From File

Click on the + From Picture button and select the source raster image file in the dialog window, then click on the OK button.

From Selection

Click on the + From Selection button to create a new pattern from the selection in your current view.

1. Draw the objects you would like to use as a pattern and select them.

6.13.24

 

2. Now open the resources dialog. Navigate to the Pattern tab. Now click on the + From Selection The new gradient has been created:

 

Parameters

The parameters of the selected gradients can be easily modified. You can, for example, change the main color of the gradient, rotate, or scale it. Please find a list of parameters below, including explanations for each one.

6.13.25

 

Parameter

Description

Id

Unique ID of the pattern. Each object has its own unique id.

Scale

You can scale the gradient so it appears smaller or larger. You might need to scale the gradient to fit your object’s size. You can preview the result in the Preview window.

Rotate

You can rotate the pattern to the desired angle.

Translate

Move the position of the gradient along the X and Y coordinates.

 

Example of using a pattern

We will show you a simple example of how to use a pattern in your design. We will create a simple progress bar by using and modifying a predefined pattern.

1. First, we will create tree rectangles. The top one will be used as a border, the middle one will be used as our progress indicator, and the last one will be used in the foreground to give our progress bar a plastic look.

6.13.26

 

2. Now select the middle rectangle and click on the Colors, gradients, and patterns In the pattern section, select a bar pattern.

6.13.27

 

3. In the properties on the right side of the window, click on the color chooser rectangle and select a different color. Then use the Rotate slider to rotate the pattern by 45 degrees.

6.13.28

 

4. Click on the OK button to apply a pattern to the rectangle.

 

5. Now put all of the rectangles together to finish the progress bar.

6.13.30

 

6.14.Rulers and guides #

Watch video describing this functionality: https://www.youtube.com/watch?v=jiTpwXYE__I

 

Rulers

Rulers help you to accurately place and measure objects on the canvas. The common ‘0’ point of the horizontal and vertical rulers is the root. You can show and hide rulers in the options menu located in the left lower corner of your view.

6.14.1

 

6.14.2

 

Guides

Guides help you to align text and graphic objects. You can create ruler guides (straight vertical or horizontal lines) to align the objects. To create a new guide, click on any point on the ruler; the created guide can be moved later. You can set its exact location or delete it by using the right-click menu.

6.14.3

 

Smart Guides

Smart guides are temporary orthogonal snap-to-point guides that appear when you are creating or manipulating objects. They help you align, edit, and transform objects in respect to other objects.

6.14.3

 

To enable/disable the smart guides, please click on the Smart Guides icon in the options menu located in the left lower corner of your view.

6.14.5

 

Snap-to-Point

Snap-to-point guides are temporary bullet points that appear when you are creating or manipulating objects. They help you to align your object to other objects.

6.14.6

 

To enable/disable the snap-to-point guides, please click on the snap-to-point icon in the options menu located in the left lower corner of your view.

6.14.7

Grid

The grid is displayed behind your graphics on the canvas but does not print with the project visualization – objects align automatically when the grid is active. You can activate or deactivate it from the Display menu or the Options bar.

6.14.8

 

To enable/disable the grid, please click on the grid icon in the options menu located in the left lower corner of your view.

 

When you right-click on the Grid Icon in the Options bar, the Grid settings dialog is shown

6.14.10

 

Grid settings

Here you can set the grid parameters like color, stroke style, and the grid step.

Go to the menu Display –> Grid settings or right-click on the grid icon in the Options bar.

6.14.11

 

6.15.Layers #

When you are creating complex visualizations, you might find it challenging to keep track of all of the graphic objects on the canvas. The smaller items might be hidden under the larger ones and thus working with them could get difficult. Layers can help you to keep track of your items.

 

Think of the layers as transparent planes, each containing graphic items that are glued together. If you change the order of the layers, you also change the position (visibility) of the items on the canvas. You can move items within a single layer, or you can group together multiple items spread throughout several layers. If you copy objects, then a new object is copied into the layer of the original object.

Layers can be controlled from two different places. There is a Layer window located above the properties window (toggle its visibility in the main menu – section Windows), and there is a Layer Combo Item located on the GUI Toolbar.

 

Layer Combo

The Layer Combo option is located on the right side of the GUI Toolbar:

6.15.1

 

With the Layer Combo option, you can control all aspects of Layers. An explanation of the controls is in the following picture.

6.15.2

 

Layer Window

The Layer window is activated in the main menu. Go to Window and toggle Layer Window visibility on/off.

6.15.3

 

The Layer Window and the Layer Combo option are complementary elements; both of them allow you to access all functions of Layers. The Layer window occupies more space, and so it allows for more comfortable control of layers than the Layer Combo option. An explanation of the controls is in the following picture:

 

6.15.4

 

Changing Layer Visibility

To change the layer’s visibility, click on the eye icon of the corresponding layer.

TAB + OBR, OBR

 

Locking selection

You can lock a selection for a given layer by clicking on the Lock icon. If the layer is locked, you will not be able to select any of its elements.

TAB + OBR, OBR

 

Setting Active Layer

The Active layer is the one into which new objects are drawn. For example, if you set the active layer to a layer named “Background” and then create a new object, this object will be created in the layer called Background. The Active layer cannot be locked, as you cannot create new elements on locked layers.

Setting Active Layer in Layer Combo control

If there is no object selected in your view, the name of the active layer is displayed in the Layer combo control.

 

6.15.5

 

To select a new active layer:

1. Make sure you have no object selected in your view. If you have selected objects, use the escape key to unselect all objects or click on a canvas)

2. Click on the Layer Combo control, and list of layers is shown.

3. Click on a layer name, which you want to set as the new Active Layer.

 

Setting Active Layer in Layer Window

The Active layer is denoted in the Layer Window by the checked checkbox on the left side of the layer control.

 

6.15.6

 

To select a new active layer, simply check the checkbox next to the desired layer.

Creating New Layer

To create a new layer, press the “+” button. A new dialog appears; enter the Layer name and confirm. A new layer will be created.

6.15.7

 

Removing Layer

To remove an existing layer, click on its name and press the “” button. If the layer you are about to delete contains any graphical objects, you will be presented with a warning:

6.15.8

 

If you continue, the layer will be deleted along with all the graphical objects it contains.

WARNING: If you delete a layer, all graphical objects contained in the layer will be removed as well. This action cannot be undone.

 

Selecting all items in given layer

To select all items in given layer, click on the select all items icon.

6.15.9

 

Changing Layer Name

To change a layer name, double click on the layer name. The Rename dialog will be shown. Change the name and press the OK button.

6.15.10

 

Special Purpose Layer – ActiveArea

As you might notice, the topmost layer is always a layer named “ActiveArea”. This Layer cannot be removed or shifted. It only contains active areas defined in your views. Active areas are always on top of the rest of your drawings.

Determining Layers of selected objects

If you select an object or multiple objects, the layer containing these objects will be displayed in the Layer Combo box and highlighted in green in the layer list.

6.15.11

 

. 1 The selected object is on the layer named “Middle Layer”. You can see the name of the layer in the Layer Combo control panel. Note that the name is in bold.

6.15.12

 

. 2 The selected object is on the layer with the name “Middle Layer.” This is shown in the Layer Window by a green highlight and bold font.

If you select multiple objects belonging to different Layers, the Layer controls will highlight all corresponding layers in green.

  • Note: The Layer Combo box will show the name of the top layer in the selection; its name will not be in bold.

6.15.13

 

Moving Objects to different Layer

If you want to move objects to a different layer, select the objects on the canvas and then select the desired layer. The selected objects are all moved to the desired layer.

6.15.14

 

A green highlight shows which layer contains your selected objects. To move the selection to a different layer, just click on the layer name.

6.15.15

 

A green highlight shows which layer contains your selected objects. To move the selection to a different layer, just click on the layer name.

Changing Order of Layers

Changing the order of Layers is quite simple. Just select a layer you want to move and then click on the Up or Down arrow to move it.

Layers at the top of the list overlap the layers at the bottom of the list. Therefore, if you move a layer up, it will overlap all the layers below it in the list.

6.15.16

 

6.15.17

 

Changing Layers Properties

To change layer properties, press the setting button.

6.15.18

 

You will be presented with the Layer Settings dialog.

6.15.19

 

The layer settings dialog has two parts; on the left side, there is a list of layers. You can add, delete, change position, and merge layers with the buttons at the bottom of the list. On the right side, there is a settings pane for the selected layer.

Changing Layer Name

To change a layer’s name, click on the layer in the list of layers to select it. Then you can write a new name in the Name box.

6.15.20

 

Changing Layer Opacity

To change a layer’s opacity, click on the layer in the list of layers to select it. Then drag the Opacity slider to change it to a new value.

6.15.21

 

Changing Layer Visibility

To change a layer’s visibility, click on the layer in the list of layers to select it. Then, fill in the conditions for visibility. E.g., enter tag and minimum and maximum values. If the tag value is within the range of the specified minimum and maximum values, the layer will be visible.

6.15.22

 

Changing Layer visibility based on Zoom level

To change a layer’s zoom visibility, click on the layer in the list of layers to select it. Then check the zoom visibility check box. Now you can specify the minimum and maximum zoom level when the layer will be visible.

6.15.23

 

For more information about zoom visibility animation, please refer to the chapter Animations.

 

Changing user access rights for given layer

You can limit who can view the objects in a given layer. In addition, you can limit which users will have access rights for objects in given layer. To change a layer’s access rights, click on the layer  in the list of layers to select it. Then you can change the access levels for read and write access  as well as access group levels.

6.15.24

 

For more info about User Access Rights, please refer to the chapter User Accesses.

6.16.Copying and pasting elements #

Paste to Same Location

This function is used for pasting objects being copied to the same location on the canvas; this is best utilized to specify more parameters for one visible object, such as a button.

Begin by creating an object and click on Edit -> Copy. Now paste the object being copied by clicking on Edit -> Paste to same location (you can also right-click on the object and select this function). This operation can be repeated as many times as you need.

  • Note: You can verify that an object has been pasted successfully by moving it aside and then moving back by clicking on Edit -> Undo.

Paste Dimensions

This feature allows you to paste specific dimensions of currently selected objects. Select an object whose dimensions you want to copy. Then select the object to which you want to apply the dimensions by clicking on Edit –> Paste dimensions.

Paste size this function will paste all dimensions

 

6.16.1

 

Paste widththis function will paste only the width of an object

 

6.16.2

 

Paste height this function will paste only the height of an object

6.16.3

 

When the function Past dimensions is being applied to multiple selected objects, the dimensions are transferred to the selection bounding box and the space around the objects is accordingly scaled.

6.16.4

 

Paste size separately

This function allows you to apply dimension to multiple objects at one time. In the following example, we will copy the square on the left and then resize the rectangles:

1. Create multiple objects and then copy the size of the object you want to apply to the remaining objects.

 

6.16.5

 

2. Select the remaining objects.

 

6.16.6

 

3. Open the Edit menu and select Paste dimensions – Paste size separately (you can also right-click on the object and select this function). All objects are now the same size.

 

6.16.7

 

Paste width separately

This function allows you to change the width of multiple objects at once, as described in the previous example.

Paste height separately

This function allows you to change the height of multiple objects at once, as described in the previous example.

6.17.Object's order #

Graphics objects use a hierarchical order.  If two objects overlap, the one located higher overlaps the one located below it. You can change the order of the objects by raising them up to the top or lowering them down the bottom of the layer.

Example

1. Create a new object and use Edit -> Copy and Edit -> Paste on same location Now you have three rectangles of the same size. For easier visualization, fill each object with a different color (function Properties – Fill – Color) and drag the objects so they partially overlap.

 

6.17.1

 

2. Now click on Transforms -> Order to change the objects’ order and use one of the functions below:

Lower to the background – moves a selected object into the background so that all other objects are on top of it

 

6.17.2

 

Raise to the topmoves a selected object to the top so that all other objects are beneath it

Raise moves a selected object one level up

 

6.17.3

 

Lower – moves an object down one level down

6.18.Grouping #

Grouping Elements

You can compose your graphics from multiple elements. Moving or copying these graphics might be difficult, but to simplify these operations you can group multiple objects together so you can use them as a single unit.

6.18.1

 

TAB

 

Select the objects to be grouped and click on the icon  in the toolbar (or select it from the menu Edit). The objects are now grouped and behave as one object; the group can be moved, resized, rotated, skewed, etc.

Selected objects:                                                   Group of elements:

6.18.2

Ungrouping Elements

This function is used to divide grouped objects back into independent elements.

Select the group of objects and click on the icon in the toolbar (or select it from the Edit menu), and the object will divide into its elements.

Grouped elements:                                                 Ungrouped elements:

6.18.3

Enter Group

With this function, you can work with individual objects that are grouped without needing to ungroup them first. Therefore, you can work with each object individually without ungrouping.

1. Select a group of objects.

 

6.18.4

 

2. Click on Edit (shortcut Ctrl+E) and select Enter group (or use the appropriate icon in the GUI Toolbar).

 

6.18.5

 

3. Now you can work with any object in the group individually.

 

6.18.6

 

Exit Group

Once you have finished working with the objects in the group, you can leave the group by clicking on Edit -> Exit group (or shortcut Ctrl+Shift+E or by using the appropriate icon in the GUI Toolbar).

6.19.Repeated actions mode #

This mode allows you to continue drawing the same type of objects without having to  re-select the object type or shape each time you draw it.

Click on the Repeated actions mode icon in the lower options bar and select an object to draw.

6.20.View scripts #

Click on the Scripts icon in the toolbar to open a new tab with the script editor. The script editor will open:

 

6.20.1

 

The Script icon has a context menu with which you can open a current view script in the editor, delete an existing script, or clear all defined script variables. Use the right-click to activate the menu.

6.20.2

 

A detailed description of View Scripts can be found in the corresponding chapter: View Scripts

6.21.Used tags #

This function lists all tags used in an active view.

 

6.21.1

 

If you click on the item in the Element ID column, the graphical object with this ID will be automatically selected.

6.22.Zoom on zone #

OBR  This function zooms in on a selected area within the whole workspace. First, click on this icon in the toolbar, then click and drag the mouse on the area on which you want to zoom.

6.23.Undo and redo #

The Undo button allows you to revert your last action. You can find it in the toolbar or in the Edit menu. You can also right-click on an object and select this function.

The Redo button allows you to redo an action after using the Undo function. You can find it in the toolbar or in the Edit menu. You can also right-click on an object and select this function.

  • Note: If these buttons are grayed out, then it is not possible to use them at that moment.

6.24.View properties #

If you select a view from the project tree, your will see its properties in the Properties window.

6.24.1

 

Now look at the properties window. It has several sections.

 

View Properties

Name: Name of the View.

Description: View Description.

Parametric View: Option to create a parametric view – use parametric views when you need multiple views different only in a data source; such sources are specified by the received index when a parametric view is prompted (see Commands – Open command and Parametric window).

Show in menu: Whether to show this view in menu

Layout: Active layout for this view. For more info, please look at section Layout Views.

Layout Mobile: Active layout for mobile devices. For more info, please look at section Layout Views.

Zoom Enabled: Enable/Disable zoom options for this view

Default Zoom: Default zoom for this view. Options are Fit to Page, Full Width, and Original Size

 

Access Rights Levels

View Access Group: minimal level of access for viewing. Enter a level between zero and nine: None, 0, 1,…, 9. For more info, please look at the section UserAccesses.

Write Access Group: level of access for writing to the PLC. Enter a level between zero and nine: None, 0, 1, …, 9. For more info, please look at the section UserAccesses.

 

Access Rights Groups

Groups Read Access: List of user groups to allow view access. For more info, please look at the section UserAccesses.

Groups Write Access: List of user groups to allow write access. For more info, please look at the section UserAccesses.

 

Communications

Persistent Read: If this option is enabled, mySCADA will read all the data from the PLCs, even if the view is not being viewed by anyone. This option is useful for fast view refresh when loaded; however, heavy usage can lead to a slower overall reaction of the system as more data is read from the PLCs continuously.

Connection: List of PLC connections defined in the current project. This is a default connection – if you enter the tag and do not specify the connection, this connection will be assumed as default.

Refresh: Refresh rate of the View in milliseconds.

 

Parameters

Size: Displays the view size in kilobytes [kB].

Has JavaScript: Checks if the view contains script functions.

Has Variables: Checks if the view has view script variables.

Key Shortcuts: Allows use of key shortcuts in the view (see the chapter Commands)

Lock Keys: If enabled, set commands will be active only if the lock key is pressed.

Sounds: Specifies the sound animations used in the view (see the chapter Commands)

Translations

Language: You can provide language translations for the view name and description. To see this option, you must activate at least one language in the Languages option in your project. For more details, please see chapter Multilanguage support

 

Error Box Properties

You can define a graphic representation of an “offline” error for objects tied with the tags for animation. When such tags cannot be read from the PLCs, mySCADA will display an error box around such objects.

In the Error Box properties, you can define the look of the error boxes in your project.

6.24.2

 

Select the Views folder and its properties will appear in the Properties window:

6.24.3

 

Set the fill color, fill opacity, frame color, frame thickness, and opacity of the Error Box. With  the parameters Rx and Ry, you can change the softness of the Error Box corners.

6.24.4

 

For example, if you fill the Error Box properties with the parameters below, the communication error will be displayed as follows:

6.24.5

 

7.Components #

The Components library is a collection of high-quality artwork and ready-made graphic symbols that you can simply edit and integrate into your views. Each component represents a fully functional graphical object with easily editable properties, including the ability to be directly connected to the PLC tags without the need to use animations.

 

The Components library icon is located in the DRAW section of the main toolbar.

7.0.1

 

Upon opening the Component library, you will see a dialog window consisting of three main section tabs:

  • Default – contains original factory components that you can choose from and customize to your needs
  • Custom – contains all your already customized components
  • Used – contains all the components you have used in your project (i.e. you can change the component properties for all used components in the project at one time)

7.0.2

 

7.1.Default components #

This section contains 10 groups of basic and the most common factory components. Click on the components group of your interest and select the component you need for your visualization.

After you have selected your component, you will see its preview on the right side of the dialog window. Below the component preview, there are editable properties of the component such as Tag, Min and Max limits, background color, pointer color, text size, etc. Note that each component has slightly different properties to edit.

7.1.1

 

If you navigate to the bottom right corner of the dialog window, you will see three buttons:

  • Cancel – closes the component dialog window without saving the changes
  • Save – saves the customized component in the user’s custom section
  • Insert – inserts your component into the View

 

Example:

1. Let us navigate to the Gauges group and select the analog gauge called Gauge Analog Full, and then navigate to the Properties section in the right part of the dialog window.

7.1.2

 

2. Customize the component properties to your needs and click on:

  • Insert – to put the component straight into your view (without saving)
  • Save – if you wish to save your component settings for later use

 

Another dialog window will appear:

7.1.3

 

Write the name of the new category in the Category field, fill in the name of your customized component, and click on OK. Your component will be saved and stored in the Custom section.

7.2.Custom components #

This section contains all your custom components. Here you can find all of your saved components, create new components, or import new ready-made components from SVG files.

7.2.1

Creating Components

This feature allows you to create, customize, and implement your own components.

1. Click on the New Component tab and enter the name of your new component, then click on OK.

7.2.2

 

2. Select the new empty component from the list and click on the Edit button to prompt a new edit window (identical to the drawing canvas, see more in the chapter Drawing).

7.2.3

 

In the very bottom part of the editing window, you can set the component variables, which will later become its settable properties (i.e. tag, background color, min & max values, etc.)

3. When you have finished creating your component, click on the Save button at the bottom and close the editing window. Your component will now be stored in the Custom All components in the Custom section can be duplicated, deleted, or edited later with the use of the buttons located in the right bottom corner of the Components dialog window.

7.2.4

 

  • Note: All created and edited components in the Custom section are stored as SVG files, and you can find them in your user folder on the hard-drive.

Importing Components

The components can also be stored as individual SVG files, so you can import new components from outside resources. (They have to be in SVG format!)

1. Navigate to the Custom tab and click on Import, which will prompt the dialog window Import Component.

7.2.5

 

2. Select the SVG file from the source folder and click on OPEN to integrate the new component into to your custom components list.

Renaming Components

Select the component you want to rename. Click on the Rename button. A new dialog will appear:

7.2.6

 

Enter a new name and hit OK.

7.3.Used components #

This section shows all master components used in the whole project. If you change properties of the master components, then all subordinate components will change too.

7.3.1

 

If you navigate to the bottom right corner of the dialog window, you will see these buttons:

  • Usage – shows details about a selected component, including its location, view name, id, used colors, min & max values, units, and format

7.3.2

 

  • Replace – with this feature you can replace master components with components with similar properties (i.e. buttons to buttons, gauges to gauges, etc.)
  • Edit – opens up the component editor

 

Replacing Components

1. In the Component Library navigate to the tab Used, select the master component you want to replace, and click on Replace.

7.3.3

 

2. In the next dialog window, select the component to which you want to change.

7.3.4

 

3. Once you have selected the replacement component, myDESIGNER will check if the aspect ratio matches for both components:

Sizes match                                                        Sizes do not match

7.3.5

 

 

If the sizes do not match, the system can automatically scale the size of the replacement component to the size of the component being replaced.

 

In the properties below you can also select the parameters to remain unchanged and the ones to be changed. When you are satisfied with the settings, click on the Replace button.

7.4.Editing components #

When you create a new component or you would like to modify an existing one, you can simply edit it. To do so, please select the component you would like to edit and click on the edit button.

7.4.1

 

The Graphical designer opens, and you can design your component.

7.4.2

 

As you can see, the GUI Designer is exactly same as when you design your view. You can use all the functions you are used to. There is a new window: it is the Component Variables Window.

Component Variables

7.4.3

 

This window contains all variables that control the visual appearance and behavior of the component. All variables you create here will be presented to the user as properties.

7.4.

 

In the component variables window, you define all variables by specifying a name, short description, and type for each variable. These variables can contain tag values read from the PLC, color, and fill values for different elements, calculation results, etc.

Each component can have as many local variables as you need. You have to save your progress after the addition of each new variable by clicking on Save in the tab toolbar. The Color button opens  the color palette when an appropriate type of variable is selected.

Each local variable has following properties:

Property

Description

Variable

Name of the variable as internal value: it is used as a reference in animations and properties of your component.

Name

Name of the variable as seen by the user: this will be shown in the component properties.

Desc

Description of the variable: description is visible as a tooltip when the user hovers over the name of the variable.

Value

Variable default value: for tag type variable, please leave empty.

 

Property

Description

Type

Supported types of variables are:

1. Tag

2. String

3. Int

4. Double (Float)

5. Color

6. Boolean

7. Object

8. Combo Box

 

You can refer to the local variable anywhere in the animations, effects, or properties across the edited component.

 

Example

To explain how to use Component Variables, we will present you with a simple example. We will animate a handle of a gauge.

  • Select a handle of the gauge
  • Fill in the variables for rotate animation as follows:
    7.4.5

 

  • Create the corresponding variables in the Component variables window
    7.4.6

 

  • Save

The complete process is shown in the following picture. You can see how we used the component variables directly in the Animation fields.

7.4.7

 

Now return to the view and test the new component. To do so, open your view, click on the Components Icon in the toolbar, and select your component. After pressing the Insert button, your component should be added to the view.

7.4.8

 

In the Properties window you can see the parameters of the component (e.g. the variables you have defined in the component variables window) – the name of the component variable “Tag”, Min and Max.

  • TIP: To check if the tag address in the animation has been changed, right-click on the component and click on Enter group. Select the handle again, open its properties in the Properties window, and look at the Rotate animation.

7.4.9

 

You can see that the tag address used for this animation has changed to the requested value.

7.5.Replacements #

This feature should ease replacement of a predefined text in a component. You can change the text, font size, color, stroke, or opacity of the text element.

7.5.1

 

1. Start with the component variables again and create the following variables:

  • Variable Text with type String
  • Variable Font Size with type Int
  • Fill with type Color
  • Opacity with type Boolean

The Opacity here is similar to Opacity animation, which means that the text will be visible if the value of Opacity formula is within the Opacity min/max range.

2. Now create a text element:

7.5.2

 

3. Fill in the Component Variables.

7.5.3

 

4.Fill in the Replacement -> Text in the Properties window. Note: The variable names are case sensitive.

7.5.4

 

To set the Fill Replacement, you are presented with the dialog:

7.5.5

 

5. When you have filled in all properties, save your component.

7.5.6

 

6. The text will change according to the value of an attached component variable. After saving the component, import it into your view.

7.5.7

 

Replacements are important for complex components where you can replace the component text (button text, for example) with just one click.

7.6.On touch actions #

On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to its default look.

You can modify visibility, fill, and stroke color of any object in your component. Select the object you would like to modify based on user touch and, in Properties, fill in the On Touch section:

7.6.1

Example:

We will create a simple button that will change the background color on touch.

  • Create a new component with a rectangle inside
  • Enter in the text “Press me.”

7.6.2

 

  • Click on the rectangle and in Properties set the color to red in On Touch -> Fill

7.6.3

 

  • When you set the fill color, a new dialog is presented:

7.6.4

 

  • Save the component and insert it into a view
  • Now, you can test your component.
  • When a button is not pressed, it looks like this:

7.6.5

 

  • When a user is pressing the button, it looks like this:

7.6.6

 

Creating Complete Component:

In the following example, we will create a simple slide bar showing the variable progress and its Min and Max values. Create a new component and draw a rectangle, as seen in the picture below. Copy the selected rectangle and apply Paste on same location to it. Set the Fill property to “none” then put the element in the background with the function Lower to the background. We have now created a frame of the scale.

Now create 3 text fields; your component will look like this:

7.6.7

 

Now fill in the Component Variables as shown in the picture below:

7.6.8

 

As you can see, we have created 3 local variables. For the tag value, you have used a variable tag; for specifying the minimum and maximum values, you have used the min and max variables.

You can make indicator out of the rectangle by resizing it according to the value read from the PLC; set the Scale animation as shown in the following picture:

7.6.9

 

We also want to show the actual value in the middle of the slide bar. Click on the text field in the middle of the rectangle, select the Anim tab in the Properties window and click on the Tag (Address) field in the Show Value section. Then, fill in the Tag field with “tag,” which corresponds to our local variable name.

7.6.10

 

As you can see, we have used one of our local variables. You can use the same variable (especially the tag type) for multiple animations/effects to achieve a better effect. We will also show the Min and Max limits of our tag. Click on the right text field, then select the Rep. tab from the Properties window and set “max” for Text in the Replacements.

7.6.11

 

Now do the same for the other text field but place the min variable there. The final component should look like this:

7.6.12

 

Save the component and test its functionality.

Testing Component

Create a new view and open it, then navigate to the Library. Select your component and press the Insert button.

Now click on the component and look at the Properties window:

7.6.13

 

In the Component section, you can see all the local variables that you have defined.

Set the Tag (address) and the Minimum and Maximum values:

7.6.14

 

Now, save the view and send to a supported device; the screen should look as follows:

7.6.15

 

7.7.Entering advanced functions (equations) #

To create complex and feature rich components, you need to enter complex formulas instead of simple variables. You can use functions anywhere you like: inside animations, instead of constants, or as a text replacement in the text fields.

Formulas are evaluated with JavaScript, so you can enter any formula that is a valid JavaScript expression. You can also include any of the Component Variables that you have defined.

To show the functionality, we will extend our example by implementing the scale along the slide bar we have just created.

  • Open the slide bar created in the previous chapter and adjust as follows:

7.7.1

 

  • Delete the Min and Max fields and stretch the blue rectangle, including the frame. After that, insert additional lines with the Drawing-Line tool to divide the rectangle into thirds. With Transforms -> Order -> Lower to background send both lines and the frame into the background

7.7.2

 

  • Now insert additional text fields.

7.7.3

 

For each text field we need to specify the Text in the Replacement in the Rep. tab:

  • Left text field: (min).toFixed(1)
  • Second text field (from left): ((min+max)/3+min).toFixed(1)
  • Second text field (from right): (2*(min+max)/3+min).toFixed(1)
  • Right text field: (max).toFixed(1)

 

The left text field will show the value of the variable min.toFixed(x), which is a function that rounds the result to x decimal places. In our case, the value will be formatted to show one decimal place.

The second text field from the left should show 1/3 of the scale; therefore, we have used the formula min+(min+max)/3 to get 1/3 of the scale. We will use the toFixed(1) function to round the result.

The other two text fields are similar to those two; we can add units and a label to our component to finish:

7.7.4

 

To use the Label and Units text fields, we need to create two new variables. Both will be of the type ‘string’. The first variable will be named label, and the second will be named unit. For the text field label, add Text Replacement equal to the variable label. For Units text field, add Text Replacement equal to variable units. Finally, click on the Save button to see the changes.

7.7.5

 

8.Components library #

8.1.Combo box, List box and Text box #

Combo Box, List Box and Text Box elements are essential components when designing your GUI with forms or multiple entry. mySCADA provides these components to use in two different scenarios. One is to use the components along with the View Script to achieve the desired functionality. The second usage is as standalone components connected directly to a PLC or database.

8.1.1.Inserting into view #

To insert a Combo box, list box or Text box into your view, please click on the Library icon and select the Combo box, list box and Text box category.

library

 

Then select a component, fill in the parameters (such as the number of elements) and click on insert.

insert

 

Now position your component to the view.

 

  • Tip: change the size of the component by dragging it to the desired size. Please use the horizontal and vertical sliders only.

 

combobox

8.1.2.Components parameters #

Combo Box

combobox

 

Parameter

Explanation

Font

Font name

Font Size

Size of the text

Text Color

Text Color

Fill Color

Fill Color

No. of unfold items

When is combo box unfolded, specify how many items you want to see

Callback Fcn.

When user selects an item, you can run a custom function. Define a function in the View script and write here its name

Number of elements

Total number of elements in the Combo box

 

List Box

listbox

 

Parameter

Explanation

Font

Font name

Font Size

Size of the text

Text Color

Text Color

Text Anchor

Text align, to the left, center or to the right

Text Border

Select to show border around each item

Text Border Color

Color of the border around an item

Fill Color

Fill Color

Border

Select to show border around whole component

Border Color

Color of the border around whole component

Callback Fcn.

When user selects an item, you can run a custom function. Define a function in the View script and write here its name

Number of elements

Total number of elements in the Combo box

 

Text Box

textbox

 

Parameter

Explanation

Type

Specify if user should enter only numbers, strings, or custom values into the text box. If you specify number, please fill also the Limit and decimal places values. If specifying custom, please fill in the regex function for input check.

Max Length

Maximum number of characters entered

Decimal Pieces

Maximum number of decimal pieces entered

Lower Limit

For numbers only: minimum number allowed

Upper Limit

For numbers only: maximum number allowed

Regex for custom

For custom type only: enter regex by which is user input checked

Text

Default text or number

Font

Font name

Font Size

Size of the text

Text Color

Text Color

Border

Select to show border around whole component.

Round Corner

If you want rounded corners, please specify a radius

Callback Fcn.

When user selects an item, you can run a custom function. Define a function in the View script and write here its name

8.1.3.Using components in view scripts #

You can easily use the List box, combo box and text box in view scripts.

We will start with a simple example showing how to use the combo box programmatically:

 

1. We will create the combo box and add it to the view.

2. We will create a button next to the combo box, on its press we will call view script function get Item.

getitem

onclick

 

3. In getItem fuction, we will get value of selected component

var selItem = myscada.getSelectedItem('Comp29328366');

‘Comp29328366’ is an ID of our Combo box. You can find ID in properties window upon clicking on your Combo box.

Once we get the selected item, we will show it by calling alert(selItem);

8.3.3

 

4. Now we will create a new button. On its press we will call view script function setItem where we will set item in combo box to second item.

8.3.4

 

Callback function example:

If you want to be notified, when user selects an item in the combo box or list box, or presses and enters into the text box, set up a callback function.

1. Define your callback function in View Script

8.3.5

 

As you can see, into your callback function, you will get 2 arguments, first is a selected item and second is an index of the selected item.

2. Click on your component in view and fill in the callback function name

8.3.6

 

3. When user selects an item, your callback function will be called

8.3.7

 

Setting new values into Components Programmatically

You can easily change the items in your component programmatically. To do so, you can use function setItems:

var items = ['item 1','item 2'];
myscada.setItems('id',items);

 

Coloring items in List Box

List box allow you to fine tune appearance of each item by specifying the colors and bold face of the font. To do so, use function setItems. Passed items in array will not be strings but objects with additional properties. Simple Example:

8.3.8

 

Will produce following output

output

8.1.4.Supported functions #

Function

Combo Box

List Box

Text Box

var item=myscada.getSelectedItem(id);

Yes

Yes

Yes (returns value)

myscada.setSelectedItem(id,(‘item’);

Yes

Yes

Yes (sets value)

var index =myscada.getSelectedIndex(id);

Yes

Yes

No

myscada.setSelectedIndex(id,(index);

Yes

Yes

No

var object = myscada.getObject('id');

Yes

Yes

Yes

var items = ['item 1','item 2'];
myscada.setItems('id',items);

Yes

Yes

Yes (sets first value in array)

 

8.2.Chart component #

This type of component provides several options to display your data in 6 types of graph.

 

Legends settings

  • Show legend – Will show legend.
  • Position – Position where legend will be located.
  • Font family – Type of font.
  • Font Size – Size of font.
  • Font Color – Color of font.

 

Animation

  • Enable – Will enable or disable animation (Disabling it will improve performance of device).
  • Time – Time of animation.

 

Autoscale

  • Enable – Enable or disable autoscale.
  • Minimum or maximum – You fill value in case that you won’t use autoscale.

 

Grid

  • Enable – Enable or disable grid.
  • Color – Color of the grid.
  • Show tics – Enable or disable of tics.
  • Font family – Type of font.
  • Font Size – Size of font.
  • Font Color – Color of font.
  • Show border – Disable or enable showing border.

 

Other 

  • Stacked – Will stack graph.
  • Color opacity – Opacity of color.

 

Data Description

  • Enable – Disable or enable data description.
  • Font family – Type of font.
  • Font size – Size of font.
  • Font Color – Color of font.
  • Opacity – Opacity of font in %.
  • Text padding – Position of padding.
  • Text rotation – Rotation of the text.
  • Anchor – Position of anchor.
  • Decimal place – Places for decimal.
  • Unit – Name of units.
  • Show as percents – Will show data in % format.
  • Show as time – Will show data in time format.

 

Items

  • Number of elements – Number of elements displayed.

 

Axes

  • Show or hide X or Y axis.
  • Show or hide time X or Y axis.

 

Pens

  • Tag – Select tag.
  • Name – Specify name of tag.
  • Color – Select color of pen.
  • Group – Select group for pen.

 

 

1. Vertical BAR

2. Horizontal BAR


3. Pie

4. Doughnut

5. Polar

6. Radar

 

9.Active area #

9.1.Introduction #

Active areas are the regions in views where you can show dynamic content. It can be another view, trend, alarm window, datalog, or even an external HTML page or a live video stream. Active areas act as an active container for all those multiple options. Aside from of mySCADA’s specific functions (views, trends, etc.), you can use the active areas to show any content that conforms to HTML 5 standards. That way you can show an external web page or code an HTML page directly in mySCADA. You can also combine the active area with view scripts (JavaScript based) to achieve dynamic interaction. That way you can, for example, show Google Maps or create your own HTML component with SCADA options.

 

 

With active areas, you can show:

  • Window (Arbitrary View, Parametric View)
  • Advanced Trends
  • Data-log Views
  • Online alarms
  • Historic alarms
  • External HTML page / Internal HTML code
  • Combine DIV with view scripts

 

  • Note: One of the main benefits is that you can change the active area content at any time using  the Open command (for more, see the Commands section).

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

9.3.External web page in active area #

To show an external web page in the active area, select HTML -> External. Enter the HTML address you want to open in the Link field.

9.3.1

 

9.4.HTML code #

To show a custom HTML code in the active area, select HTML -> HTML Code. Enter your HTML code in the Code section. If you press the “” button, you can open the HTML editor to enter your code.

9.4.1

 

9.5.DIV type #

The Active Area element can also work as a placeholder for your web component. In the runtime, mySCADA will create an empty DIV component in the location and size of your active area. This DIV component can be manipulated in View Scripts.

9.5.1

 

Select HTML -> Div Element. Fill in the ID of your DIV (active area) component. With this ID you can access your component in the View Scripts using the function

document.getElementById ("ID")

 

Example

In the following example, we will use the Active Area to display a Google map. First of all, create a view and insert it into the active area. Then set the type to HTML -> Div Element in the Init Value. Type in ‘googlemap’ into the ID type field.

9.5.2

 

Now all we need to do is to initialize the DIV element with Google maps. This can be done in View Scripts. Open the view script and enter the code for initialization into the Init function field.

9.5.3

 

There are two interesting parts in this code:

1. This part dynamically loads external JavaScript from the Internet – in our case Google map API:

var script = document.createElement('script'); //create script element
script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=gmap_draw"; //url to the script
document.head.appendChild(script);  //load and append js

 

2. This piece of code will find our DIV element (e.g. Active area) with googlemap id

document.getElementById("googlemap")

 

3. And finally the result:

9.5.4

 

DOWNLOAD DEMO PROJECT HERE:

10.Layout views #

10.1.Page layout #

The Layout page defines the arrangement and style of the page content. In myDESIGNER, you can create multiple user-defined layouts. Each view that you create can use different layouts.

  • Note: You can create new layouts at any time during the creation of your project.

 

You can see all the options that your layout can have in the following picture:

layout

 

  • Header – top section that can be used, for example, to display a logo, name, logged user, main menu, etc.
  • Main Content – section displaying your views; it sits prominently in the middle of the page.
  • Left/Right Sidebar – columns on both sides of the main content section; useful for displaying additional menus, pictures, etc. or can be used for control buttons and gauges. Sidebars can be visible or shown upon user action.
  • Footer – bar spanning the bottom of the page.

 

  • Note: To use the Layouts, first you have to create Layout Views. The Layout Views behave exactly the same as regular views; therefore, you can apply any functionality to them, such as animations, effects, or view scripts.

10.2.Adding layout view #

1. Select Layouts -> Layout Views

2. Click on the Add Layout View icon in the main toolbar

3. Enter the name and description

4. Define the orientation and select the layout size

layout size

 

10.3.Creating new layout #

After you have created layout views, you can use them in the layouts:

1. Select Layouts in the Project Window

2. Click on the Add Layout icon

3. Enter the name and description and click on Add

Add layout

 

After creating a new layout, double-click on it to fill in its properties:

properties

 

For each section, you can select a corresponding Layout View. After you have selected a required view, do not forget to check the Enabled box to activate it.

Options for each section:

  • Spacing – creates spaces betweenthe sections; defined in pixels
  • Enabled – checkbox for enabling particular sections
  • Scaled – scales the section accordingly to the rest
  • Sliding – hides the section, i.e. the user can open it by clicking on the tab in the center

Overlay Section

In this section, you can put one or more layout views above existing ones. This can be useful for showing messages or images tied to a visibility animation – instead of copying these messages or images into all views, you just add them to a layout view and use it as an overlay for all of the views.

Using Layouts in Views

Select the view you want to apply a layout to and select Layout from the drop-down menu in the Properties window.

properties window

 

Layout Views Example

In the following example, we will show you how to add a permanent menu above the views, how to show a message over the views, and how to show a sliding left side menu.

1. Create View1 and View2 in your project.

project

 

2. Create a horizontal view in Layout views; it will be used for our top menu. Now add buttons “View1.” “View2,” and “Overlay.”

overlay

 

3. On the button “View1” add the open action to open view1. Do the same for the other button.

view1

 

4. Now create the left side view in Layout Views. Again, add two buttons to it. Create them the same way as you did in the menu view.

5. Now create the overlay view in Layout Views. Make it the same resolution as your views. Add a text message to this view. Set the visibility animation for the text message.

overlay view

 

6. Now create your layout. For the top section, select the menu view. For the left section, select the left side view and check the sliding check box to add the overlay menu.

overlay menu

 

6. Now, test your view.

test your view

 

  

DOWNLOAD DEMO PROJECT HERE

11.Entering tags and math expressions #

11.1.Entering tags #

Before linking your visualizations with PLCs, first, you have to enter the name or address of the tags from which you wish to read/write data.

The tag syntax depends on the PLC type that you want to access.

11.1.1

 

  • Note: You don’t need to enter full tag syntaxes all the time. Instead, you can use a simplified link to your tag, called an Alias. The Aliases can be defined in the Tag Database.

Alias syntax: *alias

 

You can type the tag directly into the tag edit field:

11.1.2

 

You can call the tag editor by clicking on the button on the right side of the tag edit field – a new dialog window will show up:

11.1.4

 

The Tag Dialog will guide you through entering your tag and will check if the syntax is correct.

You can also choose your tag directly from the tag database. To do so, please click on the Tag database. The dialog will present you with all the tags entered in the tag database.

11.1.4

 

On the left side of the dialog, you can select connection. After you select it, you can select a tag on the right side of the window.

11.2.Entering mathematical expressions #

Instead of writing the tag name, you can enter mathematical expressions. This way you can scale and offset the values read from the PLCs or create more complex data processing. These expressions can be entered either directly or through the dialog window.

11.2.1

 

11.2.2

 

In the equations you can use operators + – * / and common mathematical functions such as sin, cos, exp, etc  You can also do a binary comparison and much more. To get the complete list of options, call the Tag Dialog and click on the tab Equation.

11.2.3

 

Formatting and Limits

  • Tag name is entered by the adr() function
  • Tag name can be also entered as an alias using the alias() function
  • You can use only supported functions and operators

 

The supported functions and operators are listed under the input box and are broken down into five groups: Oper, Func, Trig, Vers, and Const – they will be inserted into the box if selected.

You can use multiple tags in an expression.

Example:

  1. We read a value from Modbus H:0
  2. Let’s scale this value by 10 and offset it by 0.5
  3. Formula to enter is: =10*adr(H:0)+0.5

Supported Functions and Operators:

Operator

Function

Description

Standard Operators

+

add

addition and unary positive

– r –

Substract and negative

subtraction and negation

o

Multiply

multiplication

Divie

division

 

Percnt

modulus and percentage of a value

!

Facoial

factoria

**

Po

exponential

 

Deg

converts values to radians

Bitwise Operators

&

An

btise and

|

Or

bitwise or

^

Xor

bitwise xor

~

Not

bitwise not

<< 

Ishift

bitwise left shift

>> 

Rshift

bitwise right shift

Comparison Operators

=

I_eq

equal

!=

I_neq

not equal

I_It

less than

I_gt

greater than

<= or ≤

I_toe

greater than or equal

>= or ≥

I_gtoe

greater than or equal

Logical Operators

&& or _

I_and

logical and

|| or _

I_or

logical or

! or ¬

I_not

logical not

 

Degree operator °

The degree operator (°) is very useful when converting user input. Because all of the trigonometric functions require their parameters to be in radians, the degree operator will convert its operand into radians. Thus, 45° is equivalent to dtor(45).

Percentage sign %

When the percent sign is interpreted as the modulo, then:

10 % 3 … evaluates to 1 (the remainder after 10 is divided by 3); however, if you flip the switch to make the % sign stand for percentage, then it becomes:

250 + 10%

By default, the percentage sign % is usually shorthand for “/100”. In other words, 42% becomes 42/100 or 0.42.

However, if the % term on the right-hand side of subtraction or addition (such as in “250 + 10%”), then the percent is evaluated as a percentage of the left-hand side (i.e. “250 plus 10% of 250”).

If you choose to interpret the percent sign as the modulo operator, you can still request a percentage by using the function name directly:

(10 % 3) + percent (50) = 1.5

Factorial and Logical Not (!)

Differentiating between factorial (!) and logical NOT (!) is more difficult.

Logical NOT is interpreted as factorial (!) only if:

  • it is the first token
  • it is preceded by a binary operator
  • it is preceded by a right associative unary operator

Otherwise (!) is always treated as factorial and the negating token ¬ as logical NOT.

Supported Functions

Functions using more than one parameter:

  • sum() – returns a sum of the passed parameters
  • count() – returns the number of passed parameters
  • min() – returns the minimum of the passed parameters
  • max() – returns the maximum of the passed parameters
  • median() – returns the median of the passed parameters
  • stddev() – returns the standard deviation of the passed parameters
  • average() – returns the average of the passed parameters
  • random() – returns a random integer. Can take 0, 1, or 2 parameters. The first parameter (if given) is the lower bound of the random integer. The second parameter (if given) is the upper bound of the random integer.
  • nthroot() – returns the nth root of a number; for example, nthroot(27,3) returns the cube root of 27, or 3.

Functions using one parameter:

  • sqrt() – returns the square root of the passed parameter
  • log() – returns the base 10 log of the passed parameter
  • ln() – returns the base e log of the passed parameter
  • log2() – returns the base 2 log of the passed parameter
  • exp() – returns e raised to the power of the passed parameter
  • ceil() – returns the passed parameter rounded up
  • floor() – returns the passed parameter rounded down

Trigonometric functions:

  • sin(), cos(), tan()
  • inverses (asin, acos, atan)
  • reciprocals (csc, sec, cotan)
  • reciprocals of the inverses (acsc, asec, acotan)
  • hyperbolic variations (sinh, cosh, tanh, asinh, acosh, atanh, csch, sech, cotanh, acsch, asech, acotanh)
  • versine functions (versin, vercosin, coversin, covercosin, haversin, havercosin, hacoversin, hacovercosin, exsec, excsc, crd)
  • dtor() – converts the passed parameter from degrees to radians
  • rtod() – converts the passed parameter from radians to degrees

Functions using no parameters (“constant functions”):

  • phi() – returns the value of ϕ (the Golden Ratio), also recognized as ϕ()
  • pi() – returns the value of π. Also recognized as π()
  • pi_2() – returns the value of π/2
  • pi_4() – returns the value of π/4
  • tau() – returns the value of τ. Also recognized as τ()
  • sqrt2() – returns the value of the square root of 2
  • e() – returns the value of e
  • log2e() – returns the value of the log base 2 of e
  • log10e() – returns the value of the log base 10 of e
  • ln2() – returns the value of the log base e of 2
  • ln10() – returns the value of the log base e of 10

The parentheses are used for grouping sub-expressions and setting the order of execution, and they can be nested to any depth. All computation is carried out with a double precision floating point. In the case of error, the editor shows a warning, and the error expressions will not be evaluated.

You can always check the validity of the entered expression Clicking on the Test button.

11.2.4

 

Click on OK after completion to see the expression in the Tag(Address) field.

Examples of valid expressions:

  • adr(N100:0)*adr(F30:10)
  • sin(adr(N100:0))+cos(adr(F30:10))
  • median(adr(N100:0),adr(F30:10),adr(N20:5),adr(F10:10))

 

  • Note: Multiple arguments should be separated with commas 2>=1. Logical operations always return binary result (0 or 1).

12.Tree tags database #

We have made completely new tree tags database which will save you a lot of time also it gives you a better overview of your project.

 

  • Tree by: – Will sort database so you can either have Alias or Tag in the first place.
  • Collapse All – Will automatically close all opened tabs.
  • Expand – Will automatically open the tab selected by a cursor.
  • Add Tag – Will automatically add the tag to the tags database.
  • Del Tags – Will automatically remove selected tags from the tags database.
  • Filter – You can filter out in tags database to find out what you looking for faster.
    • Alias – Will filter out tags by alias.
    • Tag@conn – Will filter out tags by alias@connection.
    • Unit – Will filter out tags by the unit.
    • Type – Will filter out tags by type.
    • Usage Count – Will filter out tags by a usage count.
  • Read Scale – This is how the value which is read will be scaled.

Example: Value read from PLC is 10 000 which is too big, so I will scale it by /100 so the value displayed in run-time will be 100.

  • Write Scale – This is how the value which will be written to PLC is scaled.

Example: Value which is needed to write to PLC is 10 000, but that’s too long for me so I just put there *100 and the value written to PLC will be 10 000.

 

Tag’s Type

Value – is a value of the tag, If you select a Value tag can have dynamic limits which can be then auto-filled into animations and components which use limits and also can automatically create alarms.

  • Decimal – Is decimal type.
  • Hexadecimal – Is Hexadecimal type.
  • Octal – Is Octal type.
  • Binary – Is a binary type.

 

String – a sequence of characters.

Type:

  • Automatic
    • Length – is the length of a string by a number of characters.
  • General
    • Length – is the length of a string by a number of characters.
    • String end – String ends and you will choose the character.
    • Characters – Can be either 8 bit or 16 bit.

 

Date – when a tag is in date type.

  • Date – Classic date format in DD/MM/YYYY.
  • Time – Time format.
  • Date+Time – Date + Time format.
  • Interval – Interval format.

 

Boolean – data type that has one of two possible values

  • False text – Can be replaced, as default is set to false.
  • True text – Can be replaced, as default is set to true.

Boolean type of tag will be also displayed then in value to text mapping inside view.

 

 

Multiple choice – Multiple choice data type

You can specify multiple choices by pressing “add” you can add more, or by pressing “del” you can delete them. You can also fill in thestring.

 

Tag Database Export

The tag database can be easily exported into Microsoft Excel. To do so, click on the Export button in the main toolbar. Specify a file name and confirm. A new Microsoft Excel file is created containing the whole tag database.

 

Once the export file is created, you can open it in MS Excel.

 

Tag Database Import

The tag database can be imported from an MS Excel file. It can be useful to keep the tag database in an MS Excel file and import it into myDESIGNER or you can use the MS Excel file as a bridge between your PLC programming software and myDESIGNER to transfer the tag database. To import the tag database from MS Excel, click on the Import button in the main toolbar:

Tags limits (For Value tag type)

If you have a value tag type you can automatically add up tag limits which will be then filled automatically into animations, components, CAS alarms, set limits, and recipes and colors you select will be also applied as an example in color animation.

You can edit limits of a tag inside the tags database simply by clicking on “(…)”

12.1.Changing tag value #

The most important function of the tag database is the ability to change the used tags all in one place. If you click on the Tag cell in the table, you can simply change the tag (address), and the change is propagated throughout the whole project. Everywhere the tag is used, the old value is replaced with the updated one.

12.2.Engineering units #

Every tag in your project can be scaled or even have a mathematical equation applied to it. This is extremely useful when you need to get an engineering value from raw values. To enable scaling on a given tag, please select the corresponding row and click on the Eng. Unit cell. A new dialog is shown:

12.2.1

 

There are three options you can set:

1. Not Set – no scaling is applied

2. Scale – you can scale and offset the tag value

3. Equation – you can apply a mathematical equation for more complex situations

 

Scaling tags

To scale a tag, please fill in the equation in the dialog. You can multiply the tag by a constant, divide it, and set the offset. The equation is as follows:

Value = multiplicator * tag / divider + offset

Applying equation

To apply the equation to your tag, select the Equation tag. Here you can use multiple mathematical operations in your formula. The tag value should be inserted into the equation as the word tag. The following dialog shows how to compute the sinus value of the tag multiplied by 10.

12.2.2

 

  • TIP: To test if the formula is valid, use the “Test” button.

 

Simple example of scaling a tag

A very common situation is a representation of floating values by integers in PLCs (especially on Modbus devices). In our example, we will scale the value read from a Modbus device to achieve a floating-point value.

1. Select your tag in the tag database and click on the Eng. Units cell

2. Set divider in the dialog to 10

12.2.3

 

3. Now your value will be automatically scaled by 10. So if you will read, for example, the value 235, it will be represented as 23.5

12.3.Filtering data #

As your project grows, the tag database can get large and hard to manage. To simplify the search for a tag, you can use data filtering. There are two types of filters in theTag Database:

12.3.1

 

The connection filter lists all connections in your project. You can specify which connections you want to see in the table.

Data filters allow for even more precise data filtering. You can filter based on any column in the tag database table. Just enter the expression into the Filter at the given column. You will see immediately filtered data in the table.

12.4.Usage count #

The usage count column shows how many times a given tag is used in your project. If you hover over the Usage Count cell, the tooltip will show you exactly where the tag is used:

12.4.1

 

12.5.MS Excel import and export #

Tag Database Export

The tag database can be easily exported into Microsoft Excel. To do so, click on the Export button in the main toolbar. Specify a file name and confirm. A new Microsoft Excel file is created containing the whole tag database.

12.5.1

 

Once the export file is created, you can open it in MS Excel.

12.5.2

 

Tag Database Import

The tag database can be imported from an MS Excel file. It can be useful to keep the tag database in an MS Excel file and import it into myDESIGNER or you can use the MS Excel file as a bridge between your PLC programming software and myDESIGNER to transfer the tag database. To import the tag database from MS Excel, click on the Import button in the main toolbar:

12.5.3

 

Select a file for import and confirm. The MS Excel file should have all tags in the first sheet in a plain table. The table should have columns with the following names:

Alias Tag@Conn/*Alias Description Unit Format Eng. Unit

 

Once you import the tags, myDESIGNER will go over your existing tag database. If you import a tag with the same alias as one that is already in the tag database, it will be overwritten.

12.6.Tag import #

You can also import tags directly from the PLC programming software Rockwell Studio and Siemens TIA Portal these features are only available with myDESIGNER Enterprise.

Importing from Rockwell Studio 5000

To import tags from Rockwell studio, do the following:

 

1. Click on “File”.

 

12.6.1

 

2. Then click on “Save as”.

 

 

12.6.2

 

 

3. A new window will pop up and you select a file to be saved as “Logic Designer XML File (*.L5X)“.

 

12.6.2

 

4. Then you will head to myDESIGNER where you create a connection to Rockwell PLC, head to the “Tags database” and click on “Import from Rockwell” Which will open up a new window where you will select a file which we have exported before.

 

12.6.3

 

5. New Window will be opened, here you can select which tags you want to be imported, then you just click add and tags will be stored in projects tags database and you can use them in the project.

 

12.6.4

 

 

Importing from Siemens TIA Portal

The supported versions of TIA portals are version 14 and version 15.

Download TIA portal connector HERE.

1. First of all, you need to install mySCADA TIA portal connector.

 

12.6.4

 

 

2. After successful installation of TIA portal connector, we open up mySCADA TIA portal connector, if we have multiple version of TIA portal installed in our computer connector will let you select which one you want to use.

 

12.6.4

 

3. We click on start TIA portal which will automatically start TIA portal, then we open project inside TIA portal which we want to import tags from and then click on “Open the project view”

 

12.6.4

 

4. Now we can head back to TIA portal connector and click on “Connect to open TIA project” or we can directly open project which we want using “Open project” and selecting project we want.
If we click on “Connect to open TIA project” it should show us at the bottom side of TIA portal connector direction where the project is.

 

12.6.4

 

5. Now our job with TIA portal connector and TIA portal is done, we can head to myDESIGNER. Inside myDESIGNER we create a connection to the SIEMENS PLC.

 

12.6.4

 

6. We click on TIA which will read for a couple of seconds, first, myDESIGNER tries to read from localhost, then if he is no success after 10 seconds it will stop read button will turn into a clickable button if you click on that you can fill in IP address of the computer with TIA portal connector + port. After configuring that PLCs which are configured in TIA should load up, doesn’t matter how much of them is created inside TIA portal, so we select PLC of our choice and press “OKAY” and “ADD” This will add a connection.

 

12.6.4

 

7. Now we can head into “Tags Database” and click on “TIA import” which will open up a new window which will load all tags from TIA plc. We can select tags one by one or click on the main bookmark and import all of tags at once.

 

12.6.5

 

  • TIP: myDESIGNER does not need to be on the same computer as TIA portal + TIA portal connector, myDESIGNER can be on completely different computer.

 

  • TIP: You can change DataBlock offset any time, just in case you would need to change anything, you just press import once more and if myDESIGNER realizes that there is just an offset change it will let you to just change tags offset.

 

12.7.Deleting unused tags #

As your project grows, the tag database can also get larger. Some of the tags listed in the tag database may no longer be needed. You can delete unused tags simply by invoking the command Delete Unused Tags. To do so, right click on the Tag Database in the project. A popup menu is shown; now select Delete Unused Tags.

 

12.7.1

 

All tags with reference count = 0 (e.g. not used) will be removed.

12.8.Restoring tag database #

In rare cases, the tag database can become corrupted. If you experience strange behavior when dealing with tags, you can regenerate the tag database. To do so, you have two options:

  • Add Project Tags: will scan your project and add all tags that are missing from the tag database.
  • Clean and Add Project Tags: will delete all tags from the tag database, then it will scan your project and add all tags that are missing to the tag database.

12.9.Specifying a new tag during development #

If you write a new tag anywhere in myDESIGNER, a dialog box will show up to add this tag to the Tag Database:

12.9.1

 

  • Note:  Instead of writing ‘mytag@PLC’ you can use the alias ‘motorName_A1’ anytime.

Click on OK to confirm adding the tag to the database. Once the tag is created, you can use its Alias as a reference.

13.Formatting numerical values #

Numerical values can be formatted according to a specified format. To specify a format, please use # as a formatter.

 

 

The following table will show you how values will be formatted according to a specified formatter. Value 23.89323232 will be formatted as follows:

Formatter

Result

#

23

###

023

#.#

23.9

##.##

23.89

###.##

023.89

 

14.Linking views with PLC #

14.1.Introduction #

There are two options to link your visualization with the PLC:

Animations

With animations, you link the visual appearance of graphic objects with real values read from the PLC. The visual change is reflected immediately, e.g. you can show PLC tag/variable values in a text element, change the fill and stroke color of an object, etc.

  • Note: Multiple animations can be applied to the same object.

 

 

Effects

With effects, you add dynamic effects to graphic objects. An effect is the visual appearance of an object in a specified time sequence and can be triggered either by a tag/variable from the PLC or by a user’s action, i.e., finger tap or mouse click.

 

 

Imagine you want to display a blinking motor on your visualization if the tag/variable read from the PLC is equal to 1.

1. Set the Blinking effect on the motor by specifying the blinking speed and infinite repeat. This way the motor will be blinking as long as the tag read from the PLC is equal to 1.

2. If you use the Color animation instead, the motor will change its color if the value read from the PLC equals 1 and return back to normal when the value is 0.

 

14.1.1

 

14.2.Animations #

If you select an object and navigate to the Anim section in the Properties window, you will find all available animations for that object.

14.2.1

 

14.3.Show value animation #

14.3.1

 

This animation can display tag values in a text element.

In the Type section, you can select how the data will be displayed. There are three options:

  • Value
  • String
  • Date

 

Value

Value shows the read PLC values in the Decimal, Hexadecimal, Octal, and Binary numerical systems.

14.3.2

 

By default, Value type shows values in Decimal format. If you are showing a floating-point number, you can specify how the value will be presented by using formatting. For more info about formatting, please see Formatting Numerical values.

 

String type

String type reads string data type from the PLC and shows the resulting value as a string. You can specify special conditions such as maximum string length or string type.

 

  • Automatic
    The PLC type used in the tag definition selects the string type automatically. You need to specify only the maximum string length

14.3.3

 

  • EtherNet/IP
    Rockwell family string type. The string is automatically encoded according to the RA standard. Please specify the maximum length of the string. The provided maximum length must not be longer than the definition in PLC.

14.3.4

 

  • Siemens – Siemens family string. Please specify the maximum length of the string. The provided maximum length must not be longer than the definition in PLC.

14.3.5

 

  • General – User defined. You have complete control of converting a PLC data array into a string. First of all, you should specify the maximum length of the string. The provided maximum length must not be longer than the definition in PLC. Then you can specify which character terminates the string or specify at which position the length of the string is encoded.

14.3.6

 

  • Modbus – Modbus protocol definition does not define the string type. Most of the PLC makers, however, allow the use of the string in Modbus protocol by providing the values in an array. As there is no given standard for use in Modbus protocol, the user has complete control over how the string is defined. It allows you to convert a PLC data array into a string. First of all, you should specify the maximum length of the string. The provided maximum length must not be longer than the definition in PLC. Then you can specify which character terminates the string or specify at which position the length of the string is encoded. If your PLC encodes two characters into one register, please choose 8-bit characters; otherwise, choose 16-bit characters.

14.3.7

 

  • OPC – OPC UA family string. The OPC has defined a standard for reading strings. Please specify the maximum length of the string. The provided maximum length must not be longer than the definition in OPC UA server.

14.3.8

 

Date type

Date type enables you to read date value from the PLC and convert it to the date. mySCADA assumes the date is in unix time – the number of seconds since 1 January 1970.  You can choose to show only date, only time, or both date and time.

14.3.9

 

Example of Showing Values from PLC:

1. Let’s assume there are three tags in ControlLogix PLC, representing the water levels – level1, level2, and level3.

2. Create the text elements for these three water levels using the Create Text Element tool.

14.3.10

 

3. Continue adding the text elements responsible for reading values from the PLC. This process is exactly the same as creating the text elements.  The text written in the text element specifies how the value read from the PLC will be formatted on the screen. The format specification is described in the following figure:

14.3.11

 

  • Note: Any value received from the PLC that does not follow the format specification will be automatically transformed to a set format. For example, if the PLC returns a value of 3.47 and the visualization expects only one decimal place with the format (##.#), then the number displayed will be rounded to one decimal place, showing the value of 3.5.

 

4. Connect the text elements to specific PLC tags.

Click on the text element that should be animated, according to the data received from the PLC. You will see the animations properties in the Properties window. Select the Anim tab in the Show Value animation section; enter the specific tag address from which the text element will read.

  • Note: If the entered tag address is invalid, the text will be marked in red.

14.3.12

You can also combine a static text element with PLC values.

 

5. Upload the view to your supported device – the screen should look like the following:

14.3.13

 

In the example above, we have used the tags from ControlLogix. You can generally use the tags for all supported PLCs, as long as you use the proper syntax (for a brief description of proper tag syntax, see the chapter Basic Tag Syntax).

14.4.Value to text mapping animation #

This animation converts numerical values from the PLC into text values. The tag value is automatically converted to the string based on the definition table:

14.4.1

 

14.5.Visibility animation #

This animation allows you to control the visibility of an object. There are three inputs required for this animation: Tag, Min, and Max. When the value is within the min and max values range,  the object will be visible; otherwise, it will be hidden.

14.5.1

 

To animate visibility based on the discrete (Boolean) value, set both Min and Max to 1; this way the object will become visible when the tag value equals 1 (TRUE).

Example:

1. Click on the object that you want to animate (this will prompt the properties in the Anim tab of the Properties window) and navigate to the Visibility

2. Set the Tag (Address) and the Minimum and Maximum; if the tag value is within this range, the object will be visible, otherwise, it will be hidden.

14.5.2

 

14.6.Opacity animation #

Opacity defines how transparent an object is. Set the tag that will control the opacity. Then set the minimum and maximum values. When the tag is at the defined minimum, the object will be fully transparent; when the tag is at the defined maximum, the object will be completely opaque.

14.6.1

 

The following picture shows different levels of opacity:

 

 

14.6.2

 

And these levels again, converted to the tag values:

 

14.6.3

 

14.6.4

 

14.7.Color animation #

This animation displays a certain color when the associated tag is within an acceptable value range. You can enter multiple conditions to achieve multiple color changes with one animation. The conditions are evaluated from top to bottom; therefore, the bottom condition has a higher priority.

To animate colors based on a discrete (Boolean) value, set Min and Max to 1. This way, an object will change its color when the linked tag value is equal to 1 (TRUE).

Example

1. Select the object you want to animate and click on the Color tab in the Anim section in the Properties window and then click on the button.

14.7.1

 

2. You will see a new dialog window; click on Add and fill in the Tag, Min, and Max You can define multiple conditions. If the tag value is 0, the object will be red; if the value is 1, it will be black. Click on OK to confirm.

Examples of color animations: Buttons, Traffic lights, Fans, Valves, Motors

Specifying the Fill and Stroke

For each condition (item in the table), you can specify if the condition applies to fill, stroke, or both.

14.7.2

 

14.8.Moving animation #

This animation is a programmed motion of an object moving along a defined path or XY axis, based on the tag value.

Moving along the path

1. Create an object and a path to move this object along. To add the Move animation, select the object and click on the Active button in the Move animation tab of the Properties window, as indicated in the picture below:

14.8.1

 

2. Fill the tag address in the dialog window and select one of the available paths.The other available features are:

Visible – move path remains visible if this option is enabled

Length – represents the length of a selected path; it is displayed automatically

Absolute – this option tells the mySCADA engine to map the whole path length for the Move animation up to the tag value of 1:1

Relative Positioning  –  this option allows using only a certain tag value threshold. The Min value represents the starting animation point (the object moves only when the tag value reaches this point); the Max value represents the ending animation point (the object moves to the end of the path when the tag value reaches this point).

Reverse – reverts the movement from start-end to end-start

 

Moving along X-Y axis

In this type of animation, you can set up movement along the X and Y axes.  Check the appropriate axis that you want to move your object along and fill in the required parameters.

14.8.2

 

Start by filling the Tag, Min, and Max values. Then fill in the length of the movement in pixels. If you would like to reverse the movement, check the Reverse check box.

14.8.3

 

  • Note: A typical use of the Move animation might be moving goods on a conveyor belt, etc.

 

14.8.4

 

14.9.Size animation #

This animation type is used to change the size of objects. It is very useful for creation of an animated progress bar or for tank level animations.

14.9.1

 

1. Select the object you want to animate; navigate to the Properties window, Anim tab, and section

2. Set the tag, Min, and Max limits.

3. As a last option, select one of the orientation options:

  • Horizontal
  • Vertical
  • Both

 

Reversing the orientation

By default, horizontal orientation will change the location of the object to the right, e.g. the left side of the object will stay fixed. Similarly, vertical orientation will change the location of the object upwards, leaving the bottom of the object fixed.

14.9.2

 

If you want to change the orientation of the movement, simply rotate the object by 180 degrees. You can do so by right clicking on the object and selecting rotate -> by a 180-degree angle

14.9.3

 

Size Animation Examples:

 

14.9.4

 

 

14.10.Scale animation #

This animation type is used to scale an object, corresponding to the entered value.

14.10.1

 

1. Select the object you want to animate; navigate to the Properties window, Anim tab, and section

2. Set the tag, Min, and Max limits; percentage of scaling; and the reference point.

14.10.2

 

If the tag value is at its minimum value, the object will be scaled to the defined scaled minimum. When the tag value is at its maximum value, the object will be scaled to the defined scaled maximum.

Difference Between Size and Scale Animations

Size animation changes the real size of the object, while scale animation applies a scale transform to the given object. If you have a rectangle, for example, it is defined by its coordinates, width, and height. When we apply size animation, we are changing the width and height parameters of the rectangle. When we apply scale animation, we are setting the scale transform of the whole object.

14.11.Rotate animation #

With this type of animation, you can rotate an object around the set axis, according to a percentage of maximum and minimum values ranging from 0 to 360 degrees (defined by the Range parameter).

Enter the tag name and the minimum tag value, which correlates to the 0th degree, and then enter the maximum tag value, which correlates to the 360th degree.

By default, the axis of rotation is set in the geometric center of an object or a group. You can change the rotation axis by double-clicking on the object and setting its axis, which is marked as a blue dot. Move the selected point to the desired position, as shown in the picture below:

 

14.11.1

 

Go to the Rotate section of the Anim tab in the Properties window and fill in the Tag (Address), Minimum, and Maximum values.

14.11.2

 

Set Center property can be set to:

  • Clear Center – clears the custom rotation center and sets to the default (geometrical) center
  • Cancel – closes the menu without any changes

 

Center Offset X (Y) shows the difference between the custom and geometric rotation center.

Center X (Y) shows the absolute coordinates of the selected rotation center.

Range property defines the total revolution angle, which is 360 degrees by default.

14.12.Circular sector animation #

This animation is applicable to circular objects. This animation creates a circular intersection on circles and ellipses.

14.12.1

 

To use this animation:

1. Select a circle or ellipse and navigate to the Anim -> Circular Sector

2. Fill in the Tag, Minimum, and Maximum values

3. Specify Angle From and Angle To values

 

When the tag value is equal to the specified minimum, the object will be invisible, as the angle of the circular section will be equal to 0. As the tag value increases, the circular section will grow from the specified Angle From up to the Angle To. When the tag value is equal to the specified maximum, the circular sector will be between the Angle From and Angle To values.

 

Other parameters

Reverse: reverse the orientation of the section.

Is Arc: if not selected, makes a circular section from the whole object. If selected, leaves only the Arc from the object.

 

Circular Sector Examples

 

14.12.2

 

Circular Gauge in myDESIGNER

 

14.12.3

 

Circular Gauge in live view

14.13.Zoom visibility animation #

 

With zoom visibility animation, you can show and hide objects or even layers based on the zoom level in runtime. This animation can be used in many scenarios. Imagine the following situation: you would like to give your user an overview of your complete technology, but it needs to fit on one screen. As the user zooms in, he will see more details. You can achieve this by using zoom visibility animation.

 

Zoom visibility on object in view

1. Select your object and navigate to the Anim -> Zoom Visibility

2. Fill in the minimum zoom level where the object will be visible; accordingly, fill in the maximum zoom level where the object will be visible.

14.13.1

 

Zoom visibility on the whole layer

1. Invoke the Layer Settings Dialog

2. Fill in the minimum zoom level where the layerwill be visible; accordingly, fill in the maximum zoom level where the Layer will be visible.

14.13.2

 

14.14.Sounds #

You can create a sound animation, which will play loaded MP3 files upon notification of non-standard situations or voice announcements. You need to import the sound files before you start creating the Sound animation.

Sound import

1. Select the Sounds folder from the Project window and click on Import in the main toolbar or right – click on the folder and select Import from the context menu.

14.14.1

 

2. Select the MP3 file from the available folders in the Import Sound Please note the maximum size of the file is 3.5 MB!

14.14.2

 

3. The sound file will be loaded into the Sound

Deleting Sound

If you wish to delete a sound file, select it from the Sound folder and click on the Delete Sound icon in the toolbar or select the Delete command from the right-click menu.

Applying Sound Animation

1. Select the object you wish to link a sound with, navigate to the Sound section under the Anim tab in the Properties window, and click on the ‘’ button.

14.14.3

 

2. In the dialog window you can set:

14.14.4

 

  • Sound file – MP3 file to be loaded
  • Severity (priority) – in case of simultaneous occurrence of multiple sound animations, only the sound with the highest numerical severity will be played
  • Repeat Count – number of repetitions of a selected sound
  • Volume – defines the relative volume of the played sound (related to the system maximum)
  • Start by – sets the triggering action for the sound animation:

14.14.5

 

on Click –  sound will play if you click on the object

on Down – sound will play if the object is pressed (click-and-hold)

on Up – sound will play if the object is released after click or press

 

3. Click on OK once you have set all required parameters.

14.15.Sounds triggered by tag value #

Apart from the animations, sounds can be also triggered by a certain tag value read from the PLC. They can be set for each view separately.

1. Select the view from the Project window in which you want to play the sounds.

2. Navigate to the Parameters section in the Properties window and click on the ‘’ button.

14.15.1

 

3. In the dialog window, click on the button +Add to add the triggering tag, and then select the sound file you want to play.

14.15.2

 

4. Set Severity, Repeat Count, Volume, and Min & Max tag range and click on the Set button to confirm.

14.16.Effects #

With effects, you can add dynamic effects to your graphic objects, as described in the previous chapter (see the difference between Animations and Effects)

Effects make the graphic visualization less static, and their function is similar to animations. However, they do not reflect the real state of a technological process.  We advise using the animations for visualization of a precious technology state and use the effects to visualize the real-time change of objects.

The states of objects during animating are based on actual values obtained from the PLC. For example, the motor rotation visualized through the Animations behaves according to the values obtained from the PLC, but the rotation visualized with the Effects is based on the values set by you and will use the “hard” data only as a trigger.

 

b. Select the object you want to set effects on and click on the Effects button in the GUI toolbar.

14.16.1

 

2. A new dialog window will show up.

14.16.2

 

This window has two sections:

  • Default – here you can find useful effects provided by mySCADA Team
  • Custom – here you can create your own effects or modify default ones

Effects are grouped together into categories. When you open the effects window, you are presented with the selection of those categories. Click on a corresponding category to see all effects under this category.

14.16.3

 

Selecting an effect.

To select an effect, simply click on it. When you click on effect, it is highlighted and you are presented with effects’ properties on the right side of the effects window:

 

Effects’ Properties:

14.16.4

 

Effect name:

Each effect has its own name; you can change the name of an effect by double clicking on the effect icon.

 

Timing:

Effects’ timing is controlled in the following section:

14.16.5

 

Time: overall duration of effect in milliseconds

Loop: how many times effect will repeat

Forever: check to repeat effect forever

Preserve attributes after the finish: when the effect ends, all attributes changed are reverted to the original state as it was before the effect started. If you would like to preserve attribute changes after the end of the effect, check this option.

Property changes

The mySCADA effects engine enables you to animate different properties for any element. You can change, for example, color, size, move element, and much more. The properties table shows you which properties will be modified when the effect is run.

14.16.6

 

This properties table has just one section and one property change. When this effect is run, it will change the element color to red.

You can change multiple properties at once, or you can change different properties during a time. For example, you can create multiple entries per section (Duration), and you can have multiple sections. The following properties table will show how to change multiple properties at once and have multiple sections.

14.16.7

 

In this example, the fill and stroke color of output elements will be changed to red and yellow. The change will take time in first half of time (Specified by Duration 50.0 %). Then, the element will start to rotate and will rotate by 90 degrees. At the end of the effect, the element will disappear; this is due to the “Reset” section where we have specified opacity = 0.0.

To modify a property, double click on it. The Modify Property Dialog will be shown:

14.16.8

 

If you wish to modify a Time Section (Duration), double click on Duration label; a new Modify Duration Dialog will be shown:

14.16.9

 

Modify parameters:

  • Time: this is the duration of the time section shown as a percentage. If you specify the overall time of effect to be 1000 milliseconds and then set the time duration to 20 %,  the animated change will take exactly 200 milliseconds.
  • Easing: specifies the rate of change of a parameter over time. You can choose from several easing functions. To see them all, click on the ? button next to the easing combo box.

To add a new property or section, click on Add Button, and a new dialog will be shown:

14.16.10

 

 

Select a property you would like to add and set its value.

If you would like to create a new Time Section (Duration), check “Add New Time Group,” and additional properties will be shown:

14.16.11

 

Fill in the required parameters:

  • Time: this is the duration of the time section shown as a percentage. For example, if you specify the overall time of effect to be 1000 milliseconds and then set time duration to 20 %, the animated change will take exactly 200 milliseconds.
  • Easing: specifies the rate of change of a parameter over time. You can choose from several easing functions. To see them all, click on the ? button next to the easing combo box.

If you would like to create a Finish Time Section, check the appropriate checkbox:

14.16.12

 

The Finish section is useful if you would like to set some properties for a given value at the animation end. If you use the Finish section, you should check “Preserve attributes after finish”.

Trigger

A trigger specifies how an effect will be started.

14.16.13

 

In the context menu, you can set the effect trigger:

on Click – effect will be activated when the object is clicked

on Down – effect will be activated when the object is pressed        

on Up – effect will be activated when the object is released (after on Down action)

on Down Up – effect will be activated when the object is pressed and stopped when the object is released.

on Mouse Over – effect will be activated when you hover over the object with the mouse pointer and stopped when the mouse pointer leaves the object

Tag – effect will be activated when selected tag value reaches given range and stopped when the value is out of range.

Tag Trigger – effect will be activated when selected tag value reaches given range, but the effect will NOT be stopped when the value is out of range.

 

If you select Tag or Tag Trigger from the trigger menu, set the tag address and the range of the Min and Max values.

14.16.14

 

Inputs

The Inputs section specifies the elements that trigger the effect action. If you, for example, set the action to on Click and then specify multiple Input elements, any of them will act as a trigger effect when a user clicks it.

14.16.15

 

The “+” and “-” buttons allow you to add or remove Input elements from the list.

Outputs

The Outputs section specifies the action elements to which the effect is applied. Usually, you want to apply an effect to the same element you have for the action trigger. In this case, you can leave  the default settings as “ThisElement.” If you want to have different or multiple elements, use the “+” and “-“ buttons to select the corresponding elements.

14.16.16

 

Saving Effect

If you have modified effect properties and would like to save them for later use, press the “Save” button.

 

Applying Effect

If you would like to set/apply an effect, press the “Apply” button.

15.Time Sequence #

Time Sequence is an easy to use and extremely powerful function that adds timed animations to the views. The Time Sequence editor is part of the GUI editor and allows you to change graphic properties of your objects for specified time intervals. myDESIGNER automatically computes  the transitions between these time intervals.

 

You can open the time sequence editor by clicking on the Time Sequence icon, located in the GUI toolbar.

15.0.1

 

The GUI editor automatically adds the Time Sequence toolbar to the Main Window.

 

15.0.2

 

Creating a time-sequenced animation is very easy. You just move the time slider and modify the graphic objects for each time position, as you want them to appear at these time positions. The smart algorithm inside the mySCADA runtime will compute the animation so that it is time-fluent.

15.1.Example #

1. Open the Time Sequence editor.

15.1.1

 

2. Now you are presented with the Time Sequence Editor. All of the controls are located in the red square.

15.1.2

 

3. Now move the time slider to the first time point.

 

15.1.3

 

4. Now modify your objects in the way you want them to appear at this time point.

Allowed operations are:

  • Position change
  • Size change
  • Color change
  • Opacity

Prohibited operations are:

  • New object creation (use opacity to show/hide objects)
  • Rotation change

15.1.4

 

5. Save your time position.

15.1.5

 

6. Add more time positions and save the time sequence to complete it.

15.1.6

 

7. Now, if you play the animation, the object on the conveyor will move.

15.1.7

 

15.2.Triggering time sequences #

Time sequences can be trigger by several actions:

  • by time
  • by tag value
  • by user action

To set a trigger, select the required action in the Trigger combo box.

15.2.1

 

Trigger by Time

Trigger by time will play your time sequence after the view is shown. It can be delayed in the Timing settings.

Trigger by Tag

If you set trigger by tag value, you should specify the tag, minimum, and maximum values. If the tag is between the minimum and maximum values, your time sequence will be triggered. To modify the values, please click on the Tag button:

15.2.2

 

You will be presented with the Tag Settings dialog.

15.2.3

 

Once the tag value is between the specified Min and Max values, your time sequence will start playing. It will stop after the specified time duration (see Time Settings). If you want to stop your animation immediately after the tag is out of the Min/Max range, please check “Stop when condition not valid:.”

Trigger by User Action – Click

A Time Sequence can be also started by a user action. You can specify which graphical objects can trigger your time sequence.

1. Select all the graphical objects you want to trigger your time sequence. Now click on the “Click” button.

15.2.4

 

2. You will be presented with a setting dialog:

15.2.5

 

3. Click on the “Select click items, then click here” button.

15.3.Modifying time settings #

To modify the time duration, offset, or repeat count of your sequence, press the Timing button:

15.3.1

 

You will be presented with the Time Settings dialog:

15.3.2

 

In the Time Settings dialog, you can specify the overall time duration (this is also the reason why  the time scale is shown as a percentage). You can also specify the time offset. If the time offset is greater than 0, the time sequence will start after the specified number of seconds. Set the repeat count to repeat the series or click on Continuous to repeat it forever.

 

  • Tip: Use the “Continuous” option in combination with the tag triggered option “Stop when condition not valid” to play your time sequence continuously when your tag value is within the limits.

 

Preserve state on finish

When the time sequence finishes, it can either leave all graphical objects as they were at the end of the animation or it can set your objects to the initial state (e.g. set them as they were at the beginning of time sequence).

Preserve state on finish activated: leave all graphical objects as they were at the end of animation

Preserve state on finish deactivated: reset your objects to the initial state (e.g. set them as they were at the beginning of the time sequence)

15.4.Adding new sequences #

You can easily add or remove time sequence by using the New and Del buttons:

 

15.4.1

 

15.5.Renaming time sequence #

To rename a time sequence, press the following button.

15.5.1

 

You will be presented with the rename dialog:

15.5.2

 

Put in a new sequence name and confirm using the Set button.

15.6.Switching among time sequence #

To change a time sequence to a different one, use the Name combo box:

15.6.1

 

Once you change the time sequence, your view will change to the given time sequence, and you can start editing it.

15.7.Modifying timing #

The Time Scale Slider shows all saved time points. These are the little arrows below the scale.

15.7.1

 

15.7.2

 

You can modify the timing by moving these time tags to the side. You can also specify the exact value by right clicking on the time tag. To delete the time tag, right click on it and select Remove.

15.8.Combining multiple time sequences #

15.8.1

 

You can combine multiple time sequences. Imagine you have a production line where you need to perform 10 different operations, and each operation must start one after another. This can be easily achieved by combining multiple time sequences. You can simply nest one animation after another. To do so, change the Start after option to your previous animation.

Example:

Let’s say you need to animate three consequent operations:

1. Object moving on the belt to the desired position

2. Object being pressed

3. Object leaving

 

Each operation is triggered by the tag.

1. First of all, we will start by creating our view.

2. We will create the start sequence by creating the first time sequence.

15.8.2

 

You can see that we have moved the time slider to the end. We have also moved the object under the press.

We have set the trigger to Tag condition:

15.8.3

 

In the timing settings, we have checked Preserve State on finish.

15.8.4

 

3. Now we will create the second time sequence. This one will start after the first one, so we will set the Start after:

 

15.8.5

 

And our time sequence:

15.8.6

 

We have set the the trigger to Tag condition:

15.8.7

 

In the timing settings, we have checked Preserve State on finish.

15.8.8

 

4. And now we will create the final time sequence. This one will start after our previous one, so we will once again set the Start After:

 

18.8.9

 

And our time sequence:

15.8.10

 

We have set the trigger to Tag condition:

15.8.11

 

In the timing settings, we have disabled Preserve State on finish. This will allow our view to return to its starting condition.

15.8.12

 

16.Open command #

This command is used to navigate between the HMI screens, e.g. you can open other project views from currently open ones. In addition, you can use the open command to change the content of the Active Area. The Open Command can be applied to any graphical object.

With the open command you can:

  • Navigate to a different view
  • Open a view in a new window (except on mobile devices)
  • Change the content of the Active Area

With the Open Command, you are able to open:

  • Views
  • Parametric View
  • Advanced Trends
  • Data-log views
  • User actions
  • External web-pages
  • Any HTML5 content

To use the open command, please navigate to Properties -> Commands and click on the Open “” button.

16.0.1

 

You will be presented with the Open dialog:

16.0.2

 

The Open dialog has three sections:

  • Open: here you specify what you want to open
  • Parameters: this section changes depending on your previous selection.
  • Target: open in this view or in active area

16.1.Open type #

Select from the available options the entity type that should be opened by the command:

16.1.1

 

  • View – can open a previous screen or any arbitrary view of your project
  • Parametric View – parametric window will be opened
  • Document – opens one of the project documents, Index property sets the page number the document will open on
  • Advanced Trend – advanced trend will be opened
  • Alarms – you can choose between Online alarms or History alarms
  • Data-log – opens a data-log of your choice
  • User Actions – opens a window with the user actions manager
  • HTML – opens any web content you define in the dialog window
  • SQL Table – shows SQL table
  • Login/Logout – shows login dialog

16.2.Target #

In Target you can specify if you wish to use the open command to replace the current view, open content in the Popup window, or show content in the active area. The Target option is only visible if you have Active Area in your view.

16.2.1

Set “This view” option to open the content in this window. Select “Active area” to set content in the Active area with a given number.

If you wish to open content in a new popup window, click on the “…” button. You will be presented with a new dialog to set up the parameters of the newly opened window.

16.4.View type #

If you select this option, you can specify the view to be shown. 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.

16.4.1

 

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

Parametric View type

If you select this option, you can specify the parametric view to be shown. You can display any view you have previously designed.

16.4.2

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. The PDF document will be automatically scaled to the size of your view.

16.4.3

 

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. There are several parameters you can use to set up the specific visual appearance of the alarm table that will be shown. You can also limit shown data using filters.

16.4.4

 

  • 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.

16.4.5

 

  • 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.

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.

16.4.6

 

2. Create a new view and insert a button.

3. On the button set up an on click open command.

16.4.7

 

4. Set up data filter as follows:

16.4.8

5. Test your view

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 view.

16.4.9

 

  • 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.

16.4.10

 

  • 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.

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 view.

16.4.11

 

  • 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.

16.14.12

 

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.

 

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.

16.4.13

 

2. Create a new view and insert an button into it.

3. On the button, set up Open command.

16.4.14

 

4. Set up data filter as follows:

16.14.15

 

5. Test your view.

 

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 view.

16.4.16

 

  • 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.

17.Write/Set command #

 

Writing Values to PLC (or Database)

It is possible to configure any graphical object to write new values to the PLC (or database). The ability to toggle a specified bit, write a static predefined value, write any value given by the user, or write any value given from multiple choices from a user-created list are all possible.

There are three types of triggers available for each object, and each of them can write its own dataset. The data can be written using the on Click, on Up, and on Down actions. The on Up and on Down triggers are independent, so you can write two different sets of data with one button at the same time.

 

  • on Click – Write/Set command will be activated when an object is clicked on
  • on Down – Write/Set command will be activated when an object is pressed (click and hold)
  • on Up – Write/Set command will be activated when an object is released

 

All three triggers have the same properties.

To use a write/set command, please select the graphical object you want to use for the set/write command and then navigate to Properties -> Write/Set command.

 

 

 

Select either the Click, on Down, or on Up command and click on the “…” button. You will be presented with the Write/Set Settings Dialog:

17.0.2

 

The dialog window is split into two sections. On the left, there is a Tree View showing all of your set commands in hierarchical order; the right section shows the parameters of the selected set command.

You can assign tag to the set command by simply clicking on “…” or by typing tag as example “H:0” and then confirm by hitting enter, if the tag has limits set in tags database it will ask you if you want to get these limits also into set (As example tag “H:0” have High High limit: 100 and Low Low limit: 10, High: 50, Low: 20 these four limits can be put into “Min [dec]” and Max [dec] column automatically.

17.1.Using batches #

As you can see in the left pane of the dialog window, you can organize your set commands into batches. Each batch is a list of set commands that are processed at once. You can create an unlimited number of batches, and each batch can have as many set commands as you need.

17.1.1

 

In the batches pane, you can see all your batches listed.

A Batch is:

  • A collection of set commands of the same type
  • Processed from top to bottom
  • Written to the PLC with one command

 

Add Batch

To add a new Batch, please click on an existing batch and then click on the button “+ Add”.

Remove Batch

To remove a Batch, select it and then click on the button “- Del”. All defined set commands in that batch will be deleted along with the batch.

Add Batch Item

To add a batch item, please select a set command in the corresponding batch and then click on      the button “+ Add”. The new batch item is added to the end of the batch list.

Remove Batch Item

To remove a batch item, please select a set command in the corresponding batch and then click on the button “- Del”.

Batch Type

Each batch can be of exactly one type. All set command in the batch must be of the same type. Available options are:

Type

Description

Tag

Write values to the PLCs

Memory

Set View Script variables

Script

Run custom function defined in View Script

SQL

Write values to the database

 

17.2.Specifying set command parameters #

To specify set command parameters, first, please select the batch in the corresponding batch list. You will see its properties in the right pane of the dialog.

Tag Type

Select a Tag Type to write values to the PLC.

17.2.1

 

Tag  – you can write the tag straight into the Tag field; you can also click on the ‘’ button to prompt the tag database.

Connection  – set connection to the PLC. Connection parameter is same for all set commands  in the batch.

Title – Set title for this set command. If you require a response from the user in the form of dialog, the title of the dialog will be this title.

translate Use translation button to provide a translation for this set command.

Lock Enable  – check this option if you want to use On Touch Lock for this element.

Log  – check this check box to log this user action. The user action will be logged with the provided message.

 

Memory Type

Select a Memory Type to set View Script Variables.

17.2.2

 

Variable  – specify a View Script variable to set the value to.

Title – Set title for this set command. If you require a response from the user in the form of dialog, the title of the dialog will be this title.

 

translate Use translation button to provide a translation for this set command.

 

Lock Enable  – check this option if you want to use On Touch Lock for this element.

Log  – set this check box to log this user action. The user action will be logged with the provided message.

 

SQL Type

Select SQL to write values to the database:

17.2.3

 

Connection  – set connection to the database. Connection parameters are the same for all set commands in the batch.

SQL  – specify SQL that will be used to write values to the PLC. The SQL parameter is the same for all set commands in the batch. When the batch is processed, all values from the batch are inserted into the specified SQL. The top set command in the batch will replace #1# keyword in the SQL; the second set command in the batch will replace #2# keyword, and so on.

Title – Set title for this set command. If you require a response from the user in the form of dialog, the title of the dialog will be this title.

 

translate Use translation button to provide a translation for this set command.

 

Lock Enable  – check this option if you want to use On Touch Lock for this element.

Log  – check this check box to log this user action. The user action will be logged with the provided message.

 

Multiple Values Write Example

The following example will explain how to write multiple values into the SQL database with one batch set command. We will ask the user to enter two values which will be then written to the database using the SQL command.

b. Create a connection to your database.

17.2.4

 

2. In your view, navigate to the button element and in Properties -> Commands, select Write/Set Command.

17.2.5

 

3. Now in the set dialog, create two items in one batch like in the following picture:

17.2.6

 

4. Now test your project. If you click on the button, the user will be asked twice to enter the value. Once the user has entered both values, mySCADA will execute the SQL. #1# will be replaced with the first value; #2# will be replaced with the second value.

Script Type

This very useful feature allows you to oversee, set up, and enrich the whole Write/Set command functionality from the scripting level (i.e. you can freely create and add your own new arbitrary functionalities). When the set command is processed, the corresponding View Script is called.

17.2.7

 

For a detailed description of how View Scripts work, please see section View Scripts.

17.3.Value options #

When writing values to the tags, memory variables, or the database, you must specify the value options. The following is a description of all possibilities.

 

Value – this option sends a static value to the PLC

17.3.1

 

Please specify a value to send to PLC. It can be any numeric value (integer or floating point). If you check the Prompt option, the user will be presented with a confirmation dialog. The value will be written only after the confirmation.

 

Toggle – binary switch; sets 0 to 1 and 1 to 0; should NOT be applied to non-binary variables.

17.3.2

 

If you check the Prompt option, the user will be presented with a confirmation dialog. The value will be written only after the confirmation.

 

Numeric – prompts a dialog in the visualization where the user can enter any numeric value.

17.3.3

 

There are options to treat such dialogs as password input (hiding input values) and to set the allowed range of inputs with Min and Max limits and a number with decimal places. You can choose from four numeral systems:

 

Decimal (Dec)             Hexadecimal (Hex)    Octal (Oct)                  Binary (Bin)

17.3.4

 

Inc/Dec increases or decreases PLC value by the set level:

17.3.5

 

If you select the Cycle option, the increasing / decreasing process will repeat. If the value goes over the Maximum value, it will automatically change to the minimum value. If the value goes below the Minimum value, it will automatically change to the maximum value.

If you check the Prompt option, the user will be presented with a confirmation dialog. The value will be written only after the confirmation.

 

String – prompts a dialog in the visualization where the user can enter any string value with other options such as password input (for hiding input values) and sets an allowed number of characters with Min and Max limits; predefined text can also be set with the Predef. Text option. You can also provide a translation of the predefined text by clicking on the translation button next to the text entry.

17.3.6

 

User Text Entry dialog:

17.3.7

 

Slider – prompts a dialog in the visualization where the user can select any numeric value with a slider; additional options allow setting Min and Max outer slider value limits and the number of decimal places with Dec. Places

17.3.8

 

Slider set dialog:

17.3.9

 

Multiple Choice – prompts a dialog in the visualization where the user can select one of the predefined values, which should be entered as tag value/text pairs during the animation setting

17.3.10

 

Multiple choice set dialog:

17.3.11

 

Date  – with this feature you can write the current date, time value, or both (date + time) in the visualization

17.3.12

Date set dialog:

17.3.13

 

18.Scaling set values #

The Numeric and Slider options have both settable scale and offset values being sent to the PLC.

18.0.1

 

Usage is quite straightforward: imagine you want the user to enter a value by percent, e.g. between 0 and 100, but you need to have the value written to the PLC as a floating point value in the range 0 to 1. In this case, you would set the scale as follows:

18.0.2

 

18.1.Set example #

The picture below shows the configuration setup so that the on Click command prompts the write dialog where the user can write a value in the range of 0 to 150.

The resulting value will be multiplied by 3 and increased by 33 before writing to the PLC as a result of the Scale/Offset addition.

18.1.1

Additionally, you can add a Title text, which will display during visualization in the dialog window when using the Write/Set command. If you want no confirmation message to be displayed upon  the write action, unselect this field.

If you want to log the write command into the data-log, check the Log check box and fill in  the message field.

19.Key shortcuts #

This feature is a very useful part of the Commands and allows you to prompt certain functions using set key shortcuts. On the key press, you can define write/set command or open command. This way, you can change values in the PLC or open another view, just using a simple press of a button.

 

To apply a Key Shortcut to your view, do the following:

1. Select the view you want to apply the shortcuts to and navigate to the section Parameters in the Properties

19.0.1

 

2. Click on the ‘’ icon to open the settings dialog window where you can set arbitrary key shortcut combinations and assign the commands to them.

19.0.2

 

3. Click on the Add button and select the functional keys you want to use for the shortcut (Shift, Ctrl, Alt), then click the Key box (or click on the ‘KBE’ button) and press any arbitrary key on the keyboard (letters or numbers).

You will see a review of the shortcut on the left side:

19.0.3

 

4. Now select the type of command the shortcut should prompt (Open or Write/Set) by clicking on Set and set the properties of the command in the dialog window as described earlier.

19.0.4

 

20.On touch #

This function brings user interactivity to your elements. It can change the object properties like fill and stroke color or visibility when you touch / release the element in the run-time.

You can create interactive buttons where the user is notified of the press by a color change. In addition, you can create more complex scenarios like showing/hiding an object border and shadow when touched.

20.1.On touch in views #

To use an On Touch event on elements in View, please select the element you want to use as your On Touch trigger. Then navigate to Properties -> Commands. Now click on the On Touch “…” button.

20.1.1

 

You will be presented with a new dialog window:

 

20.1.2

 

In this dialog, you can add multiple graphical objects and change their properties. To do so, click on the “+ Add” button. A new entry will be created. Please now look at the Settings section on the right side of the dialog:

20.1.3

 

The first option is the “Target ID”. The target ID specifies which graphical object you wish to apply settings to during the touch event. If you want to apply settings to the same element as your graphical object, please leave the option This Element.

Next, parameters control visibility, Fill, and Stroke color of the given object.

As you can see, you can create a simple scenario like changing the fill color of an object during a touch event, or you can create a complex scenario involving multiple different objects.

20.2.On touch in component #

For the component, the on touch event is one for all items in the group. This is because each component is encapsulated in a group. If the user clicks on the group, all On Touch actions inside the group (all items in the component with set action On click) will activate.

To use On Touch animation in Component, please click on the component and navigate to the Properties -> Commands. Now click on the On Touch “…” button. You will be presented with the settings dialog:

20.2.1

 

Set visibility, fill, or stroke change for the selected element.

  • TIP: If you want to modify multiple elements during the On Touch action, simply set the On Touch parameters for each of them.

20.3.On touch example #

The following Example will show you how to create a button component with an On Touch action.

 

1. Create a new component and enter edit mode. If you don’t know how to create components, please read the section Components

2. Now create a rectangle and put the text “Press me” over it.

20.3.1

 

3. Select the rectangle and click on Properties -> Commands -> On Touch

20.3.2

 

4. Check the “Fill” check box and select a fill color

20.3.3

 

5. Now place your component into the view

20.3.4

 

When a user presses the button, its color will change to green

20.3.5

 

When the user releases the button, the color will return back to normal.

20.3.6

 

20.4.Lock element #

Lock, if applied, can turn any element of your graphics into a lock key. You can use Lock to disable accidental write/set commands from being executed. If enabled, the user must first press and hold the Lock element and then press the element with the set command.

Lock element is not pressed = user cannot press the button.

 

20.40.1

 

Lock element is pressed = user can press the button

 

20.4.2

 

If you want to apply this function, select the object you want to set as a lock, navigate to the Commands tab of the Properties window, and check the box in the Lock section.

20.4.3

 

  • Note: This function is only usable on multi-touch devices.

Once you have set up your Lock element, you can use it anywhere in the Write/Set Command. Simply apply the Write/Set Command to any element and check the “” check box.

20.4.4

 

Example

In the following example, we will create a simple view with a lock element and a button. The button will be enabled only if the user presses and holds the lock element simultaneously.

1. Create a new view and insert the Lock icon and a button. You can also insert an indicator to see if your button is working

20.4.5

 

 

20.4.6

 

2. Now enable the Lock command on the Lock icon

20.4.7

 

3. Now navigate to the Write/Set command and create a toggle action. Check the “Lock Enable” check box.

 

4. Now when you open your view, you will be able to press the button only if you simultaneously press the Lock icon.

 

DOWNLOAD DEMO PROJECT HERE

20.5.Lock key #

The Lock Element can be very useful to avoid accidentally pressing buttons. However, it is only suitable for multi-touch devices such as tablets or mobile phones. On a regular computer, you can use the analogous function called Lock Key. The principle is the same as for a Lock Element; however, instead of selecting a graphical object as your lock element, you select a key that must be pressed to enable the write/set commands.

To enable this feature, please navigate to your view in the Project tree and press the Lock Key in the Properties window.

20.5.1

 

You will be presented with a new dialog window where you can register your Lock Key:

20.5.2

 

Now press the “KBE” button to register your new Lock Key. Now press the key you would like to use as your Lock Key. Your new Lock Key is registered.

20.5.3

 

Once your Lock Key is registered, you can work with your Write/Set commands. The usage is the same as described in the previous section.

 

DOWNLOAD DEMO PROJECT HERE

 

The right button will be unlocked by pressing and holding the space button.

20.6.Slider #

This is another possibility for writing arbitrary values to the PLC. You can create a slider control, enabling the user to move the slider and write values to the PLC. The slider can be a simple object as shown below, or it can be a complex scenario like moving items on a conveyor. Any graphical object on your screen can act as a slider.

 

20.6.1

 

Some example slider controls:

 

20.6.2

 

To activate this control, select your graphical item, navigate to the Write/Set command options in the Properties window, and select Slider.

20.6.3

 

You will be presented with the settings window:

20.6.4

 

In the dialog window you have to set:

  • Tag – either manually or from the tag database by clicking on the ‘’ button.
  • Type – you can choose the orientation of the slider from Left to Right, Top to Bottom, or vice versa
  • Min and Max – range of Tag value
  • Lengththe length of the slider movement in pixels

 

The following picture demonstrates how parameters correlate to one another:

 

20.6.5

 

21.Parametric views #

Instead of designing multiple similar visualizations of multiple field technology that differentiates only in operational parameters and not in appearance, you can use one master view that is common for all.  You can set and use operational parameters to link the views with specific pieces of technology.

To create a Parametric View, click on the views in the Project tree and then click on the New Window icon in the main toolbar. Then, when naming the view, check the “Parametric” check box.

 

21.0.1

 

Click the “Add” button. Now your view is created. Once you have created your view, you can use symbolic access instead of absolute addresses.

21.1.Opening parametric views #

The Parametric view is not visible in the main menu. There is a reason for this. If you use the parametric view in your project, you should use symbolic addresses instead of absolute ones. To show the parametric view, you must open it using the open command. Select an element you want to use as the open command, and in Properties, select Commands and click on the Open command.

21.1.1

 

You will be presented with the Open Dialog.

21.1.2

For the Open command, use Parametric View and select your parametric view.

Parameters

To use symbolic addresses in your parametric view, you should specify parameters in the Parameters options. To do so, click on the “” button next to the Parameters field. You will be presented with a Parameters selection dialog:

21.1.3

 

As you can see in the dialog, you can specify multiple parameters. Each parameter can be of the following types:

  • String
  • Value
  • Tag (PLC address)
  • Equation

 

If you set a Tag inside a parameter, mySCADA will pass the tag value as a parameter during the open command. In addition, when you specify an equation, mySCADA will evaluate the equation and pass the value as a parameter.

Connections

You can also specify a connection during the opening command. Imagine you have multiple production lines, each controlled by one PLC. You can create one parametric window for one production line; then, when opening your parametric view, you can pass the connection to the given production line. This way you are able to have one view for all lines by simply passing the connection.

To set the connection during the opening command, please specify it by clicking on the “” button next to Connections. You will be presented with a new dialog:

21.1.4

Now specify the connection or even multiple connections.

21.2.Symbolic text replacements #

If you pass Parameters during the parametric view opening, you can then use any of the passed parameters in text elements. To do so, simply use the $index$ syntax.

1. First, create a parametric view with text elements inside it:

 

FIRST PARAMETR IS $1$

 

2. Now in different view, select a button and use the open command

21.2.1

 

3. Specify the Parameter

21.2.2

 

4. When you open your parametric view by clicking on the button, you will see that $1$ is replaced with the value specified in Parameters.

 

FIRST PARAMETR IS HELLO

 

  • TIP: Download an example showing the Symbolic text replacement of the following parameters:

 

  • string
  • value
  • tag value
  • equation

 

DOWNLOAD DEMO PROJECT 1 HERE

 

DOWNLOAD DEMO PROJECT 2 HERE

21.3.Symbolic tag creation #

In a regular view, you would link your graphics to your PLC using hard (direct) address. In the Parametric View, you can construct your tag with the help of passing parameters, which you can use in the tag address.

When you construct your tag, use $index$ as part of the tag. During the opening of the parametric view, $index$ will be replaced by the parameter specified by the open command.

Some examples:

Open command parameters are specified like this:

21.3.1

 

Let’s look at the parameter $6$; here we use an equation to pass the value of variable bitvariable as defined in the View Script. In parameter $7$ we pass the value read from the PLC at address H:10.

Now some examples of how symbolic tag translates to hard link during the view opening:

Symbolic tag defined at view

Hard link translated during opening of view

Note

Valve[$1$]

Valve[5]

 

DB$2$

DB100

 

motor[$1$].$3$

motor[5].open

 

motor[$1$].$4$

motor[5].close

 

$5$

H:0

 

DB100.$6$

DB100.1

bitvariable=1

DB100.$7$

DB100.2

Tag H:10 has value = 2

21.4.Replacing connections #

Replacing connections is extremely useful when you need to link your parametric view with multiple PLCs. Link your parametric view with specific PLC by passing the connection parameter at opening command.

21.4.1

 

As you can see, we are passing a connection to S7-1200 PLC by the first connection parameter $1$.

 

Using Connection Parameter in Tag Definition

You can use connection parameters in the tag definition by simply using $index$ instead of a connection alias:

 

tag@$1$

21.5.Nesting parametric views #

You can nest parametric views, e.g. you can open one parametric view from another. In this case, you can use parameters passed from the original view to the following parametric views. To do so, use the notion $index$ in the parameters dialog:

21.5.1

 

As you can see in the dialog, we are passing three parameters from the original view to the parametric view.

21.6.Usage example: #

Imagine you have to visualize a plant with 200 similar motors and, instead of designing 200 identical screens with different PLC links, you will only create one parametric (master) view. The operator then can select a specific motor by entering the desired parameters when opening the requested view.

21.6.1

 

Now let’s see what will happen when you use your parametric view in runtime:

 

21.6.2

 

You can see that the text has been replaced as well:

21.6.3

 

DOWNLOAD DEMO PROJECT HERE

22.View scripts #

myDESIGNER offers many tools for performing the most common data acquisition, display, animation, and effects—and all of this without coding. For maximum flexibility mySCADA also includes a complete scripting language based on JavaScript, which allows you to interact programmatically with most of mySCADA functions with a high-level scripting language.

Easy to learn

Scripting can be used for all sorts of tasks. The possibilities are endless, as it is designed to be easy to use, extending the functions of mySCADA. You do not need to be an experienced programmer to be able to use scripting. Using JavaScript as a scripting language means you do not have to worry about memory allocations, leaks, or complex programming issues. Using it is very simple and straightforward.

Features

mySCADA has many built-in features that can be extended with scripting. If you are starting out, you can use all of the built-in features to acquire data, create graphics, make dynamic animations, and conduct other tasks without writing any code. You can then pick one area that needs a little extra flexibility and write some simple script while still using all of other functions. As you get more experienced, you can take further advantage of powerful scripting.

22.1.Using Script in Views #

For each view, you can create your own script, which is evaluated each time an active screen is refreshed. The refresh logic works as follows:

 

22.1.1

 

First, if you want to add a user-defined script, open your view and click on the Script button in the main toolbar.

22.1.2

 

Then the script window will show up where you can insert your user-defined script:

22.1.3

 

The script editor is divided into 3 main windows:

  • Source Code: this is a window where you put the user-defined script
  • Variables: here you define your view variables
  • Useful Functions: in this window, you can find specific functions that help you control your components in the corresponding window

22.1.4

 

22.2.Declaring variables #

You can declare your variables in the Variables Window:

22.2.1

 

There are four types of variables to use:

  • Input variables: use these variables for reading data from the PLC; each time the script is evaluated it first reads the PLC tags and stores them in the input variables
  • Output variables: after the script evaluation, the output variable values are written into the PLC; you can set whether it will write the value each time the script is evaluated or only upon change – this is controlled via the Update field (Always, On Change)
  • Value Memory: here you can declare your persistent variables; when a view is loaded, memory variable has its default value; you can change this value in   the script and it will prevail until you switch to a different view or close  the application
  • String Memory: String Memory variables are the same as Value Memory variables, but are of string type

22.3.Script Writing #

You can write the script in the Source code window. You can use any function or expression from JavaScript – the editor automatically highlights your syntax and conducts an error check.

Functions

You can declare your own functions using JavaScript function syntax. As you can see, when you open View Script, there are some already created functions:

function init() {

}

This function is called upon opening the view. You can put initialization code here.

function destroy() {

}

This function is called when a user closes the view or navigates to a different view. Usually, you don’t have to fill this function in.

function periodic() {

}

This function is called every time the view is refreshed. The refresh period (e.g. the period this function is called) can be specified in view parameter – refresh

22.3.1

 

In periodic() function, you will probably write most (or all) of your code.

22.4.Using variables in animations and effects #

You can use declared view variables directly in animations and effects. To link the view variable with an animation, use the equation editor like with regular PLC tags.

Example:

1. Let’s show the value of the Value Memory Variable in a text element in your view.

2. Open the Script window.

22.4.1

 

3. In the Value Memory tab of the Variables window, create ‘InternalVariable’ with a default value of 10.0.

22.4.2

 

4. Switch back to the view you are editing.

5. Create a text element in your view, click on it, and create an animation with a memory variable by typing “=InternalVariable” or selecting memory variable with the equation editor.

22.4.3

 

Specific mySCADA functions

In the script, you can use any functions declared in JavaScript. To interfere with your graphics, you can use additional functions defined by mySCADA. A complete list of all available functions, including help, can be found in the Useful Functions List.

22.4.4

 

If you click on the category, you will see the list of all available functions:

22.4.5

 

Now select the function you are interested in, and you will see a description and help on the right side of the window.

  • TIP: You can drag the selected function and drop it into your source code.

 

As you can see from the function list, most of the functions deal with your graphical objects. To be able to address your graphical object, you need to know its ID. Every graphical object in your view has its unique ID that can be found in properties. Click on the graphical object and then look in Properties – ID:

22.4.6

 

You can control animations of your graphic object directly in the script with specific mySCADA functions. To set the value of the element directly in the script, use the following function:

myscadaSetText(‘text0001‘,internalMemory);

22.4.7

 

22.5.Debugging view scripts #

As you write your view scripts, there might come a moment when your scripts are not working for various reasons. In mySCADA, you have two easy options to troubleshoot and find where there might be a problem:

  • Using debug screen on your view
  • Using web browsers with an integrated debugger

22.6.Using debug screen on your view #

To use a debug screen in your view, simply open the view in the browser. If you have an error in your view script code, you will see it right away – the icon in the main menu will show.

22.6.1

 

Now press SHIFT + D. You will be presented with the views’ debug screen:

22.6.2

 

As you can see in the section “View scripts info,” all functions are listed in the view script along with the status. If you have errors in the code, you can see the error status along with the description of the error:

22.6.3

 

In addition, you can watch the live status of system variables in your view scripts in the section System variables:

22.6.4

 

22.7.Using web browsers integrated debugger #

Another option is to use a debugger, which ships with your favorite web browser. Nowadays every modern browser is equipped with the option to debug JavaScript. To use the browser’s debugger, do the following:

1. In your code, at the place where you want to start debugging, enter the command debugger;

 

22.7.1

 

2. Download your project to the device running mySCADA and navigate to your view

22.7.2

 

3. Now enter the debug mode in your browser (Chrome shown in the picture)

22.7.3

 

4. As you can see, your code has stopped where the keyword debugger was inserted. Now you can start debugging

22.8.Using JavaScript libraries - Includes #

You can easily use your JavaScript libraries in your project. You simply can create your own library or include any JavaScript JavaScript library found on the internet. All the JavaScript resources are included in two folders in your project:

  • js – all JavaScript sources
  • CSS – all CSS sources

You can directly add all your library files into those two folders. myDESIGNER will find then automatically, and you can use them anywhere in your project.

To work with the JavaScript libraries directly in myDESIGNER, open a view script and navigate to the “Includes” tab

22.8.1

 

Now, let’s look at the details of the Includes window:

22.8.2

 

On the left side of the window, you can see all subdirectories. On the right side, you can find all your source files. If you double click on the file, you can edit it easily.

Selecting JavaScript or CSS

First of all, you should choose if you want to work with JavaScript files or with CSS files. To select either of those:

 

22.8.3

 

New Directory Creation

To create a new directory, press the “New Dir” button.

Directory Deletion

To delete a directory, select it and press the “Del Dir” button.

New File Creation

To create a new file, press the “New File” button and give it a name.

Deleting File

To delete a file, select it and press the “Del File” button.

All JavaScript in the primary folder is automatically loaded in view. In addition, all CSS files in the primary folder are added to your view automatically.

22.9.Linking external JavaScript libraries – Remote includes #

You can easily link remote JavaScript libraries by navigating to Remote Includes.

22.9.1

 

All the files specified in this window will be automatically loaded to your view.

  • TIP: you can specify JavaScript as well as CSS files.

23.View scripts - list of functions #

23.1.Dealing with elements #

Returns an element object with given id.

myscada.getElementById('id');

Returns an SVG Document.

myscada.getSVG();

For elements such as Table, Chart, TextBox, ListBox, ComboBox etc. will return underlying object.

myscada.getObject('id');

23.2.ListBox, TextBox and ComboBox functions #

Select an Item/Index

For ComboBox and ListBox will select a given item. For TextBox will set value of TextBox to new value.

myscada.setSelectedItem('id','item');

 

For ComboBox and ListBox will set item to given index.

myscada.setSelectedIndex('id',3);

 

Get Selected Item/Index

Will return selected value or undefined if nothing is selected.

myscada.getSelectedItem('id');

 

Will return selected index eg. hierarchical number of selected element. If nothing is selected, -1 will be returned.

myscada.getSelectedIndex('id');

 

Set New Items

Will set new items to ListBox or ComboBox. Pass id of element and then array of items.

myscada.setItems('id',['item1','item2','item3']);

 

Will set value to TextBox.

myscada.setItems('id','item1');

 

23.3.Animations #

Set Canvas

(document) background colour

myscada.setBackgroundColor('green');

 

Visibility

You can pass either id as a string, or array of ids:

myscada.setVisibleOn('id'); //pass just id of one element as string

myscada.setVisibleOn(['id1', 'id2', 'id3']); //pass multiple ids at once as an array



myscada.setVisibleOff('id');

myscada.setVisibleOff(['id1', 'id2', 'id3']);

 

Opacity

You can control transparency of any element you wish. To do so, please use provided function. You can pass either id as a string, or array of ids, second parameter is opacity value in the range of 0.0 to 1.0:

myscada.setOpacity('id',0.3); //will make object 30 percent transparent.

myscada.setOpacity((['id1', 'id2', 'id3'],0.3);

 

Fill Color

You can pass either id as a string, or array of ids, second parameter is color value:

myscada.setFillColor('id', '#ff0000'); 

myscada.setFillColor(['id1', 'id2', 'id3'] , '#ff0000');

 

Stroke Color

You can pass either id as a string, or array of ids, second parameter is color value:

myscada.setStrokeColor('id', '#ff0000'); 

myscada.setStrokeColor(['id1', 'id2', 'id3'] , '#ff0000');

 

Height

You can pass either id as a string, or array of ids, second parameter is new height of object in pixels:

myscada.setHeight('id',30);

myscada.setHeight(['id1', 'id2', 'id3'],30);

 

Width

You can pass either id as a string, or array of ids, second parameter is new width of object in pixels:

myscada.setWidth('id',30);

myscada.setWidth(['id1', 'id2', 'id3'],30);

 

Scale

You can control the scale of the object. Following function will apply transformation matrix to the provided object. You can pass either id as a string, or array of ids, second parameter is the fixed point for scale, third parameter is scale along x axis, third is scale along the y axis of object in percent.

myscada.setScale(type, type,sx,sy);

 

PARAMETERS:

Id: you can pass either id as a string, or array of ids

type:     x          y

cc         center   center

lb          left       bottom

cb         center   bottom

rb         right     bottom

lt          left       top

ct         center   top

rt         right      top

lc         left        center

rc         right     center

 

sx: scale along the x axis in percent

sy: scale along the y axis in percent

 

myscada.setScale('id', 'cc',30,30); // will scale object to 30 percent of original size.

Will scale with center as a fixed point (eg. object will shrink and center of object after the shring will stay the same.

 

Rotating Elements

To change rotation angle, use following function. First parameter is id or array of ids, second is angle in degrees. The center of rotation is geometric center of given element.

myscada.setRotationAngle('id',90);

myscada.setRotationAngle(['id1', 'id2', 'id3'],90);

You can also specify the center of rotation, by providing third and fourth parameter. They specify the distance of new center of rotation from geometric center of object. Provided parameters (eg. deltaX and deltaY) are in pixels.

myscada.setRotationAngle('id',90,-30,0); //we are moving center of rotation by 30 pixels to the left

 

Moving Objects

You can move an object along the path. First parameter is id (or array of ids), second parameter is id of the path along which object should move and last parameter is the value by which object should move. Value is in absolute length in respect to path.

myscada.setAbsoluteMove('objectId', 'pathId',50);  //if total length of path object is 200 pixels, this will move object to the 1/4.

myscada.setAbsoluteMove(['objectId1', 'objectId2'], 'pathId',50); 

Also, you can move objects relatively to the path length. To do so, use function myscada.setRelativeMove. Now you pass the value as relative eg. in the range 0 to 100 as 100 percent.

myscada.setRelativeMove('objectId', 'pathId',50);  //this will move object to the half of the path (irrespectively of the real length of the path).

 

Circle Sector

You can create a circular or elliptical sector from circle or ellipse. To do so, use following function

myscada.circleSector(id, percent, anglefrom, angleto);

 

Text

For text elements, you can read current value of text element using function

var text=myscada.getText('id');

Also, you can set new text to an text element using a function

myscada.setText('id', 'text value');  //or

myscada.setText(['id1', 'id2', 'id3'], 'text value'); 

 

Tooltip

You can also set a tooltip for element or set of elements. To do so, please use following function

myscada.setTooltip('id', 'text value');  //or

myscada.setTooltip(['id1', 'id2', 'id3'], 'text value');

 

23.4.Effects #

You can start and stop any defined effect by calling following functions. You only need to provide the id of the element on which is the effect defined.

myscada.setEffectOn('id');

myscada.setEffectOff('id');

23.5.Error frames #

You can show and hide error frames using the following functions

myscada.setErrorFrameOn('id');

myscada.setErrorFrameOff('id');

23.6.Zoom #

Zoom to Area

Programmatically zoom to a given area. Area is defined by x, y and width and height parameters. All parameters are in pixels.

myscada.zoomToArea(x,y,width,height);

Get Zoom Level

To get a zoom level use function

var zoomlevel=myscada.getZoom();

Disable Scrolling

To disable or enable back scrolling use function

myscada.setScrollEnabled(false);

23.7.Open command #

You can perform any open command same way as you do in visual setup of open command. To use this function, please use a visual dialog located in the editor top bar.

myscada.openCommand(options);

Also, more details, can be found in chapter Open Command.

23.8.Users, language and login #

Login/Logout

If user is logged in, this function will automatically log user out. If user is not logged in, this function will present a login dialog to the user.

myscada.loginLogout();

Login As

You can log in specific user by calling following function myscada.loginAs(user, password, callback);

Example:

myscada.loginAs('petr', 'svoboda', function (ok) {

if (ok)

{//login successful}

});

Log User Out

To log user out, use function

myscada.logout();

You can also provide a callback function as parameter.

Get Current Language

To get current language, user is using, use following function

var lang=myscada.getLanguage();

Set Current Language

To set current language, please pass the language code into the following function:

myscada.setLanguage('en');

Log User Action

You can write a log into a User Actions log by using following function:

myscada.logUserAction(message,severity,callback)

First parameter is string with message, second is severity eg. importance of the message and last one is a callback informing you whether action was performed.

Example:

myscada.logUserAction('petr',0,function (err,data){

if (!err)

{

//action OK

}

});

23.9.Retrieving files #

You can get files from project data folder or from user data folder (saved in runtime). First passed argument is name of file, second is your callback function, this callback function is called when file is downloaded.

Will retrieve file from User files Folder (file saved in project)

myscada.getFileFromUserFiles('file.csv',function(data) {

//in data is your retrieved file

});

Will retrieve file from User data folder (file saved in runtime)

myscada.getFileFromUserData('file.csv',function(data) {

//in data is your retrieved file

})

Retrieving files from specific URL location

To retrieve file using a GET command from any location on the sever, please use following function:

myscada.getFileFromUrl(url, callback, error);

First parameter is the url for the data, second parameter is the callback function to be called on successful file retrieval, last parameter is a callback function to be called on error.

Sending data to specified location by URL

You can send data using POST message to given url by using following function

myscada.sendDataToUrl(url,data, callback, error);

First parameter is the url for the data, second parameter are the data to be send, third parameter is the callback function to be called on successful file retrieval, last parameter is a callback function to be called on error.

23.10.Communicating with server side scripts #

You can communicate with server side scripts easily using following function:

myscada.sendDataToServerSideScripts(data,callback);

First parameter is data you wish to send, and second is a callback function which is called after the server side script replies.

Example:

myscada.sendDataToServerSideScripts('some data',function(reply)

{

//in reply we have response from server side script (main.js)

alert(reply);

}

);

23.11.Tables #

mySCADA uses a slickgrid JavaScript library to render tables. You can use any functionality slickgrid library provides, but most of the functions are packed into simple to use mySCADA functions. For more information about slickgrid JavaScript library, please look here: https://github.com/6pac/SlickGrid/wiki

 

Showing CSV File in a Table

You can show a table inside Active Area, file will be read from User Files

var options={};

options.file='soubor.csv';

options.editable=true;                        //whether you want to make final table editable by user

options.areaId=1;                                //ID of active area where to render table

options.textSize=200;                         //text size in percent

options.selectedRowColorBackground='green';        //background color of selected row

options.rowSelect=false;                    //if true, table will be created with added first column to select rows by check box

options.singleSelection=true;             //allow to select single row by user

options.multipleSelection=false;       //allow to select multiple rows by user

myscada.showCsvFromUserFilesInTable(options);

 

You can show a table inside Active Area, file will be read from from User Data folder (files saved in runtime)

 

var options={};

options.file='soubor.csv';

options.editable=true;            //whether you want to make final table editable by user

options.areaId=1;                    //ID of active area where to render table

options.textSize=200;             //text size in percent

options.selectedRowColorBackground='green';        //background color of selected row

options.rowSelect=false;                                       //if true, table will be created with added first column to select rows by check box

options.singleSelection=true;             //allow to select single row by user

options.multipleSelection=false;       //allow to select multiple rows by user

myscadaShowCsvInTable(options);

 

Showing Generic Tables

You can easily show tables filled with data you provide in any active area you choose.

 

1. First of all, create an options object with required parameters

var options={};

options.file='soubor.csv';

options.editable=true; //whether you want to make final table editable by user

options.areaId=1;  //ID of active area where to render table

options.textSize=200; //text size in percent

options.selectedRowColorBackground='green'; //background color of selected row

options.rowSelect=false; //if true, table will be created with added first column to select rows by check box

options.singleSelection=true; //allow to select single row by user

options.multipleSelection=false; //allow to select multiple rows by user

 

2. Now create column definitions

options.columns = [

    {id: "title", name: "Title", field: "title"},

    {id: "duration", name: "Duration", field: "duration"}

  ];

 

Each column can have following parameters

Id

Unique ID or the column

name

Name of column. Shown in column header

field

To retrieve a column back, use the filed parameter

width

Width of column in pixels

require

true/false if the column must have a value

default

Default value

editor

How the value will be edited by user. See next part for explanation.

editorOptions

Additional options for conditional editor

 

3. You can also provide a custom cell editor for any column you choose. To do so, add option “editor” to the column definition:

Example: {id: "name", name: “name”,field: "name", width: 200, editor: Slick.Editors.Text}

 

Following types are supported:

Slick.Editors.TextEditor                                   Basic text editor

(default option if you don’t choose any other)

Slick.Editors.IntegerEditor                               For editing whole numbers

Slick.Editors.DateEditor                                   For editing dates

Slick.Editors.YesNoSelectEditor                        Boolean editor

Slick.Editors.CheckboxEditor                           Check box editor

Slick.Editors.PercentCompleteEditor                 Percentage editor

Slick.Editors.LongTextEditor                            Long text editor

 

Aside of basic editors, there is a complex editor which allows you to pass multiple options and limit what exactly can user enter.

Slick.Editors.ConditionalCellEditor

for this editor, you can provide additional parameters using editorOptions parameter

 

example: {id: "age", default: 20, name: "Age", field: "age", editor:Slick.Editors.ConditionalCellEditor, editorOptions:{min:0 , max:120, msg:"Must be a valid number 0 - 120", type:'number', decimalPlaces:0}}

 

editorOptions can have following parameters:

Type

number/string Specify if edited value is a number or string

decimalPlaces

Maximum number of decimal places to enter (enter 0 for integer type)

min

Minimum limit value can have

max

Maximum limit value can have

minLength

Minimum number of characters value can have

maxLength

Maximum number of characters value can have

required

true/false If true value cannot be empty

pattern

Provide a regular expression against which will be user input tested

 

4. And finally pass some data. Passed data is array of objects

options.data = [];

    for (var i = 0; i < 500; i++) { //creating 500 rows

      data[i] = {

        title: "Task " + i,

        duration: "5 days"

      };

    }




//the table will be created and rendered inside Active Area with given id




myscada.createTable(options);

23.12.Alarms and aggregated alarms #

Aggregated Alarm Table

Aggregated alarm table is useful tool to find out basic statistics about historical alarms. Provided function will automatically compute occurrences and total times for each alarm active in given time period. Result will look as following:

 

23.12.1

 

You can render alarm into any Active Area.

var options={};

options.areaId=1;                    //number of Active Area to render a table

options.limit=10;                    //how many alarms should be visible in a table (counted by highest occurrence)

options.column0_name=”Message”; //name of first column

options.column1_name=”Count”;      //name of second column

options.column2_name=”Time”        //name of third column

options.column0_width=200;             //column width

options.column1_width=200;

options.column2_width=200;

options.textSize=150;                         //text size in percent

myscadaCreateOccurencesAlarmTable(options);

 

Aggregated Alarm Chart

Same way as you generate aggregated alarm table, you can create aggregated alarms chart.

 

23.12.2

 

var options={};

options.areaId=1;                    //number of Active Area to render a chart into

options.limit=10;                    //how many alarms should be visible in a chart (counted by highest occurrence)

options.labelTime=”Time [min]”;      //caption for time axis

options.labelCount=”Count”;              //caption for occurrence axis

options.colorTime= 'rgba(0,0,255,1)';            //color of time values

options.colorCount= 'rgba(200,50,50,1)';       //color of count values

options.fontSize=16;                                       //font size in px

myscada.createOccurencesAlarmChart(options);

 

Reading Online Alarms

You can retrieve currently active alarms using function

myscada.readAlarmsOnline(options,callback);

With the first parameter object you can specify a filter to use on online alarms, second is a callback function to get the data. To use this function, please use a visual dialog located in the editor top bar.

 

Example:

//read online alarm data

var options={};

options['severity']=100;

myscada.readAlarmsOnline(options, function(err,result)

{

  //process each row of returned data

  for (i=0;i<result.length;i++)

  {

    var msg=result[i].cell.msg; //Message

    var status=result[i].cell.stat; //Alarms status

    var severity=result[i].cell.sv; //Severity

    var area=result[i].cell.area; //Area field

  }

});

 

Reading Alarm History

You can retrieve alarm history using following function:

myscada.readAlarmsHistory(options,callback);

First parameter is config object and second is the callback function which is called after data are available. To use this function, please use a visual dialog located in the editor top bar.

 

Example:

//read historical alarm data

var options={};

options['timeFrom']=new Date()/1000-60*60;

options['timeTo']=new Date()/1000;

options['limit']=1000;

options['limitOccurence']=100;

myscada.readAlarmsHistory(options, function(err,result)

{

  //process each row of returned data

  for (i=0;i<result.length;i++)

  {

    var msg=result[i].cell.msg; //Message

    var status=result[i].cell.stat; //Alarms status

    var severity=result[i].cell.sv; //Severity

    var device=result[i].cell.dev; //Device field

    var area=result[i].cell.area; //Area field

    var acttime=result[i].cell.acttime; //Activation time

    var deacttime=result[i].cell.deacttime; //Deactivation time

    var acktime=result[i].cell.acktime; //Acknowledge time

    var acktxt=result[i].cell.ak; //Acknowledge Value

    var value=result[i].cell.ackv; //Acknowledge Value

    var actval=result[i].cell.av; //Activation value

    var deactval=result[i].cell.dv; //Deactivation value

    var user=result[i].cell.user;

  }

});

 

Confirming Alarms

You can confirm alarms using following function:

myscada.alarmConfirm(message, options, callback);

First parameter is message into the alarm log, second is the options object allowing you to specify filter of what type of alarms should be confirmed and last one is a callback function which is called after the function is processed.

Filtering alarms can be done by following parameters: alarmIDs, severityMin, severityMax, area, message, device.

 

  • Note: Only alarms active at the time when this function is called will be confirmed.

 

Example:

var options={};

options.alarmIDs=[1,2,3,5,6]; //confirm alarms with following IDs only

options.severityMin=5; //confirm only alarms with severity 5 and more

options.severityMax=10; //confirm only alarms with severity 10 and less

options.area= 'area1'; //confirm only alarms from area1

options.message = 'message1'; //confirm only alarms with message1

options.device = 'device1'; // confirm only alarms with device equal to device1

myscada.alarmConfirm('alarm confirm from a script', options, function (err)

{

//alarms confirmed

}

);

 

23.13.Data - Log data #

You can retrieve data from data-logs using following function:

myscada.readDatalogData(options,callback);

To use this function, please use a visual dialog located in the editor top bar.

 

Example:

//read historical data from data-log

options={};

options['dlgid']=1;

options['tags']=[1];

options['timeFrom']=new Date()/1000-60*60;

options['timeTo']=new Date()/1000;

options['limit']=1000;

myscada.readDatalogData(options, function(err,result){

//process each row of returned data

  for (i=0;i<result.length;i++)

  {

    var date=result[i].datetime;

    var value0=result[i][1]; //first (first@script)

  }

});

23.14.Custom charts #

You can create powerful charts and display them in an active area. mySCADA uses the chart.js library to render your charts. You can find details about the library here: http://www.chartjs.org/

The details about how to use the library is beyond this manual. For detailed options, please consult chart.js official documentation found here: http://www.chartjs.org/docs/latest/

Create object to pass into myscada function. This object must have 2 parameters data and areaId. For how to construct data parameter, please consult online manual for chart.js library. When createChart function is called, myscada will automatically create canvas in the place of active area. Into this canvas is the chart rendered. So you pass only second parameter eg. data to the chart.

In Code:

var options={}

options.data = … data for the chart

options.areaId=1 // id of active area

myscada.createChart(options);

Example: create a bar chart with 2 column data

1. First of all, we will create datasets for the chart. For details, please consult online manual

var data={

              datasets: [{

                label: ‘Data1’,

                data: [12600, 19402, 18820, 17413, 18820, 15430, 15660],

                backgroundColor: 'rgba(0,0,255,0.4)'

              }, {

                label: 'Data2',

                data: [11001, 18830, 19230, 17990, 19200, 18320, 14430],

                backgroundColor: 'rgba(0,255,0,0.4)'

              }]

            };

2. Now we will assign labels to our data

data.labels= ["M", "T", "W", "T", "F", "S", "S"];

3. Now we will assign data to the options object

var options={};

      options.data={

            type: 'bar',

            data: data,

            options: {

                    responsive: true,

                    maintainAspectRatio: false,

                     scales: {

                         yAxes: [{

                             ticks: {

                                 beginAtZero:true

                             }

                         }]

                     }

                 }

          };

4. We need to specify to which active area render the chart.

options.areaId=1;

We can also specify additional parameters such as background Color:

options.backgroundColor = 'rgba(128,128,128,0.2)';

5. And finally, we will render the chart

myscada.createChart(options);

23.15.Tag info #

Sometimes you need to know the info about the tag such as the status or value of the tag. Tag must be used in a view if you want to retrieve info about it.

Getting the status about the tag

var status=myscada.getTagStatus(tag);

Example:

var status=myscada.getTagStatus('H:0@M');

Getting the value of the tag

var value=myscada.getTagValue(tag);

Example:

var value=myscada.getTagValue('H:0@M');

Getting the value and status at once of the tag

var obj=myscada.getTagInfo(tag);

Example:

var value=myscada.getTagInfo('H:0@M');

23.16.Other useful functions #

Custom Alert Dialog

myscada.alert(‘This is alert!’);

You can pass an object into the function, you can control more parameters such as the title text, or pass a function to be called after dialog dismiss.

myscada.alert(‘{type: 'type-default', title: 'Title text', text: 'Message', onHide: function(){

            //code after dialog dismiss

}});

type is of ‘type-default’, ‘type-info’, ‘type-primary’, ‘type-success’, ‘type-warning’, and ‘type-danger’

Interactive examples of different dialog options are nicely illustrated here.

 

Forced Screen Refresh

To perform a forced screen refresh, call

myscada.repaint();

 

Replace Hash in text for value

This function will replace all hashes in a text for specified value. Please provide a valid text element and value for replacement.

myscada.replaceValueForHash('id', 'value');        //or

myscada.replaceValueForHash(['id1', 'id2', 'id3'], 'value');

 

Computing MD5

Get MD5 hash from string

var md5=myscada.getMD5("data");

 

24.Documents #

With this powerful function, you can link documents with your project. For example, you can link user manuals with components on the HMI screen, or you can attach a schema or picture to your project. As a result, you will have a complete project consisting of HMI screens and linked documentation files in one package.

Watch video describing this functionality: https://www.youtube.com/watch?v=4Q4HKTUFeE4

24.0.1

 

You can attach any documents directly to your project by using the function Import Document.

Note that all attached documents must be in a PDF format!

Click on the Import document icon in the main menu or right-click on the Documents  in the Project Window menu and then select Import.

24.0.2

 

Once your documents are imported into your project, you can link them with any object on HMI screens. This can be done with the Open command function.

Showing the Document using Open Command

To show your document using open command:

  1. Please select the graphical object you would like to use to open a document.
  2. Go to Properties –> Commands -> Open Command and click on the “…” button. You will be presented with the Open Command Window
  3. Now Select Open: Document and select your document

24.0.3

 

You can find more info about open command in the chapter Open Command.

25.Reports #

mySCADA provides a simple to use, convenient way for report creation and generation. With integrated reporting, you can create rich reports including tables, charts, and visual widgets.

25.1.Creating report templates #

To create and integrate a report as part of your project is quite easy.

b. First of all, navigate to section Reports in your project:

25.1.1

 

2. Click on the Report section and select “Create new” on main Toolbar. You will be presented with new report dialog.

25.1.2

 

3. Enter the name of the new report and press OK.

4. New empty report template is created and report designer is automatically open.

25.1.3

 

Now, you can design your report. Once the report is designed, press save to save it.

25.2.Designing report #

In this section, we will show, how to design a simple tabular report showing historical data-log and alarm data in a simple report. For complete set of functions and more complex examples on designing reports, please consult the Reporting Manual found here.

 

Creating Header Section

We will start by adding a company name and logo to the header section.

a. Click on the Insert section in the ribbon and then click on Page Header. Then click into your report to insert it.

25.2.1

 

25.3.Inserting text #

b.  Now we will insert text into the header. Click on the Text icon and then click into the header in your report.

25.3.1

 

c.  Enter text into a dialog and press OK button.

25.3.2

 

You can position text and change its properties like size, color etc. in the Properties section.

25.4.Adding picture – logo #

d.  Now we will enter image into the header section. Click on the image icon in the report and then click on the page header section in your report. You will be presented with image select dialog:

25.4.1

 

e.  In the image insert dialog, click on the folder icon and select your image. Once you select the image, you can preview it in the image select dialog and after you click on OK button it will be inserted into your report.

25.4.2

 

f.  Now your header section is done and we can continue to enter the historical data table into the report. Every table has 3 sections: Header, data and footer. First we will enter header into the report. To do so click on the Header button and then click on the report. Also add texts into the header section as shown in the image.

25.4.3

 

25.5.Table data #

g.  Once we have header, we will insert data section. To do so, click on the Data button. In the provided dialog, select the default data-log as data source.

25.5.1

 

Once you click on OK button, data section is inserted into your report.

25.5.2

 

h.  Once you enter the data section, you should fill it values to be shown inside. You just fill in one row template. Once the report is generated, there will be multiple rows created from this one row template. To do so, click on the Text button and then click inside the databand. Dialog to select value will open:

25.5.3

 

i.  In the dialog, select the column from data-log you want to show. We will select and insert a datetime showing a date and time of the record. Once entered, you should format the text to show the time value. To do so, select Text Format in Properties.

25.5.4

 

In the popup dialog, please select time as shown in the picture:

25.5.5

 

j.  You can also add border around the table cell. To do so, click on the border button at the ribbon.

25.5.6

 

k.  Now add additional columns same way as you have added the date time column. You can leave the text format to general or change it to number and format as required.

25.5.7

 

25.6.Table summary #

l.  Now we will add an footer to the table showing computed average values. To do so, click on the Footer button and then click into the report. The Footer Band will be added.

25.6.1

 

Now we will add two texts showing the average values. Click on the Text button, and then click inside the Footer Band. In the Text dialog, select Summary.

25.6.2

 

You need to fill in Summary function, Data Band and Data Column values. Then click on OK button.

25.6.3

 

Now, the footer section of the table is finished.

m.  Same way as creating table filled with historical data from data-logs, you can show list of historical alarms. To do so, follow the same steps as you have done when creating table from data-logs, but as a data source select alarms.

Our finished report looks like this:

25.6.4

 

25.7.Previewing report during design #

You can preview your report during design phase simply by clicking on Preview in the ribbon. Report will be rendered with demo data so you can see how your report will look like.

25.7.1

 

25.8.Showing report in runtime #

Once you create and save your report template, it is available during runtime.

1. To show a report in runtime, simply go to the Reports section in main menu.

25.8.1

 

2. Now you will see all available reports on the left side. Click on the report you would like to render. You will be presented with time selection dialog:

25.8.2

 

3. Select desired start and end date and click OK. Your report will render

4. Now you can print your report or save it for later use.

25.9.Creating custom report in runtime #

User can also create custom reports on the fly. To create a custom report, user should navigate to section User Reports.

25.9.1

 

In this section, user has the ability to create, modify, rename and delete user reports. All the existing reports are located on the left side of the view. Each report has rename and delete icon right next to its icon.

25.9.2

 

Deleting report

To delete existing report, click on the red cross icon next to the report.

Renaming report

To delete existing report, click on the pen icon next to the report.

Creating new report

To create a new report, select a New.mrt report from the left and then click on Design button.

25.9.3

 

Report designer will open. Now end user can create custom reports exactly same way as done in myDESIGNER.

25.10.Creating report on demand #

You can also create reports using server side scripts. This way, you can make periodic reports, or reports triggered by some event, options are limitless. To get started:

1. Create Report Template as described in previous chapter

2. Edit server side script – if you don’t use your own module, simply edit main.js

3. Once you open the script, click on the Report icon

25.10.1

 

4. You will get the Report generation dialog. Select a report you want to generate, fill in the required values and press OK button.

25.10.2

 

Create report dialog has several sections:

Limit by time: first you can limit the report generation by time. Time is specified in UTC format in seconds since 1.1.1970. You can enter a value or provide a variable where the value is stored.

Filter: if the data-log contains a keyed value, you can limit results shown in your project by specifying a filter value. Again this can be a hard value or variable.

Limits: please provide limits for the number of records loaded. Each data-log or alarm values used in reports are provided in the Limits table. Please fill in the limit of rows to load. You can also specify if the limit is taken from the beginning eg. “from start” or from end.

Save as: provide a file name under which report will be saved to. You have an option to save a report in PDF format, in HTML format or pass it as JSON data object. Report is saved into user data folder accessible over FTP or HTTP and HTTPS.

Language: If your project is Multilanguage, please specify in what language report should be generated.

5. myDESIGNER will generate code template for you. When you run the code, the system will generate a report for you and save it into the user directory.

 

25.10.3

 

26.CAS alarms #

A very important feature of mySCADA is the ability to signal any dangerous or other important events with Alarms. They are an important part of most control applications as they alert operators if something goes wrong.

Alarms can signal that a device or process has ceased operating within acceptable, predefined limits, or it can indicate breakdown, wear, or a process malfunction. Often it is important to keep a record of the alarms to know if they have been acknowledged.

There are two ways how to define alarms:

  1. Alarms can be automatically created out of the tags database, simply when you are creating a tag with limits you just check “ALARM” and alarm will be created in analog alarms (This won’t work with digital alarms only with analog).
  2. The second way is by going into CAS alarms tabs and defining alarm manually.

To define alarms for your project, double-click on the CAS Alarms in the Project window.

 

 

26.0.1

 

For your convenience, the alarm definitions are split into two tables: one for Analog and second for Digital alarms:

 

26.0.2

 

26.1.Digital alarms #

Digital alarms are tied to digital values read from the PLC. A digital alarm is either ON (1) or OFF (0). Instead of the thresholds, digital tags have alarm states 0 and 1.

26.2.Analog alarms #

Analog alarms are tied to analog values read from the PLC. Along with common parameters, which are the same for both digital and analog alarms, you specify the minimum and maximum values for your tag or equation. You can also specify the Dead-band region for any value to eliminate false alarms. The number of alarms tied to one tag is not limited. In addition, you can define complex conditions, including multiple tags or mathematical conditions for a single alarm.

 

26.2.1

Description of Alarm table fields:

Unique ID

Automatically generated ID; needed if accessing alarms from the Server-side Script

Tag@Conn / *alias

Tag (Address) or Equation specifying data read from PLCs

Severity

Unsigned integer value specifying importance of given alarm; the lower the number, the higher the priority

Area

You can divide alarms by the geographical or virtual area they belong to; area is a string value that you can use to filter the alarms

Message

Message of your alarm

Device

Name or description of a device the alarm belongs to; one device can have multiple alarms defined

Inv (Inverse)

Inverts an alarm (if a digital alarm is inverted it will be active at 0; for analog alarm activation, area is reversed)

Hide

Enables hiding the alarm from the user; this is useful when you are using alarms as a condition in the triggered data-log; hidden alarms are not shown in the Alarm window and are not logged in the database.

Delay

Specifies the delay in milliseconds of how long the condition must be active to activate the alarm; this is the time hysteresis function

Refresh

Specifies how often your alarm will be refreshed; you can use default, fast, or slow. You can change the refresh values for each group in the Properties window.

 

Format

Defines how the value will be shown in the alarm table; use the ‘##.#’ format for specification

e-mail

Sends an email upon each alarm activation or deactivation

SMS Act

Sends a message upon each alarm activation

SMS Deact

Sends a message upon each alarm deactivation

G0 – G9

Checks appropriate user group to receive alarms by email or SMS

 

Unique ID

Each alarm has a Unique ID, which is created when you define a new alarm; its value is fixed once the project is put into the runtime mode for the first time. This value is unique for all alarms, meaning that each alarm has its own Unique ID that is saved in the alarms’ definition file. Once this ID has been created, it will remain until the alarm is removed from the definition table.

Tag@Conn / *alias

Each alarm must be connected to a tag or equation. The Tag is the value read from PLC (or your computed value from the script); with Equation, you can tie your alarm to multiple tags or evaluate complex formulas.

Specifying a tag:

26.2.2

 

Specifying a complex formula:

26.2.3

 

You can create multiple alarms tied to one tag, as long as the alarm descriptions are different so that alarms operate correctly.

Severity

Alarms can range in severity from 0 (most severe) up to an unsigned integer value (least severe), to indicate different levels of importance.

For example, an alarm with severity 10 might warn that a tank is half full of liquid, while another alarm with severity 5 indicates that the tank is about to overflow. Both alarms monitor the same tag but have different severity levels.

When you set up the alarm severity, specify what the severity levels mean and what actions they will trigger. Severity determines the order in which alarms are displayed in the alarm list.

Alarm areas

The alarms can be grouped in different areas so that they can be displayed in the alarm window based on the area to which they belong. This may be helpful and enable you to divide the alarms according to the different plant zones they come from.

Message

Alarm messages report information about alarms.

Device

You can define multiple alarms for a single device. In the live alarm view or during a browsing of alarm history, you can filter your data based on device value.

Minimum and Maximum values

Minimum and maximum values are available for analog alarms only. By default, you specify the region when the alarm will be active. So if you would like to activate an alarm when the level in a tank is equal to 90 and stop the alarm at level 100, your minimum value will be 90 and the maximum value will be 100.

Inv (Inverse)

This parameter lets you invert your alarm definition. For a digital alarm, the alarm is activated when the value is equal to 0 and deactivated when equal to 1. For analog alarms, when ‘inverse’ is active, you specify the minimum and maximum values of the region when the alarm is NOT active.

Recipients (G0 up to G9)

Through these properties, you can select the recipient user group to which the message, SMS, E-mail, etc. is to be sent. The user profile, which is defined through the ‘Users’ settings, must contain a telephone number or E-Mail for sending messages.

Dead-band

With some measured values, such as line pressure, tag values can fluctuate rapidly above and below a critical threshold. Where such conditions exist, you can create a dead band as a buffer to prevent the fluctuations from triggering unnecessary alarms.

 

26.2.4

 

Specifying frequency of alarm checks

The system does not check for alarms more frequently than the Refresh update rate specified in the alarm definition.

Match the maximum update rate to the rate at which you expect tag values to change. For example, if you are monitoring temperatures that fluctuate slowly, check alarms less frequently than when you have a manufacturing process that changes temperature rapidly.

You can specify one of three possible refresh rates: default, slow, or fast. Each refresh rate group can be changed in the Properties window.

26.2.5

 

26.3.Alarm window #

The alarm window allows the operator to perform complete management of the technology alarms. This window allows you to visualize the alarms present in the technology or in a restricted area of the technology.

The alarm window can display all the technological alarms or a set of alarms arranged by the user-defined areas. If necessary, the user can click on the filter button and fill in the area name.

 

26.3.1

 

Alarm acknowledgement

The operator can acknowledge the alarms displayed in the alarms summary. This does not correct the alarm triggering condition but indicates that the operator is aware of it.

Alarm suppression

You can suppress alarm monitoring for one or multiple alarms. This is useful for testing, repairing, or maintaining a piece of equipment. Click on the Suppress button to suppress alarm monitoring. To view the list of the tags not being monitored, use the Suppressed list. You can also turn monitoring back on from this list.

Sorting and filtering in run-time

By default, alarm information in the alarm summary is sorted first by date and time, then by severity, and finally by area name.

This means that alarms are presented in a chronological order: if two or more alarms have the same time and date, they are presented in order of severity; if any alarms have the same time and date and the same severity, they are presented by the area name.

26.4.Alarm History #

The mySCADA engine automatically (if not disabled) logs your alarms into history. Every alarm action is logged with all relevant data such as current time (precise to 1 millisecond). You can browse through the alarm history in the Alarm History window. Along with direct data browsing, you can filter your data based on the criteria.

You can also export the alarm history into an XLS file.

26.4.1

 

26.4.1.CAS alarms occurrence - Chart/Table #

CAS Alarms Occurence chart

Provides you opportunity do display alarms count in graph to get easier preview and comparison of alarms as example which alarm was active most and so on.

 

 

  • Can be displayed into Active area using
    • Command Open on object
    • View Scripts
  • Label Time and Count
    • For both you can choose color and you can describe these two features using text input fields
  • You can either show Message, Area, Device,…
  • You can select up filter if you want to display chart from exact time, to time

 

 

CAS Alarms Occurence table

Is pretty same as Chart, but displayed by a different way instead of graph your alarms active counter etc… is displayed inside table.

 

 

  • Can be displayed into Active area using
    • Command Open on object
    • View Scripts
  • Label Time and Count
    • For both you can choose color and you can describe these two features using text input fields
  • You can either show Message, Area, Device,…
  • You can select up filter if you want to display chart from exact time, to time

 

 

26.5.CAS alarms in view - example #

The following example will show you how to embed the CAS Alarms window in the view.

 

1. Fill in the CAS Alarms

26.5.1

 

2. Create your view and place inside Active Area

26.5.2

 

3. In Active Areas’ init state, set it to CAS Alarms -> History

26.5.3

 

4. Specify which columns should be visible in the CAS Alarms table by clicking on the Parameters button. We only want to show the alarm message, activation time, and activation value.

26.5.4

 

5. Save your project and test.

26.5.5

 

DOWNLOAD DEMO PROJECT HERE

26.6.CAS alarms preview of appearance #

If you go into CAS alarms at the bottom of the CAS alarms you can basically see 4 tabs:

  • Online items – Will let you select what information you want to be displayed in CAS online alarms log.

 

 

  • History items – Will let you select what information you want to be displayed in CAS history alarms log.

 

 

  • Online – If you click on “online” the new window will pop-up which is preview of online alarms where you can adjust columns to fit your text, how you adjust columns will transfer into runtime once you press apply.

 

 

  • History – History is pretty same as online, but it’s for history alarms, so if you adjust columns there it will also transfer to runtime once you press apply.

 

27.Data Logging #

You can log and access a complete alarm history, all user actions, and any technological data you wish to log. The historical data are grouped into logical sections called Data-logs.

Data log has many options you can set up to fine tune your logging options. You can easily optimize your data logs for speed and storage.

Data logs can be periodic or event driven.

Using pre and post event buffers, you can save a collection of data before a specified event has happened.

 

27.0.1

 

27.1.Data - logs #

You can log any data or information available in mySCADA. For user convenience and easy access, data are grouped in the data-logs. You can think of a data log as a collection of similar data. It might be, for example, a set of temperatures read each second from the PLC, motor start-up voltage and current logged every 100 milliseconds, the running hours of machinery, operator actions, or computed production statistics. You can also log any user-defined variables from Server-side Scripts via a virtual PLC.

 

27.1.1

 

Data-logs: data sets grouped together. Each data log has a set of parameters, such as log period, pre and post event buffers, and so on. Data logs are defined by the data you wish to read and log. Data is the collection of data points. Data points can be variables read from the PLCs, user-defined variables, and computed statistics from Server-side Scripts.

Data point: can be either a numerical value, string, or date. Numerical values can be of any numerical type such as Boolean, Integer, Float, Double, Signed, or Unsigned. Numerical values are always automatically converted and logged as double values. This way you do not have to worry about the data type and its conversions.

There are two types of Data-logs:

  • Continuous Data-logs log periodically without interruption; this type of data log is useful mainly for persistent processes.
  • Triggered Data-logs is dependent on some event/condition. The condition is specified by the alarm ID (or multiple alarm IDs). This type of data-log is useful for repetitive or random processes where you can specify the triggering condition.

 

To create a data-log:

1. Go to the Data-Logs section in the Project Window, right-click on the Data logs, and select Add New. You can also use the button “New Data-log” in the main toolbar.

27.1.2

 

2. A new dialog window will show up; fill in the data log name and click on OK.

27.1.3

 

3. Double-click on your newly created data-log in the Data-Logs A new definition window will show up. It is split into two horizontal sections: data log definition and data log views.

27.1.4

 

27.2.Defining connection #

Each data-log can log data from only one connection. To specify a connection, please select it from the combo box:

 

27.2.1

 

27.3.Defining data points #

Each data-log should have at least one data point. You can comfortably define data points in the provided table:

27.3.1

 

Each data point can have the following properties:

Parametr

Description

Id

Unique ID. Each data point has an auto-generated unique ID. This ID is used as a reference to find your record in the database.

Name

Name of the data point – will be shown in Data-log view table as column name.

Description

Short description – will be shown as Tooltip when hovering over column name.

Tag

Specify a valid tag (address). All specified tagsmust be from the same connection.

Unit

Engineering unit.

Format

This parameter is used to format numerical value based on a given pattern. More info on formatting is in chapter Formatting Numerical values.

Hysteresis

Check this option if you want to log data only if the value of the data point changes. If you check this option, you must also set up the following parameter “Delta abs”

Delta Abs

Used when hysteresis is selected. Specify the rate of change in absolute value to log it.

Type

Type of data. Options are:

Value – any number such as integer, float, or Boolean

String – String value

Date – value representing a date

Parameter

This option is for specific settings based on selected type.

Alignment

Align the data shown in Data-log view table to the left, right, or to the center

Key

If you check this option, mySCADA will automatically create a search index for this data item. You can then search based on this key in Data-log view tables.

Data Point Types

A data point can be a value (numeric), string, or date value. For each data point type, you can specify additional options.

For Value data point type, you can specify if you wish to present the value as a decimal, hexadecimal, or binary. To do so, click and select the corresponding option in the Parameter cell.

27.3.2

 

For String type value, you can specify how the string is represented in PLC. For a detailed description, please see the section Animations – Get Animation (link Animations). The usage is exactly the same.

27.3.3

 

For date type, you can specify if you wish to show only the date, only the time, or both:

27.3.4

 

  • Information: mySCADA expects a date to be saved in PLC as an integer value. The date should be in UNIX UTC format.

27.4.Continuous data logging #

The purpose of the continuous data log is to log data periodically without interruption. This type of data log is useful mainly for persistent processes.

Log Period

With continuous data logging, you define the log rate in milliseconds. In this period, all data defined in a data log are read from PLCs and logged into the internal database.

27.4.1

 

Hysteresis

For any data point, you can define hysteresis. When hysteresis is enabled, mySCADA will read values each Read cycle, defined by the Read Refresh parameter; however, it will log data only if  the value has changed by more than the specified Delta Abs value.

27.4.2

 

When hysteresis is enabled for at least one data point, you should specify read refresh and log refresh.

Read refresh: how often data will be read from the PLC

Log refresh: how often data will be logged when there is no change in value (e.g. no log triggered by value change > delta abs).

Hysteresis function can be especially useful for logging analog data that does not change very often. When you set hysteresis of some data points in the data log, you can specify the log rate – the period in which all data points of the data log will be logged, regardless whether they have changed or not.

By enabling hysteresis, you can dramatically decrease the amount of historical data logged while maintaining data precision and time continuity.

27.5.Triggered data logs #

The purpose of the triggered (event driven) data log is to log data depending on some event/condition. This is useful for repetitive or random processes where you can specify the triggering condition. You can, for example, log production data only at the time when the production line is running or log data upon system failure and use the logged data for diagnostics. With an event driven data log, you specify the start of the event by a condition. If the trigger condition is met, the system starts recording the data.

To enable a triggered data log, check the “Triggered logging” checkbox:

27.5.1

 

Now you have two options:

  • Continuous logging during event
  • Log single value

 

Continuous Logging During Event

If you select continuous logging during the event, mySCADA will log data as long as the trigger conditions are valid.

Log Single Value

Log single value option will log just one record at the time when the trigger condition occurs.

Triggering Conditions

mySCADA uses CAS Alarms as a triggering condition. You can select multiple CAS Alarms to use as triggers. Triggering conditions are specified by the Alarm ID field.

27.5.2

 

Click on the “” button to specify which alarms should be used as triggers.

27.5.3

 

Pre-trigger buffering

You specify the number of time samples to log before the trigger condition is met. The system automatically keeps the number of defined time samples in the memory. If the event occurs, the system will flush all the buffered data from the database and continue logging.

Post-trigger buffering

The system will continue to log your data even after the trigger condition has stopped. You should specify the number of the time samples to be logged after the trigger condition has finished. The time sample duration is equal to the read period.

27.6.Triggered logging example #

The following example will show you how to set up triggered logging. Our objective is to log a set of values when a triggering condition occurs.

  1. Create a CAS Alarm that will be used as our trigger.
  2. Open default data-log and select Triggered logging.
  3. Select our created CAS Alarm as our trigger condition
  4. Fill in the data points (e.g. values you want to log)
  5. Test your project

27.7.Simple periodic export to CSV and Microsoft Power BI #

There is a simple way to export data-log historical data into .csv files periodically. You define the export period (or times), and mySCADA will periodically refresh the file with fresh data. The exported file can be easily opened in MS Excel, processed by another program, or even imported into Microsoft Power BI.

 

To set up the periodic Export, open your data-log definition file and check the Export to CSV, PowerBI check box.

27.7.1

 

You will be presented with an export settings dialog:

27.7.2

 

In this dialog, you can set up all required parameters.

First of all, you should select a file name for this export. By default, the file will be saved in the user file folder.

Then you should set the refresh period or times for when to run the export. This is done by pressing the “…” button right next to the Refresh Time text box.

27.7.3

 

In addition, you can directly write the expression in the Refresh time text box. The expression is based on CRON syntax. The following figure explains how to create expressions. More info can be found here: https://en.wikipedia.org/wiki/Cron

27.7.4

 

Set up the maximum number of records to limit the size of the export file.

27.8.Data-logs properties #

You can specify several parameters in data-logs properties, including among others, size distribution, maximum log time, and position of data-log views in the menu. To do so, please select a data-log folder in the Project tree and click on the data-log properties icon.

27.8.1

 

You will be presented with the settings dialog:

27.8.2

 

Setting the Size Distribution of Data-logs

The most important part of the dialog is the ability to set the distribution size for all data-logs defined in your project. Running out of space will start deleting your oldest records. In this section, you can specify which data-log historical data will be removed first. Once the space reserved for data-logs is depleted, mySCADA will delete data according to these specified properties.

In the following table, you can see the percentage of how much space your data-log will have.

27.8.3

 

You can change the size in percent. The overall percentage should be equal to 100 percent. You can check the distribution of your data-logs in the graph below the table:

27.8.4

 

  • TIP: You can use decimal numbers to specify maximum size; this can be especially useful if you have a large number of data-logs and need to split disk space precisely.

Setting the Maximum Log Time

For each data-log, you can set the maximum log time. If the oldest records in the data-log are beyond this threshold, they will be automatically deleted. To do so, please select the corresponding data-log in the table and then change the “Delete records older than” parameter.

Distributing data-logs uniformly

You can distribute data-logs uniformly by pressing the button “Max. size uniformly”.

27.8.5

 

Changing the position of Data-log Views in Menu

You can change the position of data-log views on the right side of the dialog:

 

27.8.6

 

28.Data - Log views #

Each data log can have defined multiple tabular views.

28.0.1

 

You can define the data-log views in the same window as you define the data-log.

Tabular views enable displaying all captured data from the data-log in the form of a table.

The Data-log view has following parameters

Parameter

Description

Name

Enter a name for data-log view

Description

Short description

Data Points (IDs)

List of data points used in this data-log view. For each data point, you can set up configuration parameters in the editor.

Totals

Shows the totals at the end of the table.

Hide ID

Hides the ID (#) column.

Hide Date

Hides the Date column.

 

First, fill in the name and description. Then click the Data Points column and click on the “…” button to include data points in your data-log view. You will be presented with the data points selection dialog.

 

28.1.Data points selection #

The data points selection dialog enables you to select data points to be included in your data-log view. Select the data points you want to include on the left side of the table.

28.1.1

 

Once you specify all required parameters, you can save your data-log view and show it in runtime.

A list of all data-log views can be found in Main Application Menu under the “…” -> data-logs section.

Once you select your data-log view by name, you will see your data in tabular form:

28.1.2

 

 

28.2.Data grouping #

You can group data in the data-log view table. You can even have multiple groups nested. To use data grouping, check the Group By check box for the data points you want to group them by. Then, for the rest of the data points, specify the Aggregate function; you can use none, sum, average, minimum, and maximum. If you don’t provide an aggregate function, the corresponding field will be left blank.

Data Grouping Example

Suppose you have a batch process where you would like to show production data grouped by material and then by batch numbers. To do so, we will create a data-log and corresponding data-log view.

1. Create your data-log

28.2.1

 

2. Create data-log view

28.2.2

 

3. Set up data points. Check Group By for Materials and Batch data points. For ungrouped data points, select appropriate aggregate function.

28.2.3

 

4. Test your view

28.2.4

 

As you can see, your data are grouped by Material and then by Batches. You can collapse each group by clicking on the “+” button.

28.3.Filtering data #

You can easily filter your data in the data-log view based on time intervals. However, in some situations, it might be necessary to filter your data based on the data itself. In the example below, you can look at a situation where filtering data is an essential functionality.

To enable data filtering, you must specify which data points should be used as data filters. You do this in the data point definition in your data-log definition. Usage is quite simple, just check the Key check box for all the data points you want to use in data filtering.

28.3.1

 

Once you have your data-log prepared, you can see how it will look in runtime:

28.3.2

 

As you can see, there is a Filter icon. If you click on it, you will be presented with the Filter dialog:

28.3.3

 

Now write down the material name and you will see that your table will show this material.

28.4.3D chart #

3D chart can be displayed either in active area or in data-logs views.

You can zoom in or zoom out using mouse scrolling button or you can just drag graph to turn it and be able to view graph from other side. Also if you move cursor anywhere on the edge or point of the graph you will see time and value displayed.

When you are creating graph you can choose graph to be auto-scaled or you can choose maximum and minimum of the graph manually.

 

 

3D chart can be displayed in several forms as you can see on the screenshots.

Surface type:

 

 

Bar type:

 

 

Dot type:

 

 

Line type:

 

 

Grid type:

 

28.5.Data-logs preview - appearance editor #

Preview appearance of data logs,

Once you create data-log view and select data-points you are able to view it’s appearance by clicking on appearance button.

New window will appear where you will see preview of your data log view, you can drag columns to increase their size or decrease their size.

Once you click save everything will be saved and when you download project to your device size of columns which you have set in this preview will be applied and will stay retained on the device.

29.Aggregated data logs #

Aggregated data logs allow you to automatically compute aggregated data from regular data logs and alarms.

Usually, you have rough data recorded from your PLC in regular data logs. For example, you can be reading temperature values every 10 seconds and have them logged into the data log. Now imagine you would like to know the minimum, maximum and average temperature values per hour, per day and per month. This is where aggregated data logs come in play.

 

With aggregated data logs you can aggregate by

  • time period (minutes, hours, days, …)
  • some logged value change
  • Alarm activation

 

You can compute statistics based on functions

  • Count
  • Sum
  • Average
  • Minimum
  • Maximum
  • Alarm time activation
  • Alarm count

 

To create an aggregated data log, first create all sources – eg. Data logs you want to aggregate data from. Then you can start creating your data log.

29.1.Creating aggregated data log #

To create an aggregated data log, navigate to Aggregated Data Logs and click on New.

29.1.1

 

You will be presented with the new dialog, please select a name and confirm.

 

29.1.2

 

Once confirmed, a window with the definition of your aggregated data log will be opened.

29.1.3

 

As you can see, the window is split into several sections. We will explain each section in detail below.

29.2.Aggregated values: #

Aggregated values are the values from one or multiple data logs aggregated using the “aggregate” function. You can add an arbitrary number of values (columns) from multiple data logs.

First item in the table is always Interval End. Aggregated data log has always two dates: start and end of interval.

Then you can add as many aggregated items as you wish. Table has following columns:

Column

Description

Datalog/Alarm

Source datalog (or Alarm)

Tag

Source tag (or Alarm Severity)

Name

Name – eg. name of aggregated item

Description

Description of aggregated item

Unit

Unit (useful in trends)

Format

Format for numeric values use #.## notation

Function

Aggregate function (sum, avg, min, max, ..)

Type

Type of item eg. Numeric or String

Parameter

Additional format parameter for Type item

Alignment

Align item in data log view table to the left, right, or middle

Key

If you want to perform a search by this item, tick it please.

 

To add aggregated value for data log:

  1. Select data log name in combo box
  2. Select tag in combo box
  3. Fill rest of the table

 

To add aggregated alarm count or alarm activation time

  1. Select CAS Alarm
  2. Enter maximum severity
  3. Fill rest of the table

 

First, select a data log

29.2.1

 

Secondly, select a tag from datalog

 

29.2.2

 

Then fill in the Name, description and also the aggregate function:

29.2.3

 

Once you are done, don’t forget to also set up the data-log view, you can do it by clicking on the “Data log views” button:

 

29.2.4

 

You will be presented with data-log view definition, it is the same as when you define a data log view in data log definitions (please see chapter Data logs)

29.2.5

 

Simple Example:

In this example, we are aggregating data from 2 different datalogs “temp” and “humidity”

29.2.6

 

29.3.Time aggregates #

The most common way to aggregate data is by the time interval.

29.3.1

 

Please tick the check box “Aggregate by Time:” and then fill in the time period for your aggregate. mySCADA is using the ISO8601 norm when you specify the interval.

You should also specify the time zone of your areas (if you aggregate by days, this will define start time of your day)

 

Simple Example:

Aggregating data from multiple data logs by 15 minute intervals.

Definition of aggregated data log:

29.3.2

 

Definition of time interval:

29.3.3

 

Result:

Raw Data (shown only small part):

29.3.4

 

And final aggregated result:

29.3.5

 

29.4.Value change aggregates #

You can also aggregate data by value change. The usage is quite simple, please define from which datalog and what tags should be tracked for value change. When value in data log changes it is used as aggregate interval.

To use Value Change Aggregates, select the “Aggregate by Value Change” check box and add at least one item by which you want to track value change.

29.4.1

 

In this simple example, we will show you how to track production change. We have 2 data logs:

  1. Raw data, where we log each produced item on the production line
  2. Product change data log, here we log when we start producing new product

 

We will create an aggregated data log, which will show how many items we have produced for each product.

Aggregated data log definition:

29.4.2

 

Data – log with product label change:

29.4.3

 

And Resulting aggregated data log:

29.4.4

 

29.5.Aggregates based on alarm activation #

Alarm activation aggregates can be useful if you use alarm as your trigger for time interval changes. Usage is quite simple and straight forward, the alarm activation sets the aggregate interval.

To define, aggregates base on Alarm activations, please check the “Aggregate by Alarm (trigger)” check box and fill in the alarm ID or IDs.

29.5.1

 

Simple example:

We will log production based on the production line activation signal.

1. We will define our activation signal. For this purpose, we will use CAS Alarms. Eg. we will start by creating CAS Alarm:

29.5.2

 

2. Now we will use the aggregated data log to aggregate the data based on the alarm activation:

29.5.3

 

And the result:

Alarm activations:

29.5.4

 

And corresponding aggregated data

29.5.5

 

As you can see, for each alarm activation period, you get one row in the aggregated data log.

29.6.Running the aggregation periodically #

You need to run the aggregated function periodically to get the calculated data log updated. Ideally, you should run the aggregation just after your data is ready, eg. shortly after a defined period. To do so, please tick “Autorun every:” check box.

29.6.1

 

Then define the period by clicking on the “…” button. You will be presented with dialog, where you can define at what time intervals to run the aggregation function.

If you need to further delay the execution of aggregation function (for example, you need to run every hour and 5 minutes), you can select “Delay execution by” and add number of minutes to delay an execution.

 

IMPORTANT: IF YOU DON’T RUN THE AGGREGATION FUCTION, YOU WILL HAVE NO DATA IN AGGREGATED DATA LOG

30.1.Using multiple axes #

By default, all pens use the same vertical axis. You can define multiple axes. Each axis can be used just for one pen, but it can be also shared by multiple pens. To add a new axis:

1. Click on the “+ Add Pen” dialog. Now click on the “…” button next to Second Axis.

30.1.1

 

2. You will be presented with the Axes Settings Dialog:

30.1.2

 

3. In the dialog, you can add a new Axis and set its parameters like auto-scale, location, and name.

4. Once you have created the new axis, you can select it for a given pen:

30.1.3

 

5. Now you can look at how the trend will look with multiple axes.

30.1.4

 

30.3.Gantt chart #

Gantt is part of advanced trends and it can be selected at properties dialog.

 

 

Gantt can be displayed inside active area or inside trends tab. Binary – If you don’t have classic library you can add labels.

 

Binary Stacked – Will stack data into one lane

 

Binary

31.Connections #

To view existing connections, select the Connections folder in the Project Window.

31.0.1

 

Now double click on the Connections folder, and you will be presented with the Connections Window:

31.0.2

 

In this window, you can see all of your defined connections.

31.1.Creating new connection #

1. Create a new connection by clicking on the Add Connection button at the bottom of the main window.

31.1.1

 

To add a new connection, you must first select the type of connections you want to create:

 

There are three possible types:

PLC: PLC, PAC, and DCS connections

Database: SQL Database connections

IoT (IIoT): Internet Of Things Protocols

31.2.Creating PLC type connection #

First, click on the PLC type connection. A dialog window will open where you can enter specific connection parameters in order to create a viable communication channel with the PLC.

31.2.1

 

  • Type – select the type of PLC from the drop-down box at the top of the window
  • Alias – enter the name of the connection
  • IP – enter the IP address of the PLC

 

  • NOTE: The dialog content depends on the selected PLC type.

2. Once all the valid information is entered, click on “+ Add” at the bottom of the window.

31.3.Creating database type connection #

mySCADA is very strong in connecting to external SQL databases. It is surprisingly easy to connect and use SQL databases in your project. To get started, please select the Database type. You will be presented with the configuration dialog:

31.3.1

 

Database Type

As you can see, the first option is the Type of the database. You have the following options:

  • PostgreSQL
  • Microsoft SQL
  • Oracle
  • mySQL
  • sqlite
  • ODBC

 

As you can see, all major databases are supported. On the Windows platform, you can also connect the other database types using the ODBC driver.

Alias

Again, the next option is Alias, and you must fill it to use your connection in your project.

Database Specific Options

Then you should fill in the database specific options:

31.3.2

 

SQL Query Specification

On the right side of the dialog, you can specify an SQL Query to the database. This query will be used to retrieve data from the database. Then you can use this data anywhere in your project. Query dialog type is divided into two sections:

Read

SQL Read Query. This query is used to read values from the database. You can specify any valid query to the database, including conditional statements.

Write

In the Write Query section, you should specify a TEMPLATE for the SQL Query, which will be used later for the write commands. In the query, you should use a placeholders #1#, #2#, and so on in place of values. The placeholders will be replaced with real values provided from the write/set command during runtime.

 

Follow these steps to write values to the database:

1. Specify a Write SQL Query in the connection dialog. In our case, we will write 2 values to the database

31.3.3

 

2. Use the Write/Set command to write values to the database using the template query

31.3.4

 

3. When the write/set command is executed, your query to the database will change to:

 

31.3.5

 

  • TIP: You can create multiple connections to one database to use different SQL queries and retrieve multiple data.

31.4.Creating IoT type connection #

mySCADA is a modern evolving system built on open standards. As the industry evolves, we are evolving with it. Currently, mySCADA supports the international widespread IoT network – SigFox. You can connect to the SigFox servers directly from mySCADA and visualize any data you can get from the network. To do so, please select the IoT type in the connection. Then you will be presented with the settings dialog:

31.4.1

 

Fill in the Alias to be able to use this connection in your project. Then fill in the Login and Password generated from your account in the SigFox backend server.

If you specify a timeout interval, mySCADA will process the time of every message, and if the time is over the specified limit, you will be notified by an error communication about it.

31.5.Deleting connections #

If you want to delete some connections, select them and click on the Delete Connection button right next to the Add Connection button at the bottom of the main window.

31.5.1

 

  • TIP: To edit any of the existing connections, double-click on the connection row.

31.6.Advanced options - optimizations #

mySCADA in default settings is highly optimized for optimal speed and memory requirements of typical hardware. However, further optimizations can be made for speeding up sensitive applications.

Separate Writes Optimization

When a connection to PLC is defined, mySCADA will use one socket for communication with this PLC. If there are write requests in the queue, mySCADA will process them before it starts reading.  If there is a large number of write requests, the read period will increase accordingly. To eliminate this behavior, mySCADA can set write requests to PLC on an independent channel (e.g. New socket connection). To do so, enable “Separate Writes” in the Connection definition.

 

31.6.1

 

Optimization Window – Block Read Optimization

mySCADA is using optimized data read and writing from PLCs; this is achieved by combining all read/write requests for the given PLC into blocks of data to be read. Each connection has the maximum size of the data block set to default values. You can override this value by changing  the size of the data block to be read at once. There might be two reasons to do so:

  • Your PLC is not able to provide data in such a large block; in that case, you must decrease the Optimization Window size
  • Your PLC can provide data in a larger block than selected, if you increase the Optimization Windows size, you can achieve higher read speeds from your PLC.

 

31.6.2

 

Multiple Channels Optimization

As already stated previously, mySCADA uses one communication link to the PLC. If there are multiple, fast-changing requests (for example, a high number of users changing views), mySCADA will optimize communication data quite often. To eliminate this, you can create multiple connections to the same PLC. For example, you can create one connection for CAS Alarms, one for data-logs, and one for views. This way mySCADA will use three simultaneous connections to the PLC. As CAS Alarms and data-log requests don’t change, mySCADA does not have to optimize the data blocks for these two connections. Only the third connection will have to be optimized. This way high-speed data exchanged with PLC can be achieved.

 

To use multiple channel optimization, your PLC must allow for enough simultaneous connections.

 

31.6.3

 

32.User accesses #

Security is a major concern for every modern SCADA system. In mySCADA, you can limit access from the whole project to a single element control. This way you can easily control user access to your project and keep security at the highest level. In addition, if there is more than one person using the technology, you can utilize the user access function to set certain limitations.

32.1.Access levels #

 

Access Levels are security groups with a chosen level of access. You can set different access levels for different users. For example, maintenance personnel would have lower system access level than administrators, but higher than operators. This way you can control who can access your system and who can operate given technology. mySCADA has ten Access Levels numbered from “0” to “9”. “0” (zero) is the lowest access available while “9” is the highest access level possible.

For better user orientation, you can give specific names to these user access levels.

32.2.Access groups #

 

Every user in the mySCADA system has a defined unique name and security password. In mySCADA, every user can be a part of a user group or multiple groups. There can be an unlimited number of groups in the system. Groups can be assigned to tie users together for common security, privilege, and access purposes. This is the foundation of mySCADA security and access. In mySCADA, you can grant access based on group names.

For every user, you can specify a group or groups to which a user belongs. Then, anywhere in the project, you can limit access to this user (or users) by specifying the group to allow access.

32.3.User accounts #

In order to use User Access Levels, you have to specify users for your project. You can create as many users as you need. Each user must have a specified Access Group ranging from 0 to 9 – the higher the number, the higher access rights for the user.

  • TIP: If you wish to use authentication based only on Access Groups, you can leave the Access Level equal to 0.

To specify user accounts, select Users from the project tree and double click it.

32.3.1

 

You will be presented with the Users Window

32.3.2

 

To add or modify existing users, simply write the values into the provided table:

32.3.3

 

Available options are:

Option

Description

Name

Username

Password

Password. Saved password is encrypted for higher security.

Access Level

Specify an access level for given user 

Part of Groups

Specify an access group or groups of which a given user is a part.

E-mail

Provide user’s email to receive email notifications.

Tel.

Provide user’s phone number in the international format to receive SMS notifications.

Set system

myBOX specific settings: enable to change system setting on myBOX

Set network

myBOX specific settings: enable to change networking setting on myBOX

SMS Control

myBOX specific settings: enable to control myBOX with SMS commands remotely.

32.4.Limiting access for whole project #

You can specify which users will have access to the project. To specify which users can access the project, select your project from the project tree and look at the properties.

32.4.1

 

As you can see, you can limit access to your project either based on Access Levels or based on Access Groups.

 

Setting Access Levels

Navigate to the Access Rights – Levels and fill in the appropriate values:

 

32.4.2

 

View Access Level: Sets the minimal level of access for viewing your project.

Write Access Level: Sets the minimal level of access for writing values to the PLCs

User Actions: Enables access for viewing user actions log

 

Setting Access Groups

Navigate to the Access Rights – Groups and fill in the appropriate values:

 

32.4.3

 

Project Read Access: Specifies which groups of users can view your project

Project Write Access: Specifies which groups of users can write values to the PLCs

User Actions: Enables access for viewing user actions log

32.6.Limited access of arbitrary object in views #

You can set the user access rights to even more precise detail. The access rights can be set for each object in a view, allowing creation of complex and customizable visualizations.

Select the target object and set the View and Write Access values:

32.6.1

 

As you can see, there is an Access Settings section right at the bottom of the properties window:

 

32.6.2

 

As you can see, you can limit access to the access levels by simply selecting the desired level from the combo box:

32.6.3

 

Alternatively, you can limit access based on the user groups simply by clicking on the Access Groups Button. Then you will be presented with the Access Groups Settings dialog:

32.6.4

 

As you can see, there are two sections in the dialog, allowing you to set up read (visibility) access and write access independently.

 

DOWNLOAD DEMO PROJECT HERE

32.7.User edit in runtime #

For enabling this function you need to click on “Users”.

 

 

Once you click on “Edit users”…

 

 

you will get into this menu.

 

If you are logged as user with required permissions you can add, remove and edit users.

If you are re-downloading project into device you need to load users first, otherwise your users which were created in run time will be erased !

32.8.RFID #

To activate this function, click on project tab and then you can find this option in properties.

 

 

RFID reader needs to act like virtual keyboard.

 

  • Important Note: If you are having issues with logging in using RFID, please try to increase time.

 

Creating user with RFID tag – Create new user – and as password scan RFID tag

 

 

If you connect RFID tag reader to device you can log in or log out using RFID tag.

33.Multi - language support #

In mySCADA, you have the ability to create projects with multiple languages. This way, based on user preference, users can view your project in multiple languages. To get started, click on your project; in properties, go to the section Languages and click on “…” button.

33.0.1

 

A new Dialog, is shown:

33.0.2

 

Here, you can select all languages that you want to have in your project.

First of all, look at the section “Default Language.” This is the default language for your project.  All defined texts in views, names of views, trends, data-logs, etc. are in your default language. The default language is automatically set upon project creation to the default language of your computer.

 

33.0.3

 

Important: If you wish to create a project in a different language than the language of your computer, please change it upon project creation!

The next section in the Languages Dialog is available languages. Please select all the languages that you want to support in your project. For the parts of the project where you don’t provide translation to a given language, those parts will be shown in the project’s default language.

 

33.0.4

 

  • Tip: You can add languages to your project at any time.