diff --git a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs index 2e31a33c..18c2a2c7 100644 --- a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs +++ b/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}} -
-
-
-
-
-
-
-
-
-
-
-
-
- -
- +
+
+
+
+
+
+
+
+
+
-
@@ -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}} diff --git a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/css/coffee.css b/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 similarity index 92% rename from modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/css/coffee.css rename to 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 index fc5790a3..6496a98f 100644 --- a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/css/coffee.css +++ b/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; } diff --git a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/coffee.js b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/coffee.js deleted file mode 100644 index 1f51cfce..00000000 --- a/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/coffee.js +++ /dev/null @@ -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"; -} diff --git a/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 b/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 index 484c1379..a9376c2e 100644 --- a/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 +++ b/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 temperature; -var temperatureData = []; - -var humidity; -var humidityData = []; - -//var palette = new Rickshaw.Color.Palette({scheme: "classic9"}); +var coffee_amount = 0; $(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 = '' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + ''; -// var swatch = ''; -// return swatch + series.name + ": " + parseInt(y) + '
' + 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; - graphUpdate(temperatureData, time, dataPoint[3], temperature); - graphUpdate(humidityData, time, dataPoint[4], humidity); + updateWaterLevel(dataPoint[4]); } }; } } -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'; + } +} \ No newline at end of file diff --git a/modules/samples/watertank/feature/feature/src/main/resources/agent/water-tank.lua b/modules/samples/watertank/feature/feature/src/main/resources/agent/water-tank.lua index 56256eca..7c5c72f2 100644 --- a/modules/samples/watertank/feature/feature/src/main/resources/agent/water-tank.lua +++ b/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 -tank_height = 120 +relay_off = 80 +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); - if (water_level < relay_on) then - gpio.write(relay, gpio.HIGH) - is_relay_on = "true" - elseif (water_level > relay_off) then + local level = tank_height - (du / 40); + if (level < relay_on) 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