Отображение и редактирование графических схем в браузере

Система отображения и редактирования графических схем использует возможности современных браузеров работать с аппаратными средства ускорения обработки графики. Практически все аппаратные платформы, в том числе мобильные, поддерживают работу с трехмерной графикой по стандарту OpenGL, что позволяет использовать их для игр и отображения сложного графического контента. Отображение и редактирование схем использует трехмерное ускорение для отображения двумерных объектов. Такие возможности OpenGL как поддержка шейдеров позволяют использовать сложную анимацию без падения частоты кадров. Кроме отображения и редактирования графических схем энергосистем система позволяет работать практически с любой двумерной графической информацией, для чего достаточно заменить библиотеку примитивов. Таким образом система позволяет работать со схемами автоматических систем управления (в стиле Simulink) или противоаварийной автоматики.

Графическое изображение строится с помощью библиотеки Three.js, которая является тонкой прослойкой между OpenGL (WebGL в браузере) и JavaScript. Пользовательские элементы управления во frontend реализованы с помощью React. Обмен данными, описывающими графическую схему, между сервером и браузером осуществляется в формате json с помощью REST-интерфейса. Серверная часть поддерживает технологию WebSocket для передачи браузеру уведомлений об изменении данных, например — обновлении результатов расчета. Часть backend, отвечающая за поддержку обмена данными с браузером, реализована на python с использованием Django и дополнительных модулей: Django REST framework и Django Channels.

Поддержка модели графических данных для крупных схем является ресурсоемкой задачей. Поэтому для улучшения времени отклика в backend основную работу выполняет модуль, реализованный на C++ и обеспечивающий работу графического ядра системы. Ядро обрабатывает все данные, циркулирующие между браузером и сервером, и поддерживает синхронизацию даже в случае временных разрывов соединения и переключения сессий. Основные операции по обработке графа схемы выполняются на сервере. Поддерживается история изменений и отмены с неограниченной глубиной: в течение сессии графическая схема сохраняется в виде изменений относительно исходного состояния. Обмен данными внутри backend между частью, реализованной на python и ядром на C++ осуществляется с помощью gRPC. Хранение данных графической схемы обеспечивает ORM Django. Схема взаимодействия модулей системы приведена на рисунке.

Онлайн-демонстрация работы системы на стандартной тестовой схеме RastrWin в 195 узлов доступна здесь. Видеообзор технологии на Youtube.