Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
| × | 1 | ||||
 |
| × | 1 | |||
For more info: https://www.progettiarduino.com/88-arduino-yun-web-server-ajax-controllo-dispositivi.html
Let's make a web page interactive to remotely control home devices via Arduino yunIn this project we will see how it is possible to create an interactive web page with Arduino Yun, to control and monitor different devices at home.
Introduction:
The system has automatic and manual control of lights, climate and various sensors, including a hall sensor and a PIR sensor. Control and monitoring is done via a dynamic and interactive HTML web page. More web pages in HTML format together with the relative javascript and CSS are allocated on a micro-SD memory card and inserted in the appropriate slot on the Arduino Yùn and managed via the web server inside the Linino operating system, which is equipped with the card.
The web page is updated with a delay of about 3 seconds, automatically, both when you perform some direct action (for example when you press the switches on the web page) and if something happens on the hardware side.
To access the web page you must type in a browser the IP address where the Arduino YUN board is connected on the router.
Example: http: // "arduino yùn address" / sd / casa /
in my case I set the fixed IP address for Arduino Yùn 192.168.1.89 then:
http: //192.168.1.89/sd/casa
Login:
To enter the web page and check the devices, type the Username and Password. By default I left as Username "admin" and as Password "admin".
This system is not a good deterrent for those wishing to enter the web page of the commands because you can get around by simply writing the IP address of the page you want to open.This is a first step and that's what I managed to do in a few days .
I accept suggestions in the comments to make the login page more secure. ;-)
Navbar:
Through the navbar, at the top of the web page, we can choose to monitor and control the switches, the climate or the sensors in an isolated way.
Web page:
The Web page allocated to the micro SD card was created using the HTML language. To make the dynamic page the JavaScript language was used, which allows us to insert instructions (scripts) within the HTML code, which will be executed on the client (browser) in response to specific requests. To update the contents the AJAX technique was used, which allows us to manage the exchange of data in the background, between the web page and the server, asynchronously. The status of the various sensors and actuators is updated every 3 seconds.
The Web page allows us to set the temperature threshold values and automatically activate the climate (air conditioning and heating). At the same time we will receive notification of the changes occurred on the hardware side of the Arduino where the various sensors and actuators are connected. All the switches and sensors connected to Arduino Yùn are collected on the Home page of the web page.
The system is designed to operate in automatic and manual mode. In manual mode it is possible to control connected relays on the Arduino Yùn by operating the buttons on the web page. In automatic mode the system acts independently by activating the relays based on the status of the sensors and according to the parameters supplied by the user on the Web page.
Switches:
On the web page dedicated to the switches are available the buttons related to the relays connected to Arduino Yùn.
If red indicates the OFF status of the relays, green indicate the ON state of the actuators. Because of the javascript loading, once the button is pressed, the status of the button on the web page changes after 3 seconds while on the Arduino the change of the relay status is almost immediate.
Climate:
Temperature and humidity are controlled by DHT-11 sensor. The system detects the temperature and compares the value read with two threshold values, set remotely via slider on the Web page. If the value falls below the minimum temperature threshold the relay connected to pin 9 of the Arduino Yùn will be activated, switching it off when this threshold. If the value rises above the threshold of the maximum temperature value the relay connected to pin 8 will turn on and vice versa will switch off.
The area of the web page shows both the temperature and humidity values for the room where the DHT-11 sensor is installed and the status of the heating and cooling system by means of two LED icons. The icons that simulate two LEDs change state and turn green if the actuators connected to Arduino Yùn are active, vice versa, they are red.
Other Sensors:
In the Other sensors page are collected the two sensors connected to Arduino Yùn. Specifically I inserted a hall sensor on pin 7 able to bring the digital output up when a magnet approaches, thus simulating a magnetic alarm sensor for doors and windows. A PIR sensor instead is inserted on pin 4 and is able to detect people or animals up to a maximum distance of 7 meters.
Also on the side of the web interface, they are also provided with two LED icons. Change color from green to red and vice versa based on sensor detection.
For more info: https://www.progettiarduino.com/88-arduino-yun-web-server-ajax-controllo-dispositivi.html
Sketch:
The sketch to be loaded on the Arduino Yùn reads and drives The pins on the card and transmits the data with the Web page. The Bridge library allows you to manage the communication between the two modules of Arduino Yùn, the microcontroller ATmega32u4 and the processor AR9331.
The YunServer library allows the activation of the server on the Arduino side on port 555 where the Linino web server re-routes the messages destined to the / arduino folder
The YunClient library allows to accept and process messages sent by the Linino server.
Note: enter the library dht-sensor-library-master.zip in the Arduino IDE. Through the appropriate command by clicking on Sketch >> #include library >> add library from file.ZIP.
progetto_domotica_2019.zip
File Size: 2 kbFile Type: zip
dht-sensor-library-master.zip
File Size: 11 kbFile Type: zip
Micro-SD:
The micro-SD contains the WEB pages in HTML format, the icons, the pages in JavaScript and CSS. Compact the arduino.zip file and insert the "arduino" folder in the previously formatted micro-SD.The file in the micro-SD is presents as: arduino> www> house in the "home" folder all the files are present.
arduino.zip
File Size: 130 kbFile Type: zip
I hope this project will be useful.
For more info: https://www.progettiarduino.com/88-arduino-yun-web-server-ajax-controllo-dispositivi.html
If you want to help me support the site visit the page SUPPORT THE BLOG link: https://www.progettiarduino.com/sostieni-il-blog.html
If you like the page leaves a like, supports the blog!
© ProgettiArduino.com 2019 - Fancello Salvatore
Layouts, images and texts are the exclusive property of www.progettiarduino.com
Comments