Каталог

КАК ЭТО РАБОТАЕТ

Быстрый старт

Варианты связи с контроллером

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

Как получить исходный код

Как использовать графический интерфейс для своей задачи

Дополнительные функции библиотеки

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

Элементы индикации

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

Модули связи

Библиотека

Как перенести интерфейс в IDE FLProg

Обновление прошивки ESP8266

Как использовать графический интерфейс для своей задачи



После разработки графического интерфейса в редакторе, вы можете получить исходный код проекта для микроконтроллера, например Arduino. Сформированный автоматически исходный код или скетч - это шаблон, реализующий ваш интерфейс. Этот код уже работоспособен и можно протестировать ваш графический интерфейс, подключившись к нему со смартфона или планшета. Для этого необходимо открыть код в IDE, скомпилировать, загрузить в микроконтроллер, к микроконтроллеру правильно подключить используемый модуль связи. На смартфон/планшет необходимо установить приложение RemoteXY. Проделайте это обязательно перед доработкой кода, что бы убедиться в работоспособности интерфейса.

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

Сформированный исходный код имеет большой участок, который выделен тегами RemoteXY include library и завершается тегом END RemoteXY include. Эта часть кода определяет структуру графического интерфейса, который вы создали. В свою очередь данная структура так же разделена на части. Рассмотрим по порядку.

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

Код содержит определение, каким образом используется подключение к интерфейсу. Это определение вида REMOTEXY_MODE__ XXX. Например, если вы используете SoftwareSerial, это определение будет иметь вид REMOTEXY_MODE__SOFTWARESERIAL, если HardwareSerial - REMOTEXY_MODE__SERIAL соответственно.

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

Пример участка кода приведен ниже.

/* определение режима соединения и подключение библиотеки RemoteXY */ #define REMOTEXY_MODE__SOFTWARESERIAL #include <SoftwareSerial.h> #include <RemoteXY.h>

Настройки соединения

Эта часть кода более детально определяет характеристики выбранного подключения. Например, если вы используете подключение через SoftwareSerial, вы можете определить, к каким пинам микроконтроллера будет подключен модуль Bluetooth. Вы так же можете определить скорость обмена с модулем Bluetooth, если она отличается от стандартной, равной 9600 бод. Все определения имеют значение по умолчанию, но вы можете их изменить так, как необходимо вам. Это единственный участок кода в разделе подключения RemoteXY, который вы можете поправить.

Пример участка кода приведен ниже.

/* настройки соединения */ #define REMOTEXY_SERIAL_RX 2 #define REMOTEXY_SERIAL_TX 3 #define REMOTEXY_SERIAL_SPEED 9600

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

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

Пример участка кода приведен ниже.

/* конфигурация интерфейса */ unsigned char RemoteXY_CONF[] = { 2,2,37,0,1,5,2,0,9,8 ,32,16,2,79,78,0,79,70,70,0 ,4,0,78,9,13,50,2,65,4,46 ,8,16,16,2,66,128,8,47,63,11 ,2 };

Структура данных интерфейса управления

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

Пример участка кода приведен ниже.

/* структура определяет все переменные вашего интерфейса управления */ struct { /* input variable */ unsigned char switch_1; /* =1 если переключатель включен и =0 если отключен */ unsigned char slider_1; /* =0..100 положение слайдера */ /* output variable */ unsigned char led_1_r; /* =0..255 яркость красного цвета индикатора */ unsigned char level_1; /* =0..100 положение уровня */ /* other variable */ unsigned char connect_flag; /* =1 if wire connected, else =0 */ } RemoteXY;

Функция setup

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

Пример, как можно установить начальное положение выключателя

void setup() { RemoteXY_Init (); pinMode (PIN_SWITCH_1, OUTPUT); // TODO you setup code RemoteXY.switch_1 = 1; // После запуска выключатель "ВКЛЮЧЕН" }

Функция loop

Функция loop() имеет вызов обработчика RemoteXY_Handler (). Не удаляйте этот код. Обработчик RemoteXY_Handler должен вызываться в каждом цикле программы. Вызов необходим для того, что бы библиотека RemoteXY могла обработать очередную порцию данных об элементах управления, переданных со смартфона и предать на смартфон новые данные о состоянии элементов индикации.

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

Внимание. Не рекомендуется в процедуре loop использовать задержки delay () и другие. Если обработчик RemoteXY_Handler не сможет во время передать необходимую информацию на смартфон, произойдет разрыв соединения.

Пример кода для взаимодействия с элементами управления и индикации

void loop() { RemoteXY_Handler (); // TODO you loop code // используйте структуру RemoteXY для передачи данных // Включаем светодиод на плате пин 13 по выключателю switch_1 if (RemoteXY.switch_1 == 1) digitalWrite (13, HIGH); else digitalWrite (13, LOW); // Зажигаем светодиод led_1_r на графическом интерфейсе если на пин 5 есть напряжение if (digitalRead(5)==HIGH) RemoteXY.led_1_r = 255; else RemoteXY.led_1_r = 0; }

Замените delay()

Если вашему коду все еще требуется задержка delay(), вы можете заменить ее на RemoteXY_delay(). Функция RemoteXY_delay из RemoteXY так же выполнит задержку на требуемое количество миллисекунд, но она так же будет обеспечивать работу RemoteXY.

void loop() { RemoteXY_Handler (); digitalWrite(LED_BUILTIN, HIGH); // turn on LED_BUILTIN RemoteXY_delay(1000); // wait for a second digitalWrite(LED_BUILTIN, LOW); // turn off LED_BUILTIN RemoteXY_delay(1000); // wait for a second }