Chapter 5. Sensing the World Around Us • 92

The code is nearly a perfect merge of the programs we used to get the PING))) and the TMP36 sensors working. Only a few things were changed:

•The constant MICROSECONDS_PER_CM has been replaced by the microseconds_per_cm function, which determines the microseconds sound needs to travel 1 centimeter dynamically, depending on the current temperature.

•Because the current temperature usually won’t change often or rapidly, we don’t measure it permanently, but only once a second. We use millis in line 7 to determine the number of milliseconds that have passed since the Arduino started. From lines 15 to 19, we check whether more than a second has passed since the last measurement. If yes, we measure the current temperature again.

•We no longer transfer the sensor data as floating-point numbers on the serial port, but instead use scaled integer values. This is done by the scaled_value function, which rounds a float value to two decimal digits and converts it into a long value by multiplying it by 100. On the receiving side, you have to divide it by 100 again.

If you upload the program to your Arduino and play around with your hand in front of the sensor, you’ll see an output similar to the following:

2129,1016

2129,1027

2129,1071

2129,1063

2129,1063

2129,1063

The output is a comma-separated list of values where the first value represents the current temperature in degree Celsius, and the second is the distance to the nearest object measured in centimeters. Both values have to be divided by 100 to get the actual sensor data.

Our little project now has two sensors. One is connected to a digital pin, while the other uses an analog one. In the next section, you’ll learn how to transfer sensor data back to a PC and use it to create applications based on the current state of the real world.

Creating Your Own Dashboard

Instead of printing our digital and analog sensor data to a serial port, we’ll simulate a small part of a modern car’s dashboard in this section. Most cars today show the current temperature, and many also have a parking-distance control system that warns you if you get too close to another object.

report erratum • discuss

Creating Your Own Dashboard • 93

Save the Climate Using Sonar Sensors

Researchers from Northwestern University and University of Michigan have created a sonar system that uses only a computer’s microphone and speakers to detect whether the computer is currently used.a If it’s not being used, the computer automatically powers off its screen, saving the environment.

Instead of using a microphone and speakers, you can also use a PING))) sensor. With the lessons you’ve learned in this chapter, you can build such a system yourself with ease. Try it!

a.http://blog.makezine.com/2009/10/15/using-sonar-to-save-power/

In my car, the parking-distance control consists of a couple of orange and red LEDs. If nothing’s near the car, all LEDs are off. As soon as the distance between the car and a potential obstacle gets too small, the first orange LED lights up. The shorter the distance, the more LEDs that light up. If the distance reaches a critical limit, all LEDs are on, and the car plays an annoying beep tone.

Here’s the application we’re going to build. It shows the current temperature, and you can also see that the first red light is already on, indicating that there’s something very close to the distance sensor.

We’ll implement the application as a

Google Chrome app. (Now is a good time to read Appendix 4, Controlling the Arduino with a Browser, on page 267, if you haven’t done so already.) The application’s manifest.json file contains no surprises:

InputDevices/Dashboard/manifest.json

{

"manifest_version": 2, "name": "Dashboard Demo", "version": "1", "permissions": [ "serial" ], "app": {

"background": {

"scripts": ["background.js"]

}

},

"minimum_chrome_version": "33"

}

report erratum • discuss

Chapter 5. Sensing the World Around Us • 94

It defines all meta information needed, and it declares that the Chrome App needs to access the serial port. The background.js file isn’t very exciting, either:

InputDevices/Dashboard/background.js chrome.app.runtime.onLaunched.addListener(function() {

chrome.app.window.create('main.html', { id: 'main',

bounds: { width: 600, height: 300 } });

});

It opens a new window and displays the main.html file:

InputDevices/Dashboard/main.html

Line 1 <!DOCTYPE html>

-<html lang="en">

-<head>

-<meta charset="utf-8"/>

5 <link rel="stylesheet" type="text/css" href="css/dashboard.css"/>

-<title>Dashboard Demo</title>

-</head>

-<body>

