Редактор экранов и удаленное управление: разработали ПО для дорожных табло

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

На примере кейса «ДиСофт» показываем, как разработка единой системы может закрыть все потребности в функционале для создания контента и удаленного управления им и устройствами отображения.

Задача:

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

Решение:

внедрили систему управления с редактором экранов, плейлистами и картой устройств для централизованного управления.

Клиент

«ДиСофт» — российская компания, специализирующаяся на производстве, установке и сервисном обслуживании светодиодных экранов и табло для дорожной инфраструктуры, рекламы и городских пространств.

Оборудование компании размещено в 110 городах, а количество выполненных объектов составляет порядка 6,5 тысяч.

Цель и задачи

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

Задачи:

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

Ситуация до начала проекта

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

Заказчик четко осознавал потребности в функционале и подготовил развернутое техническое задание со схемами, описанием бизнес-логики и требованиями к API. С этим ТЗ он обратился к нам, и мы начали проект с глубокого анализа и создания частных технических заданий (ЧТЗ) на каждый этап разработки.

«Клиент пришел с четким ТЗ, у него уже были сформированные пожелания. Но даже с таким подготовленным заказчиком мы всё равно делали ЧТЗ с макетами, скриншотами, диаграммами на каждый этап. Потому что наш подход заключается в том, чтобы заказчик видел, как будет работать система, ещё до начала разработки. Это исключает риск получить «не то, что ожидалось», и гарантирует, что финальный продукт полностью соответствует бизнес-задачам клиента».

Создание архитектуры решения

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

В свою очередь, функционал мастер-аккаунта включает возможность создания экранов, плейлистов, тегов и управления устройствами и группами. Однако пользователь в этой роли видит только те объекты, за которые назначен ответственным администратором.

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

Мы реализовали защиту от перебора паролей. Если пользователь ввел неверный пароль пять раз, то его учетная запись блокируется на 5 минут.

Журналирование действий

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

В журнал событий попадают все запросы к серверу и фиксируется пользователь, выполнивший запрос, параметры и время запроса, результат (успешно/ошибка).

Управление устройствами

Регистрация устройств инициируется клиентским ПО. При первом запуске оператор вводит адрес сервера и уникальный ключ (UID). После подтверждения устройство автоматически появляется в списке административной панели.

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

Чтобы упростить управление большим количеством табло, мы реализовали возможность объединять устройства в группы. Назначение плейлиста, перезагрузка, изменение расписания могут выполняться для всей группы одновременно. Это экономит часы ручной работы. Устройство нельзя включить в группу, если его размеры экрана не совпадают с размерами группы.

Устройство нельзя включить в группу, если его размеры экрана не совпадают с размерами группы.

Интерактивная карта

Для визуального контроля всех зарегистрированных устройств система предоставляет интерактивную карту на основе внешнего картографического сервиса (Яндекс Карты). На ней отображаются все зарегистрированные устройства с разными маркерами для статусов «В сети/Активно», «В сети/Не активно» и «Не в сети».

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

Зеленый маркер — устройство онлайн и транслирует контент, серый — офлайн. При клике открывается попап с UID, статусом, группой и кнопкой перезагрузки.

Редактор экранов и плейлисты

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

В распоряжении оператора находятся шесть типов виджетов: Текст, Изображение, Дорожный знак, Время и дата, Индикатор трафика, Маршрут.

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

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

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

Мы автоматизировали сверку размеров устройства с размером экрана плейлиста при его назначении. Если размеры не совпадают — назначение блокируется с поясняющим сообщением. Это исключает ошибки отображения на этапе настройки.

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

Хранение данных и взаимодействие с клиентским ПО

Для хранения пользовательских изображений и GIF-анимаций мы внедрили S3-совместимое хранилище. Загрузка файла происходит напрямую в хранилище, а в базе данных сохраняется только метаинформация и публичная ссылка. Система контролирует допустимые форматы и размеры, а также запрещает удаление файлов, которые используются в экранах (с предупреждением и указанием, где именно).

Взаимодействие с клиентским плеер-приложением автономно. Устройство хранит актуальный плейлист и расписание в локальной СУБД SQLite, поэтому трансляция продолжается, даже если связь теряется. При изменении плейлиста или расписания сервер отправляет команду устройству, а клиентское ПО забирает данные и перезапускает воспроизведение без ручного вмешательства.

Результат

Сейчас интернет-магазин оборудования для тепловой резки металлов полностью функционирует. На сайте каталог структурирован таким образом, чтобы пользователи независимо от своего запроса (расходные материалы, товары для определенного типа резки или от конкретного бренда) могли найти нужные детали в соответствующем разделе. Клиенты «Мобильной резки» уже оформляют заказы онлайн.

«ДиСофт» получил ПО, которое оптимизирует целый ряд рабочих процессов:

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

Проект был сдан досрочно благодаря оперативной обратной связи со стороны заказчика и четкому пониманию того, каким должен быть финальный результат. Система «Табло, дороги, оповещение» работает стабильно, не требует постоянных доработок и живёт ровно так, как задумано — без «костылей», без чужих технологий и без сюрпризов.

Понравился проект?

Звоните! Проконсультируем и рассчитаем стоимость проекта бесплатно!