Shields as a Service #15

Closed
ackerdev opened this Issue Feb 14, 2013 · 73 comments

Comments

Projects
None yet
9 participants
@ackerdev
Contributor

ackerdev commented Feb 14, 2013

Let's discuss what we will need for the possibility of offering Shields as a Service. What considerations do we need to make to ensure that it is feasible and robust?

@ackerdev

This comment has been minimized.

Show comment
Hide comment
@ackerdev

ackerdev Feb 14, 2013

Contributor

API interactivity
I was thinking of something like /travisci/ackerdev/myrepo/shield.png, which should in turn interact with a vendor's API to get the appropriate result to generate the dynamic PNG. This would require vendors to link through us for badge functionality, but removes the dependence of maintenance from the vendors.

Image generation
SVGs are awesome. It would be pretty easy to set up a base SVG to work with, and then manipulate it's nodes on the fly to quickly generate dynamic badges.
Problem: Converting SVGs to PNGs is a hassle. The way that I tried (and failed) at CodeClimate's shields was to use the 'rsvg' lib for imagemagick. I got as far as spitting out a converted version, but the external font absolutely mangled it. Could possibly be remedied by embedding the font into the SVG.
Alternatively, and this could be considered going the long way around the problem, I believe we could use Phantom to make a capture of the SVG (as long as it can come out with a transparent background). Don't know too much about Phantom, so would be great if anyone more familiar can weigh in.

Contributor

ackerdev commented Feb 14, 2013

API interactivity
I was thinking of something like /travisci/ackerdev/myrepo/shield.png, which should in turn interact with a vendor's API to get the appropriate result to generate the dynamic PNG. This would require vendors to link through us for badge functionality, but removes the dependence of maintenance from the vendors.

Image generation
SVGs are awesome. It would be pretty easy to set up a base SVG to work with, and then manipulate it's nodes on the fly to quickly generate dynamic badges.
Problem: Converting SVGs to PNGs is a hassle. The way that I tried (and failed) at CodeClimate's shields was to use the 'rsvg' lib for imagemagick. I got as far as spitting out a converted version, but the external font absolutely mangled it. Could possibly be remedied by embedding the font into the SVG.
Alternatively, and this could be considered going the long way around the problem, I believe we could use Phantom to make a capture of the SVG (as long as it can come out with a transparent background). Don't know too much about Phantom, so would be great if anyone more familiar can weigh in.

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Feb 21, 2013

I was just able to convert the badge SVG to a PNG with the following steps:

  1. Download an arbitrary badge SVG file, e.g. rubygems_version.svg
  2. Download the Open Sans font package
  3. Download the imagick_type_gen script and save as imagick_type_gen.pl
  4. Run the following:
chmod +x imagick_type_gen.pl
./imagick_type_gen.pl ./path/to/OpenSans-Regular.ttf > type.xml
# imagemagick doesn't seem to like the extra quotes around the font-family
sed -i.bak "s/'OpenSans'/Open Sans/g" rubygems_version.svg

# do the actual conversion
MAGICK_CONFIGURE_PATH=`pwd` convert rubygems_version.svg rubygems_version.png

open rubygems_version.png

Voila! Anyway, there's a relatively small number of possible shields, right? For everything but version numbers, it's only a handful. It might be easiest to pre-generate them and then have this service pull from a directory.

Another option would be to have a service that generates and caches them. I'd be happy to put something together with magickly (which uses imagemagick under the hood), if there's any interest. Should be pretty straightforward, actually.

afeld commented Feb 21, 2013

I was just able to convert the badge SVG to a PNG with the following steps:

  1. Download an arbitrary badge SVG file, e.g. rubygems_version.svg
  2. Download the Open Sans font package
  3. Download the imagick_type_gen script and save as imagick_type_gen.pl
  4. Run the following:
chmod +x imagick_type_gen.pl
./imagick_type_gen.pl ./path/to/OpenSans-Regular.ttf > type.xml
# imagemagick doesn't seem to like the extra quotes around the font-family
sed -i.bak "s/'OpenSans'/Open Sans/g" rubygems_version.svg

# do the actual conversion
MAGICK_CONFIGURE_PATH=`pwd` convert rubygems_version.svg rubygems_version.png

open rubygems_version.png

Voila! Anyway, there's a relatively small number of possible shields, right? For everything but version numbers, it's only a handful. It might be easiest to pre-generate them and then have this service pull from a directory.

Another option would be to have a service that generates and caches them. I'd be happy to put something together with magickly (which uses imagemagick under the hood), if there's any interest. Should be pretty straightforward, actually.

@ackerdev

This comment has been minimized.

Show comment
Hide comment
@ackerdev

ackerdev Feb 21, 2013

Contributor

Nice, though that still requires librsvg doesn't it?

Anyway, there's a relatively small number of possible shields, right?

CodeClimate has 41, Coveralls has just generated their 101, and GemFury's gem badge has a nigh-infinite amount.
It has to be a dynamic solution to be viable (though of course we can cache badges from vendors that are largely static, ala travis & gemnasium).

Contributor

ackerdev commented Feb 21, 2013

Nice, though that still requires librsvg doesn't it?

Anyway, there's a relatively small number of possible shields, right?

CodeClimate has 41, Coveralls has just generated their 101, and GemFury's gem badge has a nigh-infinite amount.
It has to be a dynamic solution to be viable (though of course we can cache badges from vendors that are largely static, ala travis & gemnasium).

@afeld

This comment has been minimized.

Show comment
Hide comment
@afeld

afeld Feb 21, 2013

Not sure... do you know how to find that out? I just have imagemagick installed via homebrew.

$ convert -version
Version: ImageMagick 6.8.0-10 2012-12-16 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2013 ImageMagick Studio LLC
Features:  OpenCL

$ identify -list format
   Format  Module    Mode  Description
-------------------------------------------------------------------------------
...
      SVG  SVG       rw+   Scalable Vector Graphics (XML 2.7.8)
...

In any case, this sounds like a great use case for magickly :-) Will try to make a little sample service this weekend.

afeld commented Feb 21, 2013

Not sure... do you know how to find that out? I just have imagemagick installed via homebrew.

$ convert -version
Version: ImageMagick 6.8.0-10 2012-12-16 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2013 ImageMagick Studio LLC
Features:  OpenCL

$ identify -list format
   Format  Module    Mode  Description
-------------------------------------------------------------------------------
...
      SVG  SVG       rw+   Scalable Vector Graphics (XML 2.7.8)
...

In any case, this sounds like a great use case for magickly :-) Will try to make a little sample service this weekend.

@ackerdev

This comment has been minimized.

Show comment
Hide comment
@ackerdev

ackerdev Feb 21, 2013

Contributor

Hmm... that's right, ImageMagick comes with a default SVG renderer... I forget why I used librsvg. Maybe I'm misled because I thought it would have solved my font problem? I forget, it's been about a month since I originally tried to convert them with imagemagick.

Anyway, you would have to be installing imagemagick with the --with-rsvg (I think that's what it is) flag in homebrew to get librsvg (and a ton of the other deps, which is why I'm not too fond of it). You could brew search rsvg to see if you have it, but it doesn't look like you do.

Contributor

ackerdev commented Feb 21, 2013

Hmm... that's right, ImageMagick comes with a default SVG renderer... I forget why I used librsvg. Maybe I'm misled because I thought it would have solved my font problem? I forget, it's been about a month since I originally tried to convert them with imagemagick.

Anyway, you would have to be installing imagemagick with the --with-rsvg (I think that's what it is) flag in homebrew to get librsvg (and a ton of the other deps, which is why I'm not too fond of it). You could brew search rsvg to see if you have it, but it doesn't look like you do.

@ackerdev ackerdev referenced this issue Mar 9, 2013

Closed

Refine creation process #24

1 of 3 tasks complete
@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 3, 2013

I spent some time fiddling with this, and I get an image to render, but it doesn't look much like the png files:
result
vs
travis_passing

by adding -background to the imagemagick call, I at least get the corners to look right:

convert -background transparent template.svg result.png

I'm guessing that is not the right font, first off, even though I did the convert above, so fiddling with that now.

kookster commented May 3, 2013

I spent some time fiddling with this, and I get an image to render, but it doesn't look much like the png files:
result
vs
travis_passing

by adding -background to the imagemagick call, I at least get the corners to look right:

convert -background transparent template.svg result.png

I'm guessing that is not the right font, first off, even though I did the convert above, so fiddling with that now.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 3, 2013

looking under the covers, it seems convert is formatting a call to inkscape for the actual svg->png.
I wonder if it might be easier to go straight to that?

