Создание PHP-веб-интерфейса для управления Arduino Uno

Компоненты и материалы

td>1

Arduino UNO	1
Arduino Ethernet Shield 2	1
DHT11 датчик температуры и влажности (4 пина)	1
2-канальное реле	4
Мини макетная плата	1
Датчик пламени	1
MQ4 датчик газа (метан)	1
LDR (фоторезистор)	1
Гигрометрический датчик (влажность почвы)	3
ADSL роутерный кабель	1
Вилка (одноканальная)	7
Розетка (одноканальная)	7
9В батарея	1
Кабель питания 9В (barrel jack)

Необходимые инструменты и станки

Клеевой пистолет (горячий клей)

Приложения и онлайн-сервисы

Apache HTTP Server
Notepad++
Arduino IDE

О проекте

Обновление

Как использовать TheAmplituhedron.com для улучшения IoT-проектов? — мой новый проект, который берет на себя серверное программирование. Используя TheAmplituhedron.com как хост, вы можете легко отправлять и получать пакеты данных через интернет.

Чтобы поддержать мои проекты и статьи, посетите мой сайт :)

Описание

Создание профессионального веб-сайта для управления аквариумом и системой полива дома, а также для получения информации о доме, когда я не дома — главная цель этого проекта.

Для достижения цели я создал проект Arduinautomotion, включающий 4 разных HTML-страницы (Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotionformvalue.php, Arduinautomotioncommunication.php) на моем локальном сервере Apache.

Также Arduino Ethernet Shield хостит другую HTML-страницу (ArduinoSide.php), доступную по выбранному IP-адресу, для связи с веб-сайтом Arduinautomotion.

Идея пришла, когда мне пришлось уехать в отпуск на 2 недели и я не мог регулировать аквариум. Иногда нужно выключить внутренний фильтр, чтобы избежать повышения кислорода, или удаленно открыть кормушку для рыб. Я добавил 6 опций управления аквариумом и 1 опцию активации системы полива.

Кроме того, через Arduinautomotion и Arduino Ethernet Shield можно легко получать данные о доме (температура и влажность от DHT11, метан от MQ4).

Таким образом, сайт Arduinautomotion имеет простой интерфейс для получения и отправки данных о доме от Arduino.

Для понимания всего проекта нужны знания HTML, CSS, JavaScript, PHP и jQuery — это просто демонстрация, но если вы знаете языки, найдете все PHP-файлы ниже.

Примечание: Я использовал Notepad++ для программирования веб-страниц.

Создание PHP-веб-интерфейса для управления Arduino Uno

Как отправлять и получать данные между двумя PHP-страницами

Я использовал HTML-формы, PHP-методы и PHP $_SESSION [] для передачи данных между страницами. GET-метод проще для связи, но POST более безопасен, поэтому я использовал POST для общения между страницами, кроме ArduinoSide. Однако GET — самый простой способ общения с Arduino Ethernet Shield, так как HTTP GET-запрос проще POST, поэтому для ArduinoSide использовал GET. Кроме того, PHP $_SESSION [] — способ постоянного хранения данных между более чем двумя страницами.

https://www.w3schools.com/php/php_forms.asp
https://www.w3schools.com/php/php_sessions.asp

Как настроить сайт на Apache HTTP Server (Localhost)

