5. Diagrams Development Manual

Last modified by Iaroslav Platonov on 2026/06/08 10:32

Link copied ✓

1. Introduction

CENTO is a multifunctional software platform for data collection, processing, and display. This manual covers the development, configuration, and use of CENTO mimic diagrams - interactive SCADA screens that visualise equipment state and process flows in real time.

Note
This guide assumes familiarity with the CENTO web interface (User Manual) and basic system configuration (Setup Manual).

2. Viewing Mimic Diagrams

Mimic diagrams are accessed by hovering over the Diagrams item in the CENTO main menu and selecting a diagram name from the drop-down list.

Screenshot 2025-12-03 at 20.28.38.png
Figure 2.1. Diagram with a drop-down list of available diagrams

Figure 2.1. Diagram with a drop-down list of available diagrams

Screenshot 2025-12-03 at 20.30.03.png
Screenshot 2025-12-03 at 20.30.27.png
Screenshot 2025-12-03 at 20.30.58.png
Screenshot 2025-12-03 at 20.31.39.png
Screenshot 2025-12-03 at 20.32.16.png
Screenshot 2025-12-03 at 20.32.52.png
Screenshot 2025-12-03 at 20.33.22.png
Screenshot 2025-12-03 at 20.34.06.png
Screenshot 2025-12-03 at 20.47.15.png
Screenshot 2025-12-03 at 20.47.54.png
Screenshot 2025-12-03 at 20.48.29.png
Screenshot 2025-12-03 at 20.49.07.png
Screenshot 2025-12-03 at 20.49.34.png
Screenshot 2025-12-03 at 20.50.14.png
Screenshot 2025-12-03 at 20.50.38.png
Figure 2.2. Measurements in the debug mode

Figure 2.2. Measurements in the debug mode

Screenshot 2025-12-03 at 20.52.16.png
Screenshot 2025-12-03 at 20.52.48.png
Screenshot 2025-12-03 at 20.53.18.png
Screenshot 2025-12-03 at 20.53.43.png
Screenshot 2025-12-03 at 20.55.35.png
Figure 2.3. Dispatch marks interface

Figure 2.3. Dispatch marks interface

Figure 2.4. Calling object measurements

Figure 2.4. Calling object measurements

Screenshot 2025-12-03 at 21.01.06.png
Screenshot 2025-12-03 at 21.01.36.png
Screenshot 2025-12-03 at 21.02.31.png
Figure 2.5. Setpoints

Figure 2.5. Setpoints

Figure 2.6. Setpoint settings

Figure 2.6. Setpoint settings

Figure 2.7. Measurements of the IM object

Figure 2.7. Measurements of the IM object

Screenshot 2025-12-03 at 21.05.55.png
Figure 2.8. Highlighting tag values associated with a technology event

Figure 2.8. Highlighting tag values associated with a technology event

3. Mimic Diagram Management

Diagrams are managed via Settings - Diagrams. The page lists all diagrams with options to create, rename, copy, delete, hide, and check for missing tags.

Figure 3.1. Mimic diagrams page

Figure 3.1. Mimic diagrams page

Screenshot 2025-12-03 at 21.09.11.png
Figure 3.2. New scheme window

Figure 3.2. New scheme window

Screenshot 2025-12-03 at 21.10.28.png
Screenshot 2025-12-03 at 21.11.01.png
Screenshot 2025-12-03 at 21.11.55.png
Screenshot 2025-12-03 at 21.12.22.png
Screenshot 2025-12-03 at 21.12.56.png
Screenshot 2025-12-03 at 21.13.23.png
Screenshot 2025-12-03 at 21.13.55.png
Figure 3.3. Hiding diagrams in the tree

Figure 3.3. Hiding diagrams in the tree

Screenshot 2025-12-03 at 21.15.40.png
Screenshot 2025-12-03 at 21.16.11.png
Screenshot 2025-12-03 at 21.16.38.png
Figure 3.4. Missing tags

Figure 3.4. Missing tags

3.1. Diagram Page Interface

The diagram management page provides the full list of diagrams with search, filters, and per-diagram action buttons.

Screenshot 2025-12-03 at 22.05.04.png
Screenshot 2025-12-03 at 22.08.32.png

4. Diagram Editor

The graphical editor is opened from the diagrams management page. It has three main zones: top main menu, left templates panel, and right properties panel.

Figure 4.1. Editor interface

Figure 4.1. Editor interface

4.1Graphical Editor Interface

Three zones: top main menu (file, view, arrangement); left Categories panel (graphic tools and user templates); right Properties panel (element config).

Figure 4.2. Graphic templates

Figure 4.2. Graphic templates

Figure 4.3. Object properties

Figure 4.3. Object properties

4.2Binding of Parameters: General Information