> convert -verbose -background transparent template.svg result.png
"inkscape" "template.svg" --export-png="/var/tmp/magick-67103-okfqUBOeGP7" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-67103jaAF40pZHoJx" 2>&1
mvg:/var/tmp/magick-671031U3Kq_F2Gzbh=>/var/tmp/magick-671031U3Kq_F2Gzbh MVG 77x19 77x19+0+0 16-bit sRGB 1.65KB 0.020u 0:00.009
template.svg SVG 77x19 77x19+0+0 16-bit sRGB 1.65KB 0.000u 0:00.000
template.svg=>result.png SVG 77x19 77x19+0+0 16-bit sRGB 0.000u 0:00.009

I was also wondering the default dpi; 90 it seems.

kookster commented May 3, 2013

looking under the covers, it seems convert is formatting a call to inkscape for the actual svg->png.
I wonder if it might be easier to go straight to that?

> convert -verbose -background transparent template.svg result.png
"inkscape" "template.svg" --export-png="/var/tmp/magick-67103-okfqUBOeGP7" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-67103jaAF40pZHoJx" 2>&1
mvg:/var/tmp/magick-671031U3Kq_F2Gzbh=>/var/tmp/magick-671031U3Kq_F2Gzbh MVG 77x19 77x19+0+0 16-bit sRGB 1.65KB 0.020u 0:00.009
template.svg SVG 77x19 77x19+0+0 16-bit sRGB 1.65KB 0.000u 0:00.000
template.svg=>result.png SVG 77x19 77x19+0+0 16-bit sRGB 0.000u 0:00.009

I was also wondering the default dpi; 90 it seems.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus May 26, 2013

Hey all... I took a shot at this with limited success. See my "size" shield?

https://github.com/cainus/percolator#readme

I tried both imagemagick and graphicsmagick for the svg conversion but settled on graphicsmagick because the output was more correct than imagemagick.

