RemoteXY. Часть 3.

В прошлых статьях я познакомил вас с сервисом RemoteXY, рассмотрел способы связи смартфона и контролируемого устройства, а также рассмотрел элементы оформления и особенности генерируемого кода. Настало время познакомиться с элементами управления.

Элементы управления.

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

// структура определяет все переменные и события вашего интерфейса управления 

struct {



    // input variables

  uint8_t button_1; // =1 если кнопка нажата, иначе =0 

  uint8_t button_2; // =1 если кнопка нажата, иначе =0 

  uint8_t button_3; // =1 если кнопка нажата, иначе =0 

  uint8_t button_4; // =1 если кнопка нажата, иначе =0 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Имя переменной по умолчанию button, но можно изменить на более понятное значение (не забываем про самодокументируемый код) согласно правилам Си. Тип переменной uint8_t, хотя приложение передает в контролируемое устройство всего 2 значения - 0 или 1. Логичнее было бы использовать для кнопки булево значение, но создатель RemoteXY решил иначе.

Выключатель - элемент управления с двумя фиксированными состояниями.

Имеет следующие настройки: форма выключателя (овальная или прямоугольная), цвет выключателя и надписей, текст надписей.

struct {



    // input variables

  uint8_t switch_1; // =1 если переключатель включен и =0 если отключен 

  uint8_t switch_2; // =1 если переключатель включен и =0 если отключен 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Работа с переменной выключателя не отличается от работы с переменной кнопки, она также принимает лишь два значения - 0 или 1, тип переменной uint8_t.

Переключатель - элемент управления с несколькими (от 2 до 10) устойчивыми положениями. Имеет следующие настройки: цвет фона и активного маркера, количество положений и ориентацию (горизонтально или вертикально).

struct {



    // input variables

  uint8_t select_1; // =0 если переключатель в положении A, =1 если в положении B, =2 если в положении C, ... 

  uint8_t select_2; // =0 если переключатель в положении A, =1 если в положении B, =2 если в положении C, ... 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Переменная принимает значение от 0 до 9, тип переменной uint8_t. 

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

struct {



    // input variables

  int8_t slider_1; // =0..100 положение слайдера 

  int8_t slider_2; // =-100..100 положение слайдера 

  int8_t slider_3; // =0..100 положение слайдера 

  int8_t slider_4; // =0..100 положение слайдера 

  int8_t slider_5; // =-100..100 положение слайдера 

  int8_t slider_6; // =0..100 положение слайдера 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Переменная слайдера может принимать значения от 0 до 100, если позиция центра задана на краю слайдера, либо от -100 до 100, если позиция центра задана в по средине слайдера, тип переменной int8_t. 

И в тему радиоуправления игрушек отлично вписывается следующий элемент управления.

Джойстик - полноценная замена аналоговому стику. По сути это два перпендикулярно расположенных слайдера с центрированием по средине. Также как и слайдер, джойстик имеет отключаемую функцию авто центрирования. Если она не включена, то центрировать положение джойстика можно специальной кнопкой центрирования, вывод который на экран является опцией джойстика. Кроме того, джойстик умеет считывать значения с G-сенсора смартфона, и передавать его на контролируемое устройство. То есть джойстиком можно управлять наклоняя телефон. И конечно же эту функцию можно отключить переключателем, расположенным рядом с джойстиком.

struct {



    // input variables

  int8_t joystick_1_x; // =-100..100 координата x положения джойстика 

  int8_t joystick_1_y; // =-100..100 координата y положения джойстика 

  int8_t joy_x; // =-100..100 координата x положения джойстика 

  int8_t joy_y; // =-100..100 координата y положения джойстика 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Элемент управления джойстик примечателен тем, что имеет 2 переменные на один элемент управления, помеченные постфиксом _x и _y. Отмечу, что имя переменной можно менять в процессе построения интерфейса, но постфиксы изменять в исходных кодах ни в коем случае нельзя. Также как и слайдер с позицией центра “по средине”, переменные джойстика могут принимать значения от -100 до 100 (0 это центр), тип переменной int8_t. 

RGB круг - интересный элемент управления, позволяет передать значение цвета, разложенное на три составляющих - красную, зеленую и синюю, несмотря на то, что сам элемент работаем с палитрой HSB.

Настроек кроме цвета и имени переменной не имеет.

struct {



    // input variables

  uint8_t rgb_1_r; // =0..255 значение Красного цвета 

  uint8_t rgb_1_g; // =0..255 значение Зеленого цвета 

  uint8_t rgb_1_b; // =0..255 значение Синего цвета 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Элемент интересен тем, что имеет три переменных,по одной для каждой составляющей спектра, помеченные постфиксами _r, _g и _b. Каждая переменная может принимать значение от 0 до 255, тип переменной uint8_t. 

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

Длина текстовой строки (переменная типа char) в байтах задается при конфигурации интерфейса. При передаче текстовой строки используется кодировка UTF-8, в которой некоторые символы могут занимать 2 байта. Поэтому длина строки в символах может не совпадать с длинной строки в байтах. 

Вещественному числу (переменная типа float) можно ограничить количество знаков после запятой. Если введено больше знаков после запятой, то число будет округлено до установленного количества знаков. Если попытаться ввести строку через буфер обмена, то все символы кроме цифр пропадут.

Ввод целого числа (переменная типа int16_t)  допустим в диапазоне от -32768 до 32767, если введено число больше или меньше, то оно будет заменено на максимальное или минимальное число из допустимого диапазона.

struct {



    // input variables

  char edit_1[11];  // =строка UTF8 оканчивающаяся нулем  

  float edit_2;

  int16_t edit_3;  // 32767.. +32767 



    // other variable

  uint8_t connect_flag;  // =1 if wire connected, else =0 



} RemoteXY;

#pragma pack(pop)

Так выглядят переменные текстовой строки в зависимости от выбранного типа данных.

На что стоит обратить внимание. Значение переменных элементов управления при подключении приложения к контролируемому устройству считываются приложением и элементы управления устанавливаются в соответствии с прочитанными значениями. Это значит, что переменным элементов управления можно заранее присвоить некоторые значения до функции setup().

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