Сайт находится в состоянии альфа-версии. Это значит, что многие разделы и функции еще не работают, но скоро обязательно заработают.

Веб-интерфейс системы управления оборудованием для компании «МВТЕЛ»

Декабрь 2014 — март 2015 года. Дизайн.
Задача: Сделать простой и легкий интерфейс для настройки оборудования

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

С этой задачей справились с помощью простых форм и эффектов, которые можно легко реализовать средствами html и css.

Домашняя страница интерфейса




Главная страница

На главной странице собрано все необходимое: текущее состояние устройства и плат расширения, а так же список последних аварий и отказов. Для каждого внештатного события предусмотрена простая цветовая кодировка:

Главная страница с цветовым кодированием

Благодаря метафорическому виду установленных плат требуется меньше времени на поиски нужной платы





Настройка плат расширения

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

Настройка платы расширения - первый таб

У каждой платы свои настройки, но лейаут одинаков для всех

Настройка платы расширения - второй таб

Благодаря простой системе URL–адресов можно легко делиться страницами и настройками с другими техниками и инженерами: 192.168.48.1/s1/FO-08/sets2

Настройка платы расширения - третий таб




Раздел временного мультиплексирования (TDM)

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

Вариант оформления
Вариант оформления

Все настройки происходят в несколько кликов.

Вариант оформления

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





Другие страницы

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

Страница настройки источника и приоритета синхронизации

Страница настройки источника и приоритета синхронизации

Вариант оформления

Мониторинг трафика на портах Ethernet

Вариант оформления

Некоторые элемент интерфейса


Ховер состояния кнопок управления хэдера