modify the HTML page. Add a new button element and set its ID attribute to
the name of the Arduino command that emits the corresponding remote
control code.
To align the buttons of our virtual remote control and to make the Chrome
app look nice, we use the following stylesheet:
RemoteControl/TvRemoteUI/css/style.css
#main {
width: 18em;
margin-left: auto;
margin-right: auto;
}
button {
width: 6em;
}
The stylesheet mainly ensures that all buttons have the same width. Run the
Chrome app, and you’ll see something like the following figure:
Upload the sketch from Cloning a Remote, on page 207, to your Arduino and
start the Chrome app. Click any button to perform the corresponding action.
That’s an interface even your grandma could use, isn’t it?
You still need to connect the Arduino to your computer’s serial port to control
it with a web browser. In the next section, you’ll learn how to overcome this
and control an Arduino without a serial connection.
report erratum • discuss
Controlling Infrared Devices Remotely with Your Browser • 215
www.it-ebooks.info