Badge Generation : Adding Progress Bar
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/
