Update agent code and analytics scripts. Fixed bugs

modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs

@@ -1,26 +1,19 @@
 {{unit "cdmf.unit.lib.handlebars"}}
 {{#zone "topCss"}}
-    {{css "css/coffee.css"}}
+    {{css "css/water-level.css"}}
 {{/zone}}
-<div id="chartWrapper">
-</div>
-<div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
-
-    <div class="coffee-wrapper">
-                    <div class="coffee">
-                        <div class="coffee_main">
-                            <div class="coffee_inner">
-                                <div class="water" id="water"></div>
-                            </div>
-                            <div class="highlight"></div>
-                        </div>
-                    </div>
-    </div>
-    
-    <div>
 
+<div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
+    <div class="water-level-wrapper">
+        <div class="water-level">
+            <div class="water-level_main">
+                <div class="water-level_inner">
+                    <div class="water" id="water"></div>
+                </div>
+                <div class="highlight"></div>
+            </div>
+        </div>
     </div>
-
 </div>
 <a class="padding-left"
    href="{{@app.context}}/device/{{device.type}}/analytics?deviceId={{device.deviceIdentifier}}&deviceName={{device.name}}">
@@ -34,5 +27,4 @@
     {{js "js/moment.min.js"}}
     {{js "js/socket.io.min.js"}}
     {{js "js/device-stats.js"}}
-    {{js "js/coffee.js"}}
 {{/zone}}

modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/css/water-level.css

@@ -25,7 +25,6 @@ input[type=range][orient=vertical]
     padding: 0 5px;
 }
 
-
 .left-pane{
     float: left;
     width: 30%;
@@ -37,10 +36,10 @@ input[type=range][orient=vertical]
     background-color: rgba(204, 204, 204, 0.61);
     width: 70%;
 }
-.coffee-wrapper{
+.water-level-wrapper{
     margin: 50px;
 }
-.coffee-top{
+.water-level-top{
     position: absolute;
     bottom: 10px;
     height: 30px;
@@ -48,7 +47,7 @@ input[type=range][orient=vertical]
     z-index: 99;
     background-color: aquamarine;
 }
-.coffee-bottom{
+.water-level-bottom{
     position: absolute;
     bottom: 0px;
     height: 10px;
@@ -85,21 +84,21 @@ input[type=range][orient=vertical]
     background: rgba(204, 204, 204, 0.3);
 }
 
-.coffee-wrapper *:before, .coffee-wrapper *:after {
+.water-level-wrapper *:before, .water-level-wrapper *:after {
     content: '';
     display: block;
     position: absolute;
 }
 
 
-.coffee {
+.water-level {
     display: inline-block;
     position: relative;
     width: 300px;
     margin: 0 20px 50px 0;
 }
 
-.coffee:after {
+.water-level:after {
     height: 14px;
     width: 300px;
     border-radius: 46px/10px;
@@ -108,7 +107,7 @@ input[type=range][orient=vertical]
     z-index: 0;
 }
 
-.coffee:before {
+.water-level:before {
     height: 14px;
     width: 300px;
     border-radius: 46px/10px;
@@ -117,7 +116,7 @@ input[type=range][orient=vertical]
     z-index: 0;
 }
 
-.coffee_main {
+.water-level_main {
     height: 300px;
     position: relative;
     width: 298px;
@@ -127,7 +126,7 @@ input[type=range][orient=vertical]
     border-bottom: none;
 }
 
-.coffee_main:after, .coffee_main:before {
+.water-level_main:after, .water-level_main:before {
     height: 12px;
     width: 296px;
     border-radius: 46px/10px;
@@ -137,17 +136,17 @@ input[type=range][orient=vertical]
     left: -1px;
 }
 
-.coffee_main:after {
+.water-level_main:after {
     top: -7px;
     box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6) inset, 0px 3px 3px -1px rgba(255, 255, 255, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
 }
 
-.coffee_main:before {
+.water-level_main:before {
     top: 294px;
     box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
 }
 
-.coffee_mouth {
+.water-level_mouth {
     height: 52px;
     width: 44px;
     margin: 0px auto;
@@ -160,7 +159,7 @@ input[type=range][orient=vertical]
     box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
 }
 
-.coffee_mouth:after {
+.water-level_mouth:after {
     height: 6px;
     width: 44px;
     border-radius: 25px/6px;
@@ -171,7 +170,7 @@ input[type=range][orient=vertical]
     box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.3);
 }
 
-.coffee_inner {
+.water-level_inner {
     height: 295px;
     width: 92%;
     margin: 0px auto;
@@ -185,7 +184,7 @@ input[type=range][orient=vertical]
     top: 1px;
 }
 
-.coffee_inner:before {
+.water-level_inner:before {
     border-radius: 40px/4px;
     top: 140px;
     width: 90%;
@@ -193,7 +192,7 @@ input[type=range][orient=vertical]
     height: 9px;
 }
 
-.coffee_top .highlight {
+.water-level_top .highlight {
     display: block;
     height: 30px;
     width: 20px;
@@ -204,7 +203,7 @@ input[type=range][orient=vertical]
     background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
 }
 
-.coffee_top .highlight:after {
+.water-level_top .highlight:after {
     height: 30px;
     width: 2px;
     left: -3px;
@@ -213,7 +212,7 @@ input[type=range][orient=vertical]
     background: rgba(255, 255, 255, 0.3);
 }
 
-.coffee_main .highlight {
+.water-level_main .highlight {
     display: block;
     height: 301px;
     width: 25px;
@@ -225,7 +224,7 @@ input[type=range][orient=vertical]
     z-index: 2;
 }
 
-.coffee_main .highlight:after {
+.water-level_main .highlight:after {
     height: 150px;
     width: 4px;
     left: -6px;
@@ -234,7 +233,7 @@ input[type=range][orient=vertical]
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 80%);
 }
 
-.coffee_neck .highlight {
+.water-level_neck .highlight {
     display: block;
     height: 20px;
     width: 25px;
@@ -288,4 +287,7 @@ input[type=range][orient=vertical]
     transition: all 3s ease-out;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 30px;
 }

modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/coffee.js

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-var temperature = 0;
-var coffee_amount = 0;
-
-function updateCoffee(newValue){
-    //var coffee_level = document.getElementById("coffee_level");
-    //coffee_level.innerHTML = newValue + "%";
-    coffee_amount =newValue;
-
-    var coffee = document.getElementById("water");
-    if(newValue == 0){
-        coffee.style.height= (newValue*3) + 'px';
-    }else{
-        coffee.style.height= (newValue*3) - 3 + 'px';
-    }
-}
-
-function updateTemperature(newValue){
-    temperature = newValue;
-    var temperature_level = document.getElementById("temperature_level");
-    temperature_level.innerHTML = newValue + " C";
-}

modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js

@@ -17,76 +17,17 @@
  */
 
 var ws;
-
+var coffee_amount = 0;
-var temperature;
-var temperatureData = [];
-
-var humidity;
-var humidityData = [];
-
-//var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
 
 $(window).load(function () {
     var websocketUrl = $("#div-chart").data("websocketurl");
     connect(websocketUrl);
-    updateCoffee(20);
 });
 
 $(window).unload(function () {
     disconnect();
 });
 
-//function lineGraph(type, chartData) {
-//    var tNow = new Date().getTime() / 1000;
-//    for (var i = 0; i < 30; i++) {
-//        chartData.push({
-//                           x: tNow - (30 - i) * 15,
-//                           y: parseFloat(0)
-//                       });
-//    }
-//
-//    var graph = new Rickshaw.Graph({
-//        element: document.getElementById("chart-" + type),
-//        width: $("#div-chart").width() - 50,
-//        height: 300,
-//        renderer: "line",
-//        padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
-//        xScale: d3.time.scale(),
-//        series: [{
-//            'color': palette.color(),
-//            'data': chartData,
-//            'name': type && type[0].toUpperCase() + type.slice(1)
-//        }]
-//    });
-//
-//    graph.render();
-//
-//    var xAxis = new Rickshaw.Graph.Axis.Time({
-//        graph: graph
-//    });
-//
-//    xAxis.render();
-//
-//    new Rickshaw.Graph.Axis.Y({
-//        graph: graph,
-//        orientation: 'left',
-//        height: 300,
-//        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-//        element: document.getElementById('y_axis-' + type)
-//    });
-//
-//    new Rickshaw.Graph.HoverDetail({
-//        graph: graph,
-//        formatter: function (series, x, y) {
-//            var date = '<span class="date">' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
-//            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
-//            return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
-//        }
-//    });
-//
-//    return graph;
-//}
-
 //websocket connection
 function connect(target) {
     if ('WebSocket' in window) {
@@ -100,21 +41,27 @@ function connect(target) {
         ws.onmessage = function (event) {
             var dataPoint = JSON.parse(event.data);
             if (dataPoint) {
-                var time = parseInt(dataPoint[0]) / 1000;
+                updateWaterLevel(dataPoint[4]);
-                graphUpdate(temperatureData, time, dataPoint[3], temperature);
-                graphUpdate(humidityData, time, dataPoint[4], humidity);
             }
         };
     }
 }
 
-function graphUpdate(chartData, xValue, yValue, graph) {
-    updateCoffee(xValue);
-}
-
 function disconnect() {
     if (ws != null) {
         ws.close();
         ws = null;
     }
 }
+
+function updateWaterLevel(newValue) {
+    var waterLevel = document.getElementById("water");
+    waterLevel.innerHTML = (newValue | 0) + "%";
+    if (newValue == 0) {
+        waterLevel.style.height = (newValue * 3) + 'px';
+        waterLevel.style.paddingTop = 0;
+    } else {
+        waterLevel.style.height = (newValue * 3) - 3 + 'px';
+        waterLevel.style.paddingTop = (newValue * 3 / 2.4) - 10 + 'px';
+    }
+}

modules/samples/watertank/feature/feature/src/main/resources/agent/water-tank.lua

@@ -5,8 +5,8 @@ is_relay_on = "false"
 pulse_time = 0
 water_level = -1
 relay_on = 10
-relay_off = 100
+relay_off = 80
-tank_height = 120
+tank_height = 100
 client_connected = false
 
 m = mqtt.Client("ESP8266-" .. node.chipid(), 120, "${DEVICE_TOKEN}", "")
@@ -35,6 +35,7 @@ end
 gpio.mode(relay, gpio.OUTPUT)
 gpio.mode(trig, gpio.OUTPUT)
 gpio.mode(echo, gpio.INT)
+gpio.write(relay, gpio.HIGH)
 
 read_config()
 
@@ -44,14 +45,15 @@ gpio.trig(echo, "both", function(level)
         pulse_time = tmr.now()
     else
         -- 1cm ==> 40
-        water_level = tank_height - (du / 40);
+        local level = tank_height - (du / 40);
-        if (water_level < relay_on) then
+        if (level < relay_on) then
-            gpio.write(relay, gpio.HIGH)
-            is_relay_on = "true"
-        elseif (water_level > relay_off) then
             gpio.write(relay, gpio.LOW)
+            is_relay_on = "true"
+        elseif (level > relay_off) then
+            gpio.write(relay, gpio.HIGH)
             is_relay_on = "false"
         end
+        water_level = level * 100 / tank_height
     end
 end)
 
@@ -64,7 +66,7 @@ tmr.alarm(0, 5000, 1, function()
         if (water_level > -1) then
             local payload = "{event:{metaData:{owner:\"${DEVICE_OWNER}\",deviceId:\"${DEVICE_ID}\"},payloadData:{relay:" .. is_relay_on .. ", waterlevel:" .. water_level .. "}}}"
             m:publish("carbon.super/watertank/${DEVICE_ID}/data", payload, 0, 0, function(client)
-                print("Published> Water Level: " .. water_level .. "cm  Relay: " .. is_relay_on)
+                print("Published> Water Level: " .. water_level .. "%  Relay: " .. is_relay_on)
             end)
         end
     else