implement dynamic PNG a la Travis CI for github.com, etc.

[chadwhitacre]

No description provided.

[chadwhitacre]

Doesn't look like we can put a widget on a Github profile page, but everyone looks at repos anyway. Do whatever TravisCI does.

[chadwhitacre]

See also #41, which is a javascript widget. This is an image.

[chadwhitacre]

Can we use this?

https://github.com/olivierlacan/shields

[chadwhitacre]

+1 from @colindean in IRC.

[chadwhitacre]

+1 from Miki Tebeka in private email.

[tebeka]

Recapturing what I said in email with @whit537

I think you can simplify the process if you use images with URL. Then bitbucket (and github?) will render them.
See for example the page at https://bitbucket.org/tebeka/ingress (gittip image created using cooltext.com).

This way you can specify in the FAQ how to write markdown and ReStructuredText directives to get gittip button in the README.

In the case above it was (markdown):
[![gittip](http://dl.dropbox.com/u/706094/gittip.png)](https://www.gittip.com/Miki%20Tebeka/)

Also found the magic for ReStructuedText (as seen in https://bitbucket.org/tebeka/fastavro)

.. image:: http://dl.dropbox.com/u/706094/gittip.png
   :alt: gittip
   :target: https://www.gittip.com/Miki%20Tebeka/

This works also on github as you can see at https://github.com/tebeka/fastavro

[chadwhitacre]

+1 from Cyrus David in private email.

[chadwhitacre]

@maxogden rolled his own:

https://github.com/maxogden/art-of-node

[chadwhitacre]

+1 from @timetabling via Twitter.

[karussell]

+0 as I'm already @timetabling from Twitter or karussell on gittip - thanks :) ! @maxogden can I use you picture?

[chadwhitacre]

:D

[dmitshur]

+1

I've also rolled my own for now, but it should really be done on the side of Gittip. It's static. I thought it's better to follow the existing design of the Gittip widget for brand recognition purposes.

One thing I thought was odd is that the font rendering differs slightly between these two places:

• https://www.gittip.com/<user>/widgets/ - uses 9pt "Lato" font, loads it from fonts.googleapis.com
• https://www.gittip.com/<user>/widget.html - attempts to use 9pt "Lato" font, but falls back to sans-serif because Lato isn't available

Is that a bug?

[chadwhitacre]

I'm not sure https://github.com/olivierlacan/shields is the right solution because there aren't really "states" that a Gittip account can be in. The two possible state variants would be tip amounts and goal status, and neither of those are good options (tip amount because it's user-specific and not available without authentication, and goal status because funding goals don't seem to have caught on).

One easy solution is to host a PNG and add it in as an option on /%username/widgets/. The problem I see there is that the dynamic widget changes values as you surf around the web. The static png wouldn't, and this would break the functionality of the button. For that reason I'm inclined to create a separate image that doesn't have the same expectation associated with it.

Re: fonts: Lato is what we used to use under the old design. The green button dates to that design. It's a bug for the two places mentioned to not use the same font. I'd rather drop Lato to avoid adding weight to widget.html.

[dmitshur]

Valid points, Chad.

[chadwhitacre]

@mrooney comments on #882 that the "status" for the project on Gittip is weekly receiving.

[chadwhitacre]

@mrooney You do get weekly receiving in public.json, e.g.:

https://www.gittip.com/readthedocs/public.json

{
  receiving: "105.75",
  giving: "0.00",
  elsewhere: {
    bitbucket: null,
    github: "https://api.github.com/users/readthedocs",
    twitter: "https://api.twitter.com/1/users/show.json?id=178954986&include_entities=1"
  },
  goal: "100.00"
}

[mrooney]

Thanks for the feedback! I wonder if we are talking about different things, though. The status in my dynamic image is how much that person viewing the image is giving to the project, not how much the project is currently receiving.

Basically an embeddable version of the "your weekly gift" for a specific project so I can see that on various projects' pages. Does that make sense?

[rubiii]

i very much agree with @whit537 about the fact that "shields" is not the right solution. those are status badges and they look nice alongside each other. but i think the "give back" button should not align with any existing badges, but stand out to be noticed. like the one created by @maxogden for example.

[chadwhitacre]

I launched a small service called Badgr.co to address the badge use case.

Those who want custom images should keep making them themselves. :-)

[chadwhitacre]

E.g.:

[![Gittip](http://badgr.co/Gittip/whit537.png)](https://www.gittip.com/whit537/)

[dmitshur]

Awesome, thanks!

[chadwhitacre]

Reopening until https://github.com/olivierlacan/shields/issues/15 is resolved.

[twolfson]

I have been using http://badgr.co/ for a while and it is looking great (not much traction but I don't blame the plugin).

However, I have been finding some README's where a larger badge would be more appropriate (e.g. a screenshot of Widget # 2). Would it be possible to start serving one of these as well?

For technical feasibility, if it is too complex to build it out as part of http://badgr.co/, we could create a service which launches a PhantomJS script to open a page using Widget # 2 and return a screenshot. For performance, we could cache the images for 5 minutes to 1 hour (or maybe even make it LRU style).

[twolfson]

I tried out making a service that uses the PhantomJS method as described above. Unfortunately, I did not realize the widget contained transparency which made it fall on its face (you cannot screenshot transparency).

After that, I attempted to use domvas to convert the HTML element into an image for exporting as a data-URI but it was having trouble on PhantomJS.

The project can be found at https://github.com/twolfson/gittip-large-badges

[twolfson]

A rough canvas based widget is working on a branch of the project. See a demo on Heroku

http://young-brushlands-2888.herokuapp.com/render/index.html

I am very curious if there is a JS lib for converting HTML/CSS into canvas commands because that would remove a lot of the tedium of handcoding this/make it easier to apply to future widgets.

[twolfson]

Alright, I have a working "screenshot" via phantomjs + canvas. The last sticking point is that fonts are working locally but not on Heroku. I tried embedding them as data URLs but still no luck =(

http://young-brushlands-2888.herokuapp.com/twolfson

[chadwhitacre]

@twolfson Um, whoa. Cool! :D

You wanna help out with badgr.co next? :-)

http://badgr.co/
https://github.com/gittip/badgr.co

[chadwhitacre]

@twolfson Specifically: https://github.com/gittip/badgr.co/issues/15.

[twolfson]

Maybe...? I don't see that as a pain point yet since badgr.co is working (to my knowledge). I would rather focus my efforts on other projects which solve problems closer to me for the time being (once I get the damn font to work on Heroku). However, for now, sleep!

[chadwhitacre]

@twolfson Yeah, no worries. Scratch your own itch, for sure. :)

Badgr.co still makes me itch because a) it conflicts with Shields and I want to collaborate with Shields, and b) it's implemented quite naively and is not ready for any significant amount of traffic. Those are the two reasons I haven't promoted it and it therefore doesn't have much traction.

This thread did inspire me, however, and I've made some progress robust-ifying Badgr.co and rebranding it as Shields.io! See badges/badgr.co#16 and https://github.com/olivierlacan/shields/issues/15#issuecomment-21891747 and (for the time being) http://origin.badgr.co/.

As you suggest, Shields.io (née Badgr.co) is a separate service from what you're talking about here. Shields.io is in no way limited to Gittip, while on the other hand we will likely want to provide many dynamic images related to Gittip beyond what we're doing on Shields.io. Basically any dynamic widget we provide would ideally be available in static image form as well. The good news is that we can use a lot of the learning and code from Shields.io to fast-forward the development of a Gittip-specific image service. To that end, is it workable for you to think in terms of writing a CLI to generate these images? That's how Shields.io is architected (here's the underlying shielded cli), and it's working well. Can you deliver a CLI for Widget 2?

