Subtitle: Platform and browser-independent web based Arduino bidirectional remote control & sensors. (Smartphone optizimized)
Here we are with the perhaps more interesting so far presented project.
I was looking on the internet for a way to control the Arduino via the web, but everything had to be estrememanete flexible, simple, adaptable to a smartphone but also had to have a two-way communication and automatic refresh. I have not found anything that had all of these combined, that’s why I decided to implement this project.
The majority of similar projects, have in my opinion incomplete features: those specific to automation usually have to download an application and therefore are not cross-platform, web-based ones either have a poor interface or require to refresh the page in order to update the state of outputs, or still have the opportunity to read sensors, but not change the outputs…
The requirement that I had in particular was that if I was changing the state of an output not remotely, but locally (via a button for example), the interface had to introduce almost in real time such modification exactly on the button of the interface without having to refresh anything.
To do this I need to use a bit more complex web interface than the one coming from the Arduino Ethernet Shield, so I opted to use the Raspberry Pi web side (but can be used any Linux PC, or with some modifications even Windows), connected via USB (ie serial) with Arduino.
In this way I could implement some technologies, especially PHP and jQuery, which allowed me to realize everything.
The final operation is therefore very simple:
The interface shown in the photo above is a simple web page (as you can see is optimized for smartphones). Clicking on the slide we enable or disable an output (which is operated in real time), and every 5 seconds we have the automatic refresh of the outputs and of the analogic inputs also (in the above example I enabled only four outputs and one input).
The complete interface, contains the 13 outputs of the Arduino (not including the 0 and 1, which are used for serial communication), and the 6 analog inputs.
Connections and configuration is very simple: The Raspberry Pi or our PC is connected via USB to the Arduino board on which we loaded the sketch, then load up the interface and scripting on the Raspberry Pi et voila, you’re done.
IMPORTANT NOTE: In order for this to work, we need to disable the Arduino auto reset. This can be done by connecting a 10uF capacitor between RESET and GND. If this is not done the serial communication will not work properly!
Let see principle of operation:
The Arduino sketch gets a command from serial port and actvite/deactvate output or send value back.
The command has to be 7 chars long and begin with *CMD and end with /.
Between “*CMD” and “/”, you have to put the pin number (02, 03, 04, …, A5, A6) followed by the action:
V = value (read) – get the raw value for analog input
S = status (read) – is the output status of digital pins
H = high (write) – just for digital pins
L = low (write) – just for digital pins
T = toggle (write) – just for digital pins
This sketch is designed to work with his PHP script, but it could be integrated in other prjects using the syntax above.
The PHP script communicate with web interface and Arduino for getting and setting PIN status.
If invoked without parameters it returns a JSON string with status of digital output and value of analog input.
For example:
{“02″:0,”03″:0,”04″:0,”05″:0,”06″:0,”07″:0,”08″:0,”09″:0,”10″:0,”11″:0,”12″:0,”13″:0,”14″:756,”15″:745,”16″:722,”17″:679,”18″:634,”19”:494}
If invoked with the GET method it use two parameters: “pin” (from P02 to P13) and “cmd” (0 or 1).
For example http://raspberrypi/ardudome.php?pin=P13&cmd=1, will send the following command *CMD13H/ to Arduino
putting PIN13 in HIGH status.
This script is designed to work with his web interface, but it could be integrated in other projects using the syntax above.
The web interface, based on HTML, jQuery and AJAX, will call every 5 seconds the PHP script, udpating HTML with right values got from Arduino.
If a slider would be clicked or touched, changing his value, the script will suddenly call PHP script giving
PIN to change, and VALUE to set.
As you can see is all really simply and intuitive.
Now let’s see how to install:
1 – Download files from github (https://github.com/toggio/ardudome/)
2 – Load the sketch ArduDome.ino in your Arduino UNO board
3 – Put a 10uF capacitor between GND and RESET (this will disable autoreset feature on serial open)
4 – Connect you Arduino UNO through USB port to your RaspberryPI (or any other Linux PC) with apache and php preinstalled
5 – Put all files (except for Ardudome.ino and functions.ino) in your www directory (usually /var/www)
6 – Verify the name of your USB serial port (usually /dev/ttyACM0) and change it in ardudome.php ($serial->deviceSet(“/dev/ttyACM0”);)
7 – Give the user www-data permission for dialout (usermod -a -G dialout www-data)
8 – Verify connection (php ardudome.php)
9 – Open your web browser from smartphone or PC to http://yourraspberryip/ardudome.html
Have fun and see you at the next project!
Electronics & Arduino 