Arduino Uno и Jquery: контроль сервомотора через сайт

Создаем веб-страницу, которую можно использовать для управления сервомотором с помощью JQUERY и Arduino UNO.

Шаг 1. Что нам понадобится

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

У нас будет не так много комплектующих и все они доступны в интернет-магазинах.

Аппаратные средства

1x - Arduino UNO
1x - Серво-мотор sg90
1x - ESP8266
1x - Адаптер ESP-01
1x - Провода-перемычки

Программное обеспечение

JQUERY

Шаг 2. Принципиальная схема

Сначала подключите ESP8266 к Arduino. Мы использовали адаптер для подключения ESP8266 к Arduino, что упростит соединение. Адаптер имеет регулятор от 5 до 3,3 В, и вам не нужно подключать к нему какие-либо внешние резисторы.

Подключите GND адаптера к GND Arduino
Подключите VCC адаптера к 5V Arduino
Подключите RX от адаптера к контакту 2 Arduino
Подключите вывод TX от адаптера к контакту 3 Arduino

После этого соедините сервомотор с Arduino. Соедините сервомотор с Arduino следующим образом:

Черный провод серводвигателя к выходу GND Arduino
Красный провод серводвигателя к выводу 5V Arduino
Желтый провод серводвигателя на штырь 8 Arduino

Шаг 3. Создание веб-страницы с использованием HTML

Чтобы управлять сервомотором через веб-страницу, нам нужно будет сделать веб-страницу с помощью HTML. Код HTML, который мы создали для нашего проекта, можно скопировать ниже:

<!DOCTYPE html>
<html>
<head>
<title>Web controlled Servo</title>
<script src="jquery.js"></script>
</head>
<body>
<h1> <b> Arduino Web Controlled Servo by Electrosome </b> </h1>
<h4> <b> Enter the IP address below </b> </h4>
<div style="margin: 0; width:500px; height:80px;">
<FORM NAME="form" ACTION="" METHOD="GET">
ESP8266 IP Address:
<INPUT TYPE="text" NAME="inputbox"
VALUE="192.168.0.9">
</FORM>
</div>
<h3> Scroll it to move the servo </h3>
<input type="range" min="20" max="170"
onmouseup="servo1(this.value)" />
</body>
<script>
$.ajaxSetup({timeout:1000});
function servo1(angle)
{
TextVar = form.inputbox.value;
ArduinoVar = "http://" + TextVar + ":80";
$.get( ArduinoVar, { "sr1": angle }) ;
{Connection: close};
}
</script>
</html>

Если вы хотите переименовать файл, измените имя файла, но убедитесь, что он имеет «.html» в конце.

После этого загрузите файл JQUERY, который ниже, и поместите этот файл в ту же папку, что и файл HTML.

Скачать файл jQuery .pdf

После этого откройте HTML, и веб-страница будет выглядеть так:

Измените имя и пароль Wi-Fi в коде Arduino своими именем и паролем и загрузите код в Ардуино. Откройте последовательный монитор, и он покажет вам IP-адрес, как показано на следующем рисунке:

Введите этот IP-адрес в форме на веб-странице, и когда вы переместите ползунок, сервомотор начнет движение.

Шаг 4. Код проекта

Сам код проекта вы можете скачать или скопировать ниже:

Скачать servo-internet.ino

#include <SoftwareSerial.h>
#include <Servo.h>
SoftwareSerial esp8266(2,3);

#define DEBUG true 
#define sg90_pin 8 

Servo sg90; 

int current_position = 170;
int vel = 10; 
int minimum_position = 20; 
int maximum_position = 160;


void setup()
{
  sg90.attach(sg90_pin);
  sg90.write(maximum_position);
  sg90.detach();
  Serial.begin(9600);
  esp8266.begin(9600);
  
  esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset module
  esp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode
  esp8266Data("AT+CWJAP=\"Tenda_31BC98\",\"barcelona\"\r\n", 2000, DEBUG);   //connect wifi network
  while(!esp8266.find("OK")) { //wait for connection
  } 
  esp8266Data("AT+CIFSR\r\n", 1000, DEBUG); 
  esp8266Data("AT+CIPMUX=1\r\n", 1000, DEBUG); 
  esp8266Data("AT+CIPSERVER=1,80\r\n", 1000, DEBUG); 
}


