Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay has many features related to enhancement in generation of badges. It gives choice of uploading data entries i.e by CSV or manually. There are options available for choosing Badge Background and font specifications. Now the next important thing from User perspective is that there should be a feature in My badges panel where user can see all badges & other details and should be able to edit them if he want to, so moving forward with this feature I have implemented Badge Name update functionality in the frontend.
In this blog, I will be discussing how I implemented Update Badge Name functionality in my Pull Request so that the User can change his Badge Name at any point of time in my badges panel.
Let’s get started and understand it step by step.
Step 1:
Create Badge Name component with Ember CLI.
$ ember g component badge-name
Step 2:
Make changes in Handlebar of Badge Name. We will be using semantic UI form for making the changes in Handlebars.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing different text alignment for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented different text alignment for Different Line in Badgeyay Backend in my Pull Request.
To implement different text alignment for Different Line feature, first, the component in SVG that is determining the text alignment of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font type for the badge is text-align and its default value is set to start(right alignment). If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the text-align value from the frontend.
Using the same for the text-align in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to text-align property provided by the User in the Frontend.
defchange_text_align(self,
filename,
badge_size,
paper_size,
align_1, // Values fromFrontend
align_2,
align_3,
align_4,
align_5):
""" Module to change Text Alignment of each badge line :param `filename` - svg file to modify. :param `align_1` - Text Alignment to be applied on first line :param `align_2` - Text Alignment to be applied on Second line :param `align_3` - Text Alignment to be applied on Third line :param `align_4` - Text Alignment to be applied on Fourth line :param `align_5` - Text Alignment to be applied on Fifth line """// Storing the Values passed altogether in a list.
align = [1, align_1, align_2, align_3, align_4, align_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row)
path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='text-align':
style_detail[ind] ="text-align:"+ align[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("text-align", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the text-align argument of the selected object by changing the value of text-align.
text_style_detail[-1] ="text-align:"+ align[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Text Alignment Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different text-align embedded.
Now, we are done with implementation of different text alignment for Different Line in Badgeyay Backend.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing font types for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font types for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font type for Different Line feature, first, the component in SVG that is determining the font of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font type for the badge is font-family and its default value is set to sans-serif. If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the font-type value from the frontend.
Using the same for the font-type in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font type provided by the User in the Frontend.
defchange_font_family(self,
filename,
badge_size,
paper_size,
Font_1, // Values fromFrontend
Font_2,
font_3,
font_4,
font_5):
""" Module to change Font Family of each badge lines :param `filename` - svg file to modify. :param `font_1` - Family to be applied on first line :param `font_2` - Family to be applied on Second line :param `font_3` - Family to be applied on Third line :param `font_4` - Family to be applied on Fourth line :param `font_5` - Family to be applied on Fifth line """// Storing the Values passed altogether in a list.
font = [1, font_1, font_2, font_3, font_4, font_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row)
path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='font-family':
style_detail[ind] ="font-family:"+ font[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("font-family", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the font family argument of the selected object by changing the value of font-family.
text_style_detail[-1] ="font-family:"+ font[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Font Family Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font type embedded.
Now, we are done with implementation of Different Font type for Different Line in
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing font sizes for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font Size for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font Size for Different Line feature, first, the component in SVG that is determining the font size of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font size for the badge is font-size and its default value is set to 31.25 px. If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the font-size value from the frontend.
Using the same for the font-size in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font Size provided by the User in the Frontend.
defchange_font_size(self,
filename,
badge_size,
paper_size,
Font_size_1, // Values fromFrontend
font_size_2,
font_size_3,
font_size_4,
font_size_5):
""" Module to change size of each badge lines :param `filename` - svg file to modify. :param `font_size_1` - Size to be applied on first line :param `font_size_2` - Size to be applied on Second line :param `font_size_3` - Size to be applied on Third line :param `font_size_4` - Size to be applied on Fourth line :param `font_size_5` - Size to be applied on Fifth line """// Storing the Values passed altogether in a list.
font_size = [1, font_size_1, font_size_2, font_size_3, font_size_4, font_size_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row) path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='font-size':
style_detail[ind] ="font-size:"+ font_size[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("font-size", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the font size argument of the selected object by changing the value of font-size.
text_style_detail[-1] ="font-size:"+ font_size[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Font Size Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font size embedded
Now, we are done with implementation of Different Font Size for Different Line in
The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Password functionality in my Pull Request so that the User can change his Password at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User Password component with help of ember cli.
Step 2:
Make changes in Handlebar of User Password. We will be using semantic UI form for making the changes in Handlebars.
<h2class="ui header">Password</h2><h5class="ui dividing header">Change your password.</h5><formclass="ui form"{{action'updateUserPassword'on="submit"}}>
</div></div><buttontype="submit"class="ui basic orange button"tabindex="0">
Save Changes
</button></form>
We have used action on submitting the Form for changing and updating the Password in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
import Component from '@ember/component';
exportdefault Component.extend({
init() {
this._super(...arguments);
},
actions: {
updateUserPassword() {
let password =this.get('newPassword');
this.get('sendUserPassword')(password);
}
},
didRender() {
this.$('.ui.form')
.form({
inline :true,
delay :false,
fields : {
newPassword: {
identifier :'newPassword',
rules : [
{
type :'empty',
prompt :'Please enter a password'
},
{
type :'minLength[6]',
prompt :'Your password must have at least {ruleValue} characters'
}
]
},
newPasswordVerify: {
identifier :'newPasswordVerify',
rules : [
{
type :'match[newPassword]',
prompt :'Passwords do not match'
}
]
}
}
});
}
});
Step 4:
We will now configure the controller to customize the action that we have defined above.
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if Password changes in params, It should change the password and send the response with the updated user schema.
The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and the most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Username functionality in my Pull Request so that the User can change his username at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User account component with help of ember cli.
$ ember g component user-component/user-account
Step 2:
Make changes in Handlebar of User Account. We will be using semantic UI form for making the changes in Handlebars.
We have used action on submitting the Form for changing and updating the username in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if username is change in params, It should change the username and send the response with the updated username.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Badgeyay also keeps record of all the badges generated by user and also gives option to directly download the previously generated badges.
All the badges appear on single page which creates problem when a user has generated lot of badges and all the badges listed on single page.
To resolve this issue and make Badgeyay more user friendly I have implemented pagination in listing badges so that if there are more number of badges, user can see the badges listed in multiple pages in my Pull Request.
To implement this, I have used actions and made the changes accordingly.
Let’s get started and understand it step by step.
Step 1:
We will use semantic icons in handlebars for changing pages.
Step 2:
I will add action for changing page to next and previous page.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges.You have to just click on create badges and the generated badge with download link appear at bottom of form. But a problem arises with the generated badges link that after logout/login or generation of new badges just after creating badges one time, the link of the previously created badges is still there which is a bit confusing, as user might think the previous link to be the new link and press on that in order to download and find the old badges downloaded.
To resolve this issue, I have used the power of Ember notify library and customized it to show the generated badges link and disappear after a specified time in my Pull Request and after that user can always see his previously generated badges in My Badges route.
Let’s get started and understand it.
Customizing Notify library and making the changes in the send Badge data function to show the generated badge link just after the completion of badge generation process.
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
exportdefault Controller.extend({
....
routing : service('-routing'),
notify : service('notify'), // importing Notify service
.....
sendBadge(badgeData) {
const _this =this;
let badgeRecord = _this.get('store').createRecord('badge', badgeData);
badgeRecord.save()
.then(record => {
_this.set('badgeGenerated', true);
_this.set('genBadge', record);
var notify = _this.get('notify');
var link = record.download_link; // Assigning download link to a variable var message = notify.success( // Configuring the message of notify service
{ html:// Adding the html in notify message'
Badge generated successfully.
'+'<p>Visit this<b>'+'<a href='+ link
+'> Link </a></b> to download badge.</p>',
closeAfter:10000 }); // Specifying the time of closing the message
})
.catch(err => {
_this.get('notify').error('Unable to generate badge');
});
},
I have implemented the customized notify function to show the badge generation link for a specific time.
Now run the server to see the implemented changes by following command.
$ ember serve
Ember Notify service showing the generated Badges link:
Now, I am done with the implementation of customised notify function to show the badge generation link for a specific time of 10 seconds.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges. If a helper is not there for the directions to use these features then these features may be difficult to use for a user.
To resolve this issue and make Badgeyay more user friendly I have implemented a User Guide to help user to go through the User Manual before generating Badges in my Pull Request.
To implement user guide, I have used Semantic UI tables to give examples for CSV format and used other components for Manual format.
Let’s get started and understand it step by step.
Step 1:
Create User Guide component with Ember CLI.
$ ember g component user-component/user-guide
Step 2:
Now, We will use Semantic UI while editing Handlebars.
class="user-guide">
class="ui center aligned huge header">User-Input Guide
class="ui center aligned small header">
Please check what is the "Correct Format"?
class="ui segments">
class="ui segment">
class="ui raised segment">
class="ui header">class="file excel icon">
class="content">
CSV Format
</div></div>
class="ui bulleted list">
class="item">The CSV must be uploaded with 5 columns of data.
class="item">Five comma (',') seperated values should be present in the CSV
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay has many features related to enhancement in the generation of badges. It gives the choice of uploading data entries i.e by CSV or manually. There are options available for choosing Badge Background and font specifications. But there is an important feature missing which will make the service more user-friendly in terms of creation of badges for different types of events i.e, Badge Size.
Badge Size feature is implemented in Backend. I need to send the data in the backend in the desired format for creation of Badges with different sizes.
In this Blog, I will be discussing how I implemented Badge Size feature in Badgeyay Frontend in my Pull Request.
Let’s get started and understand it step by step.
Step 1:
Create Badge Size component with Ember CLI.
$ ember g component badge-component/badge-size
Step 2:
Write the HTML required in the badge-size component:
You must be logged in to post a comment.