Search code examples
javascriptangularjstwitter-bootstrapelectronangular-bootstrap

angular-bootstrap progressbar progress shown is incorrect

I am running a serie of simulations on an external window, and each time a simulation is done I increment a progress value on the main window (everything happens through IPC communication).

The whole mechanics works beautifully, and the view above and inside the progressbar is correct, while the progress bar itself displays ugly percentages areas.

Taking this as example (which is a screenshot of a real case): enter image description here

The directive is:

<uib-progressbar ng-if="typeof(progressMax) !== 'string'" 
  class="progress-striped danger" 
  max="100" 
  value="progress*100/progressMax" 
  type="danger">
    <i>{{progress}} / {{progressMax}} ({{progress*100/progressMax}}%)</i>
</uib-progressbar>

The progressMax value is set when a button is pressed (and, hence, when the progressbar is shown), and progress starts from 0 and reaches progressMax.

The convertion is done correctly as shown in the video but, apparently, the progressbar seems to be showing it like if it is 90/1000 instead of 90/100.

I am running that on an ElectronJS project using Webpack and AngularJS (and Babel), not sure if that's relevant by any mean.

I've already checked other similar bootstrap problems, but noone of them helped me so far (also, setting max="progressMax" doesn't work aswell and reproduces the same exact issue).

Solution

  • I've found the issue.

    There is literally nothing code-related: my code is correct.

    The issue is that {{progress}} is updated too quickly, so the view doesn't have enough time to process the data and update it.

    Similarly, another bug might be encountered if you complete a progressbar and, after a short amount of time, you set back its progress to 0: you will see the bar going backwards (from 100 to 0), and will eventually go ahead again when the {{progress}} meets the current bar status.

    The solution, in a nutshell, was drastically changing the data collection ratio: instead of increasing the progress value frequently, I've set my main thread to send only collections of 100 data packs, so that the progress increase was slower and, therefore, that the view would've had enough time to update.