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 auto-
matically 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 tempera-
ture, 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"
}
www.it-ebooks.info 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>
15 <span id="d4">●</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 repre-
sent 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.
www.it-ebooks.info report erratum • discuss
