[Done] Profile Banners Generator (Python)

I like the idea! I feel that I personally am too much of a noobie to contribute significantly, but I'm willing to learn if no experienced programmers hop on it :P

I am interested in trying to hack around on this. I have never written any web applications, but this is a good cause to try for. It will be fun. Is there an API for requesting the data? Or can we scrape the data from the user's page?

I will try and put together an example flask banner generator on Github and upload link tomorrow so everyone can play around with it and get the formatting the way they like it.

Edit forked the demo project and it is now running on my local machine. Yay tutorials! Have not changed any thing yet though

Just woke up, that is perfect!

Edit Are you using ISO 3166-1 country codes for the users?

I downloaded all of the coutry pictures so I could use them test with them locally.

Right now here is what I am thinking mainly based off of the rankings page and the project Euler:

• have a flask route that parses the url to get the username i.e app/banners/candidate_username
• do some simple validation of canidate_username, like make sure it is not 10 billion chars long or has illegal characters
• then submit the username for validation to the code abbey api link

• build a reponse image using

  - CodeAbbey.com text, possible to use green color that appears to be "signature" style of site
  - their user name colored just like on the site
  - rank in number
  - problems solved
  - user picture if they have one, using PIL to resize it
  - country flag
  

• if username is invalid, return just the 400 response code

I have implemented part of the badge generator. See it live at:

http://code-abbey-banner.appspot.com/banner/your_username

refresh this post to see new generated profile image

Right now I randomly generate a profile image and dynamically resize long names to fit in postion similar behavior to CSS rules. The country flags are correct, and if there is not a valid flag then it does not write one

What is left to do for bare bones before we start to determine style

• Add in the score, rank, solved, coloring the text according to rank
• Fix the alpha channel on the logo thumbnail

The project is live on https://github.com/YetAnotherMinion/Banners and should include everything, just change the app.yaml to use correct application tag for your own app engine account

I'll finish the rest tomorrow and make a Pull request.

Edit Fonts are easily configurable, I just chose an free license font from BitStream that was different than my system font so I could see the if configuration was correct

Edit2 Can you add to the API the link to the user's profile image?

It seems to me that CodeAbbey logo needs to move to a different location, either right justify on top or move to bottom and shift data up. What do you guys think? Where should it go?

Could we please stick to 200*60 size? I believe people are going to use banners in their signatures at other posts and probably larger banners will make admins there bit nervous... :)
Optionally we can have (later) banners of several sizes, of course, served by different urls.
Though I understand that it could be tricky for you to put the text onto smaller banner - isn't it so?

As about layout, when I look at design proposed by MoffSerge - probably we can make it similar? E.g. like this:

Here it is possible to simplify your work:

