Промышленное производство
Промышленный Интернет вещей | Промышленные материалы | Техническое обслуживание и ремонт оборудования | Промышленное программирование |
home  MfgRobots >> Промышленное производство >  >> Manufacturing Technology >> Производственный процесс

Как создать веб-сайт, взаимодействующий с Arduino с помощью PHP

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

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 В
× 1

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

Пистолет для горячего клея (общий)

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

HTTP-сервер Apache
Блокнот ++
IDE Arduino

Об этом проекте

Обновить

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

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

Описание

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

получать информацию о доме, когда меня нет дома, является основным аспектом этого проекта.

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

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

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

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

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

Знания языков HTML, CSS, JavaScript, PHP и jQuery потребуются для понимания всего содержимого проекта, так что это просто демонстрация проекта, но если вы знаете языки, вы можете найти все веб-страницы, которые включает проект как Файлы кода PHP ниже.

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

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

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

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

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

Как настроить веб-сайт на HTTP-сервере Apache (локальный хост)

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

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

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

Как подключиться к локальному хосту с устройств Android

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

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

После этого в той же сети Wİ-Fİ вы можете легко получить доступ к Arduinautomotion.php со своим собственным IP-адресом.

Как получить доступ к локальному хосту через 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/index.php?q=aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvUG9ydF9mb3J3YXJkaW5n

Arduinautomotion.php

Это главная страница для связи с Arduino Ethernet Shield, с этой страницы вы можете отдавать команды Arduino и легко получать данные о доме от Arduino.

Меню «Изменить» объясняет, как меняются ситуации, и показывает, какая часть является объектом, а какая - датчиком, изменяя цвет частей.

Меняя кружки, он показывает значения датчиков и положения объектов.

1) Секция помещения

Все данные о комнате, поступающие из Arduinautomotioncommunication.php, будут показаны в разделе «Комната».

Раньше:

После:

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

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

Раньше:

После:

3) Завод

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

Раньше:

После:

4) Раздел руководства

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

5) Окно предупреждения

Какие бы значения ни находились в диапазоне опасности, при перезагрузке веб-страницы Arduinautomotion.php появится окно с предупреждением, которое включает видеофайл Человека-паука и аудиофайл ("Spider-sense is tingling").

6) Части Arduinautomotion.php

Веб-сайты с изменяемым размером в качестве рекомендаций:

Целые меняющиеся круги:

Нижний колонтитул:

Arduinautomotioncontrol.php

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

Он постоянно сохраняет данные на страницах PHP.

Arduinautomotionformvalue.php

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

Arduinautomotioncommunication.php

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

ArduinoSide

Он размещен на Arduino Ethernet Shield через DNS, и вы можете получить к нему доступ с IP-адресом, который вы выбираете в коде ArduinoSide ниже (как https:// yourChosenIPAddress).

Связи

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

Ардуино

Модуль DHT11

Контакт 2 -------------------------

2-ходовое реле (1)

Контакт 3 -------------------------

Контакт 4 -------------------------

2-ходовое реле (2)

Контакт 5 -------------------------

Контакт 6 -------------------------

2-ходовое реле (3)

Контакт 7 -------------------------

Контакт 8 -------------------------

2-ходовое реле (4)

Контакт 9 -------------------------

Arduno Ethernet Shield

Контакт 10 --------------------------

Контакт 11 --------------------------

Контакт 12 --------------------------

Контакт 13 --------------------------

LDR

АО --------------------------

Датчик пламени

A1 --------------------------

Датчик MQ4

A2 --------------------------

Модуль гигрометра (1)

A3 --------------------------

Модуль гигрометра (2)

A4 --------------------------

Модуль гигрометра (3)

A5 --------------------------

Код Arduino в основном похож на код WebServer, который находится в папке примеров библиотеки Ethernet.

Я только добавил несколько кодов для управления датчиками и выполнения команд, которые пришли с веб-сайта Arduinautomotion.

И подключите кабель ADSL от Arduino Ethernet Shield к маршрутизатору.

После запуска кода Arduino веб-сайт Arduinautomotion отправляет и получает данные от Arduino через LAN через Wİ-Fİ.

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

Я протестировал проект, после чего подключил его к своему аквариуму и системе орошения (по сути, это водяной мотор), проект отлично работает. :) Это тестовое видео проекта Arduinautoumotion. Я редактировал его с помощью пробной версии Filmora и не удалял водяной знак из уважения к их работе.

Компьютер:

Android:

Код

  • Arduinautomotion.php
  • Arduinautomotioncontrol.php
  • Arduinautomotionformvalue.php
  • Arduinautomotioncommunication.php
  • ArduinoSide_Code.ino
Arduinautomotion.php PHP
           

Guidelines for managing to adjustments of the objects.

Please click the buttons and th e color bars to learn the info about colors.

ROOM

AQUARUM

PLANT

GUDE
Open FormValue In New Tab
  • When a form is sent to the FormValue page, form values are revealed in the iframe which named newsite in Guide.

  • Form values are the saved data which give Arduino an ability to determine the adjustments of the aquarium and the plants.

  • And all of the data go through the ArduinoSide page that is hosted by Arduino Ethernet Shield with the IP address you choose.

  • After that, the Communication button in the ArduinoSide page has to be pushed to open the Communication page and to change the $_Session values.

  • Lastly, the Arduinautomotion page has to refresh or the Reload button has to pushed to get the new data from Arduino.

  • If the information about the room is in the dangerous range, the homepage notifies you with a voice alert box which includes a Spider-man video and audio file that are in the www folder in Apache localhost furthermore the related information circle changes its colour to red.

PLANT
AQUARUM
...This file has been truncated, please download it to see its full contents.
Arduinautomotioncontrol.phpPHP
Arduinautomotion
Arduinautomotionformvalue.phpPHP
FormValue

Server has received the data from Arduinautomotion.

Airpump=


Lamp=


Feeding=


Heater=


Filterex=


Filterin=


Irrigation=


Arduinautomotioncommunication.phpPHP
Communication