Select an element and click Setting up rules to open the Component visual settings window for binding tags, channels, or IM attributes.

Figure 4.4. Component visual settings window

Figure 4.4. Component visual settings window

Figure 4.5. Binding an element to a tag or channel

Figure 4.5. Binding an element to a tag or channel

Figure 4.6. Tag and channel tree interface

Figure 4.6. Tag and channel tree interface

4.3Adding Objects to Custom Categories

Custom graphic templates can be saved to user categories for reuse across diagrams.

Figure 4.7. Adding a new component

Figure 4.7. Adding a new component

4.4Importing and Exporting a Library of Elements

Element library transfer (export/import) is only available in editing mode. Use to migrate element libraries between CENTO servers.

Figure 4.8. Export library modal window

Figure 4.8. Export library modal window

Figure 4.9. Import library modal window

Figure 4.9. Import library modal window

Figure 4.10. Imported category

Figure 4.10. Imported category

4.5Auto-replace Active Objects

Swaps all instances of an active object type across a diagram with a different element while preserving bindings.

Figure 4.11. Replace with another element

Figure 4.11. Replace with another element

Figure 4.12. Activation of the Connectable parameter

Figure 4.12. Activation of the Connectable parameter

Figure 4.13. Prompt when trying to connect a line to an active object

Figure 4.13. Prompt when trying to connect a line to an active object

Figure 4.14. Selecting similar elements is not available

Figure 4.14. Selecting similar elements is not available

4.6Auto-replace of Colors Used in Diagrams

Bulk color replacement changes all instances of a specific color on a diagram in one operation.

Figure 4.15. Color replacement modal window

Figure 4.15. Color replacement modal window

4.7Setting Up an Animation Frame for Technological Events

An animation frame can be configured on diagram objects so they visually respond to specific technological events.

Figure 4.16. Scheme settings modal window

Figure 4.16. Scheme settings modal window

4.8Chart Settings

Diagrams support adding charts for real-time parameter monitoring and future data display (planned vs. actual).

Figure 4.17. Charts object

Figure 4.17. Charts object

Figure 4.18. Edit data of chart modal window

Figure 4.18. Edit data of chart modal window

Figure 4.19. Chart in the diagram viewer

Figure 4.19. Chart in the diagram viewer

Figure 4.20. Edit the data of the chart

Figure 4.20. Edit the data of the chart

Figure 4.21. Chart in the diagram viewer

Figure 4.21. Chart in the diagram viewer

Figure 4.22. Edit the data of the chart

Figure 4.22. Edit the data of the chart

Figure 4.23. Forecasting chart

Figure 4.23. Forecasting chart

4.9Setting Up Level Indicators

Level indicators represent tag values as fill percentages within container shapes.

Figure 4.24. Water level parameter output

Figure 4.24. Water level parameter output

Figure 4.25. Setting the fill depending on the values

Figure 4.25. Setting the fill depending on the values

4.10Properties of Active Objects

Each active object has configurable properties: context menus, animation, poster display, highlight behaviour, and measurement table view.

Figure 4.26. Edit the data of the element

Figure 4.26. Edit the data of the element

Figure 4.27. Disabling context menus, posters, and animations

Figure 4.27. Disabling context menus, posters, and animations

Figure 4.28. Highlighting of an active element

Figure 4.28. Highlighting of an active element

Figure 4.29. Highlighting and hiding the active element

Figure 4.29. Highlighting and hiding the active element

Figure 4.30. Changing the view of the measurement table

Figure 4.30. Changing the view of the measurement table

4.11Simplified Manual Input from a Diagram

Tag values can be entered manually directly from diagram objects without opening the measurements window.

Figure 4.31. Manual input object

Figure 4.31. Manual input object

Figure 4.32. Editing the manual input window

Figure 4.32. Editing the manual input window

Figure 4.33. Binding the tag to the manual input object

Figure 4.33. Binding the tag to the manual input object

Figure 4.34. Binding to the attribute of the IM object

Figure 4.34. Binding to the attribute of the IM object

Figure 4.35. Viewing a diagram with manual input objects

Figure 4.35. Viewing a diagram with manual input objects

Screenshot 2025-12-04 at 13.34.21.png
Screenshot 2025-12-04 at 13.34.45.png
Screenshot 2025-12-04 at 13.35.12.png
4.12Input of Fixed Manual Entry Values

Fixed-value buttons allow operators to apply preset values with a single click.

Figure 4.36. Manual input button configuration

Figure 4.36. Manual input button configuration

Figure 4.37. Manual input value button

Figure 4.37. Manual input value button

4.14Installing Portable Grounding on Diagrams

Portable grounding is enabled in Settings - Diagrams - Edit - Extras - Scheme settings.

Figure 4.43. Enabling portable grounding

