Здравствуйте, пользователи сообщества Хабр.

Цель статьи: Демонстрация реализации дешевого решения для визуализации данных, которое можно применять в системах диспетчеризации.

С чего началось.

На одном из производств энергетического сектора было автоматизировано порядка 20 агрегатов с количеством сигналов более 10000, необходимо было разработать систему диспетчеризации для мониторинга данных АСУ ТП.

В связи с этим, мне было интересно реализовать IT-решение для визуализации данных в виде графиков и видеокадров (мнемосхем). Решение должно быть масштабируемым, кроссплатформенным, простым в использовании, web-приложением. И так, функционал – мнемосхемы, графики. Поехали …

Мнемосхемы


Для разработки мнемосхем необходим графический редактор.

Разрабатывать свой сложно, дорого, поэтому был выбран Visio.

Почему именно Visio?

1 – поддерживает векторную графику;
2 – имеет встроенный редактор vba;
3 — позволяет создавать свою библиотеку графических элементов;
4 — имеет возможность добавить к графическому объекту произвольный набор свойств (см. рис.1)
5- распространённый редактор, много пользователей.

Поэтому идеальным редактором для моих целей стал Visio.


Рис.1.

Графики


Тут было проще, сначала рассматривалась библиотека highcharts, но так как она платная,
выбор был сделан в пользу d3.js.

d3.js – очень крутой framework, большие возможности, немного сложен в освоении, но на просторах сети много примеров.

Web-форма “Графики” позволяет просматривать графики на разных временных диапазонах, координатных плоскостях, задавать шкалы и другие возможности.

Платформа для разработки приложения


Для разработки web-приложения выбрана платформа web-программирования ASP.NET, framework ASP.NET MVC, в дальнейшем приложение было переведено на ASP.NET Core MVC.

Как работает приложение


Итак, как работает приложение?

Приложение получает данные через web api интерфейс и отображает их пользователю в виде графиком и мнемосхем.

Приложение может работать в двух вариантах.

Первый вариант:


Рис.2.

Как было уже сказано, в приложении реализован web api интерфейс, через который оно получает данные, непосредственно получением данных с источников занимаются сервисы данных (программные модули). В первом варианте работы видно, что сервисы реализованы внутри приложения, это удобно когда, например, приложение и источники данных находятся в одной сети.

Второй вариант:


Рис.3

Во втором варианте сервисы – отдельные программные модули, к которым обращается приложение за данными. Второй вариант может использоваться, когда источники и приложение находятся в разных сетях, приложение, например, развернуто на хостинге.

Основным объектом в приложении является Tag – переменная, измеренное значение технологического процесса. Набор методов (например GetTagOnline, GetTagArchive и др.) для работы с тегами реализует web api интерфейс.

Итак, приложение забирает данные с сервисов, подгружает мнемосхему, разработанную пользователем в Visio, и отображает эти данные.

Анимация графических объектов на мнемосхеме


Для анимации графических элементов мнемосхемы используется javascript. Для того, чтобы упростить пользователю разработку функций анимации, в приложении есть небольшая библиотека, которая включает, например следующие функции: printf(Text), SetText(Object, Index, Value), SetBackColor(Object, Index, Value), SetVisible(Object, Value), GetTag(TagName) и др.
Например, функция отображения измеренного значения:

Function Field (Object, Property) {
var Tag = GetTag(Property.Tag1);
SetText(Object,1,Tag.Value);
}

Администрирование, настройка.

Для настройки используются конфигурационные файлы, где пользователь создаёт профили, добавляет сервисы и др. Данное приложение – консольное, может работать как win-сервис.
Приложение использует встроенный кроссплатформенный веб-сервер Kestrel.

Статья называется “Мониторинг данных АСУ ТП и не только.”. Приложение может отображать в принципе любые данные, которые можно представить в виде схемы, диаграммы и т.п.
Всем спасибо, что дочитали, интересна критика, любые отзывы. Спасибо.

На этом всё, ниже несколько картинок работы приложения.

Пример мнемосхемы (была сделана из файла eplan — >autocad ->visio. ):





Графики: