Battery gauge load msg.payload into javascript [Resolved]

Dashboard
1

Hello,

I wanted to get a better gauge for my battery state of charge, after finding one i like in codepen.io 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 hoping that replacing {{msg.payload}} with {{payload}} would fix it but it still doesn't.
what am I missing?

[{"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

2

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
3

using the example:

<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?

<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?

4

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?

5

@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.

[{"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}]
2 Likes