Graphic editor

The graphic editor is intended to create the mnemonics. The mnemonics are used to provide the operator with up-to-date information on the current state of the control object in a practical form for perception. Usually, the mnemonic represents a visual image of the structure of a technological process or control object. The mnemonic elements are animated and change their appearance, the contained text or position depending on the current state of the controlled parameters of process, for example, when the conveyor turned on, the corresponding mnemonic element changes its color from grey to green. The creation of such mnemonics, the arrangement of elements on them, their binding to tags containing information about the object, is performed using the graphic editor.

The graphic editor is activated from the tag editor when clicking the button for mnemonics creating for the current group (folder) (see Description of tags editor interface ):

	Mnemonic Creating/Edit for the current group (folder)
	Removing mnemonic for the current group (folder)

Creating mnemonics

When clicking the button for mnemonics creating/editing (see Description of tags editor interface), is activated the graphic editor window:

paste (Graphic editor fig.)

The editor window represents a workspace where is developed the design of the mnemonic. In the upper part of the editor there is the toolbar (see Tool bar):

The remaining panels of the editor can be moved through the workspace, resized and hidden or open by means of a group of buttons on the toolbar:

The hidden bars:

The panel contains a set of components that ensure the interaction of the operator with the control object, such as a button, an input/output field, a drop-down list, etc. (see Control elements panel)

Graphic elements panel:

The panel contains a set of components intended for the development of the design of a mnemonic (see Graphic elements panel ).

Elements patterns panel:

The panel contains a set of predefined elements patterns (see Creating elements patterns). The Faceplate development environment already includes the ready-made patterns for typical elements:

• AI - analog parameter
• SP - setpoint selection
• MOTOR-engine
• VALVE - valve/gate valve
• PIDAO - PID-controller with analog output
• PIDDO - PID-controller with discrete output

The patterns library can be supplemented with its own patterns of the developer.

Elements properties panel:

The panel is used to change the various properties of selected elements such as color, type of frame, texture, etc. (see Elements properties panel). Due to the properties panel is performed the binding of the elements properties to the tags fields, that provides a dynamic change of properties depending on the current value of the bound field (see Elements properties binding to tags).

Basic principles of working with a graphic editor

To create the mnemonic, it’s necessary:

• to drag the necessary elements from the panels to the mnemonic;
• to arrange them on the mnemonic and to set the size by dragging/stretching or editing of the geometric properties through the properties panel.
• to define the appearance of the elements by editing the properties of the appearance group in the properties panel.
• to bind the properties to the tag fields in order to ensure the element animation in runtime mode depending on the current state of the control object (see Elements properties binding to tags).
• o determine the reaction to events initiated by the operator, such as mouse clicks, input values, etc. (see Events binding).

In order to add an element to the mnemonic, it’s necessary to drag it from the corresponding panel to the working area. To do this, to click the desired type of element on the panel and, holding it, to drag into the workspace. As a result, a new element of selected type will appear in the workspace. For example, when the dragging a rectangle-type element (Rectangle) from the graphic elements panel to the workspace:

The following element appears on the mnemonic:

Then by dragging, to place it on the mnemonic in the right place and resize it by stretching beyond the boundaries or the auxiliary points at the corners. The appearance of an element is determined by editing its properties in the property panel. For example, after setting the following values of properties to the element in the ‘appearance’ group:

• border_color = #c3c3c3
• border_width = 3
• border_style = outset
• texture = /IMAGES/textures/red_brick.jpg

the created rectangle takes the following form:

The set of properties of elements that are available for editing, may vary depending on the type of element being edited.

For convenience of positioning elements on the mnemonic and determining their sizes, I’s possible to change the grid step on the toolbar (see Tool bar):

Dragging and stretching operations change the coordinates of the elements by step size, divisible to the current grid step of the editor.

Position of mnemonic elements relative to other elements (z-index)

When adding the elements to a mnemonic, they can overlap each other, as a result of which several underlying elements can be covered by the overlying ones. The order of the elements is adjusted by the z-index property, which each element has, and is located in the ‘geometry’ group of the properties panel (see Elements properties panel). The property can take values from 0 to 999. Higher is the z-index of the element, “closer it is to the surface”.

Visibility of elements

Each element of the mnemonic has a property visible, which determines its visibility. In edit mode, an invisible element is displayed as translucent, for example:

In runtime mode, the element will be completely transparent. The changing of elements visibility can be useful if performed dynamically (see Binding of elements properties to tags)

Balloon helps

For each element, can be defined a balloon help that will appear in the execution mode next to the element when pointing the mouse over it. The help text is determined by the property title of the element, which is in the ‘appearance’ group. The text that is defined in the property ‘title’ will also be displayed in the control panel title for the element (see Сreating Control panels, Control panels call)

Changing the properties of elements group

To select several elements of the mnemonic at once, the selection area needs to be defined by clicking the mouse button and holding it down, to stretch the rectangle that denotes the area borders:

The elements fall into the area only if the area covers them entirely. The desired elements can be also selected by clicking with the mouse on them while holding down the ‘Ctrl’ key. If more than one element is involved in the current selection, then the properties tree is displayed in the properties panel, for example:

The root element is named ‘Selection’. It displays pthe roperties that are common to all elements in the current selection that are the group properties. If the value of the property for all elements in the selection is the same, then it is displayed as a group value, otherwise it remains empty. When a group property changes, its value is accepted by all elements involved in the selection. The same behavior is true when defining of the property and event bindings.

Copying elements

To copy the elements, the elements being copied, need to be selected in the workspace and after that it’s necessary to click the “Copy” button on the toolbar (see Tool bar):

The use of hot keys is supported, the copying is “Ctrl + C” (see Hot keys). When copying, the elements are placed in the exchange buffer, after that they can be pasted from it into the same or another open mnemonic. To paste the elements, copied to the exchange buffer, click the “Paste” button on the toolbar:

The elements contained in the buffer will be added to the mnemonic. The use of hot keys is supported, for the pasting is “Ctrl + V”.

Copying of elements display styles

The display styles are the properties of an element that determine its appearance, such as color, border style, texture, etc. The display styles copying function allows to copy the settings related to the appearance from one element to the other one. To copy the display styles, the donor-element has to be selected in the workspace, then to click on the “Copy properties” button on the toolbar (see Tool bar).

When copying, the properties that determine the appearance of an element, are placed in the exchange buffer, after that they can be “flowed” from it into the other element on the same or another mnemonic. To “flow” the display styles, copied in the exchange buffer, the target elements have to be selected, then to click the “Paste properties” button on the toolbar:

Deleting elements

To remove the elements from the mnemonic, the elements being deleted, have to be selected in the workspace, then to click the “Delete” button on the toolbar (see Tool bar)

The use of hots keys is supported, removing the elements is “Delete” (see Hot keys).

Cancel/Redo actions

In the process of editing the mnemonic, all changes that are brought, are saved in the ‘Undo /Redo’ buffer and can be canceled, if necessary. To cancel the last change, the “Undo action” button is to be clicked on the toolbar (see Tool bar):

The repeated pressing of the button cancels the previous action, etc. To return the canceled action, click the “Redo” button on the toolbar:

The repeated pressing of the button again returns the next action, and so on. The use of hotkeys is supported, the cancel of the last action - “Ctrl + Z”, returning the canceled action is Ctrl+Shift+Z (see Hot keys).

Grouping elements

It is appropriate to combine into a group several elements that use to solve some common subtask, for example, the display a separate technological unit. The elements, arranged in group, are presented on the mnemonic as a single element that can be dragged, stretched, copied like any other. In the properties panel, the composite element will be presented as a group (see Changing properties of elements group ). The properties of separate elements included in the group, are available in the ‘Subelements’ branch. To combine the elements into a group, the elements being combined, are to be selected in the workspace, then to click on “Group” button on the toolbar (see Tool bar):

The “Ungroup” button is used to ungroup the elements that were previously combined into a group:

Saving changes

To save the changes made to the server, to click the “Save” button on the toolbar:

