We are now going to build an interface so you can control the robot remotely from your computer or a mobile device. This is actually quite similar to what we did for the relay control project, the main difference being that we also want to read some data back from the robot (in the present case the distance measurement from the ultrasonic sensor). There will be an HTML file that will host the different elements of the interface, some PHP code to communicate with the Yún board, some JavaScript to establish the link between HTML and PHP, and finally some CSS to give some style to the interface.

The first step is to create the HTML file that will be our access point to the robot control. This file basically hosts four buttons that we will use to control our robot and a field to continuously display the distance measured by the ultrasonic sensor. The buttons are declared inside a form; the following is the code for one button:

<input type="button" id="stop" class="commandButton" value="Stop" onClick="stopRobot()"/>

The distance information will be displayed using the following line of code:

<div id="distanceDisplay"></div>

The following field will be updated with some JavaScript:

<script type="text/javascript">
  setInterval(function() {
    $("#distanceDisplay").load('get_distance.php'),
  }, 1000);
</script>

Let's see the content of this PHP file. It basically makes a call to the REST API of the Yún board, and returns the answer to be displayed on the interface. Again, it will make use of the curl function of PHP.

It starts by making the cURL call to your Yún board with the getdistance parameter we defined in the sketch before:

$service_url = 'http://myarduinoyun.local/arduino/robot/getdistance';

It then prepares the call with the following code:

$curl = curl_init($service_url);

We get the answer with the following code:

$curl_response = curl_exec($curl);

We then print it back with the echo function of PHP:

echo $curl_response;

The PHP script that commands the motors is quite similar, so we won't detail it here.

Let's see the JavaScript file that handles the different buttons of the interface. Each button of the interface is basically linked to a JavaScript function that sends the correct parameter to the Arduino Yún, via the PHP file. For example, the stop button calls the following function:

function stopRobot(){
     $.get( "update_state.php", {command: "stop"} );
}

The same is done with the function to make the robot go full speed forward. To make it turn left or right, we can implement a more complex behavior. What we usually want is not for the robot to turn continuously by itself, but for example, to turn off a quarter of a turn. This is where the approach we took in this project becomes powerful. We can do that right on the server side without having to change the sketch on the Arduino board.

That's why to turn right for a given amount of time, for example, we will implement a series of commands on the server side and then stop. This is done by the following code:

function turnRight(){

  $.get( "update_state.php", { command: "turnright"} );
  sleep(350);
  $.get( "update_state.php", { command: "stop"} );
}

The sleep function itself is implemented in the same file and works by comparing the time that passed since the function was called, as shown in the following code:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Of course, we invite you to play with this sleep function to get the desired angle. For example, we set our sleep function such that the robot turns off about a quarter of a turn whenever we press the Turn Right button.

The code for the interface is available on the GitHub repository of the project: https://github.com/openhomeautomation/geeky-projects-yun/tree/master/chapter4/remote_control

Now, it's time to start the project. Be sure to place all the files at the root of your web server and make sure that the web server is running. Then, go to the folder of your web server in your browser (usually by typing localhost) and open the HTML file. The project also contains a CSS sheet to make the interface look better. The following is what you should see in your browser:

The field that displays the distance reading from the ultrasonic sensor should be updated automatically every second, so you can see whether or not this is working right away. Try moving your hand or an object in front of the robot and the value should change accordingly.

Before making the robot move around, we recommend that you test the different buttons while the robot is still on a small stand so it cannot move. Indeed, if something is wrongly coded on your server or within the Arduino sketch, your robot will not respond anymore and will randomly hit objects in your home.

You can now also test the different buttons. You can especially focus on the buttons that make the robot turn left or right and adjust the sleep() function in the PHP code to make them do exactly what you want. Notice that while your robot is moving around, the distance detected by the ultrasonic sensor in front of the robot is updated accordingly.