Apache HTTP Server эффективен для такого хостинга, но можно выбрать XAMPP или другой сервер. В моем случае AppServ >> www >> Arduinautomotion.php и его содержимое. Я использовал свой IP-адрес («192.168.1.20» — это Localhost) для доступа к страницам, но вы должны использовать свой IP (как https://yourIPAddress/Arduinautomotion.php).

https://editrocket.com/articles/php_apache_windows.html

Все содержимое Arduinautomotion.php добавлено в пользовательские части ниже.

Как подключиться к Localhost с Android-устройств

Windows отличается от MAC для этой задачи, но ссылка ниже может помочь для Windows.

https://stackoverflow.com/questions/4779963/how-can-i-access-my-localhost-from-my-android-device

После этого, в той же Wi-Fi сети, вы можете легко получить доступ к Arduinautomotion.php со своим IP-адресом.

Как получить доступ к Localhost через Wi-Fi

Windows отличается от MAC, но ссылка ниже может помочь для Windows.

Работает с вашим внешним IP-адресом, но убедитесь, что только вы знаете внешний IP, потому что это может быть опасно.

https://stackoverflow.com/questions/5524116/accessing-localhost-xampp-from-another-computer-over-lan-network-how-to

Также нужно использовать проброс портов для доступа к ArduinoSide.php — работает с IP-адресом, выбранным в коде ArduinoSide.

https://en.wikipedia.org/wiki/Port_forwarding

Arduinautomotion.php

Главная страница для общения с Arduino Ethernet Shield — отсюда можно давать команды Arduino и легко получать данные о доме.

Меню Change объясняет меняющиеся ситуации и показывает, какая часть — объект, а какая — датчик, меняя цвет частей.

Меняющимися кругами показываются значения датчиков и состояния объектов.

1) Секция Room (Комната)

Все данные о комнате, приходящие из Arduinautomotioncommunication.php, отображаются в Секции Room.

До:

После:

2) Секция Aquarium (Аквариум)

Выбранные комбинации о частях аквариума через HTML-формы отправляются в Arduinautomotionformvalue.php, затем возвращаются как вывод из Arduinautomotioncontrol.php в Arduinautomotion.php.

До:

После:

3) Секция Plant (Растения)

Значения гигрометрических датчиков можно наблюдать и решать о запуске полива. Как и в секции Aquarium, данные возвращаются как вывод из Arduinautomotioncontrol.php в Arduinautomotion.php.

До:

После:

4) Секция Guide (Руководство)

Содержит страницу Arduinautomotionformvalue.php для повторного просмотра выборов формы. Также включает инструкции проекта и изображение, объясняющее процесс связи.

5) Alert Box (Окно оповещения)

Когда значения в опасном диапазоне, при перезагрузке Arduinautomotion.php появляется Alert Box с видео Spider-Man и аудио «Spider-sense is tingling».

6) Части Arduinautomotion.php

Адаптивные веб-сайты как руководства:

Все меняющиеся круги:

Footer:

Arduinautomotioncontrol.php

Встроен в Arduinautomotion.php для получения всех данных как $_SESSION [] из Arduinautomotionformvalue.php и Arduinautomotioncommunication.php. Сохраняет данные постоянно через PHP-страницы.

Arduinautomotionformvalue.php

Получает выборы формы из Arduinautomotion.php и отправляет их в ArduinoSide и Arduinautomotioncontrol.php. Встроен в секцию Guide страницы Arduinautomotion.php, но также доступен в новой вкладке.

Arduinautomotioncommunication.php

Данные из ArduinoSide сохраняются Arduinautomotioncommunication.php, после чего автоматически отправляются в Arduinautomotioncontrol.php.

ArduinoSide

Хостится Arduino Ethernet Shield через DNS и доступен по выбранному IP-адресу в коде ArduinoSide (как https://yourChosenIPAddress).

Подключения

Сделайте подключения, как объяснено в коде ArduinoSide и на картинке Fritzing ниже. Подключите одноканальные вилки и розетки к 2-канальным реле и закрепите все компоненты на ровной поверхности, например, пробковой доске.

Arduino
DHT11 Module
Pin 2 -------------------------
2 Way Relay (1)
Pin 3 -------------------------
Pin 4 -------------------------
2 Way Relay (2)
Pin 5 -------------------------
Pin 6 -------------------------
2 Way Relay (3)
Pin 7 -------------------------
Pin 8 -------------------------
2 Way Relay (4)
Pin 9 -------------------------
Arduino Ethernet Shield
Pin 10 --------------------------
Pin 11 --------------------------
Pin 12 --------------------------
Pin 13 --------------------------
LDR
AO --------------------------
Flame Sensor
A1 --------------------------
MQ4 Sensor
A2 --------------------------
Hygrometer Module (1)
A3 --------------------------
Hygrometer Module (2)
A4 --------------------------
Hygrometer Module (3)
A5 --------------------------

Код Arduino в основном похож на пример WebServer из библиотеки Ethernet. Я только добавил код для управления датчиками и выполнения команд, пришедших с сайта Arduinautomotion.

Подключите ADSL-кабель от Arduino Ethernet Shield к роутеру.

После запуска кода Arduino, сайт Arduinautomotion отправляет и получает данные от Arduino через LAN по Wi-Fi.

Тестовые видео

Я протестировал проект после подключения к аквариуму и системе полива (по сути водяной мотор) — проект отлично работает. :) Это тестовое видео проекта Arduinautomotion. Монтировал в пробной версии Filmora, не убрал водяной знак из уважения к их работе.