The use of hotkeys is supported, the saving is “Ctrl+S” (see Hot keys). In the case of closing a mnemonic or graphic editor without saving the mnemonic, all changes will be lost. To minimize the losses in case of failures (connection to the server, power failures, etc.), the editor performs the auto-save of the current version of the mnemonic every minute. When opening a mnemonic after a failure, the editor will offer to restore the saved copy, if there is such one:

Export/Import of mnemonics

An open mnemonic can be saved to a file (even if the connection to the server is lost). Subsequently, the mnemonic can be restored from a file. The export/import mechanism of mnemonic is convenient for transferring of mnemonics between projects, for example, from a test server or a developer’s station to a combat project. The export/import mechanism can also be used to save changes in case of failures (loss of access to the server). To export a mnemonic to a file, click the “Export to file” button on the toolbar:

As a result, the browser will download the file with .scn extension. The received file can be imported into an open mnemonic. ATTENTION! When importing, all changes made on the mnemonic, will be lost, the mnemonic will be completely restored from the imported file. To import a mnemonic from a file, click the “Import from file” button on the toolbar:

The file select dialog will appear:

The file select is supported by means of the explorer (“File select” button) or drag-and-drop operations, i.e. dragging usin a mouse, a file into the area labeled “No file selected”. After the file select, the “OK” button is becoming active, when clicking on it, the mnemonic will be imported from the selected file.

Using the hotkeys is supported, the export to file is “Ctrl+Shift+S” (see Hot keys).

Setting of screen resolution of runtime environment

The RUN-TIME environment is performed at the operator’s station. When developing the mnemonics, it is necessary to take into account the resolution of the screen on which the mnemonic diagram will be executed, this time under the execution mode (see Viewing mnemonic in execution mode). To set the screen resolution of the operator’s station, click the button.

On the tool bar (see Tool bar). The result is that a dialog of defining of the client screen resolution will open:

ATTENTION! The setting of the client screen size does not change the size of the current and already created mnemonics, this operation only determines the screen size for the run-time environment. The mnemonics sizing is performed using the elements properties panel. The optimal size of the mnemonics (occupies all available space without the appearance of scroll bars) is calculated by the formula: Width = ClientWidth - 56 Height = ClientHeight - 66 where ClientWidth - client screen width, ClientHeight - height.

Opening mnemonics for editing

The opening of the mnemonic for editing is possible from the tag editor or from the graphic editor itself. The process of mnemonic opening from the tag editor is described in the Creating mnemonics. To open a mnemonic from the window of the graphic editor, click on the button “Open” on the tool bar (see Tool bar):

Then a dialog of tags group selecting opens, for which a mnemonic can be created or edited:

The groups for which mnemonics have already been created are highlighted in bold. To select a group, select it in the right part of the window and click the “OK” button.

Switch between open windows

The graphic editor allows to work simultaneously with several mnemonics, open for the editing. The switch between them is performed using the “Window” button on the toolbar:

So, a dialog of select the mnemonics that are currently open for the editing, opens:

The mnemonics schemes in which there are unsaved changes are highlighted in bold. To select a mnemonic, it’s necessary to click on its name. Binding element properties to tags

Binding of elements properties to tags

In the execution mode, the information on the current state of the control object is displayed to the operator through a dynamic change of the appearance of elements, the text contained there or the position in the mnemonic. To do this, the properties of the elements being animated, must be bound to tag fields that contain the relevant information about the state of the object (see Tags editor).

The binding of properties to tags is performed using the properties panel. In front of each property there is a binding defining button for it:

When clicking on it, the property binding dialog opens:

	It defines the type of binding. Possible values: “TAG”. Direct binding of the element property value to the tag field value (see Direct binding). “SCRIPT”. Field binding using the script (see Binding through script).
	Creating mapping button. It’s used to create a map of correspondence of tag field values to the element property values. (see Binding through mapping)
	Tag from which field a value is to be taken. Selection from the drop-down list or the tag selection dialog, button
	Tag field from which a value is to be taken.

Direct binding

The direct binding determines the direct correspondence of the tag field to the element property. For example, if the property of the element “height” is tied directly to a tag field containing a temperature value at one of the controlled points, then the element height will change dynamically depending on the actual temperature at the tied point. Moreover, the height value will correspond to the temperature value “directly”. This means that if the temperature is 35 degrees, then the element height will be 35 pixels. In practice, this type of binding is most often used for control elements, for example, for Input/Output fields, when the field value is displayed to the diagram as a number.

Binding through script

javascript can be used in order to bind the element property. Such a mechanism allows to achieve a great flexibility in determining of the dynamic behavior of mnemonic elements. When select of the binding dialog window of “SCRIPT” type, the script creation panel is displayed in the window:

The work with more than one tag is allowed in the script. The script allow to perform the various intermediate calculations when calculating the element property value. For example, the value of the element property can be composed out of the field values of several tags or be calculated using some formula. The javascript language is used to create the script. The script itself represents the usual nameless function ‘javascript’ that is called by the Faceplate runtime environment when displaying an element or changing the value of one of the tags (variables) used in the script. The value returned by the function, is used by the environment as the value of the field being bound.

To access the values of tag fields, it’s necessary to determine the composition of variables, each of which is tied to the required tag and field. In the input of the script function is provided ‘javascript VARS object’, each of whose properties has the name of the corresponding variable. To get the value of the variable, it needs to call its method get()::

VARS.var_1.get()

The script allows not only to get the values of variables but also to change them:

VARS.var_1.set( 1234 )

ATTENTION! Changing the values of tag fields in the property binding script is considered as a bad practice, if possible, such decisions should be avoided using more appropriate mechanisms instead of it (see Events binding or Script editor).

Additionally, the element object is passed to the function input as an argument. The object serves to access to other properties of elements, for example, it’s possible to get the value of the “width” field through:

element.get( “width” )

The changing the properties of an element is also supported through:

element.set( { “width”: 1234 } )

All javascript features, supported by the used browser, are available in the script. ATTENTION! If possible, the asynchronous code should be avoided, in particular the setTimeout and setInterval functions. If necessary, is allowed the use of functions of the same name from the context object that is submit in the input of the script function by the 3rd argument, for example:

context.setInterval( function(){
            var t= +(new Date());
    element.set( { "width": 100* Math.sin( t ) } );
 } ,100 );

It is convenient to use the javascript console.log () function for tracing the script code execution. The tuning-up of the mnemonic diagrams is performed using the execution mode (see Viewing mnemonic in runtime mode).

Binding through mapping

The mapping allows to define a map of matching between the values of the bound tag field with the element property values. A simple example: if the conveyor is ‘on’, the element should be green, if it is ‘off’, it should be grey. The tag field can take the values 0 and 1, in order to bring these values to the values of the colors 0 - “grey”, 1 - “green”, the mapping should be created. The mapping dialog is called from the creating binding dialog by clicking on the button

The following dialog opens

On the left there is one of the possible values of the bound tag field, on the right there is the corresponding value of the element property. To add a new match, click on the button:

and to determine the left and right values for the new matching.

Now, if the tag field has the value 0, then the element will be grey, when the field takes the value 1, the element will turn green.

The mapping dialog allows to define the matchmaps containing more than two matches. Let’s consider an example: the temperature output beyond the technological corridors needs to be animated:

• less than 80 – element is blue
• from 80 to 120 - element is yellow
• more than 120 – element is red

The mapping for this example will look like this:

It means the following: value <80 - color is blue 80 <= value <120 - color is yellow 120 <= value - color is red The smallest value in the range does not actually define any boundary because the entire range of values that is below the smallest value in the map, automatically falls into the range with the smallest value. For our example, this means that if the temperature drops below 0, the element color will be blue.

The mapping function can also be applied to the results of the script calculation (see Binding through script).

In order to йвогые the created bindings, the execution environment can be used (see Viewing mnemonic in runtime mode).

Events binding

The mnemonic elements are used not only to display to the operator the useful information about the control object, but also can be used to control the process. For example, the operator can use a mтужщтшс to turn on/off the technological units, to enter the setpoints, to change the settings, etc. For this, it is necessary to determine the reaction of elements to various operator actions. For example, it is possible to define an event per click with a mouse on the conveyor "on" button, as a result of which in the conveyor tag field, associated with the switch command, will be recorded the value 1.