These guys ( http://badge.fury.io/ ) get it right though:

https://d25lcipzij17d.cloudfront.net/badge.png?title=npm&type=3d&v=1.0.11test

So... Any clue how they're doing that? I guess in the worst-case scenario I could end up just drawing it programmatically without svg.

Thanks

cainus commented May 26, 2013

Hey all... I took a shot at this with limited success. See my "size" shield?

https://github.com/cainus/percolator#readme

I tried both imagemagick and graphicsmagick for the svg conversion but settled on graphicsmagick because the output was more correct than imagemagick.

These guys ( http://badge.fury.io/ ) get it right though:

https://d25lcipzij17d.cloudfront.net/badge.png?title=npm&type=3d&v=1.0.11test

So... Any clue how they're doing that? I guess in the worst-case scenario I could end up just drawing it programmatically without svg.

Thanks

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

I have had good luck installing inkscape, then using it from the command line.

Here is a copy of the travis 'build passing' image I generated from the command line:
badge

Here was the command:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

I think this is workable for running on my mac at least so I can make the images I need, so I'm going to move forward with it. I suppose you could do the same on linux, but I haven't tried that yet.

I have had good luck installing inkscape, then using it from the command line.

Here is a copy of the travis 'build passing' image I generated from the command line:
badge

Here was the command:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

I think this is workable for running on my mac at least so I can make the images I need, so I'm going to move forward with it. I suppose you could do the same on linux, but I haven't tried that yet.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

I have been tweaking the text a bit more, using a transform on it 'transform="scale(1,0.93968341)"' to get the height better, and have now produced this from command line:
badge
compared with this png from the repo:
travis_passing

This is really close I think, and now I am going to try and write up how to reproduce this result, and cleanup the template I am using for this. (I actually think the version I am getting from the command line looks a bit more readable, FWIW.)

What do you guys think?

I have been tweaking the text a bit more, using a transform on it 'transform="scale(1,0.93968341)"' to get the height better, and have now produced this from command line:
badge
compared with this png from the repo:
travis_passing

This is really close I think, and now I am going to try and write up how to reproduce this result, and cleanup the template I am using for this. (I actually think the version I am getting from the command line looks a bit more readable, FWIW.)

What do you guys think?

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan May 26, 2013

Member

@kookster I actually like your render a bit better than ours. This is really good.

@cainus We could ask @rykov directly, that does look really good too.

I've been completely out of it for the last few months, I'm really sorry. Your experiments and any help getting something organized here would be much appreciated. @ackerdev and I bit off more than we could chew trying to build a gem before having a proper rendering process.

Member

olivierlacan commented May 26, 2013

@kookster I actually like your render a bit better than ours. This is really good.

@cainus We could ask @rykov directly, that does look really good too.

I've been completely out of it for the last few months, I'm really sorry. Your experiments and any help getting something organized here would be much appreciated. @ackerdev and I bit off more than we could chew trying to build a gem before having a proper rendering process.

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan May 26, 2013

Member

@kookster Have you tried to produce a pixel doubled version? One of the reason the automated process is appealing is so that we can produce high density versions of all the badges very quickly if necessary.

Member

olivierlacan commented May 26, 2013

@kookster Have you tried to produce a pixel doubled version? One of the reason the automated process is appealing is so that we can produce high density versions of all the badges very quickly if necessary.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

@olivierlacan

No apologies needed. You guys gave an aesthetic blessing to all githubbers, but we all need to do other work eventually.

I did try out the render for retina by doubling the resolution specified in the inkscape command to --export-dpi="180,180" instead of `--export-dpi="90,90":

> /Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge_retina.png" --export-dpi="180,180" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

badge_retina

Looking at this version, it makes me think the way I am doing shadows (putting a 50% opacity dark fill text slightly lower than the white text) is not quite right, but perhaps playing with the offset can make it look better. I'll comapre against your other retina images and see how close it is getting.

In any case, since the only change necessary was the command line, it at least answers whether the retina can be generated automatically in the same way.

@olivierlacan

No apologies needed. You guys gave an aesthetic blessing to all githubbers, but we all need to do other work eventually.

I did try out the render for retina by doubling the resolution specified in the inkscape command to --export-dpi="180,180" instead of `--export-dpi="90,90":

> /Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge_retina.png" --export-dpi="180,180" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

badge_retina

Looking at this version, it makes me think the way I am doing shadows (putting a 50% opacity dark fill text slightly lower than the white text) is not quite right, but perhaps playing with the offset can make it look better. I'll comapre against your other retina images and see how close it is getting.

In any case, since the only change necessary was the command line, it at least answers whether the retina can be generated automatically in the same way.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus May 26, 2013

I've got my node.js version running with inkscape (on linux) now at least: http://wapiti.io/api/sizeBadges/prozess . Inkscape renders quite a bit better than the other libs, so thanks for that tip. I think I just have to fix the square corners on the right side (probably a bug in my dynamic image sizing) and the drop shadow. I'd certainly be interested to see how you got that drop shadow.

Thanks again for the pointers.

cainus commented May 26, 2013

I've got my node.js version running with inkscape (on linux) now at least: http://wapiti.io/api/sizeBadges/prozess . Inkscape renders quite a bit better than the other libs, so thanks for that tip. I think I just have to fix the square corners on the right side (probably a bug in my dynamic image sizing) and the drop shadow. I'd certainly be interested to see how you got that drop shadow.

Thanks again for the pointers.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

Here is a quick version of what I did before I get embroiled in family holiday stuff (not a complaint ;).

I installed inkscape from inkscape.org

If you want to run it as a GUI, you have to tell it when it runs where to find X11 (on mountain lion I used /Applications/Utilities/XQuartz).

It is nice to be able to run it to make sure the fonts are loaded properly, preview changes, and see what manipulations to the svg Inkscape makes when you do things like change the height (this is how I figured out the values I use for the transform: scale(x,y)):
http://inkscape.org/doc/inkscape-man.html

I also needed to let Inkscape know how to find the Open Sans font.
I unzipped the set of font files into ~/Library/Fonts/Open Sans, then added a ~/.fonts.conf file like this (apparently this is how it knows where to find user fonts, as X11 loads them):

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>~/Library/Fonts</dir>
<match target="font">
   <edit name="rgba" mode="assign"><const>rgb</const></edit>
</match>
</fontconfig>

After that I went into the Inkscape.app install to find the command line executable bin, which is here (on Mac obviously): /Applications/Inkscape.app/Contents/Resources/bin/inkscape

The command line I started with is from watching the verbose output of call ImageMagick convert. It apparently bundles some old version of Inkscape in order to do the svg -> png conversion, which is where I got the idea of using inkscape directly.

> convert -verbose -background transparent travis_passing.svg badge_im.png
"inkscape" "travis_passing.svg" --export-png="/var/tmp/magick-37749PRYjIrHJWq0f" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-37749fhm4nS86L2K3" 2>&1
mvg:/var/tmp/magick-377493L8RJ0tK7BjE=>/var/tmp/magick-377493L8RJ0tK7BjE MVG 77x18 77x18+0+0 16-bit sRGB 1.71KB 0.010u 0:00.029
travis_passing.svg SVG 77x18 77x18+0+0 16-bit sRGB 1.71KB 0.000u 0:00.000
travis_passing.svg=>badge_im.png SVG 77x18 77x18+0+0 16-bit sRGB 0.010u 0:00.019

From this I used the following for standard size images:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

and this for retina:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="180,180" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

Then I used a variety of svgs, and they all seemed to work so long as the text font family was updated to Open Sans. I did find when editing in Inkscape that I needed to save as an Inkscape svg, not a Plain svg, but the extra meta-data it added does not seem terrible, and it seemed to render the existing svgs from the shields project without issue.

I want to clean up the svg before I promote it, but here is my latest version:
https://gist.github.com/kookster/5652987

A few tricks -

  • I increased the opacity value of the shadow to 50%, and sneakily used a dark green color for the shadow on the green text (it felt sneaky anyway). This green may be unnecessary.
  • I have fiddled alot with the y offset of the shadow text, not sure I have found the 'magic' value for this.
  • I added a second identical white text element directly on top of the first. This made the white really pop, and much more closely match the existing png. No idea why this was needed, but it seriously helped.
  • I tweaked the text in Inkscape GUI, and saw that it applied the following transform to make it the correct height: transform="scale(1.0,0.93968341)" It actually had a slightly higher than '1.0' x value, but it changed the width significantly, so I rounded back to 1.0, and it looks right.

Hopefully that is enough for anyone to get as far as I did, but I'll keep working to make this more systematic and templated.

Here is a quick version of what I did before I get embroiled in family holiday stuff (not a complaint ;).

I installed inkscape from inkscape.org

If you want to run it as a GUI, you have to tell it when it runs where to find X11 (on mountain lion I used /Applications/Utilities/XQuartz).

It is nice to be able to run it to make sure the fonts are loaded properly, preview changes, and see what manipulations to the svg Inkscape makes when you do things like change the height (this is how I figured out the values I use for the transform: scale(x,y)):
http://inkscape.org/doc/inkscape-man.html

I also needed to let Inkscape know how to find the Open Sans font.
I unzipped the set of font files into ~/Library/Fonts/Open Sans, then added a ~/.fonts.conf file like this (apparently this is how it knows where to find user fonts, as X11 loads them):

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>~/Library/Fonts</dir>
<match target="font">
   <edit name="rgba" mode="assign"><const>rgb</const></edit>
</match>
</fontconfig>

After that I went into the Inkscape.app install to find the command line executable bin, which is here (on Mac obviously): /Applications/Inkscape.app/Contents/Resources/bin/inkscape

The command line I started with is from watching the verbose output of call ImageMagick convert. It apparently bundles some old version of Inkscape in order to do the svg -> png conversion, which is where I got the idea of using inkscape directly.

> convert -verbose -background transparent travis_passing.svg badge_im.png
"inkscape" "travis_passing.svg" --export-png="/var/tmp/magick-37749PRYjIrHJWq0f" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-37749fhm4nS86L2K3" 2>&1
mvg:/var/tmp/magick-377493L8RJ0tK7BjE=>/var/tmp/magick-377493L8RJ0tK7BjE MVG 77x18 77x18+0+0 16-bit sRGB 1.71KB 0.010u 0:00.029
travis_passing.svg SVG 77x18 77x18+0+0 16-bit sRGB 1.71KB 0.000u 0:00.000
travis_passing.svg=>badge_im.png SVG 77x18 77x18+0+0 16-bit sRGB 0.010u 0:00.019

From this I used the following for standard size images:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

and this for retina:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape "travis_passing2.svg" --export-png="badge.png" --export-dpi="180,180" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0"

Then I used a variety of svgs, and they all seemed to work so long as the text font family was updated to Open Sans. I did find when editing in Inkscape that I needed to save as an Inkscape svg, not a Plain svg, but the extra meta-data it added does not seem terrible, and it seemed to render the existing svgs from the shields project without issue.

I want to clean up the svg before I promote it, but here is my latest version:
https://gist.github.com/kookster/5652987

A few tricks -

  • I increased the opacity value of the shadow to 50%, and sneakily used a dark green color for the shadow on the green text (it felt sneaky anyway). This green may be unnecessary.
  • I have fiddled alot with the y offset of the shadow text, not sure I have found the 'magic' value for this.
  • I added a second identical white text element directly on top of the first. This made the white really pop, and much more closely match the existing png. No idea why this was needed, but it seriously helped.
  • I tweaked the text in Inkscape GUI, and saw that it applied the following transform to make it the correct height: transform="scale(1.0,0.93968341)" It actually had a slightly higher than '1.0' x value, but it changed the width significantly, so I rounded back to 1.0, and it looks right.

Hopefully that is enough for anyone to get as far as I did, but I'll keep working to make this more systematic and templated.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

@cainus I missed your message while I was typing mine.
I used one of the shields/travis/travis_passing.svg to start with, and that seems to have corners that work.
Maybe try the svg from my gist? https://gist.github.com/kookster/5652987

@cainus I missed your message while I was typing mine.
I used one of the shields/travis/travis_passing.svg to start with, and that seems to have corners that work.
Maybe try the svg from my gist? https://gist.github.com/kookster/5652987

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus May 26, 2013

That was a huge help: http://wapiti.io/api/sizeBadges/Percolator and http://wapiti.io/api/scoreBadges/Percolator use the same dynamic svg generation code, so I have a working service now (with absolutely terrible code). It seems that the gradient markup from the travis svgs is much better than the gradient markup from https://github.com/olivierlacan/shields/blob/master/shield.svg .

I'd like to open source this at some point, but it's absolutely terrible. I took a bunch of shortcuts around the tougher problems (like computing text width), and there is no caching or memoization of anything so it would be a pretty terrible web service if used in production. I'd eventually like to just have a dead simple interface like

var shieldStream = shield(name, value, color);

Instead of the pile of assorted x's and y's I currently pass it.

Anyway... I'll keep improving this if no one comes up with anything better. I really appreciate the pointers so far.

ALSO: please let me know if it's still not looking quite right. I have almost no eye for detail whatsoever. ;)

cainus commented May 26, 2013

That was a huge help: http://wapiti.io/api/sizeBadges/Percolator and http://wapiti.io/api/scoreBadges/Percolator use the same dynamic svg generation code, so I have a working service now (with absolutely terrible code). It seems that the gradient markup from the travis svgs is much better than the gradient markup from https://github.com/olivierlacan/shields/blob/master/shield.svg .

I'd like to open source this at some point, but it's absolutely terrible. I took a bunch of shortcuts around the tougher problems (like computing text width), and there is no caching or memoization of anything so it would be a pretty terrible web service if used in production. I'd eventually like to just have a dead simple interface like

var shieldStream = shield(name, value, color);

Instead of the pile of assorted x's and y's I currently pass it.

Anyway... I'll keep improving this if no one comes up with anything better. I really appreciate the pointers so far.

ALSO: please let me know if it's still not looking quite right. I have almost no eye for detail whatsoever. ;)

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 26, 2013

@cainus - Those look good to me. I agree that a service will require more to scale. I think I will work on the ruby gem to be able to easily generate these, and a cleaned up svg. Then maybe a heroku build pack for Inkscape or something to turn this int a service.

Any tips on how you are calculating width based on text length would help. I figured I could try to to draw the text into an image by itself, and then measure it, or come up with some heuristic based on maximum char width.

Anyway, nice collaborating with you ;)

@cainus - Those look good to me. I agree that a service will require more to scale. I think I will work on the ruby gem to be able to easily generate these, and a cleaned up svg. Then maybe a heroku build pack for Inkscape or something to turn this int a service.

Any tips on how you are calculating width based on text length would help. I figured I could try to to draw the text into an image by itself, and then measure it, or come up with some heuristic based on maximum char width.

Anyway, nice collaborating with you ;)

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster May 29, 2013

Making a heroku buildpack for inkscape sux, so it may not be usable for a heroku based service:
http://stackoverflow.com/questions/16803478/make-a-heroku-buildpack-for-inkscape-using-vulcan