[twolfson]

Yep, I can break out the CLI for Widget 2 into its own node module (or maybe even phantomjs script on npm). I still haven't gotten time to finish up the last of the font problems but I will let you know if I do.

[twolfson]

Actually, whenever I do this next, I will probably break out the CLI, write some tests (perceptual diffs ftw), and point you to it. Heroku might be a ship worth abandoning if you are going to run it elsewhere.

[twolfson]

@whit537 Alright, I have tried and tried again to get this running but it's not budging. I wanted to put in tests so that Travis CI performs perceptual diffs on the images.

Unfortunately, Travis is giving me the same issues as Heroku which makes me think no server will work out of the box. I am abandoning the widget 2 badge for something more static for now =/

[twolfson]

Not really related to the issue any more but generated a static image using GitHub CSS and Gittip SVG

http://plnkr.co/edit/UlcXoL?p=preview

[twolfson]

Alright, after sufficient frustration of trying to get HTML to convert into a PNG. I used screenshot-as-a-service, used a #F0F background, then pixlr to pluck out the image. So frustrating -_-;;

Final product:

[twolfson]

I have formalized it into a repo with a semver and documentation

https://github.com/twolfson/gittip-badge

[chadwhitacre]

+1 from @visionmedia in Twitter DM

[zwn]

Droping to 2 stars. IRC

[rohitpaulk]

We've got the shields widget. (It's featured on our widgets page too) Doesn't that serve the purpose?

[twolfson]

Yep, initially it was implemented in Badgr. Then, Badgr was deprecated and moved to Shields. I think this issue fell through the cracks of never being closed.