<script src="js/serial_device.js"></script>
<script src="js/remote.js"></script>
</body>
</html>
This HTML document defines seven rows that contain three buttons each.
Also, it loads several JavaScript files. It loads the jQuery library and the
Seri-
alDevice
class we defined in Writing a SerialDevice Class, on page 274. In addition,
it loads a file named
remote.js
that defines what happens when a user clicks a
button on our virtual remote.
RemoteControl/TvRemoteUI/js/remote.js
$(function() {
Line 1
var BAUD_RATE = 9600;
-
var remote = new SerialDevice("/dev/tty.usbmodem24311", BAUD_RATE);
-
-
remote.onConnect.addListener(function() {
5
console.log("Connected to: " + remote.path);
-
});
-
-
remote.connect();
-
10
$("[type=button]").on("click", function(event){
-
var buttonType = $(event.currentTarget).attr("id");
-
console.log("Button pressed: " + buttonType);
-
remote.send(buttonType + "\n");
-
});
15
});
-
In
remote.js
, we use jQuery’s
$
function in the first line to make sure all Java-
Script code gets executed after the whole HTML page has been loaded. Then
we define a new
SerialDevice
instance named
remote
and connect to it. Make
sure you’re using the right serial port name here.
The rest of the code attaches callback functions to all of the buttons we’ve
defined. We use jQuery’s
$
function to select all elements having the type
button
. Then we call the
on
function for each button element and pass it the
parameter
click
to add a callback function that gets called when the button
gets clicked.
In the callback function for click events, we use the event’s
currentTarget
prop-
erty in line 12 to determine which button has actually been clicked. We read
the button’s ID attribute and use it as the command we send to the Arduino.
If the user clicks the button with the ID
one
, the program will send the com-
mand
one
to the Arduino. The Arduino will then send the corresponding code
via infrared. Using a consistent naming scheme for the button elements in
the HTML page has really paid off. To add another button, you only have to
Chapter 12. Creating Your Own Universal Remote Control • 214
report erratum • discuss
www.it-ebooks.info
To Next Page
Loading...
Need help?
General
Weight and Dimensions
