-
-
-
Humidity
-
-
Time
+
+
+
+
@@ -45,4 +34,5 @@
{{js "js/moment.min.js"}}
{{js "js/socket.io.min.js"}}
{{js "js/device-stats.js"}}
-{{/zone}}
\ No newline at end of file
+ {{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/coffee.css
new file mode 100644
index 00000000..fc5790a3
--- /dev/null
+++ b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/css/coffee.css
@@ -0,0 +1,291 @@
+/*
+ * 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.
+ */
+
+input[type=range][orient=vertical]
+{
+ writing-mode: bt-lr; /* IE */
+ -webkit-appearance: slider-vertical; /* WebKit */
+ width: 8px;
+ height: 175px;
+ padding: 0 5px;
+}
+
+
+.left-pane{
+ float: left;
+ width: 30%;
+ text-align: center;
+ min-width: 325px;
+}
+.right-pane{
+ float: right;
+ background-color: rgba(204, 204, 204, 0.61);
+ width: 70%;
+}
+.coffee-wrapper{
+ margin: 50px;
+}
+.coffee-top{
+ position: absolute;
+ bottom: 10px;
+ height: 30px;
+ width: 100%;
+ z-index: 99;
+ background-color: aquamarine;
+}
+.coffee-bottom{
+ position: absolute;
+ bottom: 0px;
+ height: 10px;
+ width: 100%;
+ z-index: 98;
+ background-color: aqua;
+}
+
+.handle {
+ position: absolute;
+ height: 200px;
+ width: 97px;
+ top: 39px;
+ left: -111px;
+ border-top-left-radius: 75px 100px;
+ border-bottom-left-radius: 75px 100px;
+ border-top-right-radius: 50% 20px;
+ border-bottom-right-radius: 50% 20px;
+ background: linear-gradient(to left, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 100%);
+ background-color: rgba(255, 255, 255, 0.28);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+}
+.handle:after {
+ content: "";
+ position: absolute;
+ height: 167px;
+ width: 76px;
+ top: 15px;
+ right: 0;
+ border-top-left-radius: 45px 70px;
+ border-bottom-left-radius: 45px 70px;
+ border-top-right-radius: 45px 35px;
+ border-bottom-right-radius: 45px 35px;
+ background: rgba(204, 204, 204, 0.3);
+}
+
+.coffee-wrapper *:before, .coffee-wrapper *:after {
+ content: '';
+ display: block;
+ position: absolute;
+}
+
+
+.coffee {
+ display: inline-block;
+ position: relative;
+ width: 300px;
+ margin: 0 20px 50px 0;
+}
+
+.coffee:after {
+ height: 14px;
+ width: 300px;
+ border-radius: 46px/10px;
+ box-shadow: 0px 1px 4px -2px rgba(0, 0, 0, 0.2), 0px 2px 10px -3px rgba(0, 0, 0, 0.1);
+ bottom: -7.6px;
+ z-index: 0;
+}
+
+.coffee:before {
+ height: 14px;
+ width: 300px;
+ border-radius: 46px/10px;
+ box-shadow: 0px 2px 10px -2px rgba(0, 204, 255, 0.3), 0px 2px 15px -2px rgba(0, 204, 255, 0.4);
+ bottom: -7.6px;
+ z-index: 0;
+}
+
+.coffee_main {
+ height: 300px;
+ position: relative;
+ width: 298px;
+ background: none;
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ border-top: none;
+ border-bottom: none;
+}
+
+.coffee_main:after, .coffee_main:before {
+ height: 12px;
+ width: 296px;
+ border-radius: 46px/10px;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-bottom: 2px solid rgba(255, 255, 255, 0.7);
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ left: -1px;
+}
+
+.coffee_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 {
+ 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 {
+ height: 52px;
+ width: 44px;
+ margin: 0px auto;
+ position: relative;
+ background: none;
+ border: 1px solid rgba(0, 0, 0, 0.04);
+ border-top: none;
+ border-bottom: none;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0.3));
+ box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
+}
+
+.coffee_mouth:after {
+ height: 6px;
+ width: 44px;
+ border-radius: 25px/6px;
+ border: 1px solid rgba(255, 255, 255, 0.4);
+ left: -1px;
+ top: -4px;
+ z-index: 1;
+ box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.3);
+}
+
+.coffee_inner {
+ height: 295px;
+ width: 92%;
+ margin: 0px auto;
+ border-radius: 10px 10px 20px 20px/10px;
+ border: 1px solid rgba(0, 0, 0, 0.01);
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ border-bottom-width: 0.5px;
+ position: relative;
+ box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 8px rgba(255, 255, 255, 0.6) inset, 0px 0px 5px rgba(255, 255, 255, 0.5);
+ position: relative;
+ top: 1px;
+}
+
+.coffee_inner:before {
+ border-radius: 40px/4px;
+ top: 140px;
+ width: 90%;
+ left: 3px;
+ height: 9px;
+}
+
+.coffee_top .highlight {
+ display: block;
+ height: 30px;
+ width: 20px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ transform: skew(0deg, 5deg);
+ 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 {
+ height: 30px;
+ width: 2px;
+ left: -3px;
+ top: -1px;
+ transform: skew(0deg, 5deg);
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.coffee_main .highlight {
+ display: block;
+ height: 301px;
+ width: 25px;
+ position: absolute;
+ left: 10px;
+ top: 6px;
+ transform: skew(0deg, 6deg);
+ background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
+ z-index: 2;
+}
+
+.coffee_main .highlight:after {
+ height: 150px;
+ width: 4px;
+ left: -6px;
+ top: 0px;
+ transform: skew(0deg, 3deg);
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 80%);
+}
+
+.coffee_neck .highlight {
+ display: block;
+ height: 20px;
+ width: 25px;
+ position: absolute;
+ left: 2px;
+ top: 6px;
+ transform: skew(0deg, 6deg);
+ background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.1) 98%, rgba(255, 255, 255, 0));
+}
+
+.water {
+ background: linear-gradient(-85deg, rgba(16, 51, 194, 0.35), rgba(77, 130, 169, 0.55) 70%, rgba(46, 144, 185, 0.4));
+ width: 99%;
+ height: 80px;
+ position: absolute;
+ left: 1px;
+ bottom: 1px;
+ border-radius: 50px 50px 20px 20px/8px 8px 10px 10px;
+ box-shadow: 0px 0px 6px rgba(0, 13, 165, 0.5) inset, 0px 0.2px 3px -1px rgba(0, 0, 0, 0.3) inset, 0px 2px 6px -1px rgba(0, 0, 0, 0.1) inset, 0px 2px 5px rgba(28, 143, 190, 0.3), 0px 1px 3px rgba(44, 105, 190, 0.2);
+}
+
+.water:after {
+ height: 10px;
+ width: 100%;
+ left: -1px;
+ top: 0px;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 127, 0, 0.05) 50%, rgba(251, 148, 0, 0.1) 80%, rgba(255, 255, 255, 0.3));
+ border-radius: 50px/8px;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-bottom-color: rgba(255, 255, 255, 0.4);
+ box-shadow: 0px 1px 2px -1px rgba(165, 90, 26, 0.35);
+}
+
+.water:before {
+ height: 10px;
+ width: 100%;
+ left: 2px;
+ bottom: -1px;
+ background: linear-gradient(to right, rgba(190,155,123,0.2), rgba(190,155,123,0.1) 50%, rgba(190,155,123,0.2) 80%, rgba(190,155,123,0.3));
+ border-radius: 50px/10px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-bottom: none;
+ box-shadow: 0px -2px 3px -1px rgba(190,155,123,0.25);
+}
+
+.water {
+ height: 0px;
+ -webkit-transition: all 3s ease-out;
+ -moz-transition: all 3s ease-out;
+ -o-transition: all 3s ease-out;
+ transition: all 3s ease-out;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+}
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
new file mode 100644
index 00000000..1f51cfce
--- /dev/null
+++ 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
@@ -0,0 +1,39 @@
+/*
+ * 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 8314bed4..484c1379 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
@@ -24,71 +24,68 @@ var temperatureData = [];
var humidity;
var humidityData = [];
-var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
+//var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
$(window).load(function () {
-
- temperature = lineGraph("temperature", temperatureData);
- humidity = lineGraph("humidity", humidityData);
-
var websocketUrl = $("#div-chart").data("websocketurl");
- connect(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;
-}
+//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) {
@@ -112,12 +109,7 @@ function connect(target) {
}
function graphUpdate(chartData, xValue, yValue, graph) {
- chartData.push({
- x: parseInt(xValue),
- y: parseFloat(yValue)
- });
- chartData.shift();
- graph.update();
+ updateCoffee(xValue);
}
function disconnect() {
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/libs/htmlpreview.min.js b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/libs/htmlpreview.min.js
new file mode 100644
index 00000000..58db9038
--- /dev/null
+++ b/modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/libs/htmlpreview.min.js
@@ -0,0 +1,19 @@
+/*
+ * 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 HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b
a[b].innerHTML.indexOf("HTMLPreview")&&document.write(a[b].outerHTML)}},loadHTML:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadHTML"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status?(HTMLPreview.content=a.query.results.resources.content.replace(//i,'').replace(/<\/body>/i,'