# Battery gauge load msg.payload into javascript \[Resolved\]

**URL:** https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639
**Category:** Dashboard
**Created:** [28 August 2018 16:14 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639 "2018-08-28T16:14:14Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![admintite](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@admintite](https://discourse.nodered.org/u/admintite)
#### Post date: [28 August 2018 16:14 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/1 "2018-08-28T16:14:14Z")

</div>

Hello,

I wanted to get a better gauge for my battery state of charge, after finding [one i like in codepen.io](https://codepen.io/u01jmg3/pen/PGmzVL) i have attempted to make it work but with no success. it seems that i cant bring in msg.payload into my javascript so that the level updates.

I searched around and found [this on stackoverflow](https://stackoverflow.com/questions/42361699/how-to-send-msg-payload-from-function-node-to-template-node) hoping that replacing {{msg.payload}} with {{payload}} would fix it but it still doesn't.  
what am I missing?

```auto
[{"id":"413141f.ecbd74","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"35c57285.439066","type":"ui_gauge","z":"413141f.ecbd74","name":"Battery SoC","group":"b9d11553.55a72","order":7,"width":"6","height":"6","gtype":"gage","title":"Battery SOC","label":"","format":"{{value}} %","min":0,"max":"100","colors":["#ff0000","#e6e600","#80ff00"],"seg1":"25","seg2":"50","x":1290,"y":720,"wires":[]},{"id":"91689e39.150958","type":"modbus-flex-getter","z":"413141f.ecbd74","name":"I1: phase 1 current","showStatusActivities":true,"showErrors":false,"logIOActivities":false,"server":"2d0b9d18.a028da","useIOFile":false,"ioFile":"","useIOForPayload":false,"x":670,"y":760,"wires":[["5f77dd14.60171c"],[]]},{"id":"e225110.0d7f0f","type":"function","z":"413141f.ecbd74","name":"FC4 - I1: phase 1 current","func":"msg.payload = {\n 'fc': 4, \n 'unitid': 1, \n 'address': 12570, \n 'quantity': 1 \n}; \nreturn msg;","outputs":1,"noerr":0,"x":370,"y":760,"wires":[["91689e39.150958"]]},{"id":"619d7cbc.b599fc","type":"inject","z":"413141f.ecbd74","name":"1 sec","topic":"","payload":"","payloadType":"str","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":760,"wires":[["e225110.0d7f0f"]]},{"id":"dc2b04b.14e7b78","type":"function","z":"413141f.ecbd74","name":"","func":"msg.payload = Number(msg.payload);\n//msg.payload = (msg.payload)/100;\nreturn msg;","outputs":1,"noerr":0,"x":1130,"y":760,"wires":[["35c57285.439066","48a6c0f2.2cf6"]]},{"id":"48a6c0f2.2cf6","type":"ui_template","z":"413141f.ecbd74","group":"45d13185.8fc46","name":"","order":0,"width":"4","height":"9","format":"<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\">Some text</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n $(\"#my_\"+scope.$id).html(msg.payload);\n }\n });\n})(scope);\n</script>\n\n<style>\nsmall { 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: #000;\n background-image: linear-gradient(#fff 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: 6.38em;\n text-align: center;\n font-size: 1.5em;\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<div class=\"battery onscreen\">\n <div class=\"bubbles battery-bubbles\">\n <span>&nbsp;</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 <input value=\"0\" class=\"vertical pointer\" type=\"hidden\" name=\"percentage\" min=\"0\" max=\"100\" step=\"1\" orient=\"vertical\">\n</div>\n<div class=\"page-spacer\"></div>\n <span>&nbsp;</span>\n<div>\n <br>\n SoC: {{msg.payload}} \n</div>\n\n<script>\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 = 73;\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,"templateScope":"local","x":1340,"y":820,"wires":[[]]},{"id":"5f77dd14.60171c","type":"function","z":"413141f.ecbd74","name":"parse load data","func":"var bSoC = msg.payload[0];\n\n\n\n\n\nvar msg1 = {topic:\"Load voltage\", payload: bSoC};\n\n\n\n\n\nreturn [msg1];\n","outputs":3,"noerr":0,"x":920,"y":760,"wires":[["dc2b04b.14e7b78"],[],[]]},{"id":"b9d11553.55a72","type":"ui_group","z":"","name":"Status","tab":"c569e95d.e2ea7","order":4,"disp":true,"width":"8","collapse":true},{"id":"2d0b9d18.a028da","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"45d13185.8fc46","type":"ui_group","z":"","name":"Dashboard","tab":"c569e95d.e2ea7","order":3,"disp":true,"width":"20","collapse":true},{"id":"c569e95d.e2ea7","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

```

thank you

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [28 August 2018 16:34 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/2 "2018-08-28T16:34:44Z")

</div>

You are correct -- you cannot substitute your payload directly into the `<script>` tag inside your `ui_template` node. Instead, you have 3 options:

1. Use the Angular `$watch(...)` function (an example is in the info sidebar for the `ui_template` node) to pass information into the html/dom
2. Use Angular syntax to expand the information directly into html elements, or
3. Use the core `template` node to create the entire html+script page source, and pass that into the default `ui_template` content set to include html

---

<div class="post-metadata">

### Author: ![admintite](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@admintite](https://discourse.nodered.org/u/admintite)
#### Post date: [28 August 2018 16:41 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/3 "2018-08-28T16:41:29Z")

</div>

using the example:

```auto
<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

```

How would i inject it into this like so?

```auto
<div class="slider onscreen">
    <input value= "{{'my_'+$id}}" class="vertical pointer" type="range" name="percentage" min="0" max="100" step="1" orient="vertical">
</div>

```

Is this right?

---

<div class="post-metadata">

### Author: ![admintite](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@admintite](https://discourse.nodered.org/u/admintite)
#### Post date: [28 August 2018 21:02 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/4 "2018-08-28T21:02:29Z")

</div>

Never mind that will not work. This more complicated than my skills can comprehend. I guess javascript behaves differently in the template, like you said.

If i understand correctly i cannot pass msg.payload directly to javascript, I can only pass it to an html object? Like an input field?

---

<div class="post-metadata">

### Author: ![admintite](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@admintite](https://discourse.nodered.org/u/admintite)
#### Post date: [30 August 2018 12:58 UTC](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/5 "2018-08-30T12:58:41Z")

</div>

@shrickus  
thank you for pointing me the right way. Had to learn some angular but it was worth it. Here is the export if anyone is interested.

```auto
[{"id":"99557a3.b645e88","type":"modbus-flex-getter","z":"38a2c7cf.ba825","name":"I1: phase 1 current","showStatusActivities":true,"showErrors":false,"logIOActivities":false,"server":"2d0b9d18.a028da","useIOFile":false,"ioFile":"","useIOForPayload":false,"x":630,"y":620,"wires":[["c318e176.bc407"],[]]},{"id":"7853844.619af7c","type":"function","z":"38a2c7cf.ba825","name":"FC4 - I1: phase 1 current","func":"msg.payload = {\n 'fc': 4, \n 'unitid': 1, \n 'address': 12570, \n 'quantity': 1 \n}; \nreturn msg;","outputs":1,"noerr":0,"x":330,"y":620,"wires":[["99557a3.b645e88"]]},{"id":"2f851c36.0763b4","type":"inject","z":"38a2c7cf.ba825","name":"1 sec","topic":"","payload":"","payloadType":"str","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":620,"wires":[["7853844.619af7c"]]},{"id":"c318e176.bc407","type":"function","z":"38a2c7cf.ba825","name":"","func":"//msg.payload = Number(msg.payload);\nvar soc = msg.payload[0];\n\n\n\n\n\nvar msg1 = {topic:\"soc\", payload: soc};\n\n\n\n\n\nreturn [msg1];","outputs":1,"noerr":0,"x":870,"y":620,"wires":[["33282e33.bafe72"]]},{"id":"33282e33.bafe72","type":"ui_template","z":"38a2c7cf.ba825","group":"b9d11553.55a72","name":"SoC","order":6,"width":"4","height":"8","format":"<div class=\"battery onscreen\">\n <div class=\"bubbles battery-bubbles\">\n <span>&nbsp;</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>&nbsp;</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 })(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,"templateScope":"local","x":1070,"y":620,"wires":[[]]},{"id":"2d0b9d18.a028da","type":"modbus-client","z":"","name":"","clienttype":"serial","bufferCommands":true,"stateLogEnabled":false,"tcpHost":"127.0.0.1","tcpPort":"502","tcpType":"DEFAULT","serialPort":"/dev/ttyUSB0","serialType":"RTU-BUFFERD","serialBaudrate":"115200","serialDatabits":"8","serialStopbits":"1","serialParity":"none","serialConnectionDelay":"100","unit_id":"1","commandDelay":"1","clientTimeout":"1000","reconnectTimeout":"2000"},{"id":"b9d11553.55a72","type":"ui_group","z":"","name":"Status","tab":"c569e95d.e2ea7","order":4,"disp":true,"width":"8","collapse":true},{"id":"c569e95d.e2ea7","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

```