Arduino Uno Quick Start Manual page 112

Hide thumbs Also See for Arduino Uno:
Table of Contents

Advertisement

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

Hide quick links:

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the Arduino Uno and is the answer not in the manual?

Subscribe to Our Youtube Channel

Table of Contents