The definition of reactions to operator actions is performed using the properties panel. For each element in the list of properties groups there is a group events. It contains a list of all events supported for this element, to which it’s possible to define some reaction. Opposite each type of event there is a button to create a reaction:

When clicking on it, the reaction definition dialog is called:

The field “Type” specifies the format for reaction determining. Possible values:

• “Assignment”. It allows to define a series of assignments (see Assignment)
• “Script”. It allows to define a script to be executed upon the occurrence of an event (see Reaction setting through script)

Assignment

When the selection of type “Assignment”, it’s possible to define a series of assignments that will be made when the event occurrence. The assignments are determined using the assignment table:

The table contains the rows, for each of what will be defined one assignment. On the left there is the variable to which the value will be assigned, on the right there is the source of the value. In the quality of the assignment (variable) object can be:

• “Tag”. Tag field
• “Property”. The property of the element for which the reaction is determined.

In the quality of the value source can be:

• “Constant”. The static value that is defined in this dialog.
• “Tag”. Tag field
• “Property”. The property of the element for which the reaction is determined.

Reaction setting through script

In order to determine the reaction to the element event, can be used ‘javascript’. Such a mechanism allows to reach the greater flexibility. When the selection of the dialog window of defining for “Script” type reaction, the script creating panel is displayed in the window:

The script allows to work with tag fields, as well as to work with the element properties for which the reaction is determined. The script allows to perform the various intermediate calculations in order to change the values of the tag fields, the values of the element properties. For example, in a tag field, it’s possible to write a value that must be calculated using some formula or according to some algorithm. The javascript language is used to create the script. The script itself represents the usual nameless function ‘javascript’, which is called by the Faceplate runtime when the occurrence of the bound event.

To access to the values of tag fields, it’s necessary to determine the composition of variables, each of which is tied to the required tag and field. In the input of the script function is submit ‘javascript VARS object’, each of whose properties has the name of the corresponding variable. To get the value of the variable, its method needs to be called get():

VARS.var_1.get()

In order to change the value of the variable, its method needs to be called set():

VARS.var_1.set( 1234 )

For example, when clicking on a button, it’s necessary to turn on the conveyor if it is now turned off, and vice versa, turn it off, if it is turned on:

VARS.var_1.set( !VARS.var_1.get() )

In addition, the element object is submit to the function input as an argument. The object serves to access to other properties of elements, for example, the value of the field “width” can be received through:

element.get( “width” )

It is also supported the changing of the element properties through:

element.set( { “width”: 1234 } )

All javascript features supported by the used browser, are available in the script. ATTENTION! The asynchronous code should be avoided, if possible, in particular, the setTimeout and setInterval. If necessary, it is allowed to use the functions of the same name from the context object, which is submit to the function input of the script by the 3rd argument, for example:

context.setInterval( function(){
            var t= +(new Date());
    element.set( { "width": 100* Math.sin( t ) } );
 } ,100 );

For tracing the script code execution, it is convenient to use the javascript console.log () function. The debugging of the mnemonic is performed by using the execution mode (see Viewing mnemonic in runtime mode).

Automatically detected events for input elements

The control elements panel (see Control elements panel) contains a number of elements through which the operator can enter the values. They include:

	Input/output field
	Checkbox
	Slider
	Drop-down list

Each of these elements has a property value, whose value can be changed by the operator from the mnemonic: the input. If “direct binding” is created for the elements of the listed types for the property value (see Direct binding), the values received from the operator, will be automatically recorded in the property-related tag field without the need to define a reaction to an input event: mirroring of the binding. It should be noted that such a mechanism works only when using the direct binding to the field value, without using the mapping or the script. In other cases, when using the mapping or the script, the input from the operator should be processed through the reaction definition to the input event input.

Calling control panels

For each element of the mnemonic, it’s possible to define a call of the auxiliary window that contains the advanced functions to control the relevant unit and is called up in runtime mode, clicking on an element or another event: the control panel (see Сreating Control Panels). For example, when clicking on the PID controller element, is called a window containing a set of elements that allow to switch the operation mode of the controller, to carry out the settings, to set the technological corridors of the adjustable parameter, etc. The use of control panels allows to unload the mnemonic from additional elements that perform the auxiliary functions and are displayed to the operator only on demand, in the form of a dialog window. In order to bind a control panel to the mnemonic element, it’s necessary to define the value for its property panel. When setting the value, the following dialog is called:

• “Event”. It specifies the event on which the control panel will be called. The supported values are:
• click – click with a mouse
• dblclick - double click
• mousedown – mouse button pressing
• mouseup - mouse button release
• “Panel”. Thiis is a panel that will be called. The panel should already be created (see Сreating Control Panels).
• “Тag”. Тhe tage or the tags group (folder), to which will be tied the panel when calling.

Elements change bindings wizard

The graphic editor supports the group change bindings of elements. In order to start the change bindings wizard, select the elements being rebound, and click the button:

on the tool bar (see Tool bar). As a result, the wizard will determine all the existing bindings in the selected elements, that include:

• properties bindings (see Binding elements properties to tags )
• events bindings (see Events binding)
• panels bindings (see Calling control panels )
• bindings of messages indicators (see Message indicator)

All references to tags found in the bindings, will be displayed in the change bindings dialog in the form of a table:

On the left there are the tags involved in the bindings in the selected elements, on the right there are the tags selection elements that define the new values. The replacement is allowed only for the tag of the same pattern (see Creating tags patterns). If the replacement value is left blank, then the replacement will not be performed for this tag.

Viewing mnemonic in runtime mode

To view the mnemonic in the runtime mode it’s necessary:

• to save the mnemonic,
• to open a tab in the browser with the runtime mode window http://127.0.0.1:9000. (Specify the IP address and the server port on which Faceplate is installed).
• to select the required mnemonic via the navigation panels (see Operator manual).

It is convenient for debugging to change the values of the tag fields from the tag editor window (see Tags editor). ATTENTION! If the RUN-TIME mode started up, the changed values are sent to the controller.

Hotkeys

The graphic editor supports the work with hotkeys. The following combinations are available:

Ctrl+C	Copying of selected elements to the exchange buffer (see Copying elements)
Ctrl+V	Pasting the elements placed earlier in the exchange buffer on the mnemonic (see Copying elements)
Ctrl+S	Savins the mnemonic (see Saving changes )
Ctrl+Shift+S	Export the mnemonic to the file (see Export/Import of mnemonics)
Ctrl+A	Selection of all elements in the mnemonic
Ctrl+Z	Cancel the last performed action (see Cancel/Redo actions)
Ctrl+Shift+Z	Return the canceled action (see Cancel/Redo actions)
Delete	Delete the selected elements (see Deleting elements)
Arrows: to the left to the right up down	Move the selected elements accordingly

Toolbar

	Opening mnemonics for editing. When click on the down arrow to the left of the inscription “Open”. A list with available options will appear: Panels” - opening of control panels for editing (see Сreating Control Panels) “Patterns” - opening of elements patterns for editing (see Creating elements patterns )
	Saving the current mnemonic (see Saving changes )
	Export the mnemonic to file (see Export/Import of mnemonics)
	Import the mnemonic from file (see Export/Import of mnemonics)
	Closing the current mnemonic
	Cancle the canceled action (see Cancel/Redo actions)
	Return the canceled action (see Cancel/Redo actions)
	Copying the selected elements to exchange buffer (see Copying elements)
	Pasting the elements, placed earlier in exchange buffer, on the mnemonic (see Copying elements)
	Deleting the selected elements (see Deleting elements)
	Copying the display styles of the selected element (see Copying display styles)
	Applying the display styles, copied before to the selected elements (see Copying display styles)
	Unification of the selected elements in a group (see Grouping elements)
	Ungrouping of the selected group (see Grouping elements)
	Startup the change bindings wizard for the selected elements (see Elements change bindings wizard )
	Grid step definition, it defines the multiplicity of the step for drag-and-drop and stretching operations.
	Screen resolution change for the runtime environment (see Setting the runtime screen resolution)
	Opening/Closing the elements properties panel (see Elements properties panel)
	Opening/Closing the graphic elements panel (see Graphic elements panel)
	Opening/Closing the control elements panel (see Control elements panel)
	Opening/Closing of the elements patterns panel (see Elements patterns panel)
	Images library opening (see Images library)
	Switch between open windows

