Help with integrating CSS progress bars

Dashboard
1

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

2

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.

3

Not at all, thanks!

Russ

4

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:

5

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

6

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

Russ

1 Like
8

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

image
image1387Ă—559 48.1 KB

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
9

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
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.