Панель управления фарами: дизайн проекта Arduino
Разработчики Arduino обычно не заморачиваются над дизайном. В лучшем случае мы увидим сборную солянку, собранную из бесплатных клипартов из интернета. В заводских приложениях ситуация получше: всё выровнено по сетке, элементы не прилипают друг к другу.
Если вы хотите сделать красивое и удобное приложение, то лучше всего обратиться к знакомому дизайнеру. Нарисовать такой проект в фотошопе — не сложно. Важно не перестараться с украшательством. Если без слов понятно, как управлять прибором, значит, дизайнер хорошо потрудился.
Как сделать наглядный и удобный тач-скрин
Чтобы панель управления была наглядной, рекомендую задуматься о реальном положении вещей — и просто перенести это на экран. Например, при разработке панели управления внешними световыми приборами мы расположили на фоне автомобиль, а поверх него — кнопки. Кнопки снабжены крупной и понятной иконкой, и расположены примерно там же, где находится соответствующая фара или фонарь. Фары на иконках направлены в ту сторону, в которую они реально светят.
![Экран бортового компьютера, отвечающий за фары](/w/arduino-display/panel-upravleniya-farami-avto-1.png)
Правило 1. Элементы на экране располагаем примерно так, как они расположены на самом деле.
Правило 2. Кнопка делается больше отпечатка пальца, чтобы по ней было удобно жмякать в любых условиях, на ходу, и даже в экстренной ситуации.
...Аналогично создан второй экран, показывающий температуру двигателя и температуру в салоне автомобиля:
![По расположению очевидно, к чему относится температура](/w/arduino-display/panel-datchiki-temperatura-avto-1.png)
Некоторым элементам придётся нарисовать несколько состояний, например, включен / выключен, и подготвить их в виде отдельных файлов в формате PNG:
![Активные и пассивные состояния кнопочек](/w/arduino-display/sostoyania-knopok-arduino.png)
Правило 3. Активное состояние кнопки должно говорить само за себя. Физические элементы в активном состоянии светятся.
В принципе, на этом этапе работа дизайнера закончена. Но лучше всего создать прототип проекта в какой-нибудь среде разработки, чтобы программист ничего не перепутал.
Скелет проекта в Nextion Editor
Аккуратно переносим все нарисованные элементы в приложение, в моём случае это Nextion Editor. Моя версия приложения не поддерживала прозрачный фон у иконок, пришлось переделать все значки, зацепив их вместе с куском фона. Это нужно учитывать, чтобы не было косяков с наложением рядом стоящих элементов. Прозначные края можно имитировать, и конечный пользователь ни о чём не догадается.
Координаты кнопок можно подсматривать в Фотошоповском окошке «Инфо»:
![Координаты элементов, выровненных по сетке](/w/arduino-display/design-control-panel-4.jpg)
Я видел несколько проектов, где кнопочка «едет» на 1 пиксель при наведении или при включении активного состояния. Да что там говорить, такое бывало даже в бюджетных телефонах. Отсюда правило номер 4:
Правило 4. Картинки различных состояний элементов должны совпадать пиксель в пиксель. Перед запуском проекта нужно запустить демо режим и проверить все эти состояния в работе.
Демонстрационное видео проекта
Хороший дизайн угадывается по нюансам. Например, здесь автомобиль нарисован по образу и подобию настоящего Pajero, в котором и будет стоять данный бортовой компьютер.