Skip to content
This repository

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

Open
whit537 opened this Issue · 38 comments

8 participants

Chad Whitacre Miki Tebeka Peter Dmitri Shuralyov Mike Rooney Daniel Harrington Todd Wolfson Zbyněk Winkler
Chad Whitacre
Owner


Want to back this issue? Place a bounty on it! We accept bounties via Bountysource.

Chad Whitacre
Owner

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

Chad Whitacre
Owner

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

Chad Whitacre whit537 referenced this issue from a commit
Chad Whitacre whit537 Clean up the tip.json API
I've got someone asking to help with building a widget (#21, #41). I
believe this JSON API will enable that.
f6706e5
Chad Whitacre
Owner

+1 from @colindean in IRC.

Chad Whitacre
Owner

+1 from Miki Tebeka in private email.

Miki 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
Chad Whitacre
Owner

+1 from Cyrus David in private email.

Chad Whitacre
Owner

+1 from @timetabling via Twitter.

Peter

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

Chad Whitacre
Owner

:D

Dmitri Shuralyov

+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?

Chad Whitacre
Owner

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.

Dmitri Shuralyov

Valid points, Chad.

Chad Whitacre
Owner

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

Chad Whitacre
Owner

@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"
}
Mike Rooney

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?

Daniel Harrington
rubiii commented

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.

Chad Whitacre
Owner

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

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

Chad Whitacre whit537 closed this
Chad Whitacre
Owner

E.g.:

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

Gittip

Dmitri Shuralyov

Awesome, thanks!

Chad Whitacre whit537 referenced this issue in badges/shields
Closed

Shields as a Service #15

Chad Whitacre whit537 reopened this
Chad Whitacre
Owner

Reopening until badges/shields#15 is resolved.

Todd Wolfson

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).

Todd Wolfson

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

Todd Wolfson

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.

Todd Wolfson

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

twolfson

Chad Whitacre
Owner

@twolfson Um, whoa. Cool! :D

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

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

Todd Wolfson

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!

Chad Whitacre
Owner

@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 badges/shields#15 (comment) 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?

Todd Wolfson

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.

Todd Wolfson

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.

Todd Wolfson

@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 =/

Todd Wolfson

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

selection_052

Todd Wolfson

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:

gittip

Todd Wolfson

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

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

Chad Whitacre
Owner

+1 from @visionmedia in Twitter DM

Zbyněk Winkler
Collaborator
zwn commented

Droping to 2 stars. IRC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.