Arduino Pro Mini

The temperature display is even simpler. It consists of a single <span> element.
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 SerialDevice("/dev/tty.usbmodem24321", 9600);
Line 1
-
arduino.onConnect.addListener(function() {
-
console.log("Connected to: " + arduino.path);
-
});
5
-
arduino.onReadLine.addListener(function(line) {
-
console.log("Read line: " + 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
};
-
report erratum • discuss
Creating Your Own Dashboard • 95
www.it-ebooks.info