Control Arduino through internet on windows in real time

Posted: May 4, 2014 in Uncategorized

Note: The following code has been tested to work on both Windows 8 and 8.1 64 bit only with all the applications being 64 bit versions.
It’s been a long time since I updated my blog, so today I’m going to show you how to control an Arduino through the internet! This tutorial is going to show you how to control it through a local server but it’s even easier if you have your own domain.

So first things first, what exactly do I mean by controlling an Arduino through the internet? We’ll basically build a webpage which can be accessed through any web browser and we’ll be able to send commands to an Arduino connected to the server in real time! So what do you need to know to do this? Just basic programming logic! I will show you how to do everything else. But as this was my first foray into the world of web programming, some of the concepts might be used totally wrongly and it will definitely have almost no security but it should get you started on how to set everything up and get you running.

Ok so now we have that out of the way, let’s get started! I will first try to explain what we are going to do very briefly so that you know what you’re getting into.

Block diagram

Did that scare you? Haha, I hope not because even though it looks really complicated it’s actually pretty simple. I was able to get everything working under a day and I have no prior web programming experience! I did not even know what jquery was before this! So if I could do it, I’m sure you can too.

So why do we need so many things to do such a simple thing? Because the thing is you cannot just send your data on the internet and receive it at the other end, you need a place to store it. That’s where the mysql database comes in. It’s basically the middle man between the client and the server. You could use a different method, like writing to a text file on the server and accessing it through Java but that’s really messy and doesn’t scale well. I would love to hear in the comments if any of you know another way to do this.

Step 1. Lets get this Server started!

The first thing we would need is a server with php and mysql support. If you already have access to a server with these capabilities skip this step, if you do not or if you just want to test it on a local machine, continue. Lucky for us we don’t have to set everything up independently, a program called xampp helps you install a server with all the required tools right on your local machine. Download xampp from the following link and install it.

https://www.apachefriends.org/index.html

Here is a nice tutorial for the installation process

https://www.udemy.com/blog/xampp-tutorial/

Note: On Windows 8, do not install it in C:\Program Files.

After you’ve successfully followed all the steps, start both the Apache and MySql from the xampp control panel, after this open your browser on the machine you installed it on and type the following line.

localhost

This should open the xampp control panel. If it does, it means that you just installed your first webserver! If it doesn’t make sure you followed all the steps properly, you might have to configure your firewall to allow xampp to access the network.

Step 2. Setup a database

On your xammp control panel, click on the button which says Admin next to MySQL and you should get this page. Click on the database tab.

mysql1

Here you can view all the databases which exist, we’ll create  a new one called arduino

mysql2

After you hit create, your new database shows up in the list. Next click on the database you just created.

mysql3

Before we can use a database we need to create a table which can hold data, for this tutorial I’m going to show you how to control a servo and an LED. So lets make a table with 3 columns and call it “control”, the first column is the id, this is just to identify the right values you need to send in case you had multiple rows in your table for whatever reason. This will be the primary key. Next we’ll create a column to hold the servo position and another to hold the LED status. All three columns are of the type INT.

mysql4

mysql5

After you’ve created the table, we still cannot use it as it doesn’t have any data, so click on the insert button.

mysql6

Now create a row with the following values, this is just the initial value that the row will have before you start changing it later.

mysql7

After this you’ll see that a new row gets added to the table. This is the place you can see the status of the data in  your database when you are debugging your program.

mysql8

Step 3. Make a client side webpage

We’ll build a webpage with a slider to control the servo and two buttons to control the status of the led. So let’s start. Since I wanted my webpage to work with a touch screen device I looked on the web for a javascript slider which supported touch input. I found a simple slider which looked good and you can download it from the link below.

http://andreruffert.github.io/rangeslider.js/

After you download it and extract it, copy the folders called example and dist and paste it in the following folder.

slider1

Now to test if this works, go to your browser and type in the following

http://localhost/example/index.html

You should be able to see three sliders. If you don’t, double check where you placed the folders, it has be to in the folder called htdocs.

