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

Closed
whit537 opened this Issue Jun 6, 2012 · 40 comments

Projects

None yet

10 participants

@whit537
Member
whit537 commented Jun 6, 2012

No description provided.

@whit537
Member
whit537 commented Jun 6, 2012

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

@whit537
Member
whit537 commented Jun 13, 2012

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

@whit537 whit537 added a commit that referenced this issue Jun 15, 2012
@whit537 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
@whit537
Member
whit537 commented Mar 12, 2013

+1 from @colindean in IRC.

@whit537
Member
whit537 commented Mar 28, 2013

+1 from Miki Tebeka in private email.

@tebeka
tebeka commented Mar 29, 2013

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
@whit537
Member
whit537 commented Apr 9, 2013

+1 from Cyrus David in private email.

@whit537
Member
whit537 commented Apr 12, 2013

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

@whit537
Member
whit537 commented Apr 12, 2013

:D

@shurcooL
Contributor

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

@whit537
Member
whit537 commented Apr 22, 2013

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.

@shurcooL
Contributor

Valid points, Chad.

@whit537
Member
whit537 commented Apr 23, 2013

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

@whit537
Member
whit537 commented Apr 23, 2013

@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
mrooney commented Apr 23, 2013

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
rubiii commented May 15, 2013

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.

@whit537
Member
whit537 commented Jun 7, 2013

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

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

@whit537 whit537 closed this Jun 7, 2013
@whit537
Member
whit537 commented Jun 7, 2013

E.g.:

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

Gittip

@shurcooL
Contributor
shurcooL commented Jun 8, 2013

Awesome, thanks!

@whit537 whit537 referenced this issue in badges/shields Jun 8, 2013
Closed

Shields as a Service #15

@whit537 whit537 reopened this Jun 12, 2013
@whit537
Member
whit537 commented Jun 12, 2013
@twolfson
Member

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
Member

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
Member

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
Member

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

@whit537
Member
whit537 commented Jul 30, 2013

@twolfson Um, whoa. Cool! :D

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

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

@twolfson
Member

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!

@whit537
Member
whit537 commented Jul 31, 2013

@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
Member
twolfson commented Aug 1, 2013

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
Member
twolfson commented Aug 1, 2013

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
Member
twolfson commented Aug 4, 2013

@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
Member
twolfson commented Aug 4, 2013

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

@twolfson
Member
twolfson commented Aug 5, 2013

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

@twolfson
Member
twolfson commented Aug 5, 2013

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

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

@whit537 whit537 referenced this issue Aug 8, 2013
Closed

acquire Shields #1307

@whit537
Member
whit537 commented Aug 22, 2013

+1 from @visionmedia in Twitter DM

@zwn
Contributor
zwn commented Jan 17, 2014

Droping to 2 stars. IRC

@2072 2072 referenced this issue in gratipay/grtp.co Sep 7, 2014
Closed

[feature request] Add an image widget #72

@rohitpaulk
Member

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

@twolfson
Member

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.

@twolfson twolfson closed this Oct 15, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment