Answer to Life, the Universe, and Everything ^[1]

I can't find where it was anymore, but I remember Jeff not liking custom badges.

I didn't like a user editing other people's posts to add funny badges, but if you want to add them yourself, that's fine.

x37

I approve.

Now that the badges have rounded corners, this should be updated :)

Brilliant!!! I've added this to my profile :D

lol, I bet Jeff would love to give certain people this badge (probably me).

btw... cool script.

I did this like the first week of SO.

I love this!

Great script thanks.

Re calculating string widths, there is a way to do it via the GD library. Have a play with my render gimmick ^[1], and play with the "Draw frame" and "Padding" settings. The font names are as provided in the corefonts ^[2] package, without the .ttf extension (e.g., georgiab).

Once you like what you see, have a look at the source code ^[3] to see how it's done. :-)

P.S. GD draws bullets just fine for me! Try it out on the render gimmick too. :-)

Hi Ross :)

Regarding the font width calculations I think you should create a text bounding box and use the coordinates from that to determine how wide your image should be (imagettfbbox).

Imagettfbbox() doesn't require an initialized image resource before using it so it's perfectly for use.

Regarding the issue with bullets, you should convert special characters to unicode, GD supports unicode characters :)

Else it looks great!

It looks like the filetype field isn't working. When I set png or gif, it still returns a jpeg type complete with the lossy artifacts, according to Firefox 3.

Compare: vs. vs.

I like the idea. The anti-aliasing is ugly, though.

You know you're a StackOverflow addict when...

this is on the top of your resume...

Will Work for Badges

Won't post a real answer but just google it for the questioner... and copy paste the first link.

I need this one a lot...

Awesome job!

I, too, wanted to play around with making badges so I whipped this up in a few minutes:

I made it with Python ^[1] and PIL ^[2].

Here is the source code (latest version here ^[3]):

#!/usr/bin/python           
# -*- coding: utf-8 -*-     

import Image
import ImageDraw
import ImageFont

FONTPATH = "/usr/share/fonts/truetype/msttcorefonts/arial.ttf"

class Badge:
    """ Models a stackoverflow reputation badge """

    # Class constants
    MEDALS = {"Gold": "gold",
              "Silver": "silver",
              "Bronze": "#CC9966"}
    FORMATS = {"JPG": ".jpg",
               "PNG": ".png"}
    MODE = "RGB"
    MEDAL_SIZE = 8
    X_PADDING = 18
    Y_PADDING = 7
    FONT_SIZE = 12

    def __init__(self, message=None, medal="Gold", format="PNG"):
        if message is None:
            self.message = "Uncaught StackOverflow Exception"
        else:
            self.message = message

        try:
            self.medal = self.MEDALS[medal]
        except KeyError:
            self.medal = self.MEDALS["Gold"]

        try:
            self.format = self.FORMATS[format]
        except KeyError:
            self.format = self.FORMATS["PNG"]

        self.font = ImageFont.truetype(FONTPATH, self.FONT_SIZE)
        self.textsize = self.font.getsize(self.message)

        total_width = self.textsize[0] + self.MEDAL_SIZE + (self.X_PADDING * 2)
        total_height = self.textsize[1] + (self.Y_PADDING * 2)
        self.image = Image.new(self.MODE, (total_width, total_height), 0x333333)
        self.draw = ImageDraw.Draw(self.image)

    def draw_medal(self):
        top_left_x = ((self.X_PADDING * 2) - self.MEDAL_SIZE) / 2
        top_left_y = ((self.Y_PADDING * 2 + self.textsize[1])- self.MEDAL_SIZE) / 2
        bot_right_x = top_left_x + self.MEDAL_SIZE
        bot_right_y = top_left_y + self.MEDAL_SIZE

        self.draw.ellipse((top_left_x,
                           top_left_y,
                           bot_right_x,
                           bot_right_y),
                           self.medal)

    def draw_message(self):
        left = self.MEDAL_SIZE + (self.X_PADDING * 1.5)
        top = self.Y_PADDING
        self.draw.text((left, top), self.message, font=self.font)

    def create(self):
        self.draw_medal()
        self.draw_message()
        self.save()

    def save(self):
        self.image.save("out" + self.format)

if __name__ == '__main__':
    badge = Badge()
    badge.create()

Not to mention the corners aren't rounded... (you've been using IE haven't you??! Shame on you!)

Did anyone else notice that someone got the first gold badge?

Aye, I was quite impressed by that - congrats Justin ^[1].

@ Chris ^[2]

Re calculating string widths, there is a way to do it via the GD library. Have a play with my render gimmick, and play with the "Draw frame" and "Padding" settings. The font names are as provided in the corefonts package, without the .ttf extension (e.g., georgiab).

Once you like what you see, have a look at the source code to see how it's done. :-)

P.S. GD draws bullets just fine for me! Try it out on the render gimmick too. :-)

Bah, I completely forgot about FreeType - I'll make some additions now :)

More than 10.000 views per hour

Here's one that I'm sure we can all appreciate -

I'm not sure what this one means -

Finally, for when you need a little pick-me-up -

is there a bug? setting medal to silver doent work if the label string has a space in it.

Nice work! This isnt so much a useful app in my opinion but I definitely think it is neat and a little pick-me-up for when I slow down in coding! Thanks!

Do you strip enough out to prevent HTML badges?

Let's see.

● Yearling

Edit: I guess so...

There's already been some trouble caused by someone else doing this exact same thing.

Trouble? How and where?

I'm not telling you how I earned these...

x5

x2

x5

Oh pretty please! ;-)

x439

I can't find where it was anymore, but I remember Jeff not liking custom badges.

There's already been some trouble caused by someone else doing this exact same thing.

Also, since it's not HTML, it doesn't take any custom CSS changes into account.

Did anyone else notice that someone ^[1] got the first gold badge ^[2]?

Cool nice work and thanks for sharing the source.

Hmmmmm... There's a CSS class to do that.

● CSS User

The codez:

<span class="badge"><span class="badge1">●</span>&nbsp;CSS User</div>

● How about HTML Badges?

Hmm, looks great in the preview, but doesn't seem to work...