The next thing we’ll do is remove two of those sliders and rename the slider. Before moving on to the next step I highly suggest you install notepad++ for editing the files. It will make your life a lot easier.

http://notepad-plus-plus.org/download/v6.6.html

Now open the index.html file from the example folder in notepad++

slider2

Now we’ll delete the code which makes up the bottom two sliders as we don’t need them. The following two images highlight the code to be deleted.

slider3 slider4

Now lets change the name which appears on the top of the slider.

slider5

Next change the maximum value the slider can take. Since the servo can go from 0 to 180, we’ll change it to that.

slider6

 

Alright now that we have the slider all set up, lets put two buttons to control the led, one for on and one for off. It’s really simple to add buttons, just put these two lines of code inside the <body> tag near the beginning.

&amp;lt;button type=&amp;quot;button&amp;quot; id=&amp;quot;led_on&amp;quot; onclick=ledon()&amp;gt;LED ON&amp;lt;/button&amp;gt;
&amp;lt;button type=&amp;quot;button&amp;quot; id=&amp;quot;led_off&amp;quot; onclick=ledoff()&amp;gt;LED OFF&amp;lt;/button&amp;gt;

slider7

If you refresh the index.html webpage now, you’ll be able to see two buttons which don’t do anything. The buttons look a little small, lets make them bigger. Put the following code in the <style> tag

       #led_on
		{
		width: 200px;
		height: 100px;
		}

		#led_off
		{
		width: 200px;
		height: 100px;
		}

When you refresh the page now, the buttons should be pretty big.

slider12

We are now done with the user interface. Now lets add the code which updates the database.

Step 4. Use php and ajax to communicate with the database.

So what is php exactly? PHP is a server side scripting language. While javascript runs the code on the clients machine, PHP on the other hand runs the code on the server and returns a html page. So in theory the client cannot see the code which is being executed but can only see the output.

Now lets get to the code. First lets write a php file to connect to the database we created. Save the following code in a file called connect.php and save it in the same folder as example.html

If you do not understand some of the code below its fine, there are plenty of tutorials which teach you how to use php and MySQL.

&amp;lt;?php
########## MySql details (Replace with yours) #############
$username = &amp;amp;quot;root&amp;amp;quot;; //mysql username
$password = &amp;amp;quot;&amp;amp;quot;; //mysql password
$hostname = &amp;amp;quot;localhost&amp;amp;quot;; //hostname
$databasename = &amp;amp;quot;arduino&amp;amp;quot;; //databasename

$connecDB = mysql_connect($hostname, $username, $password)or die('could not connect to database');
mysql_select_db($databasename,$connecDB);

?&amp;gt;

If you are running it on your own domain, you’ll want to change the login details and the hostname with yours.

Next we’ll write the code to update the database. Copy the following code and save it in a file called response.php

&amp;lt;?php
//include database connection file
include_once(&amp;quot;connect.php&amp;quot;);

    //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
    $colname = filter_var($_POST[&amp;quot;column_name&amp;quot;],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
    $val = filter_var($_POST[&amp;quot;value&amp;quot;],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
	
    // Insert sanitize string in record
    if(mysql_query(&amp;quot;UPDATE control SET $colname=$val WHERE id='1'&amp;quot;))
    {     
        mysql_close($connecDB);
        
    }else{
        //output error
         header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }
    
?&amp;gt;

The above code basically gets two inputs, one for the column name and one for the value with which it should be updated. The way it receives this is through something called a POST method.

More on it here.

http://www.php.net/manual/en/reserved.variables.post.php

Now that we have the php code all setup, we can use this to update the database.

Ok, so now what the hell is ajax? I know what you must be thinking, “Damn another new language that I need to learn?”. The good news is that its not a new language and you’ve already used it! Ajax is short for Asynchronous JavaScript and XML and its used for changing a part of a webpage without refreshing the whole page. Just imagine how annoying it would have been if the whole webpage refreshed every time you changed the slider value. 

The following code generates a POST message to be sent to the php file. This has to be placed in the part of the javascript where the slider value change event occurs as you want this to execute every time the slider value changes.

	var myData = 'column_name=' + 'servoPosition' + '&amp;amp;amp;' + 'value='+ value; 

				jQuery.ajax({
				type: &amp;amp;quot;POST&amp;amp;quot;, // HTTP method POST or GET
				url: &amp;amp;quot;response.php&amp;amp;quot;, //Where to make Ajax calls
				dataType:&amp;amp;quot;text&amp;amp;quot;, // Data type, HTML, json etc.
				data:myData, //post variables
				success:function(){
				},
				error:function (xhr, ajaxOptions, thrownError){
					alert(thrownError); //throw any errors
				}
				});

slider8

The above image shows where you need to insert the code. If you refresh the page now and change the slider value it should update the value in the database.

slider9 slider10

 

Congratulation! You just built your first webpage which updates a database!

Now lets add the code which changes the status of the LED. The following functions execute when you press the LED ON and LED OFF button. Place them soon after the <script> tag in the index.html file

function ledon() {

				  var myData = 'column_name=' + 'led' +'&amp;amp;amp;'+ 'value='+ 1; 

				jQuery.ajax({
					type: &amp;amp;quot;POST&amp;amp;quot;, // HTTP method POST or GET
					url: &amp;amp;quot;response.php&amp;amp;quot;, //Where to make Ajax calls
					dataType:&amp;amp;quot;text&amp;amp;quot;, // Data type, HTML, json etc.
					data:myData, //post variables
					success:function(){
					//alert(&amp;amp;quot;I am an alert box!&amp;amp;quot;);
					},
					error:function (xhr, ajaxOptions, thrownError){
						alert(thrownError); //throw any errors
					}
				});

				}

			function ledoff() {

				  var myData = 'column_name=' + 'led' +'&amp;amp;amp;'+ 'value='+ 0; 

				jQuery.ajax({
					type: &amp;amp;quot;POST&amp;amp;quot;, // HTTP method POST or GET
					url: &amp;amp;quot;response.php&amp;amp;quot;, //Where to make Ajax calls
					dataType:&amp;amp;quot;text&amp;amp;quot;, // Data type, HTML, json etc.
					data:myData, //post variables
					success:function(){
					//alert(&amp;amp;quot;I am an alert box!&amp;amp;quot;);
					},
					error:function (xhr, ajaxOptions, thrownError){
						alert(thrownError); //throw any errors
					}
				});

				}

slider11

That’s it! Now you’ve finished the user interface and the code which updates everything. Your webpage is fully functional!

Step 5. Install JAVA on the server and setup JDBC.

Now that we’ve finished programming the client webpage, lets start the server side programming. First install the latest version of JDK from here.

http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSiteId=otnjp

Next download and install Eclipse, this will be the IDE we are going to use to program in java.

https://www.eclipse.org/downloads/packages/eclipse-standard-432/keplersr2

I had to go through a lot of pain to find a serial port library which worked with windows 8 64 bit but finally found one. Download the newest version from here and extract it to anywhere you want.

https://code.google.com/p/java-simple-serial-connector/downloads/list

Next you’ll need the jdbc for communicating with MySQL. Get it from here. Choose the platform independent zip file version. Extract it.

http://dev.mysql.com/downloads/connector/j/

Next open up Eclipse and create a new Java project by going to File>New>Java Project

java1

Next create a new source file. Right click on src in the project explorer and then go to New>Class and give it a name and choose the settings as follows

java2

Now we need to add the libraries which we just downloaded. To do this, go to Project>Properties and then click on the Libraries tab. Now click on the Add External JARs button and choose the following files from where you extracted it. Then click OK.

java3

Now copy and paste the following code


import java.util.Timer;
import java.util.TimerTask;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import jssc.SerialPort;
import jssc.SerialPortException;

public class main extends TimerTask{

	static SerialPort serialPort = new SerialPort(&amp;amp;quot;COM4&amp;amp;quot;);

	static Connection con = null;

	byte sync = 0b01010101;
	byte addr = 0b01110011;
	byte servo=0;
	byte led=0;

	@Override
    public void run() {

		PreparedStatement statement;
		try {
			statement = con.prepareStatement(&amp;amp;quot;select * from control&amp;amp;quot;);

		ResultSet result = statement.executeQuery();

		while(result.next())
		{

		System.out.println(result.getString(1) + &amp;amp;quot; &amp;amp;quot; + result.getString(2) +&amp;amp;quot; &amp;amp;quot; + result.getString(3));
		servo = (byte) Integer.parseInt(result.getString(2));
		led = (byte) Integer.parseInt(result.getString(3));

		}

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		try {

			serialPort.writeByte(sync);
			serialPort.writeByte(addr);
			serialPort.writeByte(led);
            serialPort.writeByte(servo);
        }
        catch (SerialPortException ex) {
            System.out.println(ex);
        }

	}

	public static void main(String[] args) throws Exception {

		// TODO Auto-generated method stub

		Class.forName(&amp;amp;quot;com.mysql.jdbc.Driver&amp;amp;quot;);

		con = DriverManager.getConnection(&amp;amp;quot;jdbc:mysql://localhost:3306/arduino&amp;amp;quot;,&amp;amp;quot;root&amp;amp;quot;,&amp;amp;quot;&amp;amp;quot;);

		try {
            serialPort.openPort();//Open serial port
            serialPort.setParams(SerialPort.BAUDRATE_57600,
                                 SerialPort.DATABITS_8,
                                 SerialPort.STOPBITS_1,
                                 SerialPort.PARITY_NONE);//Set params. Also you can set params by this string: serialPort.setParams(9600, 8, 1, 0);
        }
        catch (SerialPortException ex) {
            System.out.println(ex);
        }

		TimerTask timerTask = new main();

		Timer timer = new Timer(true);

        timer.scheduleAtFixedRate(timerTask, 0, 3);

        try {
            Thread.sleep(120000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        timer.cancel();
        serialPort.closePort();//Close serial port
        con.close();

	}

}

I’ll try to explain the program the best I can. We have a thread which runs every 3ms, which is executed by  the following line

timer.scheduleAtFixedRate(timerTask, 0, 3);

This thread opens a connection to the MySQL database called “arduino” and gets the values of the table “control” which is done by these two lines

statement = con.prepareStatement(&amp;amp;quot;select * from control&amp;amp;quot;);

ResultSet result = statement.executeQuery();

Next we put those in variables called servo and led and send them through the serial port. The bytes called sync and addr are for synchronization purpose. As we are sending multiple bytes, we wont know the order in which they are received, so we send two pre defined bytes everytime we send a command, we can then check the first two bytes received on the Arduino and compare it with this.

Step 6. Program the Arduino.

Alright one last thing to do before you can see the servo motor in Action. Go to the Arduino wesite and download the latest version.

http://arduino.cc/en/Main/Software

Next create a new sketch and copy the following code and upload it to your Arduino

#include &amp;amp;lt;Servo.h&amp;amp;gt; 

Servo myservo;  // create servo object to control a servo 

byte pre_sync = 0b01010101;
byte pre_addr = 0b01110011;
byte sync=0;
byte addr=0;
byte servo_position=0;
byte led_data=0;
int led_pin = 13;

void setup()
{
  pinMode(led_pin, OUTPUT);
  myservo.attach(9);  // attaches the servo on pin 9 to the servo object
  Serial.begin(57600);
} 

void loop()
{ 

   if (Serial.available()&amp;amp;gt;3) {
    // read the most recent byte (which will be from 0 to 255):
    sync = Serial.read();

    if(sync==pre_sync)
    {
      addr = Serial.read();
      if(addr==pre_addr)
      {
      led_data = Serial.read();
      servo_position = Serial.read();

      }
    }

     myservo.write(servo_position);

     if(led_data==1)
     digitalWrite(led_pin, HIGH);

     else
     digitalWrite(led_pin, LOW);

   }

} 

Now connect the servo to pin 9 of the Arduino and you’re done! As soon as you run the java application, your Arduino should start receiving the commands from the browser. If you want to control the Arduino from another device connected to the same networkl, you need the IP address of the server. To find this, run command prompt and type ipconfig, here you’ll have to find the right IP address.

ip

Remember it has to be connected to the same network or it wont work. Now replace localhost with the IP address you just found out.

http://192.168.0.11/example/index.html

Here’s a short video of me controlling the motor and the LED through a tablet.

I have included all the files which are necessary to run in the following zip file in case I missed explaining something.

https://www.dropbox.com/s/w4ldoxqohi5c3nq/Arduino_internet.zip?dl=0

Please let me know if you have any problems in the comment below. I would also love to hear if you guys have any easier/alternative methods to do the same thing.

Thanks

Advertisements
Comments
  1. Goutham Ravi says:

    Great job Amith!

  2. hasan says:

    thanks a lot and go ahead

  3. Jesu says:

    Thanks, its works fine (Y)
    From Argentina

  4. Darwin Espinoza says:

    Awesome job!

  5. Dan says:

    Was looking for a long time for the how to read values on a running arduino. Thanks a lot

  6. John says:

    the link at dropbox is 404 Not found, anyway you could repost or email? Thanks

  7. John says:

    thanks, I’m trying to come up to speed on the web side.

  8. andybtw says:

    This is a great piece of work, amithmv. Thanks for sharing it. HOWEVER, I found that the PHP functionality simply did not work until I saved the index file as index.php (not index.html, as you seem to have it here). Did I miss something? Are we supposed to know that the file extension is critical to invoking PHP, or do I have a setting somewhere that needs to be changed?

    Anyway, a thousand thanks for opening the MySQL/PHP/Arduino doors for me! Great stuff, isn’t it?

  9. andybtw says:

    A few further comments for neebies like me who are still learning about ethernet and serial communication:

    1 In the sample files the mySQL database table is called “control” whereas in the screen shots and instructions above (except one!) it is called “data”. I settled on calling it “data” all round!
    2 There is a reference to COM4 in the java code (main.java) when the serial connection is opened, that needs to be set to the COM port that the arduino is using, of course.
    3 My rig would not work at 57600 baud, and I had to change the settings in the arduino (.ino) sketch and the java code (main.java) to 9600, then it worked fine.
    4 For those who do not know java (and eclipse) the code is “Run” from the IDE using the arrow in a green circle at the top (that’s pretty obvious!) but as the code is running the execution trace in the lower part of the IDE should just list the values found in the data table in the arduino database; as soon as there is anything there in RED, then there are problems that need to be sorted out. I only realised that (by looking at it closely) when I was tearing my hair out wondering why things were not working!

    Good luck, folks.
    Andy

  10. Nasuha says:

    thx for share before…

    i have question.. i want to control with another device..
    i type ipconfig / ipconfig/all, but the result is :

    Ethernet adapter local area connection:

    Media state . . . . . . . . . . . . . . . . : Media disconnect
    Connection-specific DNS Suffix . : *BLANK*

    how to fix this? i confuse…

    thanks ….

  11. Andrej says:

    Hello, great project, I was wondering whether it would be possible to rearrange the project so that the index.html file and uploaded to an external server, and data from arduinotom read directly from the database mysql? There may be an example? thank you

  12. Davio says:

    hello good contribution
    and I would like to try it with more variables if you add another aprte led object and the servo agragaria in the java code in the aprte System.out.println (result.getString (1) + “” * ….. . + result.getString (4), and down the same if I am correct in agrgaria try is a new byte write and arduino as well the problem is that I would like you to tell me how agragarlo that when test funciana only two LEDs and servo objects, the third is not working anque console java eclipse the data appears

  13. simran says:

    hi
    im having trouble with updating the database
    whenever i move the slider nothing changes in the database
    could you pls tell me whereim going wrong

    p.s. great tutorial

    • Phil says:

      Hello, thank you very much for the tutorial. AS I want to adapt the code, I am facing a problem!
      I want to use the information of an HC SR04 distance ultrasound sensor.
      because I’m working with delays, the serial communication is not working.
      Anyone having a solution?

      Thank you very much

  14. Chathuranga says:

    Great tutorial. Hope this is for “Arduino Duemilanove”. Can I control “Arduino UNO” with PHP in windows using this method? Are they same?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s