Редактор мнемосхем для управления промышленными предприятиями

Разработали веб-приложение для редактирования векторных мнемосхем, которое в составе большого программного комплекса помогает управлять производственными процессами на энергетических и промышленных предприятиях.

Использовали движок векторной графики mxGraph, дополнительные интерфейсы разрабатывали на React.

О заказчике и проекте

Заказчик: разработчик программных продуктов для автоматизации энергетических и промышленных предприятий — химических и нефтехимических заводов, электрогенерирующих компаний, ТЭЦ и АЭС.

Проект: программный комплекс для мониторинга работы оборудования и автоматизированных информационных систем, учёта качества энергоресурсов, регистрации аварийных событий, помощи в принятии решений на основе данных с полевых датчиков.

Проблема

Важная функциональность программного комплекса — отображение данных с приборов на диспетчерском пульте или компьютере оператора в формате мнемосхем.

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

Обычно мнемосхемы создаются в специализированном графическом редакторе. Чтобы сделать мнемосхему интерактивной, нужно интегрировать её элементы с поступающими от приборов данными. Это требует постоянного участия разработчиков, что усложняет отладку, увеличивает сроки внедрения и стоимость. Для промышленных предприятий требуется разработать и подключить тысячи мнемосхем.

Заказчик решил разработать инструмент, интегрируемый в программный комплекс, позволяющий наладчикам АСУ предприятий самостоятельно, без участия разработчиков, создавать интерактивные мнемосхемы. Это должен быть редактор векторной графики работающий в браузере. С помощью графических примитивов (простейших геометрических объектов) и библиотеки компонентов, наладчики должны самостоятельно создавать мнемосхемы и настраивать их поведение в зависимости от поступающих с оборудования данных.

Штатные программисты заказчика разрабатывали другие модули комплекса. Заказчику потребовалось быстро расширить команду проекта узкоспециализированными кадрами.

Почему мы

Заказчик отправил запросы нескольким компаниям специализирующимся на фронтенд-разработке. Мы предложили обсудить проект на уровне технических лидеров и исполнителей. Провели несколько таких обсуждений. Через 4–5 месяцев заказчик вернулся с намерением подписать договор — исходя из проведённых технических консультаций тимлиды рекомендовали руководству заключить контракт с нами.

Процесс

В связи со сложностью и высокой степенью неопределенности проекта согласовали работу по схеме Time and materials (T@M — оплата затраченного времени).

Первоначально заказчик ставил задачу разработать редактор с нуля. Мы предложили исследовать рынок готовых движков и редакторов для работы с векторными примитивами. Было предположение, что так сможем сократить сроки и бюджет проекта. Решили начать с этапа аналитики.

1. Этап аналитики

Задача: погрузиться в сложный программный комплекс, исследовать предметную специфичную область, предложить решения.

Редактор является модулем крупной автоматизированной системы управления промышленными предприятиями — нужно учитывать архитектуру всей системы и возможности для интеграций.

Стартовали с исследования Open Source движков для создания векторной графики, которые позволяют работать с простыми геометрическими объектами (графическими примитивами). Подходящим кажется только одно решение — библиотека mxGraph: открытый исходный код, 12 лет на рынке, лежит в основе популярного сервиса Draw.io, интегрируемого с GoogleDocs. Согласовали с клиентом предварительный выбор. После консультаций с юристами клиент утвердил библиотеку для детального исследования.

Провели технический аудит исходного кода mxGraph. Резюме:

  1. Инструмент с задачами справится.
  2. Ввиду «старости» у библиотеки специфический синтаксис, её использование приравнивается к изучению нового фреймворка.
  3. Порог вхождения высокий, документация не полная.

Утвердили у заказчика создание редактора на основе mxGraph. Использование готового решения накладывает технические ограничения, но даёт возможность оперативно сосредоточиться на важной для бизнеса функциональности, а также уменьшить срок и бюджет проекта.

2. Разработка MVP

Создание минимально жизнеспособного продукта (minimum viable product, MVP) заняло полгода. Работали в условиях сильной интеграции с командой разработчиков заказчика. Ежедневно обсуждали технические решения. Каждая неделя завершалась демонстрацией результатов работы, обсуждением проблем и планированием.

Жёсткие требования предъявлялись к производительности редактора. Браузер оператора должен работать без перезагрузки месяцами. При большом количестве элементов мнемосхемы (несколько тысяч) обнаружились проблемы в работе mxGraph. Требовалось уделить внимание утечкам памяти и скорости отображения элементов. Чтобы снизить нагрузку на CPU (центральный процессор) и устранить другие проблемы мы внесли корректировки непосредственно в движок mxGraph.

Ближе к окончанию работ у заказчика появилась необходимость оперативно внедрить редактор в систему управления электроснабжением действующего завода. Мы помогли это сделать. Демонстрационная мнемосхема состояла из 20 000 векторных элементов меняющих состояние в реальном времени.

Результат

Сократили бюджет проекта в два раза, а срок на 3–6 месяцев за счёт проведения этапа аналитики и предложения использовать готовую библиотеку. Хотя заказчик пришёл с задачей разработать редактор с нуля.

Разработали редактор векторной графики на базе библиотеки mxGraph. Расширили его недостающей функциональностью, которая позволила наладчикам АСУ организовать библиотеку компонентов и повторно использовать элементы графической нотации и целые мнемосхемы. Разработали интерфейс, с помощью которого устанавливаются правила отображения графических элементов в зависимости от получаемых данных. Внесли изменения в mxGraph, чтобы обеспечить требуемую производительность.

Разработали модуль мониторинга мнемосхем. Оператор на производстве может в режиме реального времени, через браузер, следить за показаниями приборов и принимать решения.

Интегрировали готовый редактор в автоматизированную систему управления заводом.

Ретроспектива

  • Работу сложных промышленных IT-систем возможно реализовать на базе браузера. При автоматизации производств всё чаще используются веб-технологии, которые заменяют десктопные программы. Плюсы таких решений: оперативное, дешёвое и незаметное пользователю обновление; работа в облаке или локально; применение относительно простых, надёжных и дешёвых технологий с большим количеством разработчиков на рынке.
  • Модель Time and materials идеально сработала в проекте. Обеспечила высокую гибкость и скорость разработки.
  • Можно значительно экономить бюджеты и уменьшать сроки проектов. Один из механизмов — проведение предварительной аналитики способа решения задачи. Первоначальный вариант не всегда самый эффективный. Даже заказчик может не всё увидеть и предусмотреть.
    Главные факторы успешной реализации подобного проекта: готовность погружаться в нестандартную предметную область и бизнес процессы, высокий уровень проектного менеджмента, способность выстраивать эффективные коммуникации, сильные тимлиды и разработчики с обеих сторон.
  • Если в команде заказчика работают сильные разработчики, то нужно это использовать по максимуму для достижения целей проекта. Совместными усилиями решаются сложнейшие задачи.

Оставляете заявку → Наш тимлид связывается с вами → Совместно находим решение