Graphic elements toolbar

	Rectangle
	Picture
	Polyline
	Polygon
	Arc
	Ellipse
	Text

Rectangle

The simplest element of the mnemonic, some of the distinctive features are the following:

• Ability to define the contained text, the properties group text on the properties panel.

• Ability to define a texture, the property texture in the group appearance. Any image from the image library can be used as a texture (see Images library).

The example of rectangle with texture /IMAGES/textures/grey_brick.jpg:

The example of rectangle with properties:

• text = “Conveyor №1А”
• transparent = true
• border_style = none

Picture

The element is used to add images from the image library to the mnemonic (see Images library). The image file is determined by the property image. Also it has most of the properties allowing to determine the type of frame, visibility, etc

Polyline

It serves for drawing of various types of lines on the scheme. The geometric location of the line is determined by its anchor points. When added to the scheme, it contains only two anchor points and looks like this:

In order to add the anchor points, it’s necessary, holding down the Shift key, to click with a mouse on the point, next to which it needs to add the another one. The line with 3 dots :

To delete the anchor point, it’s necessary, holding down the Ctrl key, to click with a mouse on the point to be deleted.

Thus, the drawing a line on a mnemonic is reduced to adding/removing its anchor points and to their positioning in the diagram by dragging.

The line thickness is set by the property line_width. The gradient definition setting is supported, the property gradient sets the gradient leve, it can take the values from 0 to 0.5. An example of the line with properties:

• line_width = 20
• color = #7f7f7f
• gradient 0.15

The possibility of the gradient setting allows to simplify the drawing of pipe connections.

Polygon

It serves for drawing the complex geometric figures. The shape of the figure is determined by its anchor points. When adding to the mnemonic, the polygon initially contains 3 anchor points and it looks like this:

In order to add the anchor points, it’s necessary, holding down the Shift key, to click with a mouse on the point, next to which it needs to add the another one. The polygon with 4 dots :

The creating of the complex geometric figures on a mnemonic is reduced to adding/ removing of its anchor points and to their positioning in the diagram by dragging.

The gradient setting is supported, the property gradient. The property can take values:

• vertical – vertical gradient
• horizontal - horizontal gradient

The example of the polygon with vertical gradient:

The possibility of the gradient setting allows to simplify the drawing of different tanks, cisterns etc.

Arc

The element is used to draw a sector of a circle. The sector is defined by the following properties:

• angle. The filling angle can take values from 1 to 360. An arc with a filling angle at 360 corresponds to a circle
• rotation. The angle of arc rotation clockwise. It takes values from 0 to 360 inner_radius. The radius of the inner circumference of the arc. It can take values from 0 to the value limiting by the width and height of the figure. An arc with inner_radius equal to 0 degenerates into a sector.

The gradient setting is supported, the property gradient. The example of the arc with properties:

• angle = 180
• rotation = 180
• inner_radius = 30
• gradient = true

Ellipse

The element is used to draw the figures having an ellipse shape or its derivative. The horizontal and vertical radii of the ellipse are determined by the width and height of the figure. The ellipse with the same height and width degenerates into a circle. The gradient setting is supported, the property ‘gradient’. The example of the circle with gradient:

Text

The element “Text” is used for adding the inscriptions to the scheme. Compared to the “Rectangle” element, which can also contain the text, the element has more capabilities, such as the angle of rotation, but it’s more difficult for the execution environment. If the capabilities of the “Rectangle” element are sufficient for solving the problem, then it is recommended to use this element, since it requires less of resources from the execution environment. An example of an element ‘text with properties’:

• text = “Conveyor №1А”
• rotation = 0

Control elements panel

	Input/output field
	Button
	Bar (bar diagram)
	Checkbox
	Messages indicator
	Runner(Slider)
	Dropdown list
	Alarm list
	Trends

Input/output field

The element is used to represent some numerical information on a mnemonic, as well as to input the values by the operator. When added on the mnemonic, the element looks like this:

The appearance settings allow to define the text and background color, background transparency, font size and type, border type, and others. The type of the element (output or input/output) is determined by its property type (properties group value). The property can take the following values:

• none - the element is an output field and it cannot accept the values input from the operator,
• direct - the element can accept the values input from the operator. The input is performed directly to the element itself,
• panel - the element can accept the values input from the operator. The input is performed through the auxiliary panel.

For the elements with the selected input type panel by clicking on it in runtime, the auxiliary panel is called to input the values. If the upper and lower limits of the accepted value are not defines, the panel looks like this:

If for the element are defined the properties:

• min – lowest value
• max - highest value

The auxiliary panel looks like this:

The buttons “-10%”, “-5%”, “+ 5%”, “+ 10%” allow to add/decrease to the current value the corresponding percentage of the value scale (max - min). The value input is supported through the slider below (see Slider).

The number of signs input after the comma is adjusted by the properties:

• digits. The explicit setting of the number of characters.
• length. The optimal number of symbols for the field.

If the number of signs input after the comma is not explicitly set up through the property digits, then it is calculated based on the optimal number of signs in the field (length). For example, if length = 4 and the value = 1.23456, then in the field1 will be displayed 1.234, but if the value = 12.3456, then in the field will be displayed 12.34

Button

The element is used mainly to determine some reaction to the click, for example, starting/ stopping of the unit. When added to the mnemonic, it looks like this:

The appearance setting allow to define the text and background color, background transparency, font size and type, border type, and others.

Bar

The element is used to display the numerical values in the form of a bar diagram. When added to the mnemonic, the element looks like this:

The appearance setting allow to define the diagram column color, background color, transparency, border type, and others. For the correct work of the element, it is necessary to determine the top and the bottom of the displayed value scale (properties group value):

• min - lowest value
• max - highest value

The bar can have a vertical and horizontal location, which is defined by the property orientation (properties group appearance). An example of the horizontal bar:

Checkbox

The element is used to display and to receive the values of type ‘bool’ from the operator. When added to the mnemonic, the element looks like this:

Messages indicator

The element is used to indicate the presence of active messages by tag or group of tags (see Message system). Under the edit mode, the element looks like this:

Under the runtime mode, the element is integrated into the message system. If according to the associated tag (group) the active messages such as alarm, warning or error are absent, then the element is hidden. When a message appears, the element appears and flashes until the message is acknowledged by the operator. After acknowledging the message, the element stops flashing, but continues to be displayed until the event that caused the message, goes away. The element appearance varies depending on the type of message:

	- Error
	- Alarm
	- Warning

If according to the associated tag (group) there are several messages, the element takes the appearance in accordance with the message that has the biggest priority: (by descending: ‘error, alarm, warning’). The unacknowledged messages have the higher priority than the acknowledged ones. It means that if according to the tag (group) there are at the same time both messages of type error and warning, but the message error is already acknowledged, then the element continues to flash and to have the type warning, despite the fact that error has the higher priority.

To bind an element to a tag or group of tags (folder), it’s necessary to define its property group (properties group value). ATTENTION! It needs to define only the value of the property, without setting a dynamic binding for it (see Binding of elements properties to tags). If an element is attached to a group of tags, then it will be animated when messages appear according to any tag in this group.

Slider

The element “Slider” is an input/output element. It allows the operator to input a value by dragging the active element within a specific scale value. The top and the bottom of the value scale are set by the following properties (properties group value):

• min - lowest value
• max - highest value

The element looks like this:

The element can have a horizontal and vertical position, which is defined by its property orientation (properties group appearance). An example of the vertical slider:

Drop-down list

The element is used to select the values from the list of the possible ones by the operator. The list of possible values is determined by the property options (properties group value). The selected value is determined by the property value, whose value corresponds to the ordinal number of the option (counting from 0). Under runtime mode, the element looks like this:

List of messages

The element is used to display the active messages according to the tag or group of tags (see Messages system). When added to the mnemonic, the element looks like this:

To bind an element to the tag or group of tags (folder), it needs to define its property group (property group value). ATTENTION! It needs to define only the value of the property, without setting a dynamic binding for it (see Binding of elements properties to tags). If an element is bound to a group of tags, then it will display the messages related to any tag in this group.

Under runtime mode, the element is integrated into the message system and, if there are the active unacknowledged messages, it looks as follows:

Under runtime mode, using this element, the operator can view the current active messages (the paging is supported), to acknowledge the individual messages (“ACK” button), to perform the group acknowledgement (“ACK ALL” button) (see Operator manual).

Trends

The element is used to display the archival information in the form of graphs that are updated with a specified frequency (by default, once per second). Under edit mode, the element looks like this:

Under runtime mode, the element allows the operator to observe the dynamics of the monitored parameters. The operator can choose the length of the displayed interval, to view the history, to set the scale, to print the graph or the file, etc. (see Operator manual). The composition of the output parameters and the trend colors for them are set by the property archives (properties group value), for example:

If the color for the trend is not explicitly defined, then it will be selected automatically. The bound archives must already be created (see Archiving system). ATTENTION! It needs to determine only the value of the property, without setting a dynamic binding for it (see Binding of elements properties to tags). The properties of the element, allowing to determine its appearance and behavior under the execution mode:

Group ‘appearance’ Group ‘toolbar’

grid	On/Off of the grid display
grid_x	The minimum grid step along the time axis. The step is calculated automatically taking into account the element geometry, the scale range and the specified minimum step value.
grid_y	The minimum grid step along the parameter axis. The step is calculated automatically taking into account the element geometry, the scale range and the specified minimum step value.
legend	Type of the legend display. The legend allows, by cursor navigation, to display the information on a specific point in time on the trend. The displayed information contains the time and values of the monitored parameters at the highlighted point in time, for example: The property can take values: onmousebeyond - the legend is displayed by the mouse navigation at the element always - the legend is always displayed follow - the legend is displayed next to the mouse cursor. never - do not display the legend
cycle	The periodicity of the graph updating under runtime mode. The value is set in seconds.
max_points	The maximum number of points per archive at which the mode of the periodic graph updating is available. The periodic updating of graphs requires a certain amount of computing resources from the client machine. If the client station does not have enough power (tablet, smartphone), then the frequent updating of a large number of graphs covering a long time interval, can lead to delays in the runtime environment. The property ‘max_points’ allows to set a limit after which exceeding the automatic update mode will be unavailable. The limit is set as the maximum number of points per archive, and is calculated by the formula: max_points = period / cycle where: period - the length of the period covered by the graph (in seconds) cycle – the update periodicity (in seconds) Thus, if the operator chooses the period of coverage = 1 day, and the update periodicity = 1 sec., the automatic update mode will be unavailable. 3600 = 86400/24 If max_points = 3600, and the coverage period = 1 day (86400 seconds), the update mode will be available when the update periodicity (cycle) is 24 seconds or more. Usually, with max_points = 3600, even the weak client devices allow to display up to 30 archives per trend without observing of the slowdowns in the runtime environment.
Group 'scale’
time_step	The time step used when determining the trend coverage period. The coverage period is calculated by the formula period = time_step * time_factor
time_factor	It determines the number of time steps that make up the trend coverage period. The coverage period is calculated by the formula: period = time_step * time_factor
range_max	It sets the upper limit of the trend scale in the parameter dimensionality. If not specified, the limit is calculated automatically based on the maximum value of the parameter(s) for the displayed period.
range_min	It sets the lower limit of the trend scale in the parameter dimensionality. If not specified, the limit is calculated automatically based on the minimum value of the parameter(s) for the displayed period.
toolbar_visible	It sets the availability of the control panel by the element in runtime mode. If the property = false, the selection functions of interval, the scale settings and others, will be unavalaibale to the operator, the settings defined when mnemonic scheme creating, will be used for the element.
select_archives	By default, the operator can independently choose the parameters, displayed on the graph, the “Trend selection” button (see Operator manual): In order to block this function for the runtime mode, it needs to set the property value: select_archives = false
set_period	By default the operator can set the time period, covered by the trend, the following button panel is used for this (see Operator manual) : In order to block the possibility to set the period in the runtime mode, it needs to set the property value: set_period = false
set_scale	By default, the operator can determine the top and the bottom of the parameter scale (properties range_max and range_min). This operation is performed with the button “Scale setting” (see Operator manual): In order to block this function in the runtime mode, it needs to set the property value: set_scale = false
appearnce	By default, the operator can independently set the parameters of the appearance of the element through the following dialog: The dialog is displayed by the button “Settings” (see Operator manual): In order to block the change of settings in runtime mode, it needs to set the property value: appearance = false
export	By default, the operator can display the trend to print or to download the data to the file format .csv or .xml. The following button panel is used for this (see Operator manual): In order to block this possibility, it needs to set the property value: export = false

Elements patterns panel

The panel contains a set of created elements patterns and allows to add them to the mnemonic (see Creating elements patterns). The Faceplate development environment already includes the pattern options for the following standard elements:

• AI - analog parameter,

• SP – element for the input of setpoint,

• MOTOR – element for display of state and control by the drive,

• VALVE - element for display of state and control by the valve (gate valve),

• PIDAO - element for display of state and control by the PID-controller with analog output,

• PIDDO - element for display of state and control by the PID-controller with discrete output

When adding the element pattern to the mnemonic, the dialog of its binding to the tag (tag group):

To select a tag (group of tags), it needs to select it in the right part of the dialog and to press the “OK” button. As a result, all the bindings, defined in the element pattern (see Creating elements patterns) will be automatically bound to the selected tag. An example of the analog parameter pattern added to the mnemonic (see Analog parameter AI):

It’s possible, through the properties panel, to edit the properties of the added element, to redefine the appearance of its constituent sub-elements, to set the name of the parameter, of the unit of measurements and so on.

Elements properties panel

The panel is used to access the properties of the elements of the mnemonic. The properties of elements determine their location on the mnemonic, dimensions, appearance, bindings, and so on. The properties panel allow to edit these parameters:

In the left part of the panel, is displayed a tree containing the properties of the selected elements. The properties of each element are grouped together, for example, ‘geometry’, ‘appearance’, etc. When a group is selected in the right part of the panel, is displayed a table with a list of properties belonging to this group. Each line refers to a separate property and contains:

• Property name
• Property value

• Dynamic binding of a property to the tag (see Binding of elements properties to tags).

If an element itself represents a group (see Grouping elements), it contains a path node subelements, where there are all its sub-elements. When the opening of the sub-element, the access to edit its properties appears. The elements and group properties are highlighted in bold type, they include the properties with dynamic bindings (see Binding of elements properties to tags).

Images library

When creating the mnemonic schemes, the use of the ready-made images from files is supported. It is allowed to use the files of formats supported by the browser (.jpg, .png, .bmp, gif, etc.). To use an image in the project, the file must be preloaded into the image library. To call the library, click on the button “Image Library” on the toolbar (see Tool bar):

As a result, the image library dialog opens:

Using this dialog, it’s possible to upload the new images to the library, to create the folders, the subfolders, etc. On the left side of the dialog there is a folder tree. The folders can contain the subfolders and the images. When the folder select, its content is displayed in the right part of the window. At the top of the dialog there is the control panel:

	To update the content of the curent folder
	Input of the way to the required element
	Creating a new folder in the current folder
	Unload of a new image in the current folder (see Adding images to the library)
	Delete the selected elements
	The export of the images (see Export/Import Images)
	The import of the images (see Export/Import Images)

Upload images to the library

In orer to add a new image to the library, press on the control panel the button “Upload image”:

Then the dialog of the file with image select opens:

The file selection using the explorer, is supported (“Select file” button) or drag-and-drop operations, i.e. dragging a file into the area labeled “No file selected”. After selecting the file, the “OK” button will become active, when clicking it, the selected file will be loaded. Upon completion of the download, the user must input a name for the added image or accept as a name, the name of the uploaded file, confirming it by pressing Enter:

