RemoteXY. Часть 2

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

Вращение экрана.

Приложение RemoteXY способно работать как в портретном, так и в альбомном режимах экрана.

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

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

Защита устройства паролем.

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

В приложении пароль необходимо ввести как минимум один раз, если установлена галочка “сохранить пароль”.

Настройка цвета.

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

Элементы оформления.

Самым простым элементом оформления является метка - простой текст, помещенный на экран интерфейса. 

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

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

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

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

Разница во внешнем виде среза кромки показана на следующем скриншоте.

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

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

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

Сгенерированный код.

После того, как закончено построение интерфейса, необходимо получить сгенерированный исходный код, нажав “Получить исходный код”.

Пример кода:

// определение режима соединения и подключение библиотеки RemoteXY 

#define REMOTEXY_MODE__HARDSERIAL

#include 

Давайте подробно рассмотрим исходные коды.

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

// определение режима соединения и подключение библиотеки RemoteXY 
#define REMOTEXY_MODE__HARDSERIAL
#include 

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

// конфигурация интерфейса  

#pragma pack(push, 1)

uint8_t RemoteXY_CONF[] =

  { 255,3,0,0,0,211,0,10,16,2,

  130,1,50,48,47,13,1,38,61,17,

  17,2,0,73,50,20,8,33,41,22,

  11,2,26,31,31,79,78,0,79,70,

  70,0,129,0,52,51,18,6,10,43,

  18,6,24,208,157,208,176,209,129,208,

  190,209,129,0,130,1,2,1,47,60,

  2,55,60,43,11,129,0,16,17,14,

  6,23,56,18,6,24,208,161,208,178,

  208,181,209,130,0,129,0,11,26,17,

  6,10,75,18,6,8,208,186,209,131,

  209,133,208,189,209,143,0,129,0,5,

  35,25,6,9,86,25,6,8,208,186,

  208,190,209,128,208,184,208,180,208,190,

  209,128,0,2,0,32,26,15,7,41,

  74,17,8,2,26,31,31,79,78,0,

  79,70,70,0,2,0,32,35,15,7,

  41,86,17,7,2,26,31,31,79,78,

  0,79,70,70,0,129,0,53,2,44,

  6,11,2,44,6,9,208,163,208,188,

  208,189,209,139,208,185,32,208,180,208,

  190,208,188,32,50,46,49,0 };

Далее структура, которая описывает все переменные.

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

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

struct {

    // input variables

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

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

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

    // other variable

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

} RemoteXY;

#pragma pack(pop)

В функции  setup()  содержится команда инициации соединения.

void setup() 
{
  RemoteXY_Init (); 
}

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

void loop() 
{ 
  RemoteXY_Handler ();
}

В структуре RemoteXY  были определены переменные элементов интерфейса. Работа с ними почти не отличается от работы с обычными переменными, за исключением одного нюанса - перед переменной необходимо указать имя структуры (в данном случае RemoteXY), поставить точку, а затем указать имя переменной.

digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);

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

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

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