Different Text Color On Each Line In Badgeyay
In this blog post I am going to explain about how to create different text color for each line in badges generation in Badgeyay. As the system now has option for different badge size and paper size, currently the system sets same color for each line by mutating the fill parameter in the SVG. The main challenge in mutating the SVG parameter for each badge is the Id. The ID identifies the element, in our case text, and gives access to iterate the SVG through libraries like lxml. So for implementing this feature we first need to manipulate the SVG and assign id’s to the text tag so that it can be easily manipulated through the algorithm.
Procedure
- Manipulating the text tag in SVG and assigning a proper ID according to the logic for iteration in the function.
<text
id=“Person_color_1_1” ….> Person_1_1 </text> |
The id of the person in first badge and first line is represented as Person_color_1_1, where the first number denotes the number of badge and second number denotes the line number.
- Creating a class for the dimensions of the badges
class Dimen(object): def __init__(self, badges, badgeSize, paperSize): self.badges = badges self.badgeSize = badgeSize self.paperSize = paperSize |
- Creating an initialiser function that stores the dimension objects
badge_config = {} def init_dimen(): paper_sizes = [‘A2’, ‘A3’, ‘A4’] for paper in paper_sizes: if paper == ‘A2’: badge_config.__setitem__(paper, {‘4×3’: Dimen(18, ‘4×3’, paper)}) badge_config[paper][‘4.5×4’] = Dimen(15, ‘4.5×4’, paper) elif paper == ‘A3’: badge_config.__setitem__(paper, {‘4×3’: Dimen(8, ‘4×3’, paper)}) badge_config[paper][‘4.5×4’] = Dimen(6, ‘4.5×4’, paper) elif paper == ‘A4’: badge_config.__setitem__(paper, {‘4×3’: Dimen(6, ‘4×3’, paper)}) badge_config[paper][‘4.5×4’] = Dimen(2, ‘4.5×4’, paper) |
- Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size] |
- Looping criteria is to loop through the number of badges mentioned in the dimension config and through the number of lines which will be five.
for idx in range(1, dimensions.badges + 1): for row in range(1, 6): |
- Selecting the text element with the ID as provided above.
_id = ‘Person_color_{}_{}’.format(idx, row) path = element.xpath((“//*[@id='{}’]”).format(_id))[0] |
- Fill the text color argument of the selected object by changing the value of fill.
style_detail[6] = “fill:” + str(fill[row]) |
That’s it and now when the loop runs each line will have its individual color as passed in the function. The choice of color is passed as the list named fill.
Resources
- Pull request for the same – https://github.com/fossasia/badgeyay/pull/1498
- LXML documentation – https://lxml.de/
- Parsing the SVG – https://stackoverflow.com/questions/15857818/python-svg-parser
You must be logged in to post a comment.