Графический интерфейс для дуни - Микроконтроллеры - Чертежи и проекты - Каталог статей - RC

Для организации пользовательского интерфейса я в своих Arduino-проектах частенько использую TFT экраны с тачскрином. Во-первых, это удобно - устройство вывода оно же устройство ввода. Нет нужды паять и перепаивать кучу кнопок на регистрах - любое нужное количество можно просто нарисовать. Во-вторых, это красиво - дисплей цветной и может отображать достаточно большое кол-во цветов и оттенков (1000+ - зависит от модели).

А теперь о грустном... Попробуйте нарисовать для своего проекта на экране клавиатуру... Получится эдак кнопок под 80. Это сколько же кода понаписать придется. А ведь и каждой кнопочке свои координаты дать надо! Сразу как-то муторно становится, руки опускаются и лень одолевает. Но лень, как известно, двигатель прогресса. Клавиатурку то хочется... Да и не только ее.

Решение было найдено - динамический интерфейс с визуальным редактором.

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

Теория

Любой пользовательский интерфейс в общем случае можно представить в виде набора различных экранов, сменяющих друг друга. Каждый экран - представляет собой некоторый набор статических картинок, выводимые данные и нарисованные активные элементы (кнопки). Если все это обобщить, то можно представить экран в виде набора элементов двух типов: статические пассивные элементы и активные элементы. Пока к статическим элементам я отнес надписи (Label), а к активным - кнопки. Вернее это не совсем кнопки... Я пока обозвал их Border. Это некая рамка внутри которой посередине помещается текст. Если нажать на область внутри рамки, то программа получит идентификатор этой области и сможет произвести некое действие. В будущем предполагается расширять список элементов пока не надоест.

Пока же я формализовал то, что есть. Получилось следующее:

Экраны

Экран может занимать как всю область TFT дисплея, так и его часть. Поэтому правильнее говорить об окне. А последнее должно обладать размерами (width x height). Так же окно должно иметь некий фоновый цвет (BackColor). Ну и цвет, которым по-умолчанию будут рисоваться элементы (FontColor). Информация об окне и элементах этого окна сохраняется в набор файлов файлов. А именно в три файла. Все они имеют одинаковое имя и отличаются расширениями. Основной файл имеет расширение scr. Именно он должен будет зачитываться ардуиной. Второй файл - ids. Это xml для редактора интерфейса. Его основное назначение - связать числовые уникальные идентификаторы элементов с понятными разработчику именами. Третий файл - это заголовочный файл языка Си. В него должен будет генериться код (дефайнсы) для того, чтобы и в среде ардуино можно было при обработке отклика интерфейса обрабатывать не безличные числа, а говорящие названия.

Элементы

Каждый элемент интерфейса должен быть типизирован. Пока предполагается два типа - статический пассивный текст (Label) и активная область (Border). Дальше предполагаю сделать отдельные типы для текстовых и числовых полей ввода, кнопки, чекбоксы(галка), переключатели radiobutton. Так же предполагаю иметь возможность наряду с векторной графикой (линии, кружочки, прямоугольнички) использовать растровую графику как для всего экрана, так и для отдельных элементов.

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

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

Форматы файлов.

В первом байте содержится размер данных, описывающих параметры окна. На данный момент - это 10 байт. Далее по порядку следуют сами параметры:

2 байта – ширина экрана

2 байта – высота экрана

2 байта – цвет фона

2 байта – цвет текста

2 байта – цвет рамки активного элемента

2 байта – цвет рамки пассивного элемента

Затем следуют структуры, описывающие элементы. Порядок тут не важен. Структура хранения каждого элемента следующая:

2 байта – размер данных

1 байт – тип элемента

1 байт – ID элемента

2 байта – положение Х

2 байта – положение Y

1 байт – длина элемента

1 байт – высота элемента

2 байта – цвет фона

2 байта – цвет текста

1 байт – Can Select

1 байт – кол-во символов в надписи

N байт – массив символов надписи (пока только латинские)

файл IDS

Это фактически xml. Нужен он исключительно для визуального редактора. В нем хранится информация, аналогичная файлу SCR, но в более удобном виде. Информация расширена именами элементов.

файл H

Это заголовочный файл языка Си. В него сохраняются дефайнсы для удобства работы с активными элементами.

Визуальный редактор

Визуальный редактор интерфейса был зачат под Microsoft Visual Studio 2010. Все обошлось без каких-либо изысков стандартным набором компонентов. В прообразе получилось как-то так:

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

Слева от рабочего поля две закладки свойств. Screen - это свойства экрана. Elements - это свойства элементов интерфейса. Наверху - зачатки будущего тулбара. На нем кнопки создания новых элементов интерфейса и кнопки чтения/записи.

Разработка библиотеки

20.01.15 На данный момент сделан рабочий тест NumKeyboard. Прошивка представляет собой цифровую клавиатуру. Лог работы и результат выводятся в Serial.