Scribd
Upload
4 views

Arduino 2nd Uide Book

Researchers have developed a sonar system that uses a computer's microphone and speakers to detect usage and automatically power off the screen to save energy. The document also describes building a parking-distance control application as a Google Chrome app, which displays temperature and proximity indicators using LEDs. The implementation details include a manifest file and basic HTML for the user interface.

Uploaded by

dhariharan547
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Arduino 2nd Uide Book

Researchers have developed a sonar system that uses a computer's microphone and speakers to detect usage and automatically power off the screen to save energy. The document also describes building a parking-distance control application as a Google Chrome app, which displays temperature and proximity indicators using LEDs. The implementation details include a manifest file and basic HTML for the user interface.

Uploaded by

dhariharan547
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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">&#x25cf;</span>
- <span id="d2">&#x25cf;</span>
- <span id="d3">&#x25cf;</span>
15 <span id="d4">&#x25cf;</span>
- <span id="d5">&#x25cf;</span>
- <span id="d6">&#x25cf;</span>
- <span id="d7">&#x25cf;</span>
- <span id="d8">&#x25cf;</span>
20 </p>
- </div>
- <div id="temperature-display">
- <p><span id="temperature"></span> &#x2103;</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 (&#x25cf)
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

You might also like