Smooth counting up

[smanjunath211]

I intend to get the display at left similar (ui-text node) to the gauge (smooth updating from previous value to next value, without jumping to the next value directly. i had asked the question already in the above query, but i could not understand the solution provided. any other hint please ...

How to smoothen the counter display

Hi, I have a input from a source which gives me a count every 1 second (usually 3 to 5, maximum 6). I want to totalise this and display as a cumulative counter for one minute and reset. currently the Minute counter displays like, 5,10,15,19 etc depending upon the first input. what would be the way to display the Minute counter as 1,2,3,4,5 so that the counting is continuous and smooth ? current display and expected display shown below. Current Display [counter] Expected (simulation here) [c…

[jbudd]

Something like this might work, except it's integers only. You could multiply by 10 at the start and divide by 10 at the end to get 1 decimal place.
The rate limit node regulates how quickly the text output catches up with the latest input.
A lower input than is currently in context storage will reset to 0 but it will finish counting up before restarting.

[{"id":"1f95199e774389dc","type":"function","z":"cf400f7f1844d87c","name":"Accumulate total","func":"let start = context.get('total') || 0\nif (msg.payload < start) {\n    start = 0\n}\nconst stop = msg.payload\nfor (msg.payload = start + 1; msg.payload <= stop; msg.payload ++) {\n    context.set ('total', msg.payload)\n    node.send (msg)\n}\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":160,"wires":[["4afb22a5c06fdd78"]]},{"id":"f366e5e5a184cbb3","type":"inject","z":"cf400f7f1844d87c","name":"n = 19","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"19","payloadType":"num","x":130,"y":160,"wires":[["1f95199e774389dc"]]},{"id":"5a5b2dfcf9a12ece","type":"inject","z":"cf400f7f1844d87c","name":"n = 14","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"14","payloadType":"num","x":130,"y":120,"wires":[["1f95199e774389dc"]]},{"id":"be42348f9b7f4d80","type":"inject","z":"cf400f7f1844d87c","name":"n = 45","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"45","payloadType":"num","x":130,"y":200,"wires":[["1f95199e774389dc"]]},{"id":"7a74b8e1b0aafc1d","type":"debug","z":"cf400f7f1844d87c","name":"debug 474","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":630,"y":160,"wires":[]},{"id":"4afb22a5c06fdd78","type":"delay","z":"cf400f7f1844d87c","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"5","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":470,"y":160,"wires":[["7a74b8e1b0aafc1d"]]}]

[bakman2]

This is not as simple as it might seem, I would recommend an external library like countUp with a template node

[smanjunath211]

this is exactly what i was needing, now i see the logic, the function node quickly goes through the counting, but the limit node gives out smoothly. excellent.

[smanjunath211]

I did lookup the countUp js but getting it in a template node, was not in my skill list. thanks for the input.

[smanjunath211]

the msg.payload is giving in random steps of 4 to 5 liters jump, but the display is going through liter by liter smoothly... exactly like i wanted... just need to set the limit to suit my inflow speed so that it catches up, which can be easily done. thanks again @jbudd