Просматривая конструкции, которые люди делают на платформе Ардуино, я заметил очень интересную странность: при наличии довольно приличных тач экранов (пальцетыков), радиолюбители почему-то предпочитает использовать архаичные двухстрочные дисплеи с кнопками или энкодером. Конструкций с тач экраном довольно мало.
Следует понимать, что двухстрочный дисплей и кнопки — это не всегда плохо. Но представьте себе, каким бы мог быть, например, распространенный китайский RLC тестер если бы у него был хороший цветной экран и управление касанием? Почему-то большинство из нас пользуется смартфонами, но продолжает игнорировать хорошие экраны в своих изделиях. Многие скажут — хороший экран это дорого, а нам надо подешевле. Друзья, я если честно, вообще не понимаю откуда взялся этот дурацкий тренд «лишь бы дешевле». Пришел из промышленности? Вряд ли. При разработке изделий на заказ почти всегда требуется уложиться в себестоимость, указанную заказчиком проекта. Но мы же делаем для себя? Мы будем пользоваться устройством не один год. Какой смысл экономить на гвоздях? Поймите, при изготовлении единичных изделий «для себя» понятие экономии должно быть на предпоследнем месте. Не думаю, что многим из нас сэкономленные пара тысяч рублей вот прям уж сделает погоду. А если имеет место острая нехватка средств, то может надо пересмотреть своё отношение к жизни, а потом заниматься радиолюбительством? По моему разумению причина здесь в другом. Толковых руководств в интернете не так уж много, а разбираться самому, как правило, страшно и лень.
Лень придумывать концепцию интерфейса, лень изучать чужие исходники, страшно осваивать новое. Куда проще взять готовое с двухстрочным дисплеем и повторить. «Нет времени» говорят они, оправдывая свою лень.
Друзья, радиолюбительство — это прежде всего творчество. Творчество подразумевает создание нового, а не повторение старого. Освоив работу с тач экраном и проектирование интерфейсов вы однозначно получите больше возможностей для своих конструкций, сможете перейти на более высокий уровень. Любителей у которых «нет времени» и «надо подешевле» прошу дальше не читать. Остальным добро пожаловать в дивный новый мир.
Подчеркну! Я не хотел как-то обидеть любителей создавать что-то по дендрофекальной технологии, на основе дисплея от Nokia 3310. Я и сам не брезгую подобным. Один только десульфатор чего стоит. Но помилуйте! Раз из говна и палок, два из говна и палок, но надобно уметь и хорошие изделия делать. :)
Начнём с инструментария.
Для работы нам понадобится векторный графический редактор, который умеет строить пиксельную сетку и отображать координаты пикселей. Поскольку я работаю под Линуксом, у меня это SK1.
У вас может быть любой другой редактор, который вам нравиться. Главное помнить о требованиях изложенных выше и понять принцип. Естественно нам потребуется аппаратное обеспечение — плата Ардуино (Mega, Uno, Uno Plus) и совместимый экран. Сразу предупрежу любителей заказывать всё на али - ибба «надо подешевле». Как минимум экран, пока вы основательно не освоите работу с ним, лучше купить в российском магазине и желательно в таком, который не торгует шмурдяком с али. Тем самым вы сбережёте себе время и нервы.
С экранами с али довольно часто бывают проблемы:
- нет библиотек либо экран не работает с заявленными библиотеками;
- нет поддержки русских шрифтов и внедрить их не всегда возможно;
- схема не на оригинальных компонентах, а на китайских клонах — работает по своему и не всегда корректно, подобрать нормально работающие библиотеки невозможно;
Вот пара резистивных тач экранов, которые гарантированно нормально работают:
2.8inch TFT Touch Shield, TFT дисплей 320×240px
4inch TFT Touch Shield, TFT дисплей 480×320px
Ёмкостных тач экранов для Ардуино я не встречал. Возможно, что они есть в природе.
В общем, далее я предполагаю, что вы всё это сумели собрать и даже запустили какой-то тестовый код — обладаете базовыми навыками. То есть ваш экран гарантированно работает. Останавливаться на том как «прикрутить» экран к Ардуино я не буду. Отвечать на вопросы: «как мне заставить работать экран», тоже. Статья не об этом.
Теперь самое время немного поговорить о концепции UX-UI. По сути это концепция проектирования интерфейса и устройства в целом.
UX - user experience — пользовательский опыт. Это логика взаимодействия пользователя с устройством. В промышленной разработке этот этап включает в себя различные исследования на фокус группах, детальную проработку интерфейса и тестирование, создание полного жизненного цикла устройства. Вдаваться в подробности мы не будем, кому интересно прочтет материалы в интернете.
Нам для работы следует запомнить несколько простых вещей:
1. Пользоваться устройством должно быть приятно;
2. Пользоваться устройством должно быть интуитивно понятно;
3. Не должно быть каких-то непонятностей, вызывающих у пользователя «разрыв» мозга;
4. Визуальная часть должна быть простой для восприятия, красивой и понятной.
Поскольку у нас не стоит задача полностью проработать бренд и сквозное взаимодействие пользователя в нашей цифровой инфраструктуре, то требования указанные выше мы можем воплотить в нашем интерфейсе. Здесь под интерфейсом подразумевается устройство в целом, включая корпус, зарядное устройство, интерфейс на экране, размер кнопок для пальцев и т. п.
От всех этих «мелочей» будет зависеть то как пользователь воспримет ваше устройство и купит ли что-то еще от вашего бренда в следующий раз — это больше справедливо для промышленной разработки.
Приведу несколько примеров по каждому пункту:
1. Что значит пользоваться устройством приятно? Прежде всего это значит, что устройство выполняет свои функции и не требует лишнего внимания пользователя. Устройство приятно держать в руках. Устройство может быть со сколько угодно визуально красивым экраном, но если грани корпуса режут руки или корпус скрепит, то пользователь скорее всего сочтет такое устройство негодным. То же самое будет если устройство будет часто зависать и требовать сброса.
2. Вы часто читаете инструкции? На смартфон? На стиральную машину? Я думаю, нет. Почему? По тому, что интерфейс всех этих устройств сделан интуитивно понятным. Старайтесь в своих конструкциях делать также. Лучший способ проверить понятен ли интерфейс взаимодействия — дать попользоваться стороннему человеку. Вам как разработчику естественно всё понятно, а вот стороннему человеку не всегда. Если проделываете такие эксперименты, то всегда с повышенным вниманием относитесь к замечаниям. Люди не вас критикуют, они говорят, что им не понятно и неудобно. Важный момент — не надо подсказывать и обучать. Человек должен разобраться сам. Ваша задача наблюдать и делать выводы, а потом корректировать свою работу.
3. Непонятности «взрывающие» мозг — в большинстве случаев это отсутствие обратной связи с пользователем. Например, во время загрузки ничего не показывается, просто черный экран. Человек думает, что всё зависло. Сбрасывает питание и всё по новой. Банальный индикатор загрузки (progress bar) отлично выправляет ситуацию. Человек понимает, что устройство что-то делает, оно не зависло. Существенно выправить ситуацию поможет даже банальная надпись «загрузка» или «подождите». Всегда помните: вам понятно, а стороннему человеку нет.
4. Красивая и понятная визуальная часть. Понятие «красиво» у всех разное. Прежде всего не следует использовать вырвиглазые цвета. Определитесь как будет использоваться ваше устройство. Одно дело экран будет в метре от пользователя, а другое висеть на стене на расстоянии нескольких метров. От этого будет зависеть размер шрифтов, цвет. В случае если предполагается круглосуточная работа устройства обязательно предусмотрите регулировку яркости дисплея и автоматическое выключение дисплея ночью. Если устройство будет стоять, например, в спальне на прикроватной тумбочке, ночью яркий дисплей будет бесить.
Не перегружайте экран лишними показателями. Больше не значит лучше. Всё должно читаться с одного взгляда. Например, в проекте «Моя вода» у меня встала задача отображать обороты девяти вентиляторов. Такой объём информации физически не входил на экран вместе с другими показателями.
Вышел из положения следующим образом:
На главном экране отображается средняя скорость всех вентиляторов и количество включенных в данный момент. Если какой-либо из вентиляторов не работает, то на месте оборотов выводим ошибку.
Информацию об оборотах каждого вентилятора поместил в дополнительное меню, поскольку пользователю, когда всё работает, нет никакого смысла пялится на обороты каждого вентилятора. Если возникла ошибка, всегда можно посмотреть какой из вентиляторов не исправен.
На странице «Обороты» - выводятся обороты всех вращающихся устройств.
UI - user interface — пользовательский интерфейс.
Выше я уже частично пробежался по пользовательскому интерфейсу. Пользовательский интерфейс и пользовательский опыт связаны настолько, что не всегда возможно разделить эти сущности. Однако базовые требования к интерфейсу с управлением касанием сформулировать надо.
Что важно принимать во внимание:
1. Размер областей касания следует выбирать таким, чтобы было легко попасть пальцем. Не ногтем, не стилусом, а именно пальцем. Область касания зависит от размера экрана. Для экрана 320х240 более или менее разумный размер от 40х40 пикселей. Хороший способ определить размер — экспериментально. Запрограммировали, потыкали. Если удобно, значит так и оставляем. Неудобно — переделываем.
2. Область касания не обязана совпадать с размером видимой кнопки. Область может быть больше, а вот меньше делать не желательно — во-первых не удобно, во-вторых, заметно.
3. Если нужно, чтобы пользователь при нажатиях, видел какие-то параметры на экране, то всегда учитываем перекрытие экрана рукой. Например, кнопка «настройки», которая ведет на другой экран, может быть размещена без учета перекрытия рукой, так как нет никаких параметров. А вот кнопка изменения, например, оборотов, уже должна быть размещена с учетом того, чтобы было видно изменение показателя при настройках.
4. Старайтесь делать типовые элементы управления, располагайте их в одних и тех же местах экрана. Вам будет легче программировать, а пользователю будет легче освоить интерфейс.
5. Делайте подсветку нажатий кнопок — это улучшает обратную связь.
6. Не стесняйтесь какие-то долгие процессы, например, опрос датчиков, прятать под «отображение процесса» (progress bar). Как это сделать расскажу в следующих частях.
7. Работа экрана на ардуино имеет свою специфику. Например, для смены экранов требуется очистить предыдущее изображение. Делать это можно по-разному — можно чистить весь экран (долго), можно чистить определенные области (быстрее).
8. Не забывайте про динамические значения. Например, вы отображаете напряжение. Измерили — оно составило 3,347 вольт. Измерили еще раз, оно составило 3,7 вольт. Без специальных хитростей на экране вы увидите что-то типа 3,747 вольт. Количество знаков у нас уменьшилось, но кроме нас никто не знает, что область надо очистить.
Есть несколько решений:
- Перед выводом нового значения очищать область, например, заливкой прямоугольника нужного размера. Этот прием подходит не всегда, так как визуально заметны моргания;
- Всегда добавлять определенное количество пробелов в конце. Визуально смотрится лучше, но в ряде случаев могут затираться названия параметров, в нашем случае вольты;
- Проверять длину строки и в зависимости от этого принимать решение добавлять пробелы в конце или нет.
- Заранее определиться какое максимальное количество символов будем выводить, и в соответствии с этим форматировать вывод. В нашем случае 3,7 должно будет отобразиться как 3,700.
9. С цветами в интерфейсе лучше определиться заранее. Потом просто запрограммируете их в начале скетча вот в таком виде:
#define ORANGE 0xFC00
Далее будете ссылаться на нужный цвет в удобоваримом виде:
tft.fillRect(128, 168, 124, 19, ORANGE);
Большинство дисплеев отображает только 65 000 цветов. Это мало. Будьте готовы к тому, что придется попотеть, прежде чем подберете нужные оттенки. Для перевода цвета из «компьютерного» формата в формат RGB565 есть онлайн инструменты:
http://rinkydinkelectronics.com/calc_rgb565.php
http://www.drakker.org/convert_rgb565.html
https://barth-dev.de/online/rgb565-color-picker/
https://trolsoft.ru/ru/articles/rgb565-color-picker
https://portal-pk.ru/rgb888-to-rgb565.html
Возможно ваш редактор будет иметь готовую палитру.
10. Сначала продумайте всю логику работы. Если не можете всё уложить в голове, то напишите на бумаге. Продумывать или расписывать надо до мельчайших подробностей. Вплоть до того, где и на сколько отображать процесс загрузки и т. п.
11. Продумывайте и отрисовывайте в графическом редакторе весь интерфейс заранее.
12. Всегда обозначайте в графическом редакторе области касания.
13. Всегда сохраняйте настройки в памяти микроконтроллера, чтобы после перезагрузки или сброса по питанию устройство загрузилось в том виде, как его настроил пользователь.
14. Мыслите хитро. Обновляйте значения и опрашивайте периферию только там, где это необходимо.
Например, на главном экране у нас есть обороты вентилятора, а на странице настроек нет. Значит нет необходимости считывать обороты вентилятора на странице настроек, поскольку считывание оборотов — блокирующее действие, которое при низких оборотах занимает длительное время и приводит к «подтормаживанию» интерфейса. Не опрашивайте периферию там, где это не надо. Поверьте, если пользователь, покопавшись в настройках, выйдет на главный экран и увидит там не совсем актуальное значение, он этого никогда не заметит.
15. Старайтесь избегать блокирующих действий, например, не используйте delay без необходимости. И наоборот: используйте delay там, где необходимо на время заблокировать действия пользователя — есть такие, которые любят беспорядочно нажимать кнопки в любой непонятной ситуации.
16. Группируйте и разделяйте показания разного типа. Температура и влажность внутри помещения слева, температура и влажность снаружи справа — считываться будет легко. Ни в коем случае не влажности справа, температуры слева.
17. Делайте пиктограммы вместо текста. Да это сложнее, но для восприятия удобней и выглядит красивее.
18. Не забывайте про навигацию. Пользователь всегда должен понимать, где он находится.
19. Второстепенные элементы интерфейса обозначайте «приглушенными» цветами. Например, при выводе температуры знак градусов Цельсия можно сделать серым. Всем и так понятно в чем у нас измеряется температура. Какие-то нестандартные величины лучше обозначать более явно.
20. Не снимайте защитную плёнку с экрана до тех пор, пока полностью не закончите проект. Поверьте, тыкать по экрану в процессе работы придется много, если повредите, вам потом с таким экраном жить.
21. При разработке интерфейса вы будете часто сталкиваться с противоречиями. Например, параметр надо отобразить крупным текстом, а места мало. Старайтесь разрешать противоречия творчески, а не при помощи компромиссов. Творческим решением может быть чередование параметров на экране, а компромиссом уменьшение размеров других, не менее важных показателей. Интерфейс состоящий только из компромиссов не всегда хороший.
22. Не впадайте в перфекционизм. Главное вовремя остановится. :)
23. Требования и задумки не всегда получается исполнить. Надо быть к этому готовым.
Теперь давайте на основе всего изложенного сформулируем сами себе простенькое «техническое задание». В кавычках по тому что на реальном производстве всё это выглядит несколько иначе. Не всегда лучше, чем здесь. :)
ТЗ:
Устройство управления оборотами 4-х проводного компьютерного вентилятора с отображением оборотов вентилятора на цветном тач экране и возможностью их регулировки от минимума до максимума из дополнительного меню. Также предусмотреть регулировку периода опроса оборотов вентилятора от 5 до 30 секунд и кнопку принудительного опроса оборотов на главном экране. Показания должны быть легко читаемы с расстояния 1,5-2 метра. Всё управление выполнить при помощи тач экрана. Цвета интерфейса и текстовые надписи — на усмотрение исполнителя (мы же делаем для себя).
Изначально предполагал написать короткую статью, но в процессе написания стало понятно, что в одну часть уложиться не получается. Поэтому материал будет разбит на несколько частей. Регулярность выхода частей не гарантирую. Писать буду по мере наличия желания и свободного времени. В следующей части будем проектировать интерфейс от начала и до конца. Благо он видится не таким объемным.
По традиции: больше интерфейсов вам в ваших изделиях. Хороших и разных.
