Reader small image

You're reading from  Arduino Home Automation Projects

Product typeBook
Published inJul 2014
Publisher
ISBN-139781783986064
Edition1st Edition
Tools
Right arrow
Author (1)
Marco Schwartz
Marco Schwartz
author image
Marco Schwartz

Marco Schwartz is an electrical engineer, entrepreneur, and blogger. He has a master's degree in electrical engineering and computer science from Supélec, France, and a master's degree in micro engineering from the Ecole Polytechnique Fédérale de Lausanne (EPFL), Switzerland. He has more than five years' experience working in the domain of electrical engineering. Marco's interests center around electronics, home automation, the Arduino and Raspberry Pi platforms, open source hardware projects, and 3D printing. He has several websites about the Arduino, including the Open Home Automation website, which is dedicated to building home automation systems using open source hardware. Marco has written another book on home automation and the Arduino, called Home Automation With Arduino: Automate Your Home Using Open-source Hardware. He has also written a book on how to build Internet of Things projects with the Arduino, called Internet of Things with the Arduino Yun, by Packt Publishing.
Read more about Marco Schwartz

Right arrow

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...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Arduino Home Automation Projects
Published in: Jul 2014Publisher: ISBN-13: 9781783986064

Author (1)

author image
Marco Schwartz

Marco Schwartz is an electrical engineer, entrepreneur, and blogger. He has a master's degree in electrical engineering and computer science from Supélec, France, and a master's degree in micro engineering from the Ecole Polytechnique Fédérale de Lausanne (EPFL), Switzerland. He has more than five years' experience working in the domain of electrical engineering. Marco's interests center around electronics, home automation, the Arduino and Raspberry Pi platforms, open source hardware projects, and 3D printing. He has several websites about the Arduino, including the Open Home Automation website, which is dedicated to building home automation systems using open source hardware. Marco has written another book on home automation and the Arduino, called Home Automation With Arduino: Automate Your Home Using Open-source Hardware. He has also written a book on how to build Internet of Things projects with the Arduino, called Internet of Things with the Arduino Yun, by Packt Publishing.
Read more about Marco Schwartz