[{"id":"33282e33.bafe72","type":"ui_template","z":"0ff82ffab2d12d50","group":"b9d11553.55a72","name":"SoC","order":6,"width":"4","height":"8","format":"<div class=\"battery onscreen\">\n <div class=\"bubbles battery-bubbles\">\n <span> </span>\n </div>\n <div class=\"liquid liquid-bg-color\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"300px\" height=\"5px\" viewBox=\"0 0 300 5\" enable-background=\"new 0 0 300 5\" xml:space=\"preserve\">\n <path fill=\"#00fa57\" class=\"wave\" d=\"M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4\n c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9\n c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z\" />\n </svg>\n </div><!-- .liquid -->\n</div>\n<div class=\"battery-text onscreen\">\n <span class=\"percentage\"></span><small class=\"units\"></small>\n</div>\n<div class=\"slider onscreen\">\n <!--\n <input ng-model=\"msg.payload\" class=\"vertical pointer\" type=\"range\" name=\"percentage\" min=\"0\" max=\"100\" step=\"1\" orient=\"vertical\">\n -->\n </div>\n<div class=\"page-spacer\"></div>\n <span> </span>\n\n<style>\n small { font-size: .7em }\nsvg { display: block }\n.page-spacer {\n min-height: 171px;\n height: calc(100% - 160px);\n}\n.battery-text {\n width: 80px;\n height: 160px;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-color: #fff;\n background-image: linear-gradient(#000 50%, #c3c3c3 0%);\n background-repeat: repeat;\n background-size: 100% 200%;\n transition: background-position .5s ease, opacity .5s ease;\n opacity: 0;\n z-index: 2;\n}\n.battery,\n.battery-text,\n.slider {\n margin: 0 auto;\n position: absolute;\n line-height: 4.5em;\n text-align: center;\n font-size: 2em;\n color: white;\n font-family: Ebrima;\n top: calc(50% - 155px);\n left: calc(50% - 39.5px);\n}\n.pointer { cursor: pointer }\n.battery {\n border: 5px solid #00fa57;\n height: 150px;\n border-radius: 1px;\n width: 70px;\n background-color: #00fa57;\n background-image: linear-gradient(#00fa57 50%, #444 0%);\n background-repeat: repeat;\n background-size: 100% 200%;\n background-position: 0 -100%;\n transition: background-position .5s ease;\n}\n.battery::after {\n background-color: #00fa57;\n content: '';\n display: block;\n height: 10px;\n position: absolute;\n right: 20px;\n top: -15px;\n width: 30px;\n border-top: 1px solid transparent;\n border-bottom: 1px solid transparent;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n}\n.bubbles {\n display: inline-block;\n position: relative;\n}\n.battery-bubbles {\n width: 69px;\n left: calc(50% - 35px);\n height: 149px;\n}\n.bottom-bubbles {\n width: 39px;\n left: calc(50% - 20px);\n height: 150px;\n}\n.bubbles span {\n position: relative;\n margin: 3em 0 0; /* Height bubbles rise to */\n color: #fff;\n z-index: 2;\n}\n.individual-bubble {\n position: absolute;\n border-radius: 100%;\n bottom: 0;\n background-color: #00fa57;\n z-index: 1;\n}\n.vertical {\n writing-mode: bt-lr; /* IE */\n -webkit-appearance: slider-vertical; /* WebKit */\n width: 8px;\n height: 159.5px;\n margin: 0;\n margin-left: 95px;\n}\n.liquid {\n position: absolute;\n width: 70px;\n height: 5px;\n overflow: hidden;\n -webkit-backface-visibility: hidden;\n -webkit-transform: translate3d(0, 0, 0);\n -webkit-transform: translate(0, 50px);\n transform: translate(0, 50px);\n margin-top: -51px;\n transition: top .5s ease;\n display: none;\n}\n.wave {\n -webkit-animation-name: wave-action;\n animation-name: wave-action;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n -webkit-animation-duration: .8s;\n animation-duration: .8s;\n width: 70px;\n height: 5px;\n fill: #00fa57;\n}\n@-webkit-keyframes wave-action {\n 0% { -webkit-transform: translate(-150px, 0) }\n 100% { -webkit-transform: translate(0, 0) }\n}\n@keyframes wave-action {\n 0% { transform: translate(-150px, 0) }\n 100% { transform: translate(0, 0) }\n}\n\n/**/\n\n@media all and (max-height: 332px){\n .onscreen { top: 11px }\n}\n\n/**/\n\n/* Animating the top property in Microsoft Edge does not work so prevent animating it */\n_:-ms-lang(x), _:-webkit-full-screen, .individual-bubble { top: inherit !important }\n</style>\n\n<script>\n (function(scope){\n scope.$watch('msg', function(msg) {\n perc=msg.payload;\n \n });\n \n })(scope);\nfunction changeStylesheetRule(s, selector, property, value){\n // Make these strings lowercase\n selector = selector.toLowerCase();\n value = value.toLowerCase();\n\n // Delete it if it exists\n for(var i = 0; i < s.cssRules.length; i++){\n var rule = s.cssRules[i];\n if(rule.selectorText === selector){\n s.deleteRule(i);\n break;\n }\n }\n\n // Convert camelCase to hyphenated-case\n property = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n s.insertRule(selector + \" { \" + property + \": \" + value + \"; }\", 0);\n}\n\n// Function to select random array element\n// Used within the setInterval()\nfunction randomValue(arr){\n return arr[Math.floor(Math.random() * arr.length)];\n}\n\njQuery.easing['jswing'] = jQuery.easing['swing'];\njQuery.extend(jQuery.easing, {\n def: 'easeOutQuad',\n swing: function (x, t, b, c, d){\n return jQuery.easing[jQuery.easing.def](x, t, b, c, d);\n },\n easeOutQuad: function (x, t, b, c, d){\n return -c * (t /= d) * (t - 2) + b;\n },\n});\n\n$(document).ready(function(){\n //var perc = 50;\n var s = document.styleSheets[0];\n // Define a size array, this will be used to vary bubble sizes\n var sArray = [];\n\n setTimeout(function(){\n updateBattery(perc, s);\n $('.percentage').text(perc);\n $('.units').text('%');\n $('.battery-text').css('opacity', 1);\n $('.slider input').animate({ value: perc }, 500, 'easeOutQuad');\n\n setTimeout(function(){\n $('.liquid').show();\n }, 500);\n }, 500);\n\n function updateBattery(perc, s){\n if(perc === 100){\n sArray = [];\n } else if(sArray.length === 0){\n sArray = [4, 6, 8, 10];\n }\n\n changeStylesheetRule(s, '.battery', 'backgroundPosition', '0 -' + (100 - perc) + '% !important');\n changeStylesheetRule(s, '.battery-text', 'backgroundPosition', '0 -' + (100 - perc) + '%');\n changeStylesheetRule(s, '.liquid', 'top', (100 - perc) + '%');\n if(perc === 100){\n changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#00fa57');\n } else {\n changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#444');\n }\n }\n\n // setInterval function used to create new bubble every 350 milliseconds\n setInterval(function(){\n if(sArray.length > 0){\n // Get a random size, defined as variable so it can be used for both width and height\n var size = randomValue(sArray);\n\n var largestSize = Math.max.apply(Math, sArray);\n var offset = largestSize / 2; // half to get the largest bubble radius\n offset += 5; // 5px for border-right\n\n // New bubble appended to div with it's size and left position being set inline\n $('.bubbles').each(function(){\n var bArray = new Array(parseInt($(this).width()) - offset)\n .join()\n .split(',')\n .map(function(item, index){ return ++index; });\n\n $(this).append('<div class=\"individual-bubble\" style=\"left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height: ' + size + 'px\"></div>');\n });\n\n // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves\n // Callback function used to remove finished animations from the page\n $('.individual-bubble').animate({\n 'top': 0,\n 'bottom': '100%',\n 'opacity' : '-=0.7',\n }, 3000, function(){\n $(this).remove();\n });\n }\n }, 350);\n\n $('.slider input').on('input', function(){\n $(this).stop(); // Terminate any running animation\n var original = this.value;\n // Set slider back to its starting value so we can animate the change\n this.value = perc;\n perc = parseInt(original);\n $(this).animate({ value: perc }, 500, 'easeOutQuad');\n $('.percentage').text(perc);\n }).on('mouseup', function(){\n // We need to manually call this to make sure things bubble up to the change event\n $(this).trigger('change');\n }).on('change', function(){\n updateBattery(perc, s);\n });\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":180,"wires":[["62e432036fdd461e","01858d9486ec3675","6e058593d06fc1f1"]]},{"id":"2cd6f21ba01b4a40","type":"inject","z":"0ff82ffab2d12d50","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":170,"y":180,"wires":[["33282e33.bafe72"]]},{"id":"e3a4339f158d153c","type":"ui_ui_control","z":"0ff82ffab2d12d50","name":"","events":"all","x":820,"y":180,"wires":[[]]},{"id":"62e432036fdd461e","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"tab\":\"\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":180,"wires":[["e3a4339f158d153c"]]},{"id":"01858d9486ec3675","type":"debug","z":"0ff82ffab2d12d50","name":"debug 45","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":140,"wires":[]},{"id":"6e058593d06fc1f1","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload + 10","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":240,"wires":[["7895c27ea28429b0"]]},{"id":"7895c27ea28429b0","type":"range","z":"0ff82ffab2d12d50","minin":"0","maxin":"100","minout":"0","maxout":"100","action":"drop","round":false,"property":"payload","name":"","x":840,"y":240,"wires":[["587f76f525d9a0ff"]]},{"id":"587f76f525d9a0ff","type":"delay","z":"0ff82ffab2d12d50","name":"","pauseType":"delay","timeout":"10","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":1050,"y":240,"wires":[["33282e33.bafe72"]]},{"id":"a18464d5bc33c1c8","type":"inject","z":"0ff82ffab2d12d50","name":"reset","props":[{"p":"reset","v":"true","vt":"bool"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":830,"y":300,"wires":[["587f76f525d9a0ff"]]},{"id":"b9d11553.55a72","type":"ui_group","name":"Status","tab":"c569e95d.e2ea7","order":4,"disp":true,"width":"8","collapse":true},{"id":"c569e95d.e2ea7","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]
