Repository
https://github.com/quochuy/discordbannerbot
Description
I recently created a bot called Skippy Bot for Team Australia and Team New Zealand on Steemit. One of its features is to allow members to request for a custom footer banner that embeds their Steemit username. Here is, for example, my custom Team Australia banner generated by Skippy:
I extracted the banner generation part to make this educational release that I shared on my GitHub account.
Out of the box, the bot will be able to generate a dummy #fr community banner I created.
What you will need to customize the bot
The banner files
First of all, you will need a designer to provide you with a blank template of the banner in PNG format. It is basically the whole banner without the username in it as the bot will add it for you.
Then you will also need the font file in TTF format and the RGB colour code to be used to render the username.
Under bot/assets/ directory you will find the images/ directory which holds the blank templates, the fonts/ directory which holds the TTF fonts files and the banners/ directory which contains the generated banners.
All you need to do is add/replace the font and template files with your own and modify the scripts where necessary.
The code
The code itself is very simple, the interesting bit is the PNG generation logic that is inside bot/modules/makebanner.js.
First, we have, at the top, the customisable parameters:
- the RGB colour for the username
- the text size
- the text vertical position
- the letter spacing size
- the text angle
- the width of the username bar
- the path to the font file
- the path to the blank banner file
Then we have the generate() method that does:
- load the blank PNG and prepare it
- allocate the colour for the username text
- generate the output path for the generated banner
- calculate the position of the username text (more on that below)
- render the username in the image with letter spacing (more on that below)
- save the resulting PNG into the output path
For the provided template for the #fr community banner, the username needs to be right-aligned few pixels to the left of the Steem logo. To achieve this I need:
- the horizontal position of where the text should end, in other words, the width of the area that is writable.
- the width of the rendered username using the provided font at the specific angle and font size
The start horizontal position of the username would then be:
end position minus username width
I use Pixalmator (image editing tool on Mac) to determine the end position of the username.
If I needed to center the username in that bar, the username position would have been:
end position minus username width divided by 2
Finally, the stringFtSp() method allows us to write a text with a custom letter spacing size. All it does is write the text letter by letter and pushes the horizontal position of each letter by the spacing size.
Technology Stack
- NodeJS
- DiscordJS
- GD Graphics Library
- Docker
Thanks for the contribution, @quochuy. It looks like a cool little program, good job creating it! Are there any plans on making it a bit more user friendly by adding a GUI or something like that?
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @amosbastian!
So far this week you've reviewed 3 contributions. Keep up the good work!
Hey @quochuy
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Congratulations @quochuy! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOPTo support your work, I also upvoted your post!