Few changes for graph display

modules/distribution/src/repository/jaggeryapps/iot/api/stats-api.jag

@@ -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) {

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs

@@ -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>

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/bulb_graph.js

@@ -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);
+}

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/fan_graph.js

@@ -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);
+}

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js

@@ -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) {
@@ -116,3 +122,25 @@ 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;
+}

modules/distribution/src/repository/jaggeryapps/iot/units/sensebot/sensebot.hbs

@@ -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>

modules/distribution/src/repository/jaggeryapps/iot/units/showcase/showcase.hbs

@@ -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
+                            Connect your FireAlarm into the WSO2 Device Cloud Platform.
-                            generated by the Raspberry Pi. <br><br>
+                            <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';
+                        <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="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
+                            Connect your Digital Display into the WSO2 Device Cloud Platform.
-                            SensorTag's temperature, agyroscope, and magnetometer sensors.
+                            <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.
+                            Connect your ArduinoUno into the WSO2 Device Cloud Platform.<br><br><br>
-							Let us give you all that you need to know of the devices you own.
-                            <br><br>
                         </div>
-                        <a href="#" class="grey-btn" onclick="document.location.href='firealarm';
+                        <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.
+                            Connect your RaspberryPi into the WSO2 Device Cloud Platform.<br><br><br>
-                            Let us give you all that you need to know of the devices you own.
-                            <br><br>
                         </div>
-                        <a href="#" class="grey-btn" onclick="document.location.href='sensebot';
+                        <a href="#" class="grey-btn">Connect</a>
-                                                ">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/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.
+                            Connect your BeagleBone Black Board into the WSO2 Device Cloud Platform.<br><br>
-                            Let us give you all that you need to know of the devices you own.
-                            <br><br>
                         </div>
-                        <a href="#" class="grey-btn" onclick="document.location.href='digitaldisplay';
+                        <a href="#" class="grey-btn">Connect</a>
-                                                ">Connect</a>
                     </div>
                 </div>
             </div>