Простое управление вашим Arduino через web

Эта статья предназначена для новичков. Здесь будет описано как из web приложения при помощи ajax запросов посылать команды phyton скрипту, который будет передавать их через serial port непосредственно на наш arduino.
Вы приобрели себе Arduino, попробовали несколько примеров, поигрались со скетчами. Но вам этого мало, вы хотите управлять, управлять всем этим добром через интернет. Самый простой способ — это приобрести шилдик с Ethernet-портом и подключить его к Arduino (или приобрести платку с уже встроенным Ethernet ). Но она и стоит дороже и в управлении надо поднатаскаться.

Для работы нам понадобятся:
— HTTP сервер
— интерпретатор python
— Arduino

#!/Python33/python.exe
print ("STATUS: 200 OKnn")
print ("<b>hello world</b>")

Код основного управляющего скрипта на JavaScript предельно прост:

//Порт к которому подключен Arduino
var serialPort = 'COM5';

//непосредственно управляющая функция
var Arduino = function(command, callback){
	$.get('c.py',{
		c:command,
		p:serialPort
	}, callback);
}

Единственное что тут надо менять, как вы догадались, это порт, на котором у вас подключен arduino. Его всегда можно посмотреть в windows используя Диспетчер устройств. Мы его будем передавать в наш python скрипт чтоб тот знал на какой serial port отправлять полученные данные.
Теперь, если мы сделаем вызов нашей функции, например: Arduino(123), то скрипт создаст ajax запрос вида с.py?c=123&p=COM5 и пошлет его на наш python скрипт c.py. Рассмотрим, что он из себя представляет:

#!/Python33/python.exe
import serial
import cgi
print ("STATUS: 200 OKn")
req = cgi.FieldStorage();
ser = serial.Serial(req['p'].value, 9600, timeout=1)
ser.write(bytes(req['c'].value,'latin'))
ser.close()
print ("ok")

Фактически он просто принимает значение параметра «с», передает его в serial port «p» и пишет «ok». Дешево и сердито.

//непосредственно управляющая функция
var Arduino = function(sp, errorCallback) {
	this.serialPort = sp;
	this.errorCallback = errorCallback || function(){
		console.log('Error');
	}
	this.send = function(data, callback){
		var callback = callback;
		var self = this;
		data['p'] = this.serialPort;
		data['s'] = Math.round(Math.random()*1000); //на всякий случай, чтобы браузер не кешировал
		$.ajax({
			url:'c.py',
			data:data,
			success:function(data){
				if($.trim(data) == 'error'){
					self.errorCallback();
				} else {
					if(typeof callback == "function") callback(data);
				}
			}
		});
	}
	//передаем 
	this.set = function(command, callback){
		this.send({
			c:command,
			r:0
		}, callback);
	}
	//передаем и ожидаем ответ
	this.get = function(command, callback){
		this.send({
			c:command,
			r:1 //флаг отвечающий за режим "ожидаем ответа"
		}, callback);
	}
		
}

 var myArduino = new Arduino('COM5');
 myArduino.set(113); //зажигаем светодиод на пине 13
 myArduino.get(36,function(data){console.log(data)}); //смотрим состояние пина 6. и выводим его в консоль

#!/Python33/python.exe
import serial
import cgi

print ("STATUS: 200 OKn")
req = cgi.FieldStorage();

try:
  	ser = serial.Serial(req['p'].value, 9600, timeout=1)
except: 
  	print("error")
  	exit()

ser.write(bytes(req['c'].value,'latin'))
if int(req['r'].value) == 1:
	res = '';
	while not res:
		res = ser.readline()
	print(res.decode('UTF-8'))
else:
	print ("ok")
ser.close()

Теперь давайте рассмотрим скетч для arduino, который все это принимает и обрабатывает:

#include <Servo.h> 
 
Servo myservo;

void setup() {
  Serial.begin(9600);
}

String getParam(){
	String re;
	while (Serial.available()) {
		re.concat(Serial.read()-48);
	}
	return re;
}

int getPin(String p){
  	return p.substring(0,2).toInt();
}

int getVal(String p){
  	return p.substring(2,6).toInt();
}

// Главный цикл
void loop() {
	while (Serial.available()) {
		char command = (char)Serial.read();
		String param = getParam();
		int pin = getPin(param);
		int p;
		switch (command) {
			case '0': //Digital write
				pinMode(pin,OUTPUT);
				digitalWrite(pin, LOW);
		      	break;
		    case '1':  //Digital write
				pinMode(pin,OUTPUT);
				digitalWrite(pin, HIGH);
		      	break;
		    case '2': //Servo
				myservo.attach(pin);
				p = getVal(param);
				myservo.write(p);
		      	break;
		    case '3': //Digital read
				pinMode(pin,INPUT);
				Serial.print(digitalRead(pin));
		      	break;
		    case '4': { //Analog read
		    	int aPin = A0;
		    	switch (pin) {
		    		case 1: aPin = A1;	break;
		    		case 2: aPin = A2;	break;
		    		case 3: aPin = A3;	break;
		    		case 4: aPin = A4;	break;
		    		case 5: aPin = A5;	break;
		    		}
				Serial.print(analogRead(aPin));
				}
		      	break;
		    case '5': //Analog write
				pinMode(pin,OUTPUT);
				p = getVal(param);
				analogWrite(pin, p);
		      	break;
		}
	}
}

По serial port мы будем передавать команды вида: 1234567 где:
[1] — номер команды
[23] — номер пина
[4567] — данные для пина, если надо.
Например:
113 — установит пин 13 на вывод и передаст по нему состояние HIGH (то-есть включит).
013 — установит пин 13 на вывод и передаст по нему состояние LOW (то-есть выключит).
209100 — установит пин 9 как управляющий сервоприводом и передаст ему значение 100 через ШИМ модуляцию.
310 — установит пин 10 на ввод и считает с него данные HIGH / LOW и вернет как 1 или 0 соответственно.
Вы запросто можете дописывать и свои команды в switch case блок.
Теперь добавим немного красоты в нашу frontend часть и получим, например, такое

Далее я добавил немного магии юзер-интерфейса. Но его я не буду описывать, все интересующиеся могут взять его из архива с проектом.
Для web-части использовал Bootstrap (исключительно из-за удобства и его «резиновости») и jQuery (для ajax).
Теперь посмотрим как это работает.
Сначала надо указать на каком порту у вас устройство и сколько пинов имеет. Потом выбрать на каком пине у вас что находится, и вперед к управлению.

Из недостатков такого подхода можно отметить относительно медленную скорость обмена данных. Чтоб узнать состояние, например, кнопки надо посылать запросы, но слишком часто это делать нельзя, так как можем упереться в занятый serial port. На веб-сокетах работало бы быстрее, но это уже чуть более продвинутая тема, которую я, если захотите, освещу позже.
Проверялось все под Windows 8 х64. Наверно, есть какие-то особенности реализации всего этого под другие системы, буду рад услышать об этом в комментариях.
Теперь о том, где все это может пригодится: например можно сделать демонстрационный стенд; управлять положением камеры; подключить датчик температуры и прочие приборы и удаленно наблюдать за каким нибудь процессом и т.д.

Архив с проектом
Для запуска на iPad в полный экран я использовал бесплатную программу oneUrl

В тематические хабы не вставил только лишь из за отсутствия кармы.
Это первая моя статья. Буду рад ответить на вопросы.

Автор: Mysterious

Источник