Компьютер:

Android:

Код

Arduinautomotion.php PHP

<?php session_start(); ?> <!DOCTYPE html> <html> <?php include 'Arduinautomotioncontrol.php'; ?> <head> <link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link> <style> ... (полный код доступен в исходнике) ... </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> ... (JavaScript для интерактивности) ... </script> </head> <body onpageshow="getDataFromArduino()"> ... (HTML-структура с SVG, формами, iframe) ... </body> </html>

Arduinautomotioncontrol.php PHP

<?php session_start(); ?> <!DOCTYPE html> <html> <head> <title>Arduinautomotion</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link> <?php 
$temperatureCelsiusValue = $_SESSION['TemperatureCelsius'];
$temperatureFahrenheitValue = $_SESSION['TemperatureFahrenheit'];
$humidityValue = $_SESSION['Humidity'];
$flamesensorValue = $_SESSION['Flame'];
$MQ4sensorValue = $_SESSION['MQ4Sensor'];
$LdrValue = $_SESSION['LDRSensor'];
$pumpValue= $_SESSION['Airpump'];
$lampValue = $_SESSION['Lamp'];
$feedingValue = $_SESSION['Feeding'];
$heaterValue = $_SESSION['Heater'];
$filterexValue = $_SESSION['Filterex'];
$filterinValue = $_SESSION['Filterin'];
$plant1Value = $_SESSION['Plant1H'];
$plant2Value = $_SESSION['Plant2H'];
$plant3Value = $_SESSION['Plant3H'];
$irrigationValue = $_SESSION['Irrigation'];
?> </head> </html>

Arduinautomotionformvalue.php PHP

<?php session_start(); ?> <!DOCTYPE html> <html> <head> <title>FormValue</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link> <?php 
$_SESSION['Airpump'] = $_POST["pump"];
$_SESSION['Lamp'] = $_POST["lamp"];
$_SESSION['Feeding'] = $_POST["feed"];
$_SESSION['Heater'] = $_POST["heater"];
$_SESSION['Filterex'] = $_POST["filterexternal"];
$_SESSION['Filterin'] = $_POST["filterinternal"];
$_SESSION['Irrigation'] = $_POST["irrigationsystem"];
?> ... (HTML для отображения полученных значений и формы отправки на ArduinoSide) ...

Arduinautomotioncommunication.php PHP

<?php session_start(); ?> <!DOCTYPE html> <html> <head> <title>Communication</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link> <style> body{ background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg"); } </style> <?php 
$_SESSION['TemperatureCelsius']=$_GET["temperatureCelsius"];
$_SESSION['TemperatureFahrenheit']=$_GET["temperatureFahrenheit"];
$_SESSION['Humidity']=$_GET["humidity"];
$_SESSION['Flame']=$_GET["flame"];
$_SESSION['MQ4Sensor']=$_GET["MQ4sensor"];
$_SESSION['LDRSensor']=$_GET["LDRsensor"];
$_SESSION['Plant1H']=$_GET["plant1H"];
$_SESSION['Plant2H']=$_GET["plant2H"];
$_SESSION['Plant3H']=$_GET["plant3H"];
?> </head> <body> </body> </html>

ArduinoSide_Code.ino Arduino

/////////////////////////////////////////////////////////////////
// -ARDUINAUTOMOTON-
// Creating a professional website to communicate with Arduino
// (Compatible with Android system)
// by Kutluhan Aktar.
/////////////////////////////////////////////////////////////////
#include <SPI.h>
#include <Ethernet.h>
#include "DHT.h"
DHT dht;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 21);
EthernetServer server(80);

