You need to install Johnny-Five and PubNub to run the node.js code with Arduino.
$ npm install johnny-five
$ npm install [email protected]
Note: This code sample won't work with PubNub SDK v4+, so make sure to install v3.x
Once you get the data from the sensor, send the data to PubNub.
var pubnub = require('pubnub')({
publish_key: 'YOUR_PUB_KEY',
subscribe_key: 'YOUR_SUB_KEY'
});
var data = {
'temperature': temp
};
pubnub.publish({
channel: 'temperature-ds18b20',
message: data,
});
The basic graph can be drawn with EON's chart()
as it receives the data from PubNub.
Chart type can be specified with data.type
. In this example, it is a simple line graph:
<div id="temp"></div>
var pubnub = PUBNUB.init({
publish_key: 'YOUR_PUB_KEY',
subscribe_key: 'YOUR_SUB_KEY'
});
eon.chart({
channel: 'temperature-ds18b20',
generate: {
bindto: '#temp',
data: {
type: 'line'
}
}
},
pubnub: pubnub,
transform: function(m) {
return { eon: {
temperature: m.temperature
}}
}
});
To customize the chart (e.g. changing line colors, adding labels, etc.), please refer C3.js docs.
For eaxmple, to view the temperature line graph, run /temperature/temperature.html
file on local server:
$ python -m SimpleHTTPServer 8000
Then go to localhost:8000
on browser, and run temperature.html
The temperature data comes from a DS18B20 sensor, and it is published to PubNub.
When you are using Arduino with Johnny-Five, you need to install ConfigurableFirmata to your Arduino to be able to run the code. The code requires OneWire support using the ConfigurableFirmata.
- Connect your Arduino to computer with a USB cable
- On Arduino IDE, go to Sketch > Include Library > Manage Libraries
- Search for "ConfigurableFirmata"
- Click the result, then click Install
- Go to File > Examples > ConfigurableFirmata
- Upload the code to the device
Change directory to temperature/ and run temperature.js:
$ node temperature.js
Both a photoresistor a temperature sensor and the same breadboard to send both values to PubNub together:
For potentiometer, I am using a gauge chart, instead of line graph.
Define the chart type, gauge
(also label, min/max, ect.) in the eon settings:
eon.chart({
channel: 'potentiometer',
generate: {
bindto: '#pot',
data: {
type: 'gauge',
},
gauge: {
label:{
format: function(value, ratio){
return value; //returning here the value, not in %
},
},
min: 0,
max: 1023
},
} ...