Управляем светодиодами через браузер

Дата: 2015-10-27 22:08 / Категория: Связь / Автор: DOC_tr

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

А сегодня мы попробуем вывести нашу плату Arduino на новый уровень и дать ей доступ к интернету с помощью модуля Ethernet ENC28J60.

Для этого нам потребуется всего ничего: интернет-кабель (я использую роутер и модуль был соединен с компьютером не напрямую), сам модуль и парочка светодиодов для возможности включать и выключать их через интернет.

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

На всякий случай, если из схемы не все ясно и понятно, то продублирую сюда текстом что и куда втыкается.
В скобочках указаны значения для ENC28J60 с 12 пинами

VCC (Q3) и GND - плюс (3.3v а не 5, как обычно) и земля соответственно;
CS - 10 порт;
SI (ST) - 11 порт;
S0 - 12 порт;
SCK - 13 порт.

После подключения заливаем следующий скетч на ардуино (Библиотеку EtherCard можно взять здесь):

#include <EtherCard.h>

// мак адрес вашего устройства
static byte mymac[] = { 0x74, 0x69, 0x69, 0x2D, 0x30, 0x31 };
// ИП вашего устройства
static byte myip[] = { 192, 168, 1, 100 };

byte Ethernet::buffer[500];
BufferFiller bfill;

void setup () {
// так как по умолчанию CS должен коннектиться к 8 порту, а у нас к 10 указываем это 
// (последний аргумент - номер порта)
 ether.begin(sizeof Ethernet::buffer, mymac, 10);
 ether.staticSetup(myip);
}

void loop () {
 word pos = ether.packetLoop(ether.packetReceive());
 if (pos){
 bfill = ether.tcpOffset();
 bfill.emit_p(PSTR(
 "HTTP/1.0 200 OK\r\n"
 "Content-Type: text/html\r\n"
 "\r\n"
 "<title>SERVER ROBOM</title>" 
 "<h1>ROBOM.RU</h1>"
 ));
 ether.httpServerReply(bfill.position());
 }
}

Тут немного поподробнее.

Мак адрес должен быть уникальным у каждого устройства в сети. Если у вас не получается что-то сделать, то, возможно, стоит его заменить. В интернете валяется куча генераторов случайных мак адресов - можно воспользоваться одним из них.

IP должен быть больше, чем IP вашего роутера. У моего роутера IP 192.168.1.33, и следовательно IP нашего устройства может быть от 192.168.1.34 до 192.168.1.255.

Вставляем кабель в модуль и, если есть питание и есть сеть, то рядом с разъемом должна загореться зеленая лампочка:

Если все хорошо, то, запустив браузер и набрав там ip адрес, который мы указали в скетче (192, 168, 1, 100), мы увидим следующее:

За отображение этой страницы отвечает следующий код:

 "HTTP/1.0 200 OK\r\n"
 "Content-Type: text/html\r\n"
 "\r\n"
 "<title>SERVER ROBOM</title>" 
 "<h1>ROBOM.RU</h1>"

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

Как-то не очень красиво смотрится - не хватает картинок. Заменим строку

 "<h1>ROBOM.RU</h1>"

на логотип нашего магазина.

"<img src='https://robom.ru/static/img/head_img.jpg' />"

И на выходе получаем:

Вот мы плавно и подходим к заголовку данной статьи - управлению светодиодами через браузер.

Первым делом, как обычно, у нас происходит сборка. Добавим пару светодиодов по следующей схеме:

Резисторы у нас на 220 Ом и подключены к аноду светодиода.

Также нам нужно изменить наш код, чтобы он мог не только отправлять данные, но и принимать их.

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

#include <EtherCard.h>

static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 192,168,1,100 };

const char website[] PROGMEM = "192.168.1.100";
byte Ethernet::buffer[500];

BufferFiller bfill;

void setup () {
 ether.begin(sizeof Ethernet::buffer, mymac, 10);
 ether.staticSetup(myip);
 Serial.begin(9600);
}

void loop () {
 word pos = ether.packetLoop(ether.packetReceive());
 if (pos){
// получаем заголовки
 char *data = (char *) Ethernet::buffer + pos;
// проверяем на наличие в заголовках нужных нам строк
 if (strstr(data, "?pin=1on")){digitalWrite(6, HIGH);}
 if (strstr(data, "?pin=1off")){digitalWrite(6, LOW);}
 if (strstr(data, "?pin=2on")){digitalWrite(5, HIGH);}
 if (strstr(data, "?pin=2off")){digitalWrite(5, LOW);}
 if (strstr(data, "?pin=allon")){digitalWrite(6, HIGH);digitalWrite(5, HIGH);}
 if (strstr(data, "?pin=alloff")){digitalWrite(6, LOW);digitalWrite(5, LOW);}
 bfill = ether.tcpOffset();
 bfill.emit_p(PSTR(
 "HTTP/1.0 200 OK\r\n"
 "Content-Type: text/html\r\n"
 "\r\n"
 "<meta charset='UTF-8'>"
 "<style>a{color:#3D94D7;display:block;margin:10px;}</style>"
 "<title>SERVER ROBOM</title>" 
 "<img src='https://robom.ru/static/img/head_img.jpg' />"
 "<a href='/?pin=1on'>Вкл 1</a>"
 "<a href='/?pin=1off'>Выкл 1</a>"
 "<a href='/?pin=2on'>Вкл 2</a>"
 "<a href='/?pin=2off'>Выкл 2</a>"
 "<a href='/?pin=allon'>Вкл все</a>"
 "<a href='/?pin=alloff'>Выкл все</a>"
 ));
 ether.httpServerReply(bfill.position());
 }
}

В данном коде у нас есть несколько ссылок, переходя по которым мы получаем URL вроде http://192.168.1.100/?pin=1on. Мы считываем только то, что идет после вопроса, и включаем или выключаем тот или иной светодиод.

Вот так это выглядит в браузере: