Создаем простое компьютерное приложение
В конце концов, вам надоест "общение" с платой Arduino через монитор последовательного порта Arduino IDE. Гораздо удобнее работать с приложением, написанным на каком-либо языке программирования, имеющем библиотеки для обмена по последовательному порту. Вы можете использовать ваш любимый язык программирования для написания программы, которая посылает последовательные команды к плате Arduino и получает данные, передаваемые от Arduino к компьютеру.
В этой книге выбран язык программирования Processing, потому что он очень похож на язык Arduino, с которым вы уже знакомы. На самом деле, язык программирования Arduino основан на Processing! Другие популярные языки программирования, для которых существуют обширные библиотеки для работы с последовательным портом, — Python, PHP, Visual Basic, С и т. п. Сначала выясним, как читать передаваемые последовательные данные в Processing, а затем узнаем, как с его помощью создать простой графический интерфейс пользователя (GUI) для отправки команд на плату Arduino.
Интерфейс Processing
Интерфейс программирования на Processing достаточно прост и он похож на тот, с которым вы уже знакомы при программировании Arduino. В этом разделе вы установите Processing, а затем напишете простой графический интерфейс для отображения данных, передаваемых с платы Arduino через последовательный порт.
После этого вы реализуете связь в обратном направлении, чтобы управлять платой Arduino из приложения, установленного на вашем компьютере.
Установка Processing
Сначала необходимо установить Processing на вашей машине. Делается это так же, как и в главе 7, когда устанавливали Arduino IDE. Зайдите на страницу https://processing.org/download/ (или найдите ссылку на скачивание на www. exploringarduino.com) и скачайте заархивированный пакет в соответствии с вашей операционной системой. Затем распакуйте его и программа будет готова к работе!
Запустите Processing, и вы должны увидеть окно программы, которое выглядит как на рис. 6.12.
Плата Arduino управляет приложением на Processing
Для первого эксперимента с приложением на Processing подключим к плате Arduino потенциометр, чтобы управлять цветом окна на вашем компьютере. Соберите схему, изображенную на рис. 6.6. Плата Arduino должна послать аналоговые значения от потенциометра к компьютеру. Тот факт, что вы сейчас отправляете последовательные данные в приложение на Processing, не имеет никакого влияния, как вы передаете их.
Соберите следующую схему:
1. Подключите реостат к плате Ардуино следующим образом: крайние контакты подключить к 5V и GND платы Ардуино
2. Средний контакт реостата подключить к контакту А0 Ардуино
3. Ардуино через USB кабель подключить к компьютеру
Скопируйте код из листинга 6.6 и загрузите его на плату Arduino. Arduino посылает обновленное значение от потенциометра в последовательный порт компьютера каждые 50 мс. Если отправлять данные быстрее, приложение на Processing не будет успевать их обрабатывать и буфер последовательного порта на вашем компьютере переполнится.
const int POT = 0;
int val;
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}
void loop() {
// put your main code here, to run repeatedly:
val = map(analogRead(POT),0,1023,0,255);
Serial.println(val);
delay(50);
}
Теперь напишем код для обработки входящих данных. Программа из листинга 6.7 считывает данные из буфера последовательного порта и регулирует яркость цвета на экране вашего компьютера в зависимости от полученного значения. Скопируйте листинг 6.7 и внесите одно важное изменение. В программе на Processing должен быть указан конкретный последовательный порт получения данных. Замените "COM3" на номер вашего последовательного порта. Помните, что в Linux и Мае он будет выглядеть примерно как /dev/ttyUSBO. Если вы не уверены, скопируйте точ-ное название порта из Arduino IDE.
import processing.serial.*;
Serial port;
float brightness=0;
void setup()
{
size(500,500);
port=new Serial(this, "COM5", 9600);
port.bufferUntil('\n');
}
void draw()
{
background(0,0,brightness);
}
void serialEvent(Serial port)
{
brightness=float(port.readStringUntil('\n'));
}
После загрузки кода в Processing IDE и правильной инициализации последовательного порта убедитесь, что монитор последовательного порта Arduino IDE не окрыт. К конкретному последовательному порту может иметь доступ только одна программа на компьютере. В окне Processing-приложения нажмите кнопку Выполнить (кнопка с изображением треугольника в верхнем левом углу окна), при этом должно появиться небольшое окно. При повороте движка потенциометра цвет окна должен меняться от черного к синему (рис. 6.13).
Теперь, когда вы видели результат, для лучшего понимания рассмотрим, как это работает. В отличие от Arduino, библиотека serial не импортируется автоматически. Объявив import processing.serial.* И Serial port, ВЫимпортируете библиотеку serial и создаете объект serial под названием port.
Как и в Arduino, в Processing тоже есть функция setup (), которая работает только в начале программы. В этом примере функция setup о задает последовательный порт и создает окно размером 500x500 пикселов командой size(500,500). Команда port = new serial (this, "сомз", 9600) сообщает Processing о создании экземпляра последовательного порта. Экземпляр (под названием port) будет работать и общаться на COM3 (или другом последовательном порту) со скоростью 9600 бод.
Скорость обмена данными между платой Arduino и программой на компьютере должна быть задана одинаковой, в противном случае возникнут ошибки. Команда port.bufferuntii(f\nf) сообщает Processing-приложению о буферизации последовательного ввода до получения символа новой строки (f \nf).
Вместо loop о в Processing есть другие специальные функции. В нашем примере использованы функции draw () и seriaiEvent (). Функция draw () похожа на loop () в Arduino, она работает непрерывно и обновляет экран. Функция background о задает цвет окна, имеет три аргумента для установки значений красного, зеленого и синего компонентов цвета. В нашем примере значение с потенциометра управляет интенсивностью синего компонента, а красный и зеленый установлены в нуль. При желании программу можно переделать, чтобы регулировать интенсивность других компонентов. Поскольку интенсивности RGB цветов являются 8-битовыми значениями от 0 до 255, значения потенциометра масштабируются функцией тар () перед передачей.
Функция seriaiEvent о вызывается всякий раз, когда выполняется условие buf feruntii (), указанное в функции setup (). При каждом появлении символа пере-вода строки срабатывает функция seriaiEvent (). Передаваемые данные считываются в виде строки с помощью port.readstringuntii('\n'). Строка представляет собой последовательность символов и ее необходимо преобразовать в число с плавающей точкой, вызвав функцию float о. Результат присваивается переменной brigthness, определяющей цвет фона окна приложения.
Чтобы остановить программу и закрыть последовательный порт, нажмите кнопку Стоп в окне Processing-приложения (это квадратик, расположенный рядом с кнопкой Выполнить).
Рисование простых фигур
Опустим описание установки. Сразу приступим к созданию программу. Запускаем Processing и пишем простой код из одной строчки:
ellipse(50, 50, 80, 80);
Эта строка кода обозначает:
Нарисуй эллипс, центр которого находится с центром на расстоянии 50 пикселей от левого края окна и 50 пикселей от верхнего края окна, с шириной и высотой в 80 пикселей.
Щёлкните на кнопку Run с треугольником или выберите в меню Sketch | Run (Ctrl+R).
Если вы написали код без ошибок, то увидите окружность, хотя вроде написали ellipse. Так как мы указали одинаковые высоту и ширину, то и получили окружность. Отредактируйте код, чтобы последние два значения стали различными и снова нажмите на треугольник для запуска программы. Теперь увидите эллипс.
Созданный код можно сохранить на память. В Processing такие файлы называются скетчами (набросками).
Хотя мы задали настройки только для эллипса, на самом деле программа за нас использовала другие параметры для размера окна, цвета эллипса и фона и т.д. Они называются параметрами по умолчанию и позволяют не отвлекаться от задачи. Но иногда нас не устраивают значения по умолчанию, и тогда мы можем переопределить некоторые из них.
size(300, 200); // размер окна в пикселях
background(0, 0, 0); // цвет фона окна
fill(244, 240, 125); // цвет рисования
noStroke(); // выключаем обводку
ellipse(150, 100, 100, 100); // рисуем эллипс
Если запустить программу, то увидим полную луну в ночном небе.
Напишем интерактивную программу. Код будет сложнее. Просто скопируйте и вставьте.
void setup() {
size(480, 120);
}
void draw() {
if (mousePressed) {
fill(0);
}
else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
Эта программа создаст окно шириной 480 пикселей и 120 пикселей высотой. Поместите курсор мыши в область окна и начинайте двигать им. И вы увидите чудо - в окне будут рисоваться белые круги, накладываясь друг на друга. Но это ещё не всё! Нажмите и держите левую или правую кнопку мыши и продолжайте двигать мышь внутри окна. Теперь цвет круга сменится на чёрный.
Запущенную программу можно остановить при помощи кнопки Stop, которая находится рядом с кнопкой Run. На этом первое знакомство со средой разработки можно считать законченным.
Обратите внимание, что среда разработки поставляется с огромных числом готовых примеров для изучения. Выберите меню File | Examples или щелкните по значку Open, чтобы открыть список примеров.
По умолчанию используется окно размером 100x100 пикселей. Вы можете задать собственные размеры через функцию size(). Вам нужно указать два параметра - ширину и высоту.
size(400, 300);
Processing имеет ряд специальных переменных, хранящих информацию о программе в процессе ее работы. Например, ширина и высота окна сохраняются в переменных под названием width и height. Значения переменной устанавливаются в функции size(). Они могут быть использованы для изображения объектов относительно размера текущего окна, даже если параметры функции size() изменяются.
Вы можете использовать комбинацию клавиш Ctrl-/ (Cmd-/ на Mac) для быстрого добавления или удаления комментариев из текущей строки или из выделенного фрагмента текста. Вы также можете превратить в комментарий сразу несколько строк.
Активно используйте автодополнение, если не помните точно имя функции. Введите несколько первых символов, а потом нажмите комбинацию Ctrl+Space. Программа предложит вам подходящие варианты для продолжения.
Когда вы объявляете новую переменную, вы указываете имя, тип данных и значение переменной.
Простые фигуры:
line(0, 60, 480, 60); линияtriangle(10, 10, 100, 20, 40, 90); треугольникrect(10, 10, 230, 100); прямоугольникellipse(280, -100, 400, 400);эллипс Задание: 1 вариант. С помощью реостата изменять диаметр эллипса в окне от маленького до большого 2 вариант. С помощью реостата изменять высоту прямоугольника в окне от маленького до большого
Контрольные вопросы
1. Что такое Processing?
2. Как реализуется программирование на языке Processing?
3. Поясните назначение функций serialEvent(Serial port), void draw(),size(500,500), port.readStringUntil('\n')