However, in researching buildpacks, I found this svg2png-cli module, and it is a phantomjs based project which may make more sense for deploying, and it renders pretty nicely:

Here is the project:
https://github.com/skyzyx/svg2png-cli

Install:
npm install svg2png-cli

Here is an example image using the same svg as I used with inkscape:
svg2png -s 1 travis_passing2.svg
travis_passing2-s1

...and as a retina 2X:
svg2png -s 2 travis_passing2.svg
travis_passing2-s2

I'm going to pursue tweaking the svg to be more optimal for this phantomjs based renderer, and then work on a buildpack to turn this into a heroku hosted service.

@cainus, it may also appeal to you since you are already making an npm based app, yes?

Making a heroku buildpack for inkscape sux, so it may not be usable for a heroku based service:
http://stackoverflow.com/questions/16803478/make-a-heroku-buildpack-for-inkscape-using-vulcan

However, in researching buildpacks, I found this svg2png-cli module, and it is a phantomjs based project which may make more sense for deploying, and it renders pretty nicely:

Here is the project:
https://github.com/skyzyx/svg2png-cli

Install:
npm install svg2png-cli

Here is an example image using the same svg as I used with inkscape:
svg2png -s 1 travis_passing2.svg
travis_passing2-s1

...and as a retina 2X:
svg2png -s 2 travis_passing2.svg
travis_passing2-s2

I'm going to pursue tweaking the svg to be more optimal for this phantomjs based renderer, and then work on a buildpack to turn this into a heroku hosted service.

@cainus, it may also appeal to you since you are already making an npm based app, yes?

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan May 30, 2013

Member

This is fucking georgeous @kookster. We need to start rolling out Retina badges with this.

Member

olivierlacan commented May 30, 2013

This is fucking georgeous @kookster. We need to start rolling out Retina badges with this.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 3, 2013

@kookster: looks great! (Sorry about the slow reply... I was on vacation last week.)

Phantom is a good choice for two reasons too:
(1) it's probably easier (possible?) to run on heroku than inkscape
(2) you might actually be able to use the dom's getBBox() or text.getComputedTextLength() to solve the other problem of text with variable length.

I just didn't expect the output to be that good, and the api is entirely based on reading and writing files, so it looked a bit inconvenient. I'll take a crack at this too though when I get a chance.

cainus commented Jun 3, 2013

@kookster: looks great! (Sorry about the slow reply... I was on vacation last week.)

Phantom is a good choice for two reasons too:
(1) it's probably easier (possible?) to run on heroku than inkscape
(2) you might actually be able to use the dom's getBBox() or text.getComputedTextLength() to solve the other problem of text with variable length.

I just didn't expect the output to be that good, and the api is entirely based on reading and writing files, so it looked a bit inconvenient. I'll take a crack at this too though when I get a chance.

@kookster

This comment has been minimized.

Show comment
Hide comment
@kookster

kookster Jun 3, 2013

you don't need to use the file based CLI, you can use the underlying
svg2png https://github.com/domenic/svg2png
agreed on the heroku ease of deploy, playing with that now.

Andrew Kuklewicz

On Mon, Jun 3, 2013 at 9:01 AM, Gregg Caines notifications@github.comwrote:

@kookster https://github.com/kookster: looks great! (Sorry about the
slow reply... I was on vacation last week.)

Phantom is a good choice for two reasons too:
(1) it's probably easier (possible?) to run on heroku than inkscape
(2) you might actually be able to use the dom's getBBox() or
text.getComputedTextLength() to solve the other problem of text with
variable length.

I just didn't expect the output to be that good, and the api is entirely
based on reading and writing files, so it looked a bit inconvenient. I'll
take a crack at this too though when I get a chance.


Reply to this email directly or view it on GitHubhttps://github.com/olivierlacan/shields/issues/15#issuecomment-18839270
.

kookster commented Jun 3, 2013

you don't need to use the file based CLI, you can use the underlying
svg2png https://github.com/domenic/svg2png
agreed on the heroku ease of deploy, playing with that now.

Andrew Kuklewicz

On Mon, Jun 3, 2013 at 9:01 AM, Gregg Caines notifications@github.comwrote:

@kookster https://github.com/kookster: looks great! (Sorry about the
slow reply... I was on vacation last week.)

Phantom is a good choice for two reasons too:
(1) it's probably easier (possible?) to run on heroku than inkscape
(2) you might actually be able to use the dom's getBBox() or
text.getComputedTextLength() to solve the other problem of text with
variable length.

I just didn't expect the output to be that good, and the api is entirely
based on reading and writing files, so it looked a bit inconvenient. I'll
take a crack at this too though when I get a chance.


Reply to this email directly or view it on GitHubhttps://github.com/olivierlacan/shields/issues/15#issuecomment-18839270
.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 3, 2013

@kookster: totally agree... but if you take a quick peek at that, it requires file-io (and therefore filenames in the api) to work as well. There's not really anything about the problem that should require disk access, and the disk access makes the solution a little trickier for a few reasons, if you want to run it in production. ANYWAY... It's probably most valuable to just get it running first. :) Lemme know how you do... I might get a chance to check into it myself tonight.

cainus commented Jun 3, 2013

@kookster: totally agree... but if you take a quick peek at that, it requires file-io (and therefore filenames in the api) to work as well. There's not really anything about the problem that should require disk access, and the disk access makes the solution a little trickier for a few reasons, if you want to run it in production. ANYWAY... It's probably most valuable to just get it running first. :) Lemme know how you do... I might get a chance to check into it myself tonight.

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 7, 2013

Member

Might not be relevant since our goal for now isn't to serve the SVG files but the PNG output instead but this tool looks like a great way to shave some weight off of SVG files.

Member

olivierlacan commented Jun 7, 2013

Might not be relevant since our goal for now isn't to serve the SVG files but the PNG output instead but this tool looks like a great way to shave some weight off of SVG files.

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 8, 2013

Contributor

Hey all, I messed up. I accidentally launched a badge-as-a-service app (http://badgr.co/) without reading this ticket first. I'm sorry. :-(

@olivierlacan and I met at Waza in February, so I was aware of Shields (and acknowledge it at the bottom of Badgr.co). I needed a fully dynamic badge for Gittip (see gratipay/gratipay.com#21) and I guess I shot first and asked questions later. Such is life. Sorry. :-(

Anyway, wanted to jump in here as soon as I became aware of this ticket. Looks like you're making good progress toward a solution here. How can I help? I would love to get Gittip in the mix as a badge vendor. I'm happy to contribute the badgr.co assets (domain, twitter handle, SSL cert, badger drawing :) ) if you're interested. Otherwise I'll just take it out back and shoot it when this gets launched. :-)

Again, my apologies. Keep up the good work! :-)

Contributor

chadwhitacre commented Jun 8, 2013

Hey all, I messed up. I accidentally launched a badge-as-a-service app (http://badgr.co/) without reading this ticket first. I'm sorry. :-(

@olivierlacan and I met at Waza in February, so I was aware of Shields (and acknowledge it at the bottom of Badgr.co). I needed a fully dynamic badge for Gittip (see gratipay/gratipay.com#21) and I guess I shot first and asked questions later. Such is life. Sorry. :-(

Anyway, wanted to jump in here as soon as I became aware of this ticket. Looks like you're making good progress toward a solution here. How can I help? I would love to get Gittip in the mix as a badge vendor. I'm happy to contribute the badgr.co assets (domain, twitter handle, SSL cert, badger drawing :) ) if you're interested. Otherwise I'll just take it out back and shoot it when this gets launched. :-)

Again, my apologies. Keep up the good work! :-)

@ELLIOTTCABLE

This comment has been minimized.

Show comment
Hide comment
@ELLIOTTCABLE

ELLIOTTCABLE Jun 8, 2013

… and this is why I love @whit537.

… and this is why I love @whit537.

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 8, 2013

Contributor

Thanks for the heads-up, @ELLIOTTCABLE. :-)

Contributor

chadwhitacre commented Jun 8, 2013

Thanks for the heads-up, @ELLIOTTCABLE. :-)

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 8, 2013

Member

First, @whit537, allow me to salute the class. 👍

I can honestly say the more the merrier here, you should not feel bad. I don't think any of us is staking a claim to own the badge space. 😄

We both clearly want higher quality meta-data to be easily available to open source maintainers. Anything all of us can do to further that goal is fair game in my book.

@ackerdev and I have two things we care very much about: design and semantics