-<div id="dashboard">

10 <div id="distance-display">

-<p>

-<span id="d1">●</span>

-<span id="d2">●</span>

-<span id="d3">●</span>

-<span id="d5">●</span>

-<span id="d6">●</span>

-<span id="d7">●</span>

-<span id="d8">●</span>

20 </p>

-</div>

-<div id="temperature-display">

-<p><span id="temperature"></span> ℃</p>

-</div>

25 </div>

-<script src="js/serial_device.js"></script>

-<script src="js/dashboard.js"></script>

-</body>

-</html>

To create the dashboard’s user interface, we need only some basic HTML. We define the whole parking-distance control display in lines 12 to 19. We represent each LED by a <span> element containing the Unicode character (●) for a filled circle. Each <span> element gets a unique ID, so we can refer to the individual LEDs later on.

report erratum • discuss

Creating Your Own Dashboard • 95

The temperature display is even simpler. It consists of a single <span> element. We’ve added the Unicode character for a degrees Celsius symbol (℃) to make it look more professional. Let’s add a little bit of CSS to make the

dashboard even more appealing:

InputDevices/Dashboard/css/dashboard.css body {

font-size: 50px; background: black; color: white;

}

#distance-display, #temperature-display {

text-align: center;

}

-arduino.onConnect.addListener(function() {

-console.log("Connected to: " + arduino.path);

-arduino.onReadLine.addListener(function(line) {

-console.log("Read line: " + line);

-var attr = line.split(",");

10 if (attr.length == 2) {

-var temperature = Math.round(parseInt(attr[0]) / 100.0 * 10) / 10;

-var distance = parseInt(attr[1]) / 100.0;

-updateUI(temperature, distance);

-}

-var lights = {

-d1: [35.0, "orange"],

-d2: [30.0, "orange"], 20 d3: [25.0, "orange"],

-d4: [20.0, "orange"],

-d5: [15.0, "orange"],

-d6: [10.0, "orange"],

-d7: [7.0, "red"],

25 d8: [5.0, "red"] - };

report erratum • discuss

Chapter 5. Sensing the World Around Us • 96

-

-function updateUI(temperature, distance) {

-document.getElementById("temperature").innerText = temperature; 30 for (var i = 1; i < 9; i++) {

-var index = "d" + i;

-if (distance <= lights[index][0])

-document.getElementById(index).style.color = lights[index][1];

-else

35 document.getElementById(index).style.color = "white";

-}

-}

-

- arduino.connect();

To read the sensor data from the Arduino, we use the SerialDevice class we’ve defined in Writing a SerialDevice Class, on page 274. We create a new instance named arduino in the first line. Make sure you’re using the right serial port path.

Then we define an onConnect handler that prints a message to the browser’s JavaScript console as soon as the application has connected to an Arduino. In principle, you don’t need the onConnect handler. In this case, it’s mostly useful for debugging purposes.

Things get more interesting in the onReadLine handler. In line 9, we split the data we’ve received from the Arduino. We make sure that we’ve actually received two values. In this case we turn both values into numbers using parseInt, and we also divide them by 100 because the Arduino sends values that have been multiplied by 100 before. In line 11, we use a popular JavaScript trick to round the temperature value to one decimal digit. After we’ve turned both the distance and the temperature into proper numbers, we pass them to updateUI.

updateUI sets the new temperature value first in line 29. To do this, it looks up the HTML element having the ID temperature using the getElementById function. Then it sets the element’s innerText property to the current temperature.

Updating the artificial LED display is a bit more complex, but not too difficult. We’ve defined a data structure named lights that maps the IDs of our display’s

<span> elements to arrays having two elements each. For example, it maps the ID d1 to an array containing the values 35.0 and “orange”. That means that the color of the element having the ID d1 will be set to orange when the distance to the next object is less than or equal 35.0 centimeters.

Using the lights data structure, it’s easy to implement the LED display. In line 30, we start a loop iterating over all LEDs. We determine the current LED’s

report erratum • discuss