Few changes for graph display

merge-requests/1/head
ayyoob 10 years ago
parent 07bae69062
commit 3ceed63107

@ -70,9 +70,9 @@ function getData(user, deviceId, from, to) {
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY","status",user, deviceId, from, to);
result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY","status",user, deviceId, from, to);
return result;
}
function getSensorData(table, column, user, deviceId, from, to) {

@ -64,6 +64,22 @@
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart5">
<h2 class="grey ">Fan</h2>
<hr>
<svg></svg>
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart6">
<h2 class="grey ">Bulb</h2>
<hr>
<svg></svg>
</div>
<hr>
</div>
</div>
</div>
<!-- TODO : Move these scripts to a bottomJs zone.
@ -71,6 +87,8 @@ When they are moved the script tags get repeated for some reason :-(
-->
<script src="{{self.publicURL}}/js/graph_util.js"></script>
<script src="{{self.publicURL}}/js/bulb.js"></script>
<script src="{{self.publicURL}}/js/fan_graph.js"></script>
<script src="{{self.publicURL}}/js/bulb_graph.js"></script>
<script src="{{self.publicURL}}/js/temperature_graph.js"></script>
<script src="{{self.publicURL}}/js/light_graph.js"></script>
<script src="{{self.publicURL}}/js/motion_graph.js"></script>

@ -0,0 +1,64 @@
var bulbChart;
nv.addGraph(function () {
bulbChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
bulbChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
bulbChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
bulbChart.yAxis
.axisLabel('ON / OFF')
.tickValues(1)
.tickFormat(function(d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart6 svg')
.datum(getBulbChartData())
.call(bulbChart);
nv.utils.windowResize(bulbChart.update);
return bulbChart;
});
function getBulbChartData() {
return [
{
area: true,
values: [],
key: "Bulb",
color: "#34500e"
}
];
}
function updateBulbGraph(fanData) {
var chartData = getBulbChartData();
chartData[0]['values'] = fanData;
d3.select('.chart6 svg')
.datum(chartData)
.transition().duration(500)
.call(bulbChart);
}

@ -0,0 +1,63 @@
var fanChart;
nv.addGraph(function () {
fanChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
fanChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
fanChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
fanChart.yAxis
.axisLabel('Fan (Status)')
.tickFormat(function(d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart5 svg')
.datum(getFanChartData())
.call(fanChart);
nv.utils.windowResize(fanChart.update);
return fanChart;
});
function getFanChartData() {
return [
{
area: true,
values: [],
key: "Fan",
color: "#34500e"
}
];
}
function updateFanGraph(fanData) {
var chartData = getFanChartData();
chartData[0]['values'] = fanData;
d3.select('.chart5 svg')
.datum(chartData)
.transition().duration(500)
.call(fanChart);
}

@ -104,6 +104,12 @@ function updateGraphs(stats) {
var sonarData = stats['sonarData'];
updateSonarGraph(convertStatsToGraphData(sonarData));
var fanData = stats['fanData'];
updateFanGraph(convertStateStatsToGraphData(fanData));
var bulbData = stats['bulbData'];
updateBulbGraph(convertStateStatsToGraphData(bulbData));
}
function convertStatsToGraphData(stats) {
@ -115,4 +121,26 @@ function convertStatsToGraphData(stats) {
}
return graphData;
}
function convertStateStatsToGraphData(stats){
var graphData = new Array();
var yValue;
for(var i = 0; i < stats.length; i++){
yValue = -1;
if(stats[i]['value'].toUpperCase() == 'ON'){
yValue = 1;
}else if(stats[i]['value'].toUpperCase() == 'OFF'){
yValue = 0;
}
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
}
return graphData;
}

@ -58,6 +58,15 @@
<span class="circle">03 </span> <span class="padding-left"> Mount the Ethernet / Wifi shield on the Arduino Uno device.</span>
</div>
</div>
<div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h2 class="uppercase">Schematic Diagram</h2><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="{{self.publicURL}}/images/schematicsGuide.png" target="_blank">
<img src="{{self.publicURL}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px" />
</a>
</center>
</div>
</div>
<div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
<div class="col-lg-12 margin-top-double">
@ -68,13 +77,13 @@
<span class="circle">01 </span> <span class="padding-left">Use the following command to download the installer from GitHub:</span><br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">02 </span> <span class="padding-left">Download the Sketch installer from the Arduino website http://arduino.cc/en/Main/Software</span><br>
<span class="circle">02 </span> <span class="padding-left">Download the Sketch installer from the Arduino website <a href="http://arduino.cc/en/Main/Software">http://arduino.cc/en/Main/Software</a></span><br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">03 </span> <span class="padding-left"> Install the Sketch program</span><br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">04 </span> <span class="padding-left">Use the Sketch program to open the samples code samples/quickstart/quickstart.ino</span><br>
<span class="circle">04 </span> <span class="padding-left">Use the Sketch program to open the samples code: <a href="http://tinyurl.com/EUHackathonRobot">http://tinyurl.com/EUHackathonRobot</a> </span><br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">05 </span> <span class="padding-left">View the lower part of the Sketch pad window to check that the COM connection is shown as active</span><br>

@ -14,88 +14,82 @@
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/RaspberryPi.png" >
<img src="{{self.publicURL}}/images/Fire-alarm.png" >
</div>
<h2 class="white center">RaspberryPi</h2>
<h2 class="white center">Fire Alarm</h2>
<div class="text-wrapper">
Use a Raspberry Pi to connect to the ABC Foundation. Then you can visualize the data
generated by the Raspberry Pi. <br><br>
Connect your FireAlarm into the WSO2 Device Cloud Platform.
<br><br><br>
</div>
<a href="#" class="grey-btn">Connect</a>
<a href="#" class="grey-btn" onclick="document.location.href='firealarm';
">Connect</a>
</div>
</div>
<div class=" col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/ArduinoUno.png" >
<img src="{{self.publicURL}}/images/sensebot.png" >
</div>
<h2 class="white center">ArduinoUno</h2>
<h2 class="white center">SenseBot</h2>
<div class="text-wrapper">
Connect your Arduino Uno device to the ABC Foundation .<br><br><br><br>
Connect your SenseBot into the WSO2 Device Cloud Platform.
<br><br><br>
</div>
<a href="#" class="grey-btn" onclick="document.location.href='arduino';
">Connect</a>
<a href="#" class="grey-btn" onclick="document.location.href='sensebot';
">Connect</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/beagleBone.png" >
<img src="{{self.publicURL}}/images/digitaldisplay.png" >
</div>
<h2 class="white center">BeagleBone</h2 >
<h2 class="white center">Digital Display</h2>
<div class="text-wrapper">
Use a BeagleBone Black board to visualize the data generated by the
SensorTag's temperature, agyroscope, and magnetometer sensors.
Connect your Digital Display into the WSO2 Device Cloud Platform.
<br><br><br>
</div>
<a href="#" class="grey-btn">Connect</a>
<a href="#" class="grey-btn" onclick="document.location.href='digitaldisplay';
">Connect</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class=" col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/Fire-alarm.png" >
<img src="{{self.publicURL}}/images/ArduinoUno.png" >
</div>
<h2 class="white center">Fire Alarm</h2>
<h2 class="white center">ArduinoUno</h2>
<div class="text-wrapper">
Connect your devices and start managing and controlling your devices.
Let us give you all that you need to know of the devices you own.
<br><br>
Connect your ArduinoUno into the WSO2 Device Cloud Platform.<br><br><br>
</div>
<a href="#" class="grey-btn" onclick="document.location.href='firealarm';
">Connect</a>
<a href="#" class="grey-btn" onclick="document.location.href='arduino';
">Connect</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/sensebot.png" >
<img src="{{self.publicURL}}/images/RaspberryPi.png" >
</div>
<h2 class="white center">SenseBot</h2>
<h2 class="white center">RaspberryPi</h2>
<div class="text-wrapper">
Connect your robot and start managing and controlling your devices.
Let us give you all that you need to know of the devices you own.
<br><br>
Connect your RaspberryPi into the WSO2 Device Cloud Platform.<br><br><br>
</div>
<a href="#" class="grey-btn" onclick="document.location.href='sensebot';
">Connect</a>
<a href="#" class="grey-btn">Connect</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/digitaldisplay.png" >
<img src="{{self.publicURL}}/images/beagleBone.png" >
</div>
<h2 class="white center">Digital Display</h2>
<h2 class="white center">BeagleBone</h2 >
<div class="text-wrapper">
Connect your digital displays and start managing and controlling your devices.
Let us give you all that you need to know of the devices you own.
<br><br>
Connect your BeagleBone Black Board into the WSO2 Device Cloud Platform.<br><br>
</div>
<a href="#" class="grey-btn" onclick="document.location.href='digitaldisplay';
">Connect</a>
<a href="#" class="grey-btn">Connect</a>
</div>
</div>
</div>

Loading…
Cancel
Save