Arduino Uno Quick Start Manual page 113

The temperature display is even simpler. It consists of a single
We ve added the Unicode character for a degrees Celsius symbol (&#x2103)
to make it look more professional. Let s add a little bit of CSS to make the
dashboard even more appealing:
InputDevices/Dashboard/css/dashboard.css
body {
font-size: 50px;
background: black;
color: white;
}
#distance-display,
#temperature-display {
text-align: center;
}
The stylesheet increases the font size and sets the background color to black
and the text color to white. Also, it centers both the LED display and the
temperature display.
Now it s time to bring the dashboard to life using some JavaScript:
InputDevices/Dashboard/js/dashboard.js
var arduino = new
Line 1
-
arduino.onConnect.addListener(function() {
-
console.log("Connected to: "
-
});
5
-
arduino.onReadLine.addListener(function(line) {
-
console.log("Read line: "
-
var attr = line.split(",");
-
if (attr.length == 2) {
10
var temperature = Math.round(parseInt(attr[0]) / 100.0 * 10) / 10;
-
var distance = parseInt(attr[1]) / 100.0;
-
updateUI(temperature, distance);
-
}
-
});
15
-
var lights = {
-
d1: [35.0, "orange"],
-
d2: [30.0, "orange"],
-
d3: [25.0, "orange"],
20
d4: [20.0, "orange"],
-
d5: [15.0, "orange"],
-
d6: [10.0, "orange"],
-
d7: [7.0, "red"],
-
d8: [5.0, "red"]
25
};
-
SerialDevice("/dev/tty.usbmodem24321", 9600);
+ arduino.path);
+ line);
www.it-ebooks.info
Creating Your Own Dashboard
<span> element.
95
report erratum discuss