Get the actual value when onProgress

[NicoCaldo]

First of all, thanks for the library as it resolved half of my problem when it comes to visualize tasks progressions

I'm trying to personalize the progress bar and I'm using boostrap for it with

<div cl<div class="col-sm-3 pt-1">
        <div
          class="progress"
          role="progressbar"
          aria-label="Animated striped example"
          aria-valuenow="75"
          aria-valuemin="0"
          aria-valuemax="100"
        >
          <div
            class="progress-bar progress-bar-striped progress-bar-animated"
            style="width: 75%"
          >
            75%
          </div>
        </div>
      </div>ass="col-sm-3 pt-1">
        <div
          class="progress"
          role="progressbar"
          aria-label="Animated striped example"
          aria-valuenow="75"
          aria-valuemin="0"
          aria-valuemax="100"
        >
          <div
            class="progress-bar progress-bar-striped progress-bar-animated"
            style="width: 75%"
          >
            75%
          </div>
        </div>
      </div>

Now, I would like to access the number (var i from the code below) in my front end

progress_recorder = ProgressRecorder(self)
    for i in range(0,100):
        sleep(1)
        i += 1
        progress_recorder.set_progress(i, 100)

I understand I can use something like

  var progressUrl = "{% url 'celery_progress:task_status' task_id %}";
  CeleryProgressBar.initProgressBar(progressUrl,
  {
    onProgress: getPercentage,
  });

  var percentage = 0

  function getPercentage(){
    percentage += 1
    console.log(percentage)
  }

});

But how do I update my var if the actual worker is executing so, if progress_recorder.set_progress(i, 100)has been updated?

[czue]

Have a look at the code for the onProgressDefault function. You can use this as a template to do what you need in your own version.

onProgressDefault(progressBarElement, progressBarMessageElement, progress) {
        progressBarElement.style.backgroundColor = this.barColors.progress;
        progressBarElement.style.width = progress.percent + "%";
        var description = progress.description || "";
        if (progress.current == 0) {
            if (progress.pending === true) {
                progressBarMessageElement.textContent = this.messages.waiting;
            } else {
                progressBarMessageElement.textContent = this.messages.started;
            }
        } else {
            progressBarMessageElement.textContent = progress.current + ' of ' + progress.total + ' processed. ' + description;
        }
    }

[AnonBit]

How is possible to show percentage inside progress bar ? Thanks

[czue]

The above code shows an example of that.

[czue]

I'm going to close this as I don't think there is any action needed.