Интерфейс в стиле SPA для WiFi OBD2 + новая спортивная тема

Наконец-таки свершилось! Наступил момент продемонстрировать результат нашей плотной и объёмной работы по изменению пользовательского интерфейса адаптера WiFi OBD2!

С настоящего момента интерфейс приобретает новую концепцию навигации в стиле "Single Page Application". Теперь нет необходимости ждать загрузки отдельной страницы, а весь контент загружается один раз при загрузке оболочки и переключение происходит за счёт скрытия и отображения "контейнеров".

Весь интерфейс переработан на удобный фреймворк стилей Bootstrap.

Работа с динамическими графическими элементами переведена на высокопроизводительную 2D-графику.


На главную страницу интерфейса вынесена информация о состоянии адаптера и версии ПО.

Добавлена кнопка перезагрузки адаптера.

Изменена строка состояния: подправлен вид иконок адаптера WiFi AFR, добален вывод частоты обновления пакетов с адаптера (на фото ниже 1 Гц).

DSCN4320


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

Screenshot-2021-03-28-22-26-12-334-com-opera-browser

Screenshot-2021-03-28-22-28-50-761-com-opera-browser

Screenshot-2021-03-28-22-28-55-887-com-opera-browser

Комплетация устройства также вынесена на главную страницу интерфейса

Screenshot-2021-03-28-22-26-29-117-com-opera-browser

После комплектации размещены кнопки открытия панели приборов, логгера:

Screenshot-2021-03-28-22-26-46-634-com-opera-browser

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

Screenshot-2021-03-28-22-26-54-591-com-opera-browser

Screenshot-2021-03-28-22-27-10-842-com-opera-browser

Screenshot-2021-03-28-22-27-22-940-com-opera-browser

Screenshot-2021-03-28-22-27-27-529-com-opera-browser 

На вкладке глобальных настроек добавлена кнопка сброса настроек на дефолтные. В остальном настройки остались без изменений.

Screenshot-2021-03-28-22-29-10-026-com-opera-browser

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

Screenshot-2021-03-28-22-35-34-336-com-kiwibrowser-browser

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

Screenshot-2021-03-28-22-24-51-894-com-opera-browser

Индикаторы в логгере тепеь имеют чёрный фон, чтобы быть в одном стиле с интерфейсом

Screenshot-2021-03-28-22-34-00-613-com-kiwibrowser-browser

Внешний вид графиков изменён под стиль интерфейса и отображение графиков переведено для мощную библиотеку визуализации 2D-графики.

Screenshot-2021-03-28-22-34-22-422-com-kiwibrowser-browser

Вкладка с ошибками ЭБУ изменена под общий стиль интерфейса

Screenshot-2021-03-28-22-34-33-393-com-kiwibrowser-browser

Вкладка с файловым менеджером переделана под общий стиль интерфейса. Функциональная часть осталась без изменений.

Screenshot-2021-03-28-22-35-01-134-com-kiwibrowser-browser


Новая тема для Dashboard "sport_race"

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

Обороты выполнены ввиде линейки. Цвет линейки голубой и меняется на жёлтый и красный при срабатывании shift assist. Большая цифра под оборотами - это передача и под ней распологатся скорость. Остальные параметры динамические и могут быть выбраны пользователем в любом порядке как в дефолтной теме. Расположение параметров по номерам с верхнего левого угла направо и вниз, т.е. на фото ниже 1 - BOOST, 2 - WBL, 3- WATER TEMP, 4 - AIR TEMP и т.д.

Опасные значения настраиваются как и раньше, единственное, добавлена подсветка жёлтым цветом при приближении к границе опасности на 10%. Например, буст настроен на опасное значение в 1 бар, жёлтым фон станет после 0,9 бар, а красным после 1 бара.

DSCN4316

Тема имеет горизонтальную и вертикальную ориентацию.

DSCN4315

При клике на "Check Engine" открывается окно с расшифровкой текущих ошибок ЭБУ

Screenshot-2021-03-28-22-31-47-130-com-opera-browser



Более наглядно работу нового интерфейса можно посмотреть в небольшом обзорном видео:


или в более длинном видео с коментариями происходящего:


Выражаю огромную благодарность членам нашей команды, а именно, Ивану Ярёменко за большую помощь в реализации функционала темы панели приборов и интерфейса в целом и Алексею Зыбенкову за помощь в подготовке материалов к публикации!!!


Скачать новую версию интерфейса можно по ссылке: WebInterface_obd2_rev10


Ура!

Отзывы (2)

Написать отзыв

Примечание: HTML разметка не поддерживается! Используйте обычный текст.
   Плохо           Хорошо