In order to rename the element (image or folder), press with mouse on its name, then the input field appears, where it’s possible to rename the element.

Export/Import images

To transfer the image library between projects, for example, from a test station or a developer’s station to a combat server, it’s possible to use the image library export/import mechanism. To export a folder with images, it needs to select in the right part of the dialog window, the folder being transferred, and click the “Export” button on the control panel:

Then the browser will load the file with the .iex extension, which can be imported into another Faceplate project. To import the images into the library, press the “Import” button on the control panel:

Then the dialog of the file select opens:

The file selection using the explorer, is supported (“Select file” button) or drag-and-drop operations, i.e. dragging a file into the area labeled “No file selected”. After selecting the file, the “OK” button will become active, when clicking on it, the images from the selected file will be imported. When importing images, is saved the folder structure of the project where the export file is generated, regardless of which folder is currently active. ATTENTION! When importing, there should be no intersection of the paths of imported elements with the existing ones. If there are already such conflicts, the import operation will be canceled completely.

Creating elements patterns

The use the elements patterns allows to automate the developer actions when working with standard elements. If on the mnemonics are used the one-type elements, then it is advisable to create a pattern for the repeated elements, where it’s possible to predetermine the appearance of the constituent subelements, the required bindings, the events and the control panels being called (see Binding of elements properties to tags, Event binding, Calling control panels). The created pattern can be added later to the mnemonic scheme from the elements patterns panel (see Elements patterns panel). To create a new pattern, it needs to open the list of options on the toolbar (see Tool bar):

and to select the option “Patterns”, then the dialog of select/creating of a pattern opens:

From the dialog it’s possible to edit, to rename or to delete the already existing patterns or to create the new one. When the option select “Create”:

The user needs to define the name of the pattern being created:

After that, will open the workspace, similar to the area for creating mnemonics, but by default, it’s has the smaller size (200 X 200):

The creating a pattern is performed in a graphic editor using the same means and tools as when creating a mnemonic scheme. The elements from the graphic elements panel (see Graphic elements panel) or from the control elements panels (see Control elements panel) are added to the pattern, is performed their positioning, the external appearance setting, etc. Everything is the same as when working with mnemonic schemes. Theer are some differences in the creation of the properties bindings and the events bindings.

Bindings attribution for pattern elements

As has been said above, the pattern respresents itself a standard element which can be added to the mnemonics. It means that the pattern needs to be calculated for the work with the definite structure of data: a type, but not with a specific tag or a group. For example, the pattern of the analog element(AI) is designed for the work with the tags created on the pattern AI and, consequently, that have the fields set, defined by this pattern. So, when the creating of the binding for the element pattern, itsn’t a specific tage is assigned, but only its type is indicated. The binding to the specific tage is performed when the adding of the pattern on the mnemonic (see Elements patterns panel). The dialog of binding creating in the pattern edit mode looks like this:

The field “Tag” contains 2 elements: assignment a ‘postfix’ and assignment a ‘tag type’. In the mentioned example of the dialog it is indicated that the property of the element value is linked to the field of the tag value, which is of type AI. When adding this pattern to the mnemonic scheme, it will be suggested to the user to select to which particular tag to link the element being added and, as a result, this binding will look like this:

When the adding the element pattern to the mnemonic, all bindings defined in the pattern, are automatically linked to the tag selected during the process of adding. The same principle is used to bind the events: if in the reaction to an event it’s necessary to change or to get a tag field, then it is not a specific tag that is indicated, but only its type, a specific tag is already determined in the process of adding a pattern to a mnemonic scheme. For the rest, the definition of bindings for elements pattern doesn’t differ from creating bindings for mnemonic elements, the use of scripts, mapping and other mechanisms available when editing mnemonic schemes is supported.

In general, a pattern can be designed to work not with one separate tag, but with a group of tags. For example, if a technological unit has a more complex structure, and not one but several tags are required to work with it, then is possible to create a group of tags (folder), which will include tags related to this unit. For other units of the same type, the similar groups of tags (folders) will be created. For the considered example, the element pattern for the controlled unit should work not with one but with several tags that are included in a group of a certain structure. In this case, when adding a pattern to a mnemonic scheme, the user specifies not a separate tag, but a group containing the necessary tags. If the pattern is designed to work with a group of tags, then when creating the bindings for elements pattern, it needs to specify with which tag in this group the bindings should work. This is done by specifying the postfix:

In the mentioned example of the dialog, it is indicated that the property of the element background_color is linked to the field of a tag state of type CONTROL, which has the path Line 1/Conveyor 1 relative to the group folder to which the element will be linked. When the adding a pattern to the mnemonic, it needs to specify, as a binding, the group that contains the required tags, and is the root one for this pattern. As a result, the above binding will look like this:

The group selected in the process of adding a pattern to the mnemonic schemeь defines the prefix for the bindings contained in the pattern, when the making up a binding to the already specific tag, the prefix is concatenated with a postfix defined in the pattern for the binding, resulting in the full path to the specific tag. If in the pattern in the field for the postfix assignment is specified not a relative, but a full path to the tag, then during the binding process will be used this path without adding to it the prefix.

Analog parameter (AI)

The element pattern is used to display the information on the analog parameter. The pattern is designed to work with tags of type AI (see AI. Аnalog parameter). When added to the mnemonic, the element of this pattern looks as follows:

The element includes:

• the output field containing the value linked to the field tag
• the elements containing the text with parameter name and units name
• the indicator of messages on the tag (see Messages indicator).

