EasyManuals Logo

Arduino NG User Manual

Arduino NG
311 pages
To Next Page IconTo Next Page
To Next Page IconTo Next Page
To Previous Page IconTo Previous Page
To Previous Page IconTo Previous Page
Page #113 background imageLoading...
Page #113 background image
The temperature display is even simpler. It consists of a single
<span>
element.
Weve added the Unicode character for a degrees Celsius symbol (&#x2103)
to make it look more professional. Lets 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 its 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

Table of Contents

Questions and Answers:

Question and Answer IconNeed help?

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

Arduino NG Specifications

General IconGeneral
BrandArduino
ModelNG
CategoryMotherboard
LanguageEnglish

Related product manuals