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/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;ba[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,'