A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the addition of ember-progress-bar in the badgeyay project. This progress bar shows real-time progress of the badge generation process.

Adding the functionality to badgeyay

Let us see how we implemented this functionality into the backend of the project.

Step 1 : Adding the package to package.json

Image link is the link to the user’s uploaded image on remote firebase server.

ember install ember-progress-bar

or

npm install ember-progress-bar –save

Step 2 : Adding the progressbar to the frontend

Once we have installed the progress bar, we need to display it onto the frontend of the project.

To do that we use the handlebars templating engine to render the progress bar.

{{#if showProgress}} <div class=“ui segment”> <div class=“ui centered aligned grid”>{{progressState}}</div> <div class=“ui divider”></div> {{ember-progress-bar progress=progress options=(hash color=’orange’)}} </div> {{/if}}

Step 3 : Now we need to define states

We need to define the states that the progress bar will take up in realtime. And to do so, we make changes to the create-badges controller

showProgress   : false, progress       : 0, progressState  : ”,

Now we manage the states according to the functionality that has been done.

this.set(‘showProgress’, true); this.set(‘progress’, 0.1); this.set(‘progressState’, ‘Setting Paper Size’); … this.set(‘progress’, 0.4); this.set(‘progressState’, ‘Gathering background’); … this.set(‘progress’, 0.7); this.set(‘progressState’, ‘Preparing your badges’); … this.set(‘showProgress’, false); this.set(‘progress’, 0); this.set(‘progressState’, ”); …

Finally, we have our basic progress bar ready for the users to view.

Screenshot of changes

Resources

• The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1284
• The Issue for the same : https://github.com/fossasia/badgeyay/issues/1283
• Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html
• Read about Handlebars :   https://guides.emberjs.com/release/templates/handlebars-basics/