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

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

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

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

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

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

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

Справа от флажка сетки находится переключатель текущего стиля.

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

• Изображение — изображение в формате PNG;
• Текст — текстовое поле;
• Прямоугольник — статичная фигура для организации пространства;
• Шкала — прямоугольная шкала;
• Круговая шкала — круговая шкала;
• График — график для вывода последовательности чисел.

Группа элементов управления (только для сенсорного дисплея):

• Кнопка — прямоугольная кнопка, реагирующая на нажатие;
• Кнопка с картинкой — изображение 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). Дисплей работает с растровым отображением шрифта, так что чем больше размер шрифта, используемого в интерфейсе, тем больше памяти он занимает. Это важно помнить при проектировании интерфейса. Во избежание дефицита памяти, лучше всего использовать как можно меньше разных шрифтов.

Кнопка

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

У кнопки можно менять размер, цвет, шрифт и размер текста. Также можно определить наличие скруглений на углах (Стиль) и их радиус (Радиус скругления).

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

А ещё для кнопки можно задать базовое действие, например: переключение страницы.

Кнопка с картинкой

Кнопка с картинкой отображает PNG файл. Цвет фона изображения желательно сделать таким же, как у кнопки. Дисплей не умеет работать с прозрачным фоном файла PNG.

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

Шкала

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

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

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

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

Бегунок

Это движковый регулятор, который при каждом изменении передаёт своё текущее положение.

У бегунка можно изменить размеры, цвет рамки и цвет заполнения, цвет фона и цвет фишки, а также наличие скруглений на углах (Стиль).

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

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

Круговая шкала

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

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

В поле Текст указывается символ, следующий за числовым значением шкалы по центру элемента. Поля Шрифт и Высота шрифта определяют параметры шрифта.

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

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

У переключателя можно изменить ширину/высоту, цвет фона и контура. Также можно определить наличие скруглений на углах (Стиль) и их радиус (Радиус скругления).

Изображение

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

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

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

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

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

График

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

Можно задать максимальное и минимальное значение по Y, и сколько точек по X можно отобразить.

Также имеется два режима отображения: постраничный и одностраничный. В первом режиме, когда на графике не хватит места для очередного значения — он очистится и начнёт выводить значения сначала. Второй режим при переполнении будет непрерывно сдвигать график влево.