Title of your website

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.

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.

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:

Creating a new project

Exporting/Importing projects

Creating PLC connections

Creating views

Layout Views

Customizing the look

Drawing primitives

Active areas [part1]

Active areas [part2]

Creating custom component

Master components

Rulers and guides

Layers

Animations

Effects

Entering tags

Commands

Parametric views

Viewing scripts

Time sequence

Documents

CAS alarms

Data-logs

Advanced trends

User access levels

User access levels (group)

Zoom visibility

Getting dtarted

Exporting data-logs to MS PowerBI

GIS map

Getting started

Exporting to MS Power BI

Android App preview

iOS App preview

Downloading project to device

• Watch video describing this functionality: https://www.youtube.com/watch?v=hJT0–o1ub8

The first screen you will see after opening the application is the 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:

 

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:

 

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

Start using myDESIGNER by creating a new project.

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

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

 

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

 

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.

 

Import Project

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

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

 

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

 

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.

 

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.

 

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

 

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

 

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

 

5. Click on Finish to close the Project Wizard.

Existing project

With this feature, you can open an already 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.

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.

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.

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)

• Views – all 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 Alarms – here 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.

 

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.

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

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

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.

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.

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

 

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

 

The Visual Appearance Dialog Window will show up:

 

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.

 

The change is immediately reflected:

 

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:

 

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.

 

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:

 

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.

 

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:

 

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

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

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

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.

 

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:

 

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.

 

Menu

 

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.

 

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:

 

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.

 

Options Bar

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

 

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.

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.

 

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

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

 

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.

 

 

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.

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.

 

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.

 

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

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.

 

This will open a dialog window to select the picture.

 

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

 

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.

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

Line

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

 

 

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.

 

 

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.

 

 

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

 

 

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

 

 

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.

 

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.

 

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.

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.

 

 

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.

 

 

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

 

 

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

 

 

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

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

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

 

The rectangles and squares can have their corners filleted.

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

 

 

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

 

 

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.

 

Merge

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

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

 

 

2. Select both objects using your mouse

 

 

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.

 

 

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.

 

 

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

 

 

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.

 

 

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

 

 

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.

 

 

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

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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.

 

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.

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

 

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.

 

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

 

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

 

Therefore, each color has the following properties:

• Color – sets the color and corresponding color code

 

• Opacity – specifies the alpha channel (transparency)

 

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

 

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

 

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

 

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

 

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

 

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.

 

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.

 

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.

 

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.

 

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.

 

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

 

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.

 

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.

 

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.

 

 

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.

 

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.

 

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.

 

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.

 

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.

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.

 

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

 

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.

 

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.

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

 

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:

 

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

 

Layer Window

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

 

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:

 

 

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.

 

 

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.

 

 

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.

 

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:

 

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.

 

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.

 

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.

 

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

 

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

 

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.

 

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

 

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.

 

 

Changing Layers Properties

To change layer properties, press the setting button.

 

You will be presented with the Layer Settings dialog.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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

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

 

 

Paste width – this function will paste only the width of an object

 

 

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

 

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.

 

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.

 

 

2. Select the remaining objects.

 

 

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.

 

 

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.

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.

 

 

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

 

 

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

Raise – moves a selected object one level up

 

 

Lower – moves an object down one level down

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.

 

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:

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:

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.

 

 

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

 

 

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

 

 

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

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.

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

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

 

 

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.

 

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

This function lists all tags used in an active view.

 

 

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

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.

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.

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

 

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.

 

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

 

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.

 

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

 

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.

• Watch video describing this functionality: https://www.youtube.com/watch?v=tYh4jD-2f2M

 

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

 

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)

 

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.

 

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.

 

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:

 

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.

• Watch video describing this functionality: https://www.youtube.com/watch?v=tYh4jD-2f2M

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.

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.

 

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

 

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.

 

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

 

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:

 

Enter a new name and hit OK.

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

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.

 

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

 

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

 

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

 

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

 

 

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.

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.

 

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

 

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

 

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.

 

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:
  

 

• Create the corresponding variables in the Component variables window
  

 

• Save

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

 

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.

 

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.

 

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

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.

 

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:

 

3. Fill in the Component Variables.

 

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

 

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

 

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

 

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

 

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

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:

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

 

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

 

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

 

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

 

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

 

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:

 

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

 

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:

 

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.

 

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.

 

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

 

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:

 

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:

 

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

 

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:

 

• 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

 

• Now insert additional text fields.

 

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:

 

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.

 

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.

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.

 

Then select a component, fill in the parameters (such as the number of elements) and click on 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.

 

Combo Box

 

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

 

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

 

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

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.

 

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);

 

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.

 

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

 

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

 

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

 

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:

 

Will produce following output

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)

 

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

 

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.

 

• Watch video describing this functionality: Active Areas [part1] https://www.youtube.com/watch?v=q_V91pm8C1c

• Watch video describing this functionality: Active Areas [part2] https://www.youtube.com/watch?v=uq-hHTbrwrs

 

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

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

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

 

 

2. Draw the Active Area:

 

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

 

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.

 

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

 

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.

 

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.

 

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

 

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

 

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.

 

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

 

3. Set up its init state.

 

4. Set up data filter as follows:

 

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.

 

2.Set up its init state.

 

3.Set up row click callback as follows:

 

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.

 

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.

 

 

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

 

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

 

2. Create buttons as shown in the following picture:

 

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

dateFrom

dateTo

 

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

 

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

 

6. The Filter will be set as follows:

 

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

 

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.

 

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

 

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.

 

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

 

3. Set up its init state.

 

4. Set up data filter as follows:

 

 

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 active area.

 

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

 

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.

 

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.

 

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

 

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.

 

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

 

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

 

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

 

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

 

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

 

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

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.

 

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.

 

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.

 

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.

 

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.

 

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:

 

DOWNLOAD DEMO PROJECT HERE:

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

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:

 

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

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

 

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

 

After creating a new layout, double-click on it to fill in its 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.

 

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.

 

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

 

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

 

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.

 

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.

 

6. Now, test your view.

 

  

DOWNLOAD DEMO PROJECT HERE

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.

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

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

 

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

 

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:

 

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.

 

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.

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.

 

 

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.

 

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
r÷	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 n^th 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.

 

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

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 “(…)”

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.

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:

 

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.

 

• 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

 

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

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:

 

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.

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:

 

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:

 

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.

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

 

 

2. Then click on “Save as”.

 

 

 

 

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

 

 

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.

 

 

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.

 

 

 

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.

 

 

• NOTE: Detailed manual for installation of mySCADA TIA portal connector can be found here: TIA portal connector manual

 

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.

 

 

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”

 

 

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.

 

 

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.

 

 

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.

 

 

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.

 

 

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

 

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.

 

 

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

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.

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

 

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

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

 

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.

 

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

 

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.

 

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

 

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.

 

 

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

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

 

 

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.

 

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

 

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

 

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

 

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

 

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

 

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

 

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.

 

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.

 

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:

 

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

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:

 

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

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:

 

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.

 

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.

 

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.

 

The following picture shows different levels of opacity:

 

 

 

And these levels again, converted to the tag values:

 

 

 

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.

 

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.

 

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:

 

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.

 

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.

 

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

 

 

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.

 

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.

 

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

 

Size Animation Examples:

 

 

 

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

 

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.

 

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.

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 0^th degree, and then enter the maximum tag value, which correlates to the 360^th 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:

 

 

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

 

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.

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

 

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

 

 

Circular Gauge in myDESIGNER

 

 

Circular Gauge in live view

• Watch video describing this functionality: https://www.youtube.com/watch?v=9BJjs-p9nfI

 

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.

 

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.

 

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.

 

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!

 

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.

 

2. In the dialog window you can set:

 

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

 

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.

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.

 

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.

 

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

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

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

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.

 

2. A new dialog window will show up.

 

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.

 

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:

 

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:

 

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.

 

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.

 

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:

 

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

 

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:

 

 

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:

 

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:

 

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.

 

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.

 

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.

 

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.

 

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.

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.

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

 

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

 

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

 

 

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.

1. Open the Time Sequence editor.

 

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

 

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

 

 

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

 

5. Save your time position.

 

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

 

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

 

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.

 

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:

 

You will be presented with the Tag Settings dialog.

 

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.

 

2. You will be presented with a setting dialog:

 

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

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

 

You will be presented with the Time Settings dialog:

 

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)

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

 

 

To rename a time sequence, press the following button.

 

You will be presented with the rename dialog:

 

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

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

 

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

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

 

 

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.

 

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.

 

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:

 

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

 

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

 

 

And our time sequence:

 

We have set the the trigger to Tag condition:

 

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

 

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:

 

 

And our time sequence:

 

We have set the trigger to Tag condition:

 

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

 

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.

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

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.

 

You will be presented with the Open dialog:

 

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

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

 

• 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

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.

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.

Popup Windows allow you to show a new window on top of your current window. The popup window can be useful to show multiple views at once, or you can use popup windows as a Face Plate.

Click on the “…” button in the Target area to set the popup window. You will be presented with the Popup Window Settings dialog.

 

Location

Location sets the location on the screen where a new window will pop-up.

• Default: show window at the center
• Absolute: set absolute coordinates of top left corner
• Relative: set relative offset to current mouse position
• All values are in pixels.

Size

Size of a newly open window

• Default: original size of the window. A window will be shown with the same resolution as is defined in the designer.
• Scaled: scale window to given percentage
• User Defined: specify new dimensions of opened window

Resizable

If resizable is selected, the user can resize the view. Otherwise, the size will be fixed.

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.

 

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

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.

 

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.

 

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

 

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

 

2. Create a new view and insert a button.

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

 

4. Set up data filter as follows:

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.

 

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

 

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

 

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

 

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.

 

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

3. On the button, set up Open command.

 

4. Set up data filter as follows:

 

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.

 

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

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

 

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:

 

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.