Figure 4.43. Enabling portable grounding

Screenshot 2025-12-04 at 13.45.01.png
Figure 4.44. Portable grounding settings

Figure 4.44. Portable grounding settings

Figure 4.45. Installation of portable grounding

Figure 4.45. Installation of portable grounding

Figure 4.46. Information on installed portable grounding

Figure 4.46. Information on installed portable grounding

4.15Highlighting Lines When Hovering

In viewing mode, hover backlight on line-type objects can be configured to highlight connected elements - useful for tracing connections on large diagrams.

Figure 4.47. Highlighting of connected lines

Figure 4.47. Highlighting of connected lines

4.16Outputting Numbers in Exponential Form

Large numeric values can be displayed in exponential notation on diagram elements.

Figure 4.48. Enabling the exponential form

Figure 4.48. Enabling the exponential form

Figure 4.49. Displaying a number in exponential form

Figure 4.49. Displaying a number in exponential form

4.17Displaying Delimited Values

Instant tag values can be displayed with digit grouping separators (enabled by default).

Figure 4.50. Displaying delimited values

Figure 4.50. Displaying delimited values

4.18Display of Metering Data on the Diagram

Metering channel data can be displayed as charts (section 4.8) or as direct value bindings.

Figure 4.51. Binding the metering channel

Figure 4.51. Binding the metering channel

Figure 4.52. Value of the metering channel

Figure 4.52. Value of the metering channel

Figure 4.53. Table

Figure 4.53. Table

Figure 4.54. Metering channel binding

Figure 4.54. Metering channel binding

Figure 4.55. Display of metering channel data

Figure 4.55. Display of metering channel data

Figure 4.56. Sensor graphic element

Figure 4.56. Sensor graphic element

Screenshot 2025-12-04 at 14.12.20.png
Figure 4.57. Binding to the tag ID

Figure 4.57. Binding to the tag ID

4.19Heatmaps
Note
Heatmap functionality requires an active license for the corresponding module.
Figure 4.58. Create heatmap

Figure 4.58. Create heatmap

Figure 4.59. Editing heatmap properties

Figure 4.59. Editing heatmap properties

Figure 4.60. Heatmap

Figure 4.60. Heatmap

4.20Layers

In editing mode, diagram sections can be placed in separate layers to optimise work with large diagrams. Layers have no effect in viewing mode.

Figure 4.61. Layers menu

Figure 4.61. Layers menu

4.21Active SVG Elements

The editor supports importing SVG graphic templates. Active SVG elements optimise performance and enable CSS/SVG-based animation for technological processes.

Figure 4.62. Import animated SVGs

Figure 4.62. Import animated SVGs

Figure 4.63. Import animated SVGs

Figure 4.63. Import animated SVGs

Figure 4.64. Animated SVG

Figure 4.64. Animated SVG

Figure 4.65. Legend for switch positions

Figure 4.65. Legend for switch positions

Figure 4.66. Graphic elements

Figure 4.66. Graphic elements

Figure 4.67. Rules for animated SVG

Figure 4.67. Rules for animated SVG

Figure 4.68. Animated image

Figure 4.68. Animated image

4.22Conversion of Diagrams from Editor v2 to v3

To convert a v2 diagram to v3, press Alt+Shift+D in the editor, then select version 3 from the version selector in the horizontal menu.

Figure 4.69. Warning about switching to editor version 3

Figure 4.69. Warning about switching to editor version 3

4.23Display of the IM Object Name and Tag Measurement Units

Tag data can be displayed in different modes: value, IM object name, measurement units, or combined.

Figure 4.70. Options for displaying tag data

Figure 4.70. Options for displaying tag data

Figure 4.71. IM measurement

Figure 4.71. IM measurement

Figure 4.72. IM object

Figure 4.72. IM object

Screenshot 2025-12-04 at 14.28.24.png
4.24Uploading / Downloading Diagrams

Diagram files can be uploaded and downloaded from the Mimic diagrams management page via the Actions column, enabling backup, migration, and sharing of diagrams between CENTO installations.

5. Binding Tags to the Diagram Using ID or Code

5.2. Binding Devices to the Diagram

Device objects reflect communication status. Device status values:

StatusMeaning
0Disabled
1Normal
2Data in device with errors
3Device unavailable
4Manual input data present
9Status not available

5.3. Binding Parameters to Information Model Objects

Tags and channels can be bound to IM objects and their attributes, enabling diagrams to reflect IM hierarchy automatically. See the Information Model Setup Manual for IM configuration.

Abbreviations

TermDefinition
IMInformation Model
SCADASupervisory Control and Data Acquisition
SVGScalable Vector Graphics
RMBRight Mouse Button
LMBLeft Mouse Button
Parent topic: CENTO Manuals