void loop()
{
  if (esp8266.available())  
  {
    if (esp8266.find("+IPD,")) 
    {
      String msg;
      esp8266.find("?"); 
      msg = esp8266.readStringUntil(' '); 
      String command = msg.substring(0, 3); 
      String valueStr = msg.substring(4);   
      int value = valueStr.toInt();         
      if (DEBUG) {
        Serial.println(command);
        Serial.println(value);
      }
      delay(100);
      
      //move servo1 to desired angle
      if(command == "sr1") {
         //limit input angle
         if (value >= maximum_position) {
           value = maximum_position;
         }
         if (value <= minimum_position) {
           value = minimum_position;
         }
         sg90.attach(sg90_pin); //attach servo
         while(current_position != value) {
           if (current_position > value) {
             current_position -= 1;
             sg90.write(current_position);
             delay(100/vel);
           }
           if (current_position < value) {
             current_position += 1;
             sg90.write(current_position);
             delay(100/vel);
           }
         }
         sg90.detach(); //dettach
      }

    }
  }
}

String esp8266Data(String command, const int timeout, boolean debug)
{
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while ( (time + timeout) > millis())
  {
    while (esp8266.available())
    {
      char c = esp8266.read();
      response += c;
    }
  }
  if (debug)
  {
    Serial.print(response);
  }
  return response;
}

Прежде всего, включите библиотеки для серийного программного обеспечения и для серво. Серийная библиотека программного обеспечения поможет нам использовать связь TX и RX на других контактах Arduino.

Серво-библиотека поможет нам легко перемещать серво. После этого мы определили контакты, к которым мы подключили RX и TX от ESP8266, а затем мы определили контакт, к которому мы подключили сервомотор.

#include <SoftwareSerial.h>
#include <Servo.h>
SoftwareSerial esp8266(2,3);
#define DEBUG true
#define sg90_pin 8

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

Затем мы устанавливаем скорость передачи для последовательной связи и ESP8266 на 9600. Установите скорость передачи в ESP8266 в соответствии со скоростью передачи в ESP8266. Ваш ESP8266 может иметь другую скорость передачи.

sg90.attach(sg90_pin);
sg90.write(maximum_position);
sg90.detach();
Serial.begin(9600);
esp8266.begin(9600);

Следующие команды подключат ESP8266 к вашей сети Wi-Fi и установят веб-сервер на IP-адрес и порт, которые он будет показывать на последовательном мониторе после загрузки кода.

esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset module
 esp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode
 esp8266Data("AT+CWJAP=\"Tenda_31BC98\",\"barcelona\"\r\n", 2000, DEBUG); //connect wifi network
while(!esp8266.find("OK")) { //wait for connection
}
esp8266Data("AT+CIFSR\r\n", 1000, DEBUG);
esp8266Data("AT+CIPMUX=1\r\n", 1000, DEBUG);
esp8266Data("AT+CIPSERVER=1,80\r\n", 1000, DEBUG);

Arduino увидит, доступны данные или нет. Если ползунок на веб-странице перемещен, ESP8266 отправит данные в Arduino в соответствии с движением ползунка. Arduino будет перемещать серводвигатель в соответствии со значением, данным от ESP8266.

if (esp8266.available())
{
if (esp8266.find("+IPD,"))
{
String msg;
esp8266.find("?");
msg = esp8266.readStringUntil(' ');
String command = msg.substring(0, 3);
String valueStr = msg.substring(4);
int value = valueStr.toInt();

Следующая функция отправит команды в ESP8266 и отобразит ответ ESP8266 на последовательном мониторе.

String esp8266Data(String command, const int timeout, boolean debug)
{
String response = "";
esp8266.print(command);
long int time = millis();
while ( (time + timeout) > millis())
{
 while (esp8266.available())
 {
  char c = esp8266.read();
  response += c;
 }
}

На этом всё. Впереди нас ждет еще больше проектов.

Контролируем сервопривод через веб-страницу

Шаг 1. Что нам понадобится

Шаг 2. Принципиальная схема

Шаг 3. Создание веб-страницы с использованием HTML

Шаг 4. Код проекта

Добавить комментарий Отменить ответ