I need to specify my expectations when it comes to a usable badge aesthetic (with a simple graphic), and both @ackerdev and I (as weel as all the good people involved in this project) need to work together to establish simple guidelines on nomenclature. There is a reason we spent time discussing with each vendor and working to convince them not to use badges as billboards but instead concentrate on information that would be relevant to contributors first: [ function of the vendor | related data ].

I understand the flat aesthetic you adopted with badger, and it would probably make it easier to produce badges with a smaller footprint. Oddly what I miss from flat non-rounded badges is the affordance to click them, which is something I do want to encourage, so that people seek and discover more data related to the small piece of meta-data they were shown in a README for instance.

I want third party services to be promoted, albeit indirectly, through the value they create for maintainers and contributors alike. I worry that a flat aesthetic hinders that one goal.

Sure, we could let people pick a theme for their badges, but that defeats the very problem I aimed to solve in the first place. Apart from personal preference, there is no good reason why any badge should visually differ from another. Otherwise we risk seeing the trend we partly curbed with Shields reoccur: a cacophony of different badges, some well-designed, some sloppily put together by developers with little regard for proper presentation.

I definitely think we should offer color choices to developers, but only if the legibility of the color paired with the text is not sub-optimal. I honestly want to avoid the "ask first" approach we're currently stuck with as much as possible, but giving people complete free-reign is problematic for the very reason that caused the need for Shields in the first place: many developers suck a design or they don't really care.

But all this is a lot of talking. Doing is always more valuable, so good job :-)
My fault for doing more talking than doing in the past few months.

Member

olivierlacan commented Jun 8, 2013

First, @whit537, allow me to salute the class. 👍

I can honestly say the more the merrier here, you should not feel bad. I don't think any of us is staking a claim to own the badge space. 😄

We both clearly want higher quality meta-data to be easily available to open source maintainers. Anything all of us can do to further that goal is fair game in my book.

@ackerdev and I have two things we care very much about: design and semantics

I need to specify my expectations when it comes to a usable badge aesthetic (with a simple graphic), and both @ackerdev and I (as weel as all the good people involved in this project) need to work together to establish simple guidelines on nomenclature. There is a reason we spent time discussing with each vendor and working to convince them not to use badges as billboards but instead concentrate on information that would be relevant to contributors first: [ function of the vendor | related data ].

I understand the flat aesthetic you adopted with badger, and it would probably make it easier to produce badges with a smaller footprint. Oddly what I miss from flat non-rounded badges is the affordance to click them, which is something I do want to encourage, so that people seek and discover more data related to the small piece of meta-data they were shown in a README for instance.

I want third party services to be promoted, albeit indirectly, through the value they create for maintainers and contributors alike. I worry that a flat aesthetic hinders that one goal.

Sure, we could let people pick a theme for their badges, but that defeats the very problem I aimed to solve in the first place. Apart from personal preference, there is no good reason why any badge should visually differ from another. Otherwise we risk seeing the trend we partly curbed with Shields reoccur: a cacophony of different badges, some well-designed, some sloppily put together by developers with little regard for proper presentation.

I definitely think we should offer color choices to developers, but only if the legibility of the color paired with the text is not sub-optimal. I honestly want to avoid the "ask first" approach we're currently stuck with as much as possible, but giving people complete free-reign is problematic for the very reason that caused the need for Shields in the first place: many developers suck a design or they don't really care.

But all this is a lot of talking. Doing is always more valuable, so good job :-)
My fault for doing more talking than doing in the past few months.

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 9, 2013

Contributor

Thanks, @olivierlacan.

I'm fully on board with the standardization of badge design across vendors, for the reasons you articulated. I think the flat design is nice, but that's not a hill I'm going to die on, or really fight very hard for at all. :-) I actually started out intending to implement the design you've converged on with Shields. I found myself limited by the tool I chose (Pillow, a fork of the venerable Python Imaging Library [PIL]), and the flat design that was easy for me to implement was also kind of appealing and trendy, so I launched with it. :-) The svg2png route that I see in this thread seems like a great way to implement the more complex design. If Badgr.co were in Node or svg2png were ported to Python I'd have the rounded design rolled out by now. Hmm ... ;-)

Now that I hear you articulate the nomenclature principle, I get where you're coming from there as well. How would you apply that to Gittip's case? Maybe [ donate | weekly ] or [ donate | Gittip ] or [ donate | username ]? I'm reluctant to suggest [ donate | $10 ], because it's unclear what that would mean; it could be any of the following:

  • Amount the project has received cumulatively over time
  • Amount the project received in some recent interval (week? month?)
  • Amount the project is set to receive in some upcoming interval (week? month?)
  • Target amount the project would like to receive
  • Suggested donation amount (I think this is the most likely interpretation?)
  • Amount a user signed in to the vendor's service is currently giving to the project

Also, if there were multiple funding mechanisms that the project supported such as both Flattr and Gittip, what would the badges be? Maybe [ donate | Flattr ] and [ donate | Gittip ]? Or maybe [ Flattr | username ] and [ Gittip | username ] after all? Thoughts?

Contributor

chadwhitacre commented Jun 9, 2013

Thanks, @olivierlacan.

I'm fully on board with the standardization of badge design across vendors, for the reasons you articulated. I think the flat design is nice, but that's not a hill I'm going to die on, or really fight very hard for at all. :-) I actually started out intending to implement the design you've converged on with Shields. I found myself limited by the tool I chose (Pillow, a fork of the venerable Python Imaging Library [PIL]), and the flat design that was easy for me to implement was also kind of appealing and trendy, so I launched with it. :-) The svg2png route that I see in this thread seems like a great way to implement the more complex design. If Badgr.co were in Node or svg2png were ported to Python I'd have the rounded design rolled out by now. Hmm ... ;-)

Now that I hear you articulate the nomenclature principle, I get where you're coming from there as well. How would you apply that to Gittip's case? Maybe [ donate | weekly ] or [ donate | Gittip ] or [ donate | username ]? I'm reluctant to suggest [ donate | $10 ], because it's unclear what that would mean; it could be any of the following:

  • Amount the project has received cumulatively over time
  • Amount the project received in some recent interval (week? month?)
  • Amount the project is set to receive in some upcoming interval (week? month?)
  • Target amount the project would like to receive
  • Suggested donation amount (I think this is the most likely interpretation?)
  • Amount a user signed in to the vendor's service is currently giving to the project

Also, if there were multiple funding mechanisms that the project supported such as both Flattr and Gittip, what would the badges be? Maybe [ donate | Flattr ] and [ donate | Gittip ]? Or maybe [ Flattr | username ] and [ Gittip | username ] after all? Thoughts?

@ELLIOTTCABLE

This comment has been minimized.

Show comment
Hide comment
@ELLIOTTCABLE

ELLIOTTCABLE Jun 9, 2013

@whit537 here's a suggestion for you (not the be-all-end-all, but just another one to consider): [ donations | $34/wk ]. Gets both the Gittip-spirit (always assumed to be weekly-forever, not a one-time-thing as people might assume), and makes it clear what it's talking about (what it's getting in donations right now).

Alternatively, [ donators | 9 ], which pretty clearly means 9 people donating right now. Doesn't as clearly convey the important (IMO) part, though, that being the Gittip structure of “weekly.”

I really like the first, because it's actually useful information on a project's landing-page / README: It's saying, “This project is currently being financed at $34 a week.” Which conveys both 1. this project has of continuing to exist in the future, and thus I can rely on it that much, and 2. the project is going to see development at minimum, because that's how much the developer is being paid to focus on it. That's useful information, and very intuitive, to any visitor.

As for more information, such as links to donate certain amounts … may I suggest a Testling-esque “table-image?” A bigger image, separate from the badge-image (which needs to be short, succinct, and descriptive), to show, say, a graph of contributions over time, or the number of contributors, or the top contributors (that'd be cool!) … you get the idea. Something to put at the bottom of the README, after the important stuff, not at the top.

Addendum: Wait, since when does Gittip support donations to a specific project? Did I miss that? Or are we talking about a coming-soon feature?

@whit537 here's a suggestion for you (not the be-all-end-all, but just another one to consider): [ donations | $34/wk ]. Gets both the Gittip-spirit (always assumed to be weekly-forever, not a one-time-thing as people might assume), and makes it clear what it's talking about (what it's getting in donations right now).

Alternatively, [ donators | 9 ], which pretty clearly means 9 people donating right now. Doesn't as clearly convey the important (IMO) part, though, that being the Gittip structure of “weekly.”

I really like the first, because it's actually useful information on a project's landing-page / README: It's saying, “This project is currently being financed at $34 a week.” Which conveys both 1. this project has of continuing to exist in the future, and thus I can rely on it that much, and 2. the project is going to see development at minimum, because that's how much the developer is being paid to focus on it. That's useful information, and very intuitive, to any visitor.

As for more information, such as links to donate certain amounts … may I suggest a Testling-esque “table-image?” A bigger image, separate from the badge-image (which needs to be short, succinct, and descriptive), to show, say, a graph of contributions over time, or the number of contributors, or the top contributors (that'd be cool!) … you get the idea. Something to put at the bottom of the README, after the important stuff, not at the top.

Addendum: Wait, since when does Gittip support donations to a specific project? Did I miss that? Or are we talking about a coming-soon feature?

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 10, 2013

Contributor

@ELLIOTTCABLE Here are some projects on Gittip:

There are ways to improve the experience for projects on Gittip, but the early adopters are on there today.

I like where you're going with [ donations | $34/wk ]. It fits the model of "metadata". It's not a call to action, I guess that happens elsewhere.

Contributor

chadwhitacre commented Jun 10, 2013

@ELLIOTTCABLE Here are some projects on Gittip:

There are ways to improve the experience for projects on Gittip, but the early adopters are on there today.

I like where you're going with [ donations | $34/wk ]. It fits the model of "metadata". It's not a call to action, I guess that happens elsewhere.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 11, 2013

I've almost got a command-line tool working for this now. Someone else could take it and use it in a web service once it's complete (It'll probably take a few more days). It takes as parameters "png-name", "vendor-text", "status-text" and "color" (red, yellow, yellow-green, green, or gray) and writes the resulting png with the given name. The quality is pretty good AFAICT... I've tried imagemagick, inkscape, and now I'm finding that phantomjs is rendering them the best.

I'm using the svg's in this repo to get the styling right, with a javascript dom to manipulate them and get the dynamic sizing right. Node is probably an unfortunate dependency for some, but I don't think this would be very easy in another language just because I assume other languages don't have an SVG dom that can do things like getBBox() to easily compute text-width.

Anyway, if you're interested, let me know. I'm very happy to let someone else build the service around it, if anyone cares to.

cainus commented Jun 11, 2013

I've almost got a command-line tool working for this now. Someone else could take it and use it in a web service once it's complete (It'll probably take a few more days). It takes as parameters "png-name", "vendor-text", "status-text" and "color" (red, yellow, yellow-green, green, or gray) and writes the resulting png with the given name. The quality is pretty good AFAICT... I've tried imagemagick, inkscape, and now I'm finding that phantomjs is rendering them the best.

I'm using the svg's in this repo to get the styling right, with a javascript dom to manipulate them and get the dynamic sizing right. Node is probably an unfortunate dependency for some, but I don't think this would be very easy in another language just because I assume other languages don't have an SVG dom that can do things like getBBox() to easily compute text-width.

Anyway, if you're interested, let me know. I'm very happy to let someone else build the service around it, if anyone cares to.

@ELLIOTTCABLE

This comment has been minimized.

Show comment
Hide comment
@ELLIOTTCABLE

ELLIOTTCABLE Jun 11, 2013

@whit537, others: what about a hover-state? Can we achieve that within a README? Or, alternatively, an animated-SVG / .gif, that flashes multiple pieces of data and a call-to-action? (If so, please make it optional … not everybody will want their READMEs splattered with eye-catching animations. That said, done well, and subtly, it could be excellent.)

[ donations | $34/wk ]
[ donations | 9 ppl ]
[ give now! | <3 ]

@whit537, others: what about a hover-state? Can we achieve that within a README? Or, alternatively, an animated-SVG / .gif, that flashes multiple pieces of data and a call-to-action? (If so, please make it optional … not everybody will want their READMEs splattered with eye-catching animations. That said, done well, and subtly, it could be excellent.)

[ donations | $34/wk ]
[ donations | 9 ppl ]
[ give now! | <3 ]
@ackerdev

This comment has been minimized.

Show comment
Hide comment
@ackerdev

ackerdev Jun 12, 2013

Contributor

I know, I'm late to the party.

+1 to everything @olivierlacan said. No bad blood between us and @whit537.
(Seriously, who could be mad at a guy that nice) 😄

As for the badge details, I'm definitely inclined to say that the donations | $34 / week model is best; gets across the point and even mirrors the very data shown on gittip itself. The only thing I worry about is what @whit537 brought up about other donation services, simply because the donation model is quite different. Though, since those services do not really keep a running tab I would be inclined to say that static donation services should mirror something closer to Flattr | username since I don't think Flattr | $653 really says anything truly useful if $653 is the total of all donations since existence (maybe it got that many donations 3 years ago before X new project came along and now it's been abandoned...).

@ELLIOTTCABLE An interesting approach, I'll give you that, though unfortunately we can't make use of hover-states to my knowledge. I also dislike the idea of offering gif animated badges. I think it adds visual noise we don't need, as we can generally get the most pertinent information available in one badge. The more subtle it is, the more it removes that visual noise, perhaps, but it also leads to people not realizing there's more information 'hiding' in the animation.

@cainus Nice. I haven't played with phantomjs through ruby, but I would have to imagine there would be a way to send JS to it. It really isn't the end of the world if it were to have to be done in node, if this were to be used as a service. (And having a node shield generator to offer would be cool too).

Contributor

ackerdev commented Jun 12, 2013

I know, I'm late to the party.

+1 to everything @olivierlacan said. No bad blood between us and @whit537.
(Seriously, who could be mad at a guy that nice) 😄

As for the badge details, I'm definitely inclined to say that the donations | $34 / week model is best; gets across the point and even mirrors the very data shown on gittip itself. The only thing I worry about is what @whit537 brought up about other donation services, simply because the donation model is quite different. Though, since those services do not really keep a running tab I would be inclined to say that static donation services should mirror something closer to Flattr | username since I don't think Flattr | $653 really says anything truly useful if $653 is the total of all donations since existence (maybe it got that many donations 3 years ago before X new project came along and now it's been abandoned...).

@ELLIOTTCABLE An interesting approach, I'll give you that, though unfortunately we can't make use of hover-states to my knowledge. I also dislike the idea of offering gif animated badges. I think it adds visual noise we don't need, as we can generally get the most pertinent information available in one badge. The more subtle it is, the more it removes that visual noise, perhaps, but it also leads to people not realizing there's more information 'hiding' in the animation.

@cainus Nice. I haven't played with phantomjs through ruby, but I would have to imagine there would be a way to send JS to it. It really isn't the end of the world if it were to have to be done in node, if this were to be used as a service. (And having a node shield generator to offer would be cool too).

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 12, 2013

Contributor

Thanks @ackerdev. :)

I went ahead and changed the Gittip text on badgr.co to [ donations | $34 / week ]. E.g.:

JSFiddle on Gittip

I also poked around: There is a PhantomJS clone for Python called Ghost.py, which could potentially be used to do the svg2png transform. I'm also not opposed to Node.

Contributor

chadwhitacre commented Jun 12, 2013

Thanks @ackerdev. :)

I went ahead and changed the Gittip text on badgr.co to [ donations | $34 / week ]. E.g.:

JSFiddle on Gittip

I also poked around: There is a PhantomJS clone for Python called Ghost.py, which could potentially be used to do the svg2png transform. I'm also not opposed to Node.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 16, 2013

@ELLIOTTCABLE @ackerdev @kookster @olivierlacan @whit537 :

Alright... It's running at:
http://calm-shore-6115.herokuapp.com/?label=did%20it%20work?&value=yes!&color=green&scale=1

The server code is at:
https://github.com/cainus/shield-server

The command-line tool and node library are at:
https://github.com/cainus/shielded

Any feedback is appreciated. I have no eye for graphical detail whatsoever. The code is also just "first-pass" quality (ie it's terrible). Pull requests are appreciated as well of course. :)

cainus commented Jun 16, 2013

@ELLIOTTCABLE @ackerdev @kookster @olivierlacan @whit537 :

Alright... It's running at:
http://calm-shore-6115.herokuapp.com/?label=did%20it%20work?&value=yes!&color=green&scale=1

The server code is at:
https://github.com/cainus/shield-server

The command-line tool and node library are at:
https://github.com/cainus/shielded

Any feedback is appreciated. I have no eye for graphical detail whatsoever. The code is also just "first-pass" quality (ie it's terrible). Pull requests are appreciated as well of course. :)

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jun 16, 2013

Member

I wanted to give you feedback but I'm on my iPhone 5 and it's not going to be helpful but this how it looks on a Retina screen. Wonder if you can try a pixel doubled version (displayed at the same resolution)?

http://link.olivierlacan.com/PgI6

Member

olivierlacan commented Jun 16, 2013

I wanted to give you feedback but I'm on my iPhone 5 and it's not going to be helpful but this how it looks on a Retina screen. Wonder if you can try a pixel doubled version (displayed at the same resolution)?

http://link.olivierlacan.com/PgI6

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 16, 2013

For retina displays, don't you just scale=2, and have the hosting html/css display at normal size? This service just generates the PNGs... It doesn't prescribe any html/css.

cainus commented Jun 16, 2013

For retina displays, don't you just scale=2, and have the hosting html/css display at normal size? This service just generates the PNGs... It doesn't prescribe any html/css.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 16, 2013

In case you can't see it in the url on your mobile browser, the scale factor is easy to set:
http://calm-shore-6115.herokuapp.com/?label=did%20it%20work?&value=yes!&color=green&scale=2

Here it is scaled back down by html:

cainus commented Jun 16, 2013

In case you can't see it in the url on your mobile browser, the scale factor is easy to set:
http://calm-shore-6115.herokuapp.com/?label=did%20it%20work?&value=yes!&color=green&scale=2

Here it is scaled back down by html:

@rpicard

This comment has been minimized.

Show comment
Hide comment
@rpicard

rpicard Jun 19, 2013

@whit537 Wanted me to link to a conversation we had about this in IRC: https://botbot.me/freenode/gittip/msg/3945498/

rpicard commented Jun 19, 2013

@whit537 Wanted me to link to a conversation we had about this in IRC: https://botbot.me/freenode/gittip/msg/3945498/

@rpicard

This comment has been minimized.

Show comment
Hide comment
@rpicard

rpicard Jun 19, 2013

It starts at that message, but continues a little later (after I had read most of this thread :) ).

rpicard commented Jun 19, 2013

It starts at that message, but continues a little later (after I had read most of this thread :) ).

@rpicard

This comment has been minimized.

Show comment
Hide comment
@rpicard

rpicard Jun 19, 2013

As a note on design, I would just say that tipping on Gittip and checking the build status on Travis are two very different actions, and I think that it would be confusing for the badges to look the same.

rpicard commented Jun 19, 2013

As a note on design, I would just say that tipping on Gittip and checking the build status on Travis are two very different actions, and I think that it would be confusing for the badges to look the same.

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jun 20, 2013

Contributor

@rpicard I actually meant your ticket in badgr.co, but this works too. :-)

Contributor

chadwhitacre commented Jun 20, 2013

@rpicard I actually meant your ticket in badgr.co, but this works too. :-)

@rpicard

This comment has been minimized.

Show comment
Hide comment
@rpicard

rpicard Jun 20, 2013

@whit537 Oh, whoops. :)

rpicard commented Jun 20, 2013

@whit537 Oh, whoops. :)

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Jun 20, 2013

@rpicard @whit537 Feel free to use my command-line client ( https://github.com/cainus/shielded ) or webservice code ( https://github.com/cainus/shield-server ) as you please (or not at all). I don't have any intention of hosting shields-as-a-service, or anything like that, so badgr.co could totally be that. I just wanted a shield (that matches the style here) that shows the size (in kb) of node.js projects (see the last shield on https://github.com/cainus/percolator for an example).

Beyond that, and lacking additional feedback, I'm mostly considering my part done. Feel free to take the ball and run. :)

cainus commented Jun 20, 2013

@rpicard @whit537 Feel free to use my command-line client ( https://github.com/cainus/shielded ) or webservice code ( https://github.com/cainus/shield-server ) as you please (or not at all). I don't have any intention of hosting shields-as-a-service, or anything like that, so badgr.co could totally be that. I just wanted a shield (that matches the style here) that shows the size (in kb) of node.js projects (see the last shield on https://github.com/cainus/percolator for an example).

Beyond that, and lacking additional feedback, I'm mostly considering my part done. Feel free to take the ball and run. :)

@jmalloc jmalloc referenced this issue in semver/semver Jun 24, 2013

Closed

SemVer badge/shield. #104

@chadwhitacre chadwhitacre referenced this issue in badges/badgr.co Jul 31, 2013

Closed

Here's a first pass at using shielded #16

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jul 31, 2013

Contributor

@olivierlacan I've rewritten Badgr.co to use @cainus' work on shielded. Here's the pull request for this:

badges/badgr.co#16

And here's the new version (I'm thinking we'll put this behind a CDN, but for now the origin is fine for testing):

http://origin.badgr.co/

You'll see that I've also started rebranding it as Shields.io. I want the-service-formerly-known-as-Badgr.co to close this ticket. Can we talk about what we need to do to make that happen? Here's my proposal:

  • land badges/badgr.co#16
  • start a clean repo with the work from the shielded branch of the badgr.co repo (there's a lot of old cruft that weighs it down, better to start fresh)
  • call the new repo shields.io.
  • redo the homepage and favicon on shields.io
  • have a conversation about ongoing maintenance and funding. I'd like to fund Shields.io on Gittip, if possible.

I've staked out Shields_io on Twitter and Shields.io on Gittip. If you're open to it, @olivierlacan, I'm happy to include Shields.io within the Gittip org on GitHub and to run funding through Gittip, LLC.

How does this sound, @olivierlacan? Let's bring this in for a landing! :D

Contributor

chadwhitacre commented Jul 31, 2013

@olivierlacan I've rewritten Badgr.co to use @cainus' work on shielded. Here's the pull request for this:

badges/badgr.co#16

And here's the new version (I'm thinking we'll put this behind a CDN, but for now the origin is fine for testing):

http://origin.badgr.co/

You'll see that I've also started rebranding it as Shields.io. I want the-service-formerly-known-as-Badgr.co to close this ticket. Can we talk about what we need to do to make that happen? Here's my proposal:

  • land badges/badgr.co#16
  • start a clean repo with the work from the shielded branch of the badgr.co repo (there's a lot of old cruft that weighs it down, better to start fresh)
  • call the new repo shields.io.
  • redo the homepage and favicon on shields.io
  • have a conversation about ongoing maintenance and funding. I'd like to fund Shields.io on Gittip, if possible.

I've staked out Shields_io on Twitter and Shields.io on Gittip. If you're open to it, @olivierlacan, I'm happy to include Shields.io within the Gittip org on GitHub and to run funding through Gittip, LLC.

How does this sound, @olivierlacan? Let's bring this in for a landing! :D

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Jul 31, 2013

Member

All of this, amazing work. Let me know where to point shields.io

Member

olivierlacan commented Jul 31, 2013

All of this, amazing work. Let me know where to point shields.io

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Jul 31, 2013

Contributor

@olivierlacan Yay! :D

Let me know where to point shields.io

We'll need an ANAME/ALIAS to a MaxCDN URL. I'll let you know when I have that.

Do you think you and I could schedule another call? I'd like to hear your long-term plans for this project and talk to you about Gittip possibly "acquiring" Shields. :-)

Contributor

chadwhitacre commented Jul 31, 2013

@olivierlacan Yay! :D

Let me know where to point shields.io

We'll need an ANAME/ALIAS to a MaxCDN URL. I'll let you know when I have that.

Do you think you and I could schedule another call? I'd like to hear your long-term plans for this project and talk to you about Gittip possibly "acquiring" Shields. :-)

@jbowes

This comment has been minimized.

Show comment
Hide comment
@jbowes

jbowes Aug 5, 2013

Member

I implemented my own shields as a service project without checking in on this issue, and noticing there had been recent activity. oops!

my mistake

The code is at https://github.com/jbowes/buckler with an instance running at http://b.repl.ca

Hopefully it can be of some use or inspiration. For example, I think the API it presents is a bit nicer, as the query string free URLs are more amiable to caching and are easier to type out by hand.

Member

jbowes commented Aug 5, 2013

I implemented my own shields as a service project without checking in on this issue, and noticing there had been recent activity. oops!

my mistake

The code is at https://github.com/jbowes/buckler with an instance running at http://b.repl.ca

Hopefully it can be of some use or inspiration. For example, I think the API it presents is a bit nicer, as the query string free URLs are more amiable to caching and are easier to type out by hand.

@cainus

This comment has been minimized.

Show comment
Hide comment
@cainus

cainus Aug 5, 2013

Ouuuch... Soooo much duplicated effort for something that makes $0.00 :) I'm guessing that you may have done a better job of it performance-wise though, because it looks like you've foregone svg entirely, if I'm not mistaken. It also looks like this can run on heroku, @olivierlacan , if you still want that performance boost: http://mmcgrana.github.io/2012/09/getting-started-with-go-on-heroku.html . Nice work, @jbowes !

cainus commented Aug 5, 2013

Ouuuch... Soooo much duplicated effort for something that makes $0.00 :) I'm guessing that you may have done a better job of it performance-wise though, because it looks like you've foregone svg entirely, if I'm not mistaken. It also looks like this can run on heroku, @olivierlacan , if you still want that performance boost: http://mmcgrana.github.io/2012/09/getting-started-with-go-on-heroku.html . Nice work, @jbowes !

@jbowes

This comment has been minimized.

Show comment
Hide comment
@jbowes

jbowes Aug 5, 2013

Member

@cainus thanks! but yeah, ouch :(

Performance is pretty good. On my i7-3537u buckler will output a 12 char string png (as performance will be impacted by string size) in about 1.5ms (conversion to png takes up most of that time at about 1ms). So, performance is really bound by network.

Heroku should be no problem; I'm using OpenShift ATM with a Go cartridge that was based on a heroku Go pack:
https://github.com/smarterclayton/openshift-go-cart

Member

jbowes commented Aug 5, 2013

@cainus thanks! but yeah, ouch :(

Performance is pretty good. On my i7-3537u buckler will output a 12 char string png (as performance will be impacted by string size) in about 1.5ms (conversion to png takes up most of that time at about 1ms). So, performance is really bound by network.

Heroku should be no problem; I'm using OpenShift ATM with a Go cartridge that was based on a heroku Go pack:
https://github.com/smarterclayton/openshift-go-cart

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Aug 7, 2013

Contributor

Okay! I am happy to announce that Gittip has acquired the Shields project! :D

I'll write up a post about it for the Gittip blog, but here's the call where @olivierlacan and I did the deal:

http://www.youtube.com/watch?v=CZ0lgVWGSEs

And here's us shaking hands on it: :D

shields-deal

http://www.youtube.com/watch?v=CZ0lgVWGSEs#t=28m

On that call we transferred this repo from @olivierlacan to @gittip and renamed it to shields.io. The reason Gittip was interested in Shields is that Shields is a perfect example of a service that should be able to be funded on Gittip, and having one such service in house gives Gittip a chance to eat our own dogfood, drink our own whiskey, feel the pain, drive best practices, etc., etc.

Next steps:

  • olivierlacan re-adds collaborators to the Shields.io team on the Gittip organization on GitHub: #41.
  • olivierlacan continues to manage the Shields project as part of the Gittip organization.
  • whit537, et al. migrate the old badgr.co code into this repo: #37.
  • whit537, et al. move the issues on the badgr.co repo over to this one: #38.
  • Badgr.co has then become Shields.io!
  • whit537, et al. put the finishing touches on Shields.io.
  • olivierlacan hangs on to the shields.io domain for now (eventually we'll transfer it to Gittip, LLC: #39).
  • olivierlacan configures DNS for shields.io per instructions from whit537.
  • whit537 shares control of https://www.gittip.com/Shields.io/ with olivierlacan: #40.
  • whit537 writes up a blog post for the Gittip blog.
  • We announce this to the world! :-)

@jbowes I didn't notice your work until @olivierlacan brought it to my attention when we started our call. The performance is definitely a win over the Node version. Good work! :-) That said, the Node version works and is already integrated with Shields.io. We just shell out to it, though, so it shouldn't be too much work to swap out for the Go version. Can we keep this in our back pocket for when it comes time to further optimize Shields.io? Having buckler as a CLI instead of a web service would move us in the right direction.

Thank you and congratulations to @olivierlacan and everyone who has contributed to Shields so far. I'm excited to get http://shields.io/ online! 💃

Contributor

chadwhitacre commented Aug 7, 2013

Okay! I am happy to announce that Gittip has acquired the Shields project! :D

I'll write up a post about it for the Gittip blog, but here's the call where @olivierlacan and I did the deal:

http://www.youtube.com/watch?v=CZ0lgVWGSEs

And here's us shaking hands on it: :D

shields-deal

http://www.youtube.com/watch?v=CZ0lgVWGSEs#t=28m

On that call we transferred this repo from @olivierlacan to @gittip and renamed it to shields.io. The reason Gittip was interested in Shields is that Shields is a perfect example of a service that should be able to be funded on Gittip, and having one such service in house gives Gittip a chance to eat our own dogfood, drink our own whiskey, feel the pain, drive best practices, etc., etc.

Next steps:

  • olivierlacan re-adds collaborators to the Shields.io team on the Gittip organization on GitHub: #41.
  • olivierlacan continues to manage the Shields project as part of the Gittip organization.
  • whit537, et al. migrate the old badgr.co code into this repo: #37.
  • whit537, et al. move the issues on the badgr.co repo over to this one: #38.
  • Badgr.co has then become Shields.io!
  • whit537, et al. put the finishing touches on Shields.io.
  • olivierlacan hangs on to the shields.io domain for now (eventually we'll transfer it to Gittip, LLC: #39).
  • olivierlacan configures DNS for shields.io per instructions from whit537.
  • whit537 shares control of https://www.gittip.com/Shields.io/ with olivierlacan: #40.
  • whit537 writes up a blog post for the Gittip blog.
  • We announce this to the world! :-)

@jbowes I didn't notice your work until @olivierlacan brought it to my attention when we started our call. The performance is definitely a win over the Node version. Good work! :-) That said, the Node version works and is already integrated with Shields.io. We just shell out to it, though, so it shouldn't be too much work to swap out for the Go version. Can we keep this in our back pocket for when it comes time to further optimize Shields.io? Having buckler as a CLI instead of a web service would move us in the right direction.

Thank you and congratulations to @olivierlacan and everyone who has contributed to Shields so far. I'm excited to get http://shields.io/ online! 💃

@jbowes

This comment has been minimized.

Show comment
Hide comment
@jbowes

jbowes Aug 8, 2013

Member

@whit537 certainly! cli access is on my todo list: badges/buckler#6

Member

jbowes commented Aug 8, 2013

@whit537 certainly! cli access is on my todo list: badges/buckler#6

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Aug 8, 2013

Contributor

@olivierlacan I feel like we've gotten ahead of ourselves in our excitement. This is somewhat new territory so I don't think we should feel too bad, but at the same time we should try to set a good precedent here. The problem I'm seeing is that we didn't provide sufficient time for our respective communities to weigh in on this decision for Gittip to acquire Shields. We should have probably run those through tickets first before calling the deal final. As it is I've created a ticket on either side to collect any objections: #43 and gratipay/gratipay.com#1307. I propose that we proceed as planned but keep those open for a few days to give people a chance to weigh in.

Contributor

chadwhitacre commented Aug 8, 2013

@olivierlacan I feel like we've gotten ahead of ourselves in our excitement. This is somewhat new territory so I don't think we should feel too bad, but at the same time we should try to set a good precedent here. The problem I'm seeing is that we didn't provide sufficient time for our respective communities to weigh in on this decision for Gittip to acquire Shields. We should have probably run those through tickets first before calling the deal final. As it is I've created a ticket on either side to collect any objections: #43 and gratipay/gratipay.com#1307. I propose that we proceed as planned but keep those open for a few days to give people a chance to weigh in.

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@olivierlacan

olivierlacan Aug 8, 2013

Member

@whit537 Good call. I think we're more excited about getting shields.io than anything. 😉

Member

olivierlacan commented Aug 8, 2013

@whit537 Good call. I think we're more excited about getting shields.io than anything. 😉

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Aug 8, 2013

Contributor

@jbowes Awesome! :-)

Contributor

chadwhitacre commented Aug 8, 2013

@jbowes Awesome! :-)

@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
Contributor

chadwhitacre commented Aug 8, 2013

@jmalloc jmalloc referenced this issue in IcecaveStudios/archer Sep 7, 2013

Closed

How do you add the yellow semver badge to README? #65

@olivierlacan

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

This comment has been minimized.

Show comment
Hide comment
@chadwhitacre

chadwhitacre Oct 16, 2013

Contributor

🙇

Huzzah! 💃

Contributor

chadwhitacre commented Oct 16, 2013

🙇

Huzzah! 💃

@chadwhitacre chadwhitacre referenced this issue Nov 12, 2013

Closed

Gemify #77

@chadwhitacre chadwhitacre referenced this issue in saxifrage/universal-badge-api Jul 28, 2015

Open

initial discussion #1

@nathany nathany referenced this issue in badges/shielded Jan 28, 2016

Closed

Linked issue doesn't exist #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment