Редактор интерфейса

Дисплей ФОТОН имеет свой собственный контроллер, который отвечает за отрисовку графики. Чтобы этому контроллеру было что выводить на дисплей, необходимо заранее создать схему каждой страницы, в которой будет определено: где какой элемент управления находится, какие тексты написаны, какими шрифтами и какие изображения присутствуют в кадре. А затем загрузить эту схему и всё, что с ней связано, в память контроллера дисплея.

Для конструирования интерфейса используется специальный редактор Фотон-РИ, который был разработан специально для Фотон. Найти его можно по ссылке в конце урока.

Сверху расположен ряд кнопок для управления проектами, черновиками и файлами:

• Новый проект — создание нового интерфейса с нуля;
• Сохранить черновик — сохранение текущего проект в сессию браузера. Эта функция пригодится, если необходимо ненадолго отойти от компьютера или перезагрузить компьютер;
• Загрузить черновик — загрузка текущего проекта в редактор;
• Сохранить .bin — сохранение текущего проекта в файл данных с расширением .bin для последующей загрузки в дисплей Фотон;
• Открыть .bin — загрузка текущего проекта из файла данных .bin в редактор.
• Настройки — настройки проекта.

Ниже размещен переключатель страниц и настройка сетки. Листать страницы можно стрелочками. Если страница ещё не существует, редактор предложит её создать.

Флажок «Сетка» отображает на экране сетку и привязывает к ней элементы. В соседнем текстовом поле можно задать шаг сетки. По умолчанию, шаг сетки равен 5 точкам.

Слева размещаются кнопки для создания различных элементов управления:

• Текст — текстовое поле;
• Кнопка — прямоугольная кнопка, реагирующая на нажатие (для сенсорного дисплея);
• Шкала — прямоугольная шкала;
• Радиус — круговая диаграмма;
• Переключатель — овальный переключатель, реагирующий на нажатие (для сенсорного дисплея);
• Изображение — изображение в формате PNG;
• Прямоугольник — статичная фигура.

Справа отображается блок параметров текущего объекта: графического элемента или страницы:

• Индекс элемента — индекс элемента на текущей странице; именно с помощью этого индекса осуществляется доступ к элементу при управлении через UART/I2C;
• Координата x/y — координаты элемента в пикселях;
• Текст — текст элемента; в случае кнопки и шкалы отображается по центру элемента;
• Ширина/Высота — размеры элемента; в случае изображения задаёт область чувствительности при наличии сенсорной панели;
• Цвет фона/Цвет текста — цвет;
• Высота шрифта — высота шрифта в пикселях;
• Шрифт — один из нескольких предустановленных шрифтов;
• Эффект нажатия — при нажатии элемент будет менять цвет фона и цвет текста;
• Цвет фона при нажатии/Цвет текста при нажатии — см. выше.
• Сегменты — внешний вид шкалы: сплошная или разбитая на сегменты;
• Файл — файл изображения; в элементе Изображение можно задать два файла, для переключения между ними; в элементе Кнопка изображение будет размещено по центру;
• Макс. значение — максимальная величина, которая может быть присвоена элементу.

Цветовое пространство

Фон первой страницы сделаем чёрным, а цвет текста — оранжевым (E8AA3B). Отметим, что контроллер дисплея PH3224T32S3 работает с 16-разрядным цветовым пространством, тогда как во всех графических редакторах на ПК обычно используется 24-разрядное пространство.

Это означает, что дисплей может отобразить только часть полутонов 24-разрядного цвета. Так, например, группа полутонов от E8AA3A до E8AA3F, на дисплее превратятся в один и тот же ED47.

Настройка интерфейса

Если нажать кнопку Настройки — появится окно с базовыми настройками проекта.

Поворот — ориентация графической информации на матрице дисплея. Всего имеется 4 варианта: 0, 1, 2 и 3. По умолчанию выбран режим 1. В этом режиме верх дисплея находится со стороны слота для microSD-карты.

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

На обратной стороне дисплейного модуля Фотон имеется два разъёма для работы с UART и один для I2C:

• разъём USB Type-C с надписью USB-UART;
• разъём PH2.0 4-контактный с надписью UART;
• разъём SH1.0 4-контактный с надписью QIIC.

Каждый из этих разъёмов использует свой аппаратный UART интерфейс, который необходимо указать в настройках проекта.

По умолчанию выбран интерфейс UART0 и скорость 115200 бод.

Страницы

Как уже было указано выше, страницы листаются и создаются при помощи переключателя в верхней части экрана редактора. Единственный изменяемый параметр у страницы — это цвет фона.

При создании нового проекта первая страница создаётся автоматически. По умолчанию, первая страница имеет чёрный фон.

Текстовое поле

Текст может иметь разный шрифт, высоту и разный цвет.

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

Примечание. В версии редактора 0.5 шрифты не соответствуют реальным шрифтам, которые указываются в настройках элементов управления. Так что, по факту, длина надписи может оказаться больше или меньше, той, которую мы видим в в редакторе (будет исправлено в будущих версиях).

Кнопка

Кнопка — базовый элемент управления. Очевидно, что кнопка работает только на дисплеях с сенсорной панелью. При нажатии на кнопку, дисплей будет отправлять соответствующую команду через UART/I2C.

У кнопки можно менять размер, цвет, шрифт и размер текста. Текст на кнопке можно заменить на изображение. В этом случае цвет фона изображения желательно сделать таким же, как у кнопки. Дисплей не умеет работать с прозрачным фоном файла PNG.

Можно сделать так, чтобы при нажатии кнопки она меняла цвет фона и текст. Эту реакцию можно отключить при помощи флажка «Эффект от нажатия».

Шкала

Данный индикатор может применяться для информировании пользователя о степени выполнения какого-либо процесса или, например, о степени наполнения ёмкости.

У шкалы можно изменить размеры, цвет рамки и цвет заполнения, а также тип: сплошная или сегментная.

Параметр Макс. значение необходим дисплею для соотношения длины шкалы и предельного значения, которое эта шкала отображает. Например, если отображается степень выполнения от 0% до 99%, то в поле Макс. значение следует указать число 99.

Если установить флажок Сегменты — тело шкалы разобьется на сегменты. При этом, общее количество сегментов будет равно значению, заданному в поле Макс. значение.

Радиус

Радиус (круговая диаграмма) служит для тех же целей, что и шкала. Для данного элемента можно указать внешний и внутренний радиусы и толщину контура.

В поле Макс. значение, так же, как и в случае шкалы, следует указывать максимальное значение отображаемой величины.

Переключатель

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

У переключателя можно изменить ширину/высоту, цвет фона и контура.

Изображение

Для изображения можно указать высоту/ширину элемента и два файла с расширением PNG.

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

Также, через UART/I2C можно указать элементу какой файл в данный момент следует отобразить: первый или второй. Эту функцию можно использовать при индикации различных состояний системы, например: выключенный вентилятор и включенный.

Прямоугольник

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

У прямоугольника можно менять размер и цвет. Так, например, можно разбить экран на зоны.