It defines all meta information needed, and it declares that the Chrome App
needs to access the serial port. The
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
InputDevices/Dashboard/main.html
<!DOCTYPE html>
Line 1
<html lang="en">
-
<head>
-
<meta charset="utf-8"/>
-
<link
rel="stylesheet" type="text/css"
5
<title>Dashboard
-
</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
for a filled circle. Each
the individual LEDs later on.
background.js
main.html
Demo</title>
<span>
element containing the Unicode character (●)
element gets a unique ID, so we can refer to
<span>
www.it-ebooks.info
Chapter 5. Sensing the World Around Us
file isn t very exciting, either:
file:
href="css/dashboard.css"/>
94
report erratum
discuss
Need help?
Do you have a question about the Arduino Uno and is the answer not in the manual?