Планы, схемы и чертежи в веб-приложениях

Планы, схемы и чертежи в веб-приложениях

Проектирование интерфейсов систем удаленного контроля и создание интерактивных схем управления

Интерактивные чертежи и схемы на сайтах и в веб-приложениях позволяют не только демонстрировать различные объекты, но и управлять ими. Если требуется разместить некий масштабируемый план, содержащий элементы с обратной связью, то растровая графика или PDF уже не подходит. Мы решаем эту задачу с помощью SVG-объектов с различными уровнями вложенности и управлением их свойствами на CSS и JS.

Рассмотрим такой пример:

  1. Существует некая группа устройств, управление которыми осуществляется удаленно.
  2. Для управления диспетчеру необходима интерактивная схема для лучшей наглядности.
  3. Объекты на схеме могут иметь различные параметры в зависимости от настроек и состояния устройств.
  4. При взаимодействии с определенными объектами их параметры могут меняться (обратная связь).

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

И самое главное — интерфейс в итоге должен быть удобным для конкретных задач. Дизайн в данном случае имеет второстепенное значение, но здесь работает правило: если управление полностью понятно — значит и дизайн удался. Оформление проходит уже на финальных этапах.

Функциональные схемы диспетчеризации

Корпус насоса Знак аварии ! Горячий контур ГК1 Защита от разморозки (термостат) - авария КЗР Клапан отопления управление 57% Циркуляционный насос в ГК управление ВКЛ Н1 Корпус насоса Циркуляционный насос в ГК статус (Крыльчатка) Температура воды в контуре отопления датчик 38,5°C Установленная min температура воды в ГК защита от замерзания 40°C min t

Например, на этом рисунке вы видите схематичный чертеж контура обогрева внутри вентиляционной шахты. На радиаторе мигает знак аварии, при этом температура в контуре упала ниже допустимого минимума (min t).

Диспетчер может выключить насос прямо на этой схеме и сообщить об аварии обслуживающему персоналу. Здесь же он увидит, когда проблема будет устранена и сможет включить насос. Красиво ли это? — под вопросом. Удобно? — Да.

Главное при создании таких планов — понятное отображение действующих устройств, датчиков и органов управления, а также ошибок и аварий.

Но это была лишь малая часть всей системы. Из множества таких схем устройств собираются комплексные веб-приложения для контроля работы оборудования в многоэтажных зданиях. В итоге рабочее место диспетчера выглядит примерно так:

Диспетчеризация оборудования

Ну а наша задача — сделать так, чтобы все на дисплее было четким, понятным, удобным для управления. Этим мы и занимаемся.


Данная работа была проделана для компании Visiobas, занимающейся разработкой ПО и оборудования для диспетчеризации:

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

Заказ схем и чертежей для веб

Даю согласие на обработку персональных данных

Мы предлагаем:

  • Интерактивные схемы управления
  • Размещение чертежей и планов на сайте
  • SVG — векторная графика для веб
  • И все также — веб-дизайн и разработку