Building a graphical interface

However, it's not convenient to control the hacked device from the serial monitor. We are now going to build a simple interface to control this device. The interface will be really basic and include two buttons: one to set the relay on and the other to set the relay off.

The interface is based on HTML for the interface itself, JavaScript to handle the commands, and PHP to interface with the Arduino board. This interface is very similar to the one we developed in Chapter 2, Control Lights from Your Phone or Tablet.

The following code will be a walkthrough of the different pieces of the interface. All the files have to be located inside the same folder at the root of your web server folder. You can find the complete code for this part inside the GitHub repository of the book.

Let's first see the HTML file that contains the interface itself. Inside the HTML file, the following is the code for a button:

<button class="btn btn-block btn-lg btn-primary" type="button...