1. The blank rectangle with site address could be prepared as a single image (will you take this one?)
2. Picture on the right - the symbol of the rank (I'll prepare them) will bear the rank name, so you'll only need to choose the picture according to rank value. (the rectangle around this picture would not be there - it is only outlining the element for now).
3. Here only username, country flag and amount of problems solved (oh, I've forgot the position! - let it be in the same line where solved is) remains.

What is your opinion of this?

Note: I've added your pictures to current profile pages (leading directly to your project url for now) so that you can see whether the load is tolerable (if sensible) - and can watch your work "live" :)

The text in smaller banners is no problem. The banner code is quite general and already dynamically resizes the font to make a really long username fit in the size. I made the banner a class that you instantiate with a bunch of different properties. I just randomly picked a size. I made the banner a class and all of the data is added by setters for easier unittesting of the code, which I will also add.

1. The default image is a great idea. I was thinking that solved and rank fields should be in same place, so that can save even more time when creating the image by including the words "solved" and "rank" unless you think we should change the font color of those, maybe? All very easy to do.

2. I was thinking that we could then create a default banner for each rank. This can be easily bootstrapped from existing project, the given default image can be set as default, then we just create one of each different rank, save them, and use them as the new defaults. These images are so small I don't think we will impact the memory for the sever instance much. Right now I am only using ~40 MB of app engine memory.

3. The candle looks really good, does MoffSerge have any others in mind?

Does the API send unicode characters in the name? I tried to leave unicode support for the names, but I do not know if it works outside of ASCII char set. I do not know if I am decoding the response correctly or not, I believe that names using unicode characters after that will work but that has not been tested.

Edit Really long usernames are really packed in there tight like this guy below

Edit2 Fixed

What are your thoughts on how to address this?

I enabled issues, will post there.

I think some twiddling on the fonts for the solved and rank is needed. Possibly the numbers should be bolded or a larger size. I left plenty of room for expansion of the site. The rankings can accomodate 1e100 people before it breaks down and just returns ">1e100". Here's to reaching that user count ;)

EDIT

I made a pull request with all of my changes. Only the app.yaml name will have to be changed for the specific project, since it is set to mine right now.

Hi. The badges looks good, but not enough.

1. Using uniform font-size and sans serif strong font for username should looks more clean.

2. Don't use rank color for username, only for rank name.

3. Yellow text on white background looks bad, may be add some shadow for one.

4. The project url should be more contrast, but solved and rank substring could be a more gray.

5. Can project url be drawn at pencil-style with oak leafs? Ascetic style differs Code Abbey from other projects.

Or we can use some Gothic font for project url.

I actually ment to change the font for username but forgot. Change is live now.

The font will probably change again, this one is rather wide and trucates to many characters

EDIT I tweaked the yellow. I am strongly motivated to make my own username fit inside the width. Right now the code uses a san-seriff 14 as default for those of you with usernames less than about 12 characters and then switches to a condensed version of that font if it does not fit, only then trying to resize, and even then only shrinks font by ~15% before giving up and truncating. My username just barely fits, and I am happy ;)

I'm not a designer. Try to apply some ideas:

I've made an icon a bit smaller. Decrease spacer between username and results. And apply a Gothic font to url.

Can you add a link to an opensource font file for your gothic font, or you can add it to the github project font folder directly. I agree about moving the rank line up, it is kind of imbalanced as is. I cannot really make the font for that line larger without shrinking the fields. Right now there are 4 characters for the number solved and 6 characters available for rank before it switches over to scientific notation. We could make the banner wider to solve these problems though.

I believe you resized the fanatic image and moved the text, would you be willing to take a look at the default templates and make image touchup changes in a pull request? They are here

There are several images that could be edited in a similar fashion as above, then we can deploy them.

Example template images

1. I'm using a 'Olde English' font, I've downloaded. No ideas about it's license agreement. Just for example...
2. The rang icon shoul be a bit smaller and has >2px padding from border.
3. coneabbey.com text need to the same padding as I draw at example.

Now it looks unbalanced.

Regarding the flag, the reason they overlap right now is because in the first version I hada separate image for each rank that was applied to the background, and left over from that code is the expected width, which currently is set to 45 pixels. I then forgot to change this value. This width is used to compute the allowable width for the username field. Then the flag is offset from the end of the username using the actual width of the username field. When I change the width variable , called self.tb_sz which stands for thumbnail_size, to the correct value of 62, then we see that we do not run over the image but unfortunately it then truncates my username :( The padding is somewhat generous in this line though, so perhaps reducing some of the padding can help make up the difference. The load stats were quite mild, I think over the two days I use like 0.0032% of free quota.

I am glad that you were able to deploy it successfully to a more permanent home. I would be happy to help with updating and fixing things on the live project. my gmail is secretly removed by admin :)

===================================================================

On a side note, have any of you considered using regex to find the hidden emails on contact forms these days? I have been looking at all of the obfuscated emails on contact forms, and I think to myself that a good regex might be able to parse a great deal of these. And yet here I go, putting my email out in the same manner... :)

The instance hours are just how many hours the service is running. If it is on and accepting requests then it is using instance hours. It should not run more than 24 hours a day unless the Google Load Balancer deals with traffic surge and kicks on another instance. I don't think that will be a problem unless someone decides to DDOS the banner generation server. At that extreme situation the worst that happens is some people don't have banners for a few hours until we mitigate. That we are opposite sides of world makes it easy for 24hrs response to problems. I considered caching the images, but time to generate the images is only about 20-40ms , the rest of the latency is the time required to query the API. Knowing nothing about how the app engine is configured, I do not know how the app responds to concurrent requests. I hope it spawns a new thread for each process but I do not know.

My biggest concern was bandwidth, to the point I looked into setting cookies and returning 304 not modified, but it would require quite a bit more effort to implement data layer to keep track of request cookies send out and expiration date because you can never trust data from client. But it looks like the bandwidth usage is only ~9kB per image and only a thousand or so requests per day.