Help with integrating CSS progress bars

I couldn't find any progress bars, but did find some really neat animated HTML/CSS progress bars, can they be added to N-R Dashboard? How would one get started?

Also, I see no method of starting/stopping these animations?

Thanks!

Russ

Hi, I've edited the title to better describe your problem so that this will hopefully better catch the attention of people who potentially can help you. Hope you don't mind.

Not at all, thanks!

Russ

Hi Russ,
That is a coincidence. Wanted to ask also this morning how to show a progress bar in the dashboard. I tried last week to start a "simple" progress bar when a button is clicked. Summarized (but not tested!) I did look something like this:

<md-button ng-click="onClick()">Do some long processing</md-button>
<md-progress-circular ng-show="showProgressBar" md-mode="indeterminate"></md-progress-circular>
<script>
(function(scope) {
    scope.onClick= function() {
        // Show the progress bar
        $scope.showProgressBar = true;

        // Some processing that takes 5 seconds
       setTimeout(function() { alert("Hello"); 
           // Hide the progress bar
           $scope.showProgressBar = false;
       }, 5000);
    }
})(scope);
</script>

But the result was awful. Seemed to me that the round spinner was displayed inside the the md-card of my md-button, so it was not completely visible ...

Anyway perhaps you can add your CSS styles to such a "md-progress-circular"?
I have no idea how to solve this :woozy_face:

Russ,
I see in the dashboard repository that there is some styling available for an md-progress-linear. So I tried such a linear progress bar:

<md-button ng-click="onClick()">Do some long processing</md-button>
<md-progress-linear ng-show="showProgressBar" md-mode="indeterminate"></md-progress-linear>
<script>
(function(scope) {
    scope.onClick= function() {
        // Show the progress bar
        scope.showProgressBar = true;

        // Some processing that takes 5 seconds
       setTimeout(function() { alert("Hello"); 
           // Hide the progress bar
           scope.showProgressBar = false;
       }, 5000);
    }
})(scope);
</script>

And I needed to increase the Template width (from 1 to 2):

image

And then I get this result:

progressbar

But that is still far away from the progress bars from your link ...
Unfortunately I will be not much available on this forum the next two weeks, so hopefully some else can assist you further with this ...
Good luck with it!
Bart

That does work for me, thanks! I'm still gonna tinker with the HTML/CSS as I find information.

Russ

1 Like

Ok, from the simple example on the w3 school webpage, I managed to get this to work...

2020-08-10-09-57-35

Flow:

[{"id":"db2754d5.e6c8a8","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"dda1ba0f.5910e8","type":"ui_template","z":"db2754d5.e6c8a8","group":"f89749a5.94da88","name":"html progressbar","order":0,"width":"10","height":"2","format":"<style>\n    .w3-border {\n        border: 1px solid #ccc!important;\n    }\n    .w3-green, .w3-hover-green:hover {\n        color: #fff!important;\n        background-color: #4CAF50!important;\n    }\n</style>\n<div>\n    <div class=\"w3-border\">\n      <div class=\"w3-green\" style=\"height:24px; width:{{msg.counter}}%\"></div>\n      <span ng-if=\"msg.counter === null\">COMPLETE !</span>\n    </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":280,"wires":[["5da5084a.902718"]]},{"id":"86865e90.ffc68","type":"counter-loop","z":"db2754d5.e6c8a8","name":"","counter":"counter","counterType":"msg","reset":true,"resetValue":"value-null","initial":"1","initialType":"num","operator":"lt","termination":"100","terminationType":"num","increment":"1","incrementType":"num","x":430,"y":200,"wires":[["dda1ba0f.5910e8"],["dda1ba0f.5910e8"]]},{"id":"276c4a18.5725e6","type":"delay","z":"db2754d5.e6c8a8","name":"","pauseType":"delay","timeout":"100","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":250,"y":280,"wires":[["86865e90.ffc68"]]},{"id":"55d063f.542019c","type":"ui_button","z":"db2754d5.e6c8a8","name":"","group":"f89749a5.94da88","order":1,"width":"2","height":"1","passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":210,"y":200,"wires":[["86865e90.ffc68"]]},{"id":"5da5084a.902718","type":"switch","z":"db2754d5.e6c8a8","name":"continue if counter is defined","property":"counter","propertyType":"msg","rules":[{"t":"gt","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":380,"y":360,"wires":[["276c4a18.5725e6"]]},{"id":"fce07864.d1c708","type":"inject","z":"db2754d5.e6c8a8","name":"On Start","props":[{"p":"counter","v":"0","vt":"num"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":240,"y":120,"wires":[["dda1ba0f.5910e8"]]},{"id":"f89749a5.94da88","type":"ui_group","z":"","name":"Default","tab":"1ce70d5f.826003","order":1,"disp":true,"width":"10","collapse":false},{"id":"1ce70d5f.826003","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Requirements :

  • node-red-dashboard
  • node-red-contrib-loop-processing (for the example with the counter in the above flow only)
1 Like

Hi Mathieu,
That looks already good!
Do you think it is also possible:

  • To have a round spinning one, for cases where you have no idea how long the processing will take?
  • To show this on top of the other ui elements, to make sure the user meanwhile doesn't trigger anything else?
1 Like