Control Arduino through internet on windows in real time

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.

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.

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

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

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.

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

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.

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.

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.

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++

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.

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

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

 

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.

<button type="button" id="led_on" onclick=ledon()>LED ON</button>
<button type="button" id="led_off" onclick=ledoff()>LED OFF</button>

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.

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.

<?php
########## MySql details (Replace with yours) #############
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = "arduino"; //databasename

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

?>

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

<?php
//include database connection file
include_once("connect.php");

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

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' + '&' + 'value='+ value; 

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

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.

 

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' +'&'+ 'value='+ 1; 

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

				}

			function ledoff() {

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

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

				}

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

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

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.

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("COM4");

	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("select * from control");

		ResultSet result = statement.executeQuery();

		while(result.next())
		{

		System.out.println(result.getString(1) + " " + result.getString(2) +" " + 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("com.mysql.jdbc.Driver");

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

		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("select * from control");

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 <Servo.h> 

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()>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.

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

Advertisement