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
<!DOCTYPE html>
Line 1
<html lang="en">
-
<head>
-
<meta charset="utf-8"/>
-
<link rel="stylesheet" type="text/css" href="css/dashboard.css"/>
5
<title>Dashboard Demo</title>
-
</head>
-
<body>
-
<div id="dashboard">
-
<div id="distance-display">
10
<p>
-
<span id="d1">●</span>
-
<span id="d2">●</span>
-
<span id="d3">●</span>
-
<span id="d4">●</span>
15
<span id="d5">●</span>
-
<span id="d6">●</span>
-
<span id="d7">●</span>
-
<span id="d8">●</span>
-
</p>
20
</div>
-
<div id="temperature-display">
-
<p><span id="temperature"></span> ℃</p>
-
</div>
-
</div>
25
<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.
Chapter 5. Sensing the World Around Us • 94
report erratum • discuss
www.it-ebooks.info
To Next Page
Loading...
Need help?
General
