Communicating from web to arduino!
So you wanna user your webserver to send commands to your own arduino?
Maybe move a few servos, blink some LEDs or even build a huge robot!
I'll exactly show you how it's done and how it works in this tutorial!
Keep reading!
Sending commands from your webserver to your arduino is quite simple you just need to understand the basics of arduino and (optional) how to write php!
I already got the PHP and Arduino code ready for you to use through this tutorial. The full code is at the very bottom of this post.
What and how?
How does this work you ask? Let me explain it!
We are first gonna setup a webserver that support PHP. PHP is a programming language for websites.
We will use this to send the information from the webserver to the arduino. But to do that we'll need a GUI (interface) that allows us to choose what we will send to the arduino and when.
The GUI has two buttons with both an integer that you can change.
When you press on one of the button some 'javascript' will send a request to execute another webpage. This webpage will be hidden so it won't be annoying!
So the button has an integer that will be send to the javascript when it is pressed. The integer will then be send to another php code which will open a writing stream to your USB Port. You can already guess it this port will be your arduino.
That integer will be written to your arduino. Your arduino think this is a serial input and will be able to read it wil "Serial.read()". The integer has travelled all the way from the web to the arduino in just a few milliseconds!
Getting a webserver started and configuring it:
For this tutorial you'll need a webserver that has php support. I've two tutorials on how to setup one.
Regular webserver: (link not available yet)
Tiny webserver: (link not available yet)
Ok, once you've setup your webserver you need two files.
One is the GUI (interface) for the webpage and one is the 'sender'.
The GUI has two buttons. One send the integer 1 to the arduino and the other one send the integer 2 to the arduino.
You can add as many buttons as you'd like. Just copy the code below:
<button onclick="javascript:send('VALUE');">BTN TEXT</button>
Remember to change "BTN TEXT" to the text of the button and change "VALUE" to the integer that will be send to the arduino. For example:
<button onclick="javascript:send('3');">button three</button>
<button onclick="javascript:send('4');">button four</button>
<button onclick="javascript:send('5');">button five</button>
Remember to keep the two ' before and after your integer!
'Sending' code explanation:
I will explane all of the .php code here so you might wanna skip this part or just read if you're interested in how it works!
<?php
exec("mode com3: BAUD=9600 PARITY=N data=8 stop=1 xon=off");
$fp = fopen("COM3:", "w");
fwrite($fp, chr($_GET['code']));
fclose($fp);
?>
Line explanation:
2. This command "exec" will execute a few commands for the webserver. Without this the data you wanna send to your arduino might get corrupted or invalid. As you also might've noticed there is a "BAUD=9600" command in there and "mode com3:" Change both of these to your configuration from your arduino!
NOTE Your BAUD is 9600 by default and you COM port is 3 by default. Also make sure you add the ":" after the com port no matter what it is neccesary!
3. "$fp" is a variable that opens a stream to the com port that is connected to the arduino. The "W" At the end of the "fopen" command means it will write data.
"W" = WRITE ONLY
"R" = READ ONLY
"RW" = READ AND WRITE
There are more just google them!
So the "$fp" variable now has the write stream to your com port.
4. The "fwrite" command will allow you to write bytes to the given read/write stream. We set the variable "$fp" to the stream so we need to use that for the first argument.
4.1 The second argument has two functions:
chr();
$_GET['code'];
The first function will convert the given integer to a character. (somewhat like a string)
And the second function is a bit more difficult for 'newbies' so you can google for that explanation.
5. Last line but pretty important! Closing the stream will stop all the writing and reading to the com port. If you don't close streams they might disfunction!
The arduino code:
The arduino code is really simple compared to the sending code. If you've ever worked with the "Serial" command you'll probably understand this.
I will go trough this quick and easy cause it isn't really a pain in the ass.
Serial.begin(9600); if(Serial.available() > 0) dat = Serial.read(); if(dat == 1)
This isn't code you should copy&paste directly into your arduino IDE it WON'T work.
These are the only four lines you might not know how they work or are neccesary to let the program work.
1. This is very basic. Remember the "BAUD=9600" ?? As you might see it starts a Serial at 9600. So these got to be the same number!
2. This line will keep checking if there are any incoming messages on a BAUD. We've started a Serial on BAUD 9600 so it will only check that one.
3. So the program now knows that there is an incoming message. Why not read it and put the data in the variable "dat" ? All the received data is know in the variable DAT.
4. Last but again not least. This line will check if the received INT is the same as 1. Remeber configuring the webpage? And changing "VALUE" ?? You had to change VALUE to an integer. That integer is send to the arduino and is in the variable DAT so if you changed VALUE to 5 you also have to check if "dat == 5". Get it?
If you don't understand something feel free to ask! I'm here to help newbies or even pros!
Full code:
Here is the full code for Both the webpages and the arduino code:
Web GUI:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function send(x)
{
$.get("con2ard.php", { code:x }, function(){});
}
</script>
</head>
<body>
<button onclick="javascript:send('1');">1 flash</button><br/>
<button onclick="javascript:send('2');">4 flash</button><br/>
</body>
</html>
Web sender:
<?php
exec("mode com3: BAUD=9600 PARITY=N data=8 stop=1 xon=off");
$fp = fopen("COM3:", "w");
fwrite($fp, chr($_GET['code']));
fclose($fp);
?>
Arduino code:
int dat = 0;
void setup()
{
Serial.begin(9600);
pinMode(13, OUTPUT);
}
void loop()
{
if(Serial.available() > 0)
{
dat = Serial.read();
if(dat == 1)
{
digitalWrite(13, HIGH);
delay(1500);
digitalWrite(13, LOW);
}else if(dat == 2)
{
digitalWrite(13, HIGH);
delay(100);
digitalWrite(13, LOW);
delay(100);
digitalWrite(13, HIGH);
delay(100);
digitalWrite(13, LOW);
delay(100);
digitalWrite(13, HIGH);
delay(100);
digitalWrite(13, LOW);
delay(100);
digitalWrite(13, HIGH);
delay(100);
digitalWrite(13, LOW);
delay(100);
digitalWrite(13, HIGH);
delay(100);
digitalWrite(13, LOW);
}
}
}
Thank you!Thanks for reading this post. If you have any questions ask them below! Or if you wish to get more tutorials like these subscribe to this blog on the right site. Just enter your e-mail and you will get all the post right to your mail!
Greets, Tim.
No comments:
Post a Comment