int pump = 3;
int lamp = 4;
int feed = 5;
int heater = 6;
int filterex = 7;
int filterin = 8;
int irrigation = 9;

String readString;

void setup() {
  Serial.begin(9600);
  pinMode(pump, OUTPUT);
  pinMode(lamp, OUTPUT);
  pinMode(feed, OUTPUT);
  pinMode(heater, OUTPUT);
  pinMode(filterex, OUTPUT);
  pinMode(filterin, OUTPUT);
  pinMode(irrigation, OUTPUT);
  digitalWrite(pump, HIGH);
  digitalWrite(lamp, HIGH);
  digitalWrite(feed, HIGH);
  digitalWrite(heater, HIGH);
  digitalWrite(filterex, HIGH);
  digitalWrite(filterin, HIGH);
  digitalWrite(irrigation, HIGH);
  dht.setup(2);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}

void loop() {
  delay(dht.getMinimumSamplingPeriod());
  float humidity = dht.getHumidity();
  float temperature = dht.getTemperature();
  float fahrenheit = dht.toFahrenheit(temperature);
  int ldrValue = analogRead(A0);
  int flameValue = analogRead(A1);
  int MQ4Value = analogRead(A2);
  int HygValueA = analogRead(A3);
  int HygValueB = analogRead(A4);
  int HygValueC = analogRead(A5);

  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 135) {
          readString += c;
        }
        Serial.println(readString);
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");
          client.println();
          client.println("");
          client.println("");
          client.println("");
          client.println("ArduinoSide");
          client.println(">");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          break;
        }
      }
    }
    delay(1);
    client.stop();
    if (readString.indexOf("?airpump=pumpIsOn") > 0) digitalWrite(pump, LOW);
    else if (readString.indexOf("?airpump=pumpIsOff") > 0) digitalWrite(pump, HIGH);
    if (readString.indexOf("&lamp=lampIsOn") > 0) digitalWrite(lamp, LOW);
    else if (readString.indexOf("&lamp=lampIsOff") > 0) digitalWrite(lamp, HIGH);
    if (readString.indexOf("&feed=feedIsOn") > 0) digitalWrite(feed, LOW);
    else if (readString.indexOf("&feed=feedIsOff") > 0) digitalWrite(feed, HIGH);
    if (readString.indexOf("&heater=heaterIsOn") > 0) digitalWrite(heater, LOW);
    else if (readString.indexOf("&heater=heaterIsOff") > 0) digitalWrite(heater, HIGH);
    if (readString.indexOf("&filterex=exIsOn") > 0) digitalWrite(filterex, LOW);
    else if (readString.indexOf("&filterex=exIsOff") > 0) digitalWrite(filterex, HIGH);
    if (readString.indexOf("&filterin=inIsOn") > 0) digitalWrite(filterin, LOW);
    else if (readString.indexOf("&filterin=inIsOff") > 0) digitalWrite(filterin, HIGH);
    if (readString.indexOf("&irrigation=start") > 0) digitalWrite(irrigation, LOW);
    else if (readString.indexOf("&irrigation=stop") > 0) digitalWrite(irrigation, HIGH);
    readString = "";
    Serial.println("client disconnected");
  }
}

Пользовательские части и корпуса

arduinautomotion_wNJ69zA666.ico
spidersense_Ge3umcKzBw.mp4
spidermanvoice_EqWLILohmW.mp3

Схемы

Управление телевизором через Alexa и Arduino IoT Cloud — пошаговое руководство Умная подсветка под кроватью с датчиком движения: тихая ночная иллюминация

Производственный процесс

3D печать

Система управления автоматикой

Промышленные технологии