To the event ‘click on the element’ is linked a call of the control panel AI (see Analog parametr (AI).

Actuating mechanism (ACTUATOR)

The element is designed to work with a standard structure ACTUATOR (see ACTUATOR. Actuating mechanism). When clicking on the element, in runtime mode is called the actuating mechanism control panel (see ACTUATOR. Actuating mechanism).

	ACTUATOR_N
	ACTUATOR_E
	ACTUATOR_W

The constitutive subelements:

	Current condition of the actuating mechanism (AM): AM is closed (open less than 5%) AM is in the intermediate position (open more than 5%, less than 95%) AM is open (more than 95%)
	AM opening percent
	Condition of AM drive: AM is stopped Movement to the closing Movement to the opening
	Operating mode of AM : automatic – the element is visible manual - the element is invisible
	Messages indicator (see Messages indicator)

Drive (MOTOR)

The element is designed to work with a standard structure SWITCH (see SWITCH. Discrete control). When clicking on the element, in runtime mode is called the drive control panel (see Drive (MOTOR)).

This pattern can be used as a basis for working with other components with two-position control (on/off), if the SWITCH structure is used for them. To adapt for other components, it is enough to create a copy of the pattern and to change the image files for the active elements.

The constitutive subelements:

	Current condition of the drive: The drive is stopped The drive is turned on
	Operating mode of AM : automatic – the element is visible manual - the element is invisible
	Messages indicator (see Messages indicator)

Reversible drive (MOTOR_R)

The element is designed to work with a standard structure REVERSE (see REVERSE. Reevrsible drive). When clicking on the element, in runtime mode is called the drive control panel (see Reversible drive (MOTOR_R).

The constitutive subelements:

	Current condition of the drive: The drive is stopped The drive is turned on The drive is turned on in the reversible direction
	Operating mode of AM : automatic – the element is visible manual - the element is invisible
	Messages indicator (see Messages indicator)

Two-way valve (VALVE_1DO)

The element is designed to work with a standard structure VALVE (see VALVE. Valve). When clicking on the element, in runtime mode is called the two-way valve control panel (see Two-way valve (VALVE_1DO).

The element options:

	VALVE_1DO_N
	VALVE_1DO_E
	VALVE_1DO_W

The constitutive subelements:

	Current condition of the valve: Valve is closed Valve is open
	Operating mode of AM : automatic – the element is visible manual - the element is invisible
	Messages indicator (see Messages indicator)

Valve with three-point control (VALVE_2DO)

The element is designed to work with a standard structure VALVE (see VALVE. Valve). When clicking on the element, in runtime mode is called the control panel of the valve with three-point control (see Valve with thee-point control (VALVE_2DO). The element options:

	VALVE_2DO_N
	VALVE_2DO_E
	VALVE_2DO_W

The constitutive subelements:

	Current condition of the valve: Valve is closed Valve is in the intermediate position Valve is open
	Condition of the valve drive: Valve is stopped Movement to the closing Movement to the opening
	Operating mode of AM : automatic – the element is visible manual - the element is invisible
	Messages indicator (see Messages indicator)

Relay controller (TRIGGER)

The element is designed to work with a standard structure TRIGGER (see TRIGGER. Relay controller ). When clicking on the element, in runtime mode is called the control panel of the relay controller (see Relay controller (TRIGGER)).

The constitutive subelements:

	Current value of the controlled parameter:
	Measurement units of the controlled parameter
	Current value of the setpoint. The color of the texte changes depending on the current control mode and the setpoint source: Manual control mode Automatic control mode, the setpoint source is an operator Automatic control mode, the setpoint source is a software (cascade control or similar)
	Condition of the control element: turned off turned on
	Messages indicator (see Messages indicator)

Analog PID - controller (PID_AO)

The element is designed to work with a standard structure PID_AO (see PID_AO. Analog PID-controller). When clicking on the element, in runtime mode is called the control panel of the PID controller (see PID_AO. Analog PID-controller (PID_AO)).

The constitutive subelements:

	Current value of the controlled parameter:
	Measurement units of the controlled parameter
	Current value of the setpoint. The color of the texte changes depending on the current control mode and the setpoint source: Manual control mode Automatic control mode, the setpoint source is an operator Automatic control mode, the setpoint source is a software (cascade control or similar)
	Messages indicator (see Messages indicator)

Discrete PID - controller (PID_DO)

The element is designed to work with a standard structure PID_DO (see PID_DO. Discrete PID-controller). When clicking on the element, in runtime mode is called the control panel of the PID controller (see Discrete PID-controller (PID_DO)).

The constitutive subelements:

	Current value of the controlled parameter:
	Measurement units of the controlled parameter
	Current value of the setpoint. The color of the texte changes depending on the current control mode and the setpoint source: Manual control mode Automatic control mode, the setpoint source is an operator Automatic control mode, the setpoint source is a software (cascade control or similar)
	Messages indicator (see Messages indicator)

Сreating Control Panels

Using the control panels allows to unload the mnemonic scheme from the auxiliary controls that the operator can display on demand in the secondary pop-up window (see Calling control panels). For example, an the PID controller element on the mnemonic may contain the minimum of the necessary information: current value, setpoint, operating mode, and all other information, relating to this circuit, including its settings, controls, technological corridors, etc. (see Analog PID-controller) will be displayed in the secondary pop-up window when clicking on this element. These pop-up windows are called control panels.

The control panels as well as elements patterns (see Creating elements patterns) are designed to work with one-type data structures, for example, to work with a certain type of tags. To create a new control panel, it’s necessary on the toolbar of the graphic editor to open the options list for the button ‘open’ (see Tool bar):

And to choose the option “Panels”, then the dialog of select/creating panel opens:

It’s possible from this dialog, to open for the edit, rename or delete the already existing panles or to create the new one. When select the option “Create”:

The user is to set the name of the created panel:

After that, the workspace will open, similar to the area for creating the mnemonic diagrams, but by default, of the smaller size (500 X 400):

The сreating a control panel is performed in a graphic editor using the same means and tools as when creating a mnemonic scheme. The elements are added to the panel from the graphic elements panel (see Graphic elements panel) or from the control panel (see Control bar), are performed their positioning, the appearance adjustment, etc. Everything is the same as when working with mnemonic schemes. Several tabs can be created for the panel. To do this, it’s necessary to define the names and the order of tabs in the property tabs (group of properties appearance) of the panel itself, for example:

The panel will look like this:

Each tab represents a separate workspace that is activated when clicking on the tab name.

There are some differences in the creating of properties bindings and event bindings for itesm panel, from the process of the creating the mnemonic schemes. As well as the elements patterns, the panels are designed to work with a specific data structure: a type, therefore all the features of creating the bindings for elements patterns are also applied to the process of creating the panels (see Defining binding for pattern elements).

If the element pattern is linked to a specific tag (group of tags) during the development of a mnemonic diagram, when its adding, the control panel binding is performed in the runtime environment when the operator clicks on the element for which the panel call is defined (see Calling control panel). The event by which the panel will be called, and the tag to which it is linked when calling, is determined by the element property panel (properties group panel) (see Calling control panel).

Analog parameter (AI)

The panel is designed to work with tags of type AI (see AI. Analog parameter). The panel serves to set the boundaries of technological corridors for the controlled analog parameter and looks like this:

The description of the constitutive elements:

	Top of the parameter scale.
	Current value of the parameter.
	Hysteresis zone width.
	Bottom of the parameter scale.
	Top alarm limit of the parameter. Checkbox is used to turn on/turn off the border control.
	The Top warning limit of the parameter. Checkbox is used to to turn on/turn off the border control.
	Bottom warning limit of the parameter. Checkbox is used to to turn on/turn off the border control.
	Bottom alarm limit of the parameter. Checkbox is used to to turn on/turn off the border control.

Actuating mechanim (ACTUATOR)

The panel is designed to work with tags of the ACTUATOR type (see ACTUATOR. Actuating mechanism). The panel serves to control the actuating mechanism:

The description of panel elements:

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see ACTUATOR. Actuating mechanism), then the operator can change the control mode using this element.
	Current position of the actuating mechanisme: AМ is closed (opened less than 5%) AM is in the intermediate position (open more than 5%, less than 95%) AM is open (more than 95%)
	AM opening percent
	Condition of AM drive: AM is stopped Movement to the closing Movement to the opening
	AМ position setting. If the mechanism is in manual control mode, the element is used to set the setpoitn on AM position. In automatic control mode, the element isn’t active.
	The buttons to quickly decrease/increase the setpoint by the appropriate percentage. In automatic control mode, the buttons are not active.

Drive (MOTOR)

The panel is designed to work with tags of the SWITCH type (see SWITCH. Discrete control). The panel serves to control the two-way drive (on/off).

This panel can be used as a basis for working with other on-off control components (on/off), if they use the SWITCH structure. To adapt for other components, it is enough to create a copy of the panel and to change the image files for the active elements.

The description of elements panel:

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see SWITCH. Discrete control ), then the operator can change the control mode using this element.
	Current condition of the drive: The drive is stopped The drive is turned on
	"On" button. In automatic control mode, the button isn’t active.
	Shutoff button. In automatic control mode, the button isn’t active.

Reversible drive (MOTOR_R)

The panel is designed to work with tags of the REVERSE type (see REVERSE. Reversible drive ). The panel serves to control the reversible drive.

The description of elements panel:

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see SWITCH. Discrete control ), then the operator can change the control mode using this element.
	Current condition of the drive: The drive is turned off The drive is turned on in forward direction The drive is turned on in reversible direction
	The drive "On" button in forward direction. In automatic control mode, the button isn’t active.
	The drive shutoff button. In automatic control mode, the button isn’t active.
	"On" button of the drive in reversible direction. In automatic control mode, the button isn’t active.

Two-way valve (VALVE_1DO)

The panel is designed to work with tags of the VALVE type (see VALVE. Valve). The panel serves to control the two-way valve (open/closed).

The description of elements panel:

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see VALVE. Valve), then the operator can change the control mode using this element.
	Current condition of the valve: Valve is closed Valve is open
	The valve opening button. In automatic control mode, the button isn’t active.
	The valve closing button. In automatic control mode, the button isn’t active.

Valve with three-point control VALVE_2DO)

The panel is designed to work with tags of the VALVE type (see VALVE. Valve). The panel serves to control the valve with three-point control.

The description of elements panel:

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see VALVE. Valve), then the operator can change the control mode using this element.
	Current condition of the valve: Valve is closed Valve is in the intermediate position Valve is open
	Condition of the valve drive: Is stopped Movement to the closing Movement to the opening
	The valve opening button. In automatic control mode, the button isn’t active.
	Valve button shutdown. In automatic control mode, the button isn’t active.
	The valve closing button. In automatic control mode, the button isn’t active.

Relay controller (TRIGGER)

The panel is designed to work with tags of the TRIGGER type (see TRIGGER. Relay controller). The panel contains 3 tabs and serves to adjust and to control the relay controller.

Tab “Control”

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see TRIGGER. Relay controller), then the operator can change the control mode using this element.
	Current value of the setpoint, possible options: “Operator” “Program” If the setpoint source selection is not locked (field lock_auto see TRIGGER. Relay controller), then the operator can change the setpoint source using this element.
	Current value of the controlled parameter:
	Measurement units of the controlled parameter
Group “Setpoint”:
	Current setpoint by parameter. If the source of the setpoint is an operator, then the element is active and serves to enter the value of the setpoint.
	Buttons to quickly decrease/increase setpoint by a corresponding percentage of the setpoint range (field setpointH and setpointL see TRIGGER. Relay controller). Under the setpoint source “Program”, the buttons are not active.
Group “Manual control ”:
	The “On” button of the control element. In automatic control mode, the button is inactive.
	The “Off”-button of the control element. In automatic control mode, the button is inactive.
	Current position of the control element: turned off turned on

Tab “Setting”

The tab contains the input fields for correction of the controller setting parameters:

• “Hysteresis”. The width of the hysteresis zone for the regulator.
• “Smoothing”. The value that determines the smoothing amount of the adjustable parameter. It is assumed that a damper is used for smoothing.

Tab Limits

The tab is used to set up the limits of technological corridors for an adjustable parameter:

The description of tab elements:

	Top of the parameter scale.
	Current value of the parameter.
	Hysteresis zone width for the limits check function.
	Bottom of the parameter scale.
	Top alarm limit of the parameter. Checkbox is used to turn on/turn off the border control.
	The Top warning limit of the parameter. Checkbox is used to to turn on/turn off the border control.
	Bottom warning limit of the parameter. Checkbox is used to to turn on/turn off the border control.
	Bottom alarm limit of the parameter. Checkbox is used to to turn on/turn off the border control.

Analog PID - controller (PID_AO)

The panel is designed to work with tags of the PID_AO type (see PID_AO. Analog PID- controller ). The panel contains 4 tabs and serves to adjust and to control the PID controller.

Tab “Control”

	Current operating mode, possible options : “Manual” “Аutomat” If the mode selection is not locked (field lock_auto see PID_AO. Analog PID-controller), then the operator can change the control mode using this element.
	Current value of the setpoint, possible options: “Operator” “Program” If the setpoint source selection is not locked (field lock_auto see PID_AO. Analog PID-controller), then the operator can change the setpoint source using this element.
	Current value of the controlled parameter:
	Measurement units of the controlled parameter
Group “Setpoint”:
	Current setpoint by parameter. If the source of the setpoint is an operator, then the element is active and serves to enter the value of the setpoint.
	Buttons to quickly decrease/increase setpoint by a corresponding percentage of the setpoint range (field setpointH and setpointL see PID_AO. Analog PID Controller). Under the setpoint source “Program”, the buttons are not active.
Group “Manual control ”:
	The setting of the control action. If the controller is under manual mode of control, the elment is used to input hte values of the control action. In automatic mode of the control the elemnt is inactive.
	Buttons to quickly decrease/increase of the control action by a corresponding percentage of the range (fields setpointH and setpointL see PID_AO. Analog PID Controller). In automatic control mode, these buttons are inactive.

“Settings” tab

Tab contains the input fields for adjusting setting parameters of the controller:

• “П”. Amplifier gain.
• “И”. Integration constant.
• “Д”. Differentiation constant.
• “Anti-aliasing ”. Value that defines the amount of anti-aliasing of adjusted parameter. It is supposed that damper will be used for anti-aliasing.

“Input” tab

Tab is used for setting the limits of technological corridors for adjusted parameter:

Tab items description:

	Parameter scale top. (ST)
	Current parameter value.
	Hysteresis width for the function of controlling the parameter limits.
	Parameter scale bottom. (SB)
	The top emergency parameter limit. Checkbox serves for turning on/off limit control. (TE)
	The top warning parameter limit. Checkbox serves for turning on/off limit control. (TW)
	The bottom warning parameter limit. Checkbox serves for turning on/off the limit control. (BW)
	The bottom emergency parameter limit. Checkbox serves for turning on/off the limit control. (BE)

“Output” tab

The tab serves for setting the limits of technological corridors for regulator control:

Tab items description:

	PTop of control action range.
	Current value of control range.
	Hysteresis width for the function of controlling the control action limits.
	Bottom of control action range.
	Top emergency limit of control action. Checkbox serves for turning on /off the limit control.
	Top warning limit of control action. Checkbox serves for turning on /off the limit control.
	Bottom warning limit of control action. Checkbox serves for turning on /off the limit control.
	Bottom emergency limit of control action. Checkbox serves for turning on /off the limit control.

Discrete PID-regulator (PID_DO)

The panel is designed to work with tags like PID_AO (see PID_DO. Discrete PID-regulator). Panel contains 4 tabs and serves for configuring and controlling PID regulator. “Control” tab

Tab items description:

	Current control mode, available options: “Manual” “Automatic” If the mode selection is not blocked (field lock_auto see PID_DO. Discrete PID-regulator), the operator may change the control mode with the use of this element.
	Current source of setup, available options: “Operator” “Program” If the selection of setup source is not blocked (field lock_setpoint see PID_DO. Discrete PID-regulator), the operator may change the setup source with this element.
	Current value of regulated parameter
	Measure unit of regulated parameter
“Setup” group:
	Current setup for parameter. If the setup source is the operator, the element is active and serves for inputting the setup value
	Buttons for fast decreasing/increasing the setup to corresponding percent of the setup range (fields setpointH and setpointL see PID_DO. Discrete PID-regulator). The buttons are not active if the setup source is on “Program” mode.
“Manual control” group:
	Current value of control action (% of opening of executive mechanism)
	The open button of executive mechanism. The open command is active while operator holds the button pushed. The button is not active in automatic mode.
	Close button of executive mechanism. Close button is active while operator holds the button pushed. The button is not active in automatic mode.
	Indicator of opening of executive mechanism. Indicator becomes visible when there is a signal of opening movement (field opening see [PID_DO. Discrete PID-regulator](http://docs.faceplate.io/docs/en/work_with_tags#pid-do-discrete-pid-controller)). If executive mechanism is in limiting position (field opened) the indicator changes color to yellow.
	Indicator of closing of executive mechanism. Indicator becomes visible when there is a signal of closing movement (field closing see PID_DO. Discrete PID-regulator). If executive mechanism is in limiting position (field closed) the indicator changes color to yellow.

“Settings” tab

Tab contains input fields for adjusting the setting parameters of regulator:

• “П”. Amplifier gain.
• “И”. Integration constant.
• “Д”. Differentiation constant.
• “ Anti-aliasing ”. Value that defines the amount of anti-aliasing of adjusted parameter. It is supposed that damper will be used for anti-aliasing.

“Input” tab

Tab serves for configuring the limits of technological corridors for adjusted parameter:

Tab items description:

	Parameter scale top. (ST)
	Parameter scale top.
	Current parameter value.
	Parameter scale bottom.
	Top emergency parameter limit. Checkbox serves for turning on/off the limit control.
	Top warning parameter limit. Checkbox serves for turning on/off the limit control.
	Bottom warning parameter limit. Checkbox serves for turning on/off the limit control.
	Bottom emergency parameter limit. Checkbox serves for turning on/off the limit control.

“Output” tab

Tab serves for configuring the limits of technological corridors for regulator control action:

Tab items description:

	Top of control action range.
	Current value of control action.
	Hysteresis width for controlling the limits of control action.
	Bottom of control action range.
	Top emergency limit of control action. Checkbox serves for turning on /off the limit control.
	Top warning limit of control action. Checkbox serves for turning on /off the limit control.
	Bottom warning limit of control action. Checkbox serves for turning on /off the limit control.
	Bottom emergency limit of control action. Checkbox serves for turning on /off the limit control.