Poster badge

[ewels]

Quoting @tomkinsc in #1951:

Maybe we should have a logo available similar to the GitHub badge for groups to add to conference posters. Something like:

┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐                                         

│                         │ Reproducible research.                  
       Bioconda logo        Install the software from bioconda:     
│                         │ conda install ____________________      
                            See: bioconda.github.io                 
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘                                         

Mockup of something along those lines here: http://beta.tallphil.co.uk/bioconda-badge/

Source here. Resulting images look like this:

---

---

---

To do:

• [x] Add -c bioconda (suggested by @bgruening)
• [x] Make the -c bioconda optional, with checkbox
• [x] Make a compact version with smaller logo font
• [x] Make monochrome versions in black & white for coloured backgrounds?
• [x] Make a static version - JS only

[bgruening]

Love it!!!

[ewels]

Added -c bioconda to the page, though now only packages with short names will fit on the wide version. I'll update the SVG to be wider.

[tomkinsc]

Wonderful! Looks great! Nice work, @ewels.

While it's more "correct", I'd say we can omit the "-c bioconda" part since it clutters the design and deemphasizes how easy it is to install something from bioconda. I guess I see configuring conda to use the bioconda channel as part of the initial setup process for most people, like installing miniconda. It's described on the GitHub page and doesn't need to be on the poster (especially when we include the url for the GitHub page). Maybe the generator could include a checkbox option to add it?

[ewels]

I like the idea of making it optional. Then people can choose (probably depending on how long their package name is).

How does bioconda.github.io work? Is it possible to put a static HTML file with browser JS somewhere? (I'm assuming that it can't run server side code as it's a github.io site). Would be nice to put this as an interactive tool there instead of me hosting it on my site..

[tomkinsc]

Pretty sure it has to be static for github.io. Here's a JS-only page of mine from a while back that modifies SVGs and saves them in a zip file: https://github.com/tomkinsc/carcassonne-shading/blob/gh-pages/js/carcassonne_shading.js Creating a PNG from an SVG should be enough.

[ewels]

Nice! Where is the source controlled from though? It looks like bioconda.github.io repo is automatically overwritten by Travis?

[tomkinsc]

That's a question for @johanneskoester, but it appears the static docs may be generated based on the files within the docs/ directory of this repository.

[tomkinsc]

Maybe we can have a third, "compact," style too? Something where the logo text and the other text are about the same size? Not sure what that would look like. Maybe:

[johanneskoester]

@ewels, @tomkinsc, yes the pages are generated from the docs directory via sphinx.

[johanneskoester]

This is great work, and I have to say that I like the compact style most. But it would be great to let the user choose. I would maybe replace the > with a $?

[ewels]

Ok great - I'll have a crack at rewriting this tomorrow, updated checklist on the top comment. I'll write it as a standalone HTML/JS page, then you can put it wherever you feel is the right place @johanneskoester

[johanneskoester]

Amazing! Thanks Phil!

[johanneskoester]

Hi Phil, any update on this? There are a few conferences upcoming in September and I would like to use it ;-).

[ewels]

Apologies, I've been away and I must admit it slipped my mind..

I've just updated it, including where it's hosted:

• URL is now http://beta.tallphil.co.uk/bioconda-badge/
• -c bioconda is now optional with a checkbox
• Dropdown allows you to choose between $ or > as a prompt
• New compact version
• Option for black & white variants
• Preview shows you the badge as you update the form

I moved the images out into their own template files, so it'll be easier to add more variants.

@tomkinsc - I liked the idea of a compact version, but I thought that the logo was kind of difficult to see in your mockup. I made my own version which has a smaller logo and omits the top two lines of text. Let me know what you think.

@johanneskoester - will have a play at making this HTML + JS only now. Should be doable I think.

[kyleabeauchamp]

This looks great. IMHO I would replace "See:" with "See". E.g. delete the colon.

[ewels]

Ok, just updated the URL with a version with is now a single HTML file and fully standalone (needs no server backend). @johanneskoester - if you're happy with it, should be possible to put wherever you think appropriate. I'll also leave it at the above URL for the foreseeable future.

I created a gist with the code here: https://gist.github.com/ewels/20814963119c80f545a88950ec6b4a4e

@kyleabeauchamp: I'm inclined to agree. Not sure I can be bothered to regenerate the images though..

[tomkinsc]

Awesome! Looks great, @ewels! Do you have the original SVG (er...Illustrator) files (with text as text, not paths), in case we want to make changes?

I still like the idea of a more compact version, though I do like yours as well—can't hurt to have another variant, right? I may add a compact version once the generator page has been merged in. I may also extend the JS to generate png images in addition to the SVGs.

@johanneskoester: Wherever the page ends up, can we place it in a subdirectory in case we want to include additional web assets alongside it?

Here's a quick-and-dirty revision that remove the colon by simply deleting the element from the DOM: https://gist.github.com/tomkinsc/3353f5447d699d0957b6c2c471b57cc6

[ewels]

@tomkinsc: All sounds great! I think that there's an editable file for one of them in the zip file right up in the first comment.. This zip file. None for the others sorry, I just moved the expanded text around.

[johanneskoester]

Great work, thanks! I have noticed two remaining showstoppers:

1. when you scale the svg, the command line does not scale. It seems to have a fixed font size.
2. At least in firefox, it is not straightforward to download the SVG from the page. Can you add a link, that contains the file base64-encoded in a download tag?

Apart from that one minor request: can the command line be formatted in a monospace font?

[ewels]

Hmm, sounds like there is some system dependent stuff going on here.

1. The text scales normally for me. Will have to look into it.
2. Yeah this is more difficult than I expected. Will add a download trigger.
3. The command line is already formatted in a monospace font for me, so this probably means that you don't have the font (Monaco). It uses a regular CSS font stack though, so I can add some backups.

[tomkinsc]

I'm actually reworking the page as we speak, so I can try to address these things!

[ewels]

Ok great! I'll leave it alone for now then so that we don't duplicate each other's work.

[tomkinsc]

Ok, the page is proposed in PR #2227. I wasn't sure of the best place to put it, but docs/_static/ seemed reasonable. @johanneskoester, would you suggest a different location? I did have to remove _* from the .gitignore file for docs/.

[ewels]

Brilliant! Sounds like it is a lot more robust now 😀

[johanneskoester]

Yep, perfect! Feel free to merge. Thanks Chris and Phil for putting this together!

[tomkinsc]

It's now live here: https://bioconda.github.io/_static/badge-generator/

[ewels]

Great, works like a dream! 👍

Agh, sorry to be annoying and wait for the merge already, but just noticed that for me, some of the PNG exports come out squashed:

[tomkinsc]

Hmm...what browser (flavor, and version) and platform are you running? Are all of the pngs squashed, or only some subset?

[ewels]

Chrome Version 52.0.2743.116 (64-bit) OSX. SVGs are fine, some PNGs are squashed. Full set:

Wrapped image embeds in a <kbd> tag in these comments so that you can see the image boundaries.

[tomkinsc]

I'm on Chrome 51.0.2704.106 (64-bit) on OSX. I guess I'll update and see if I can replicate.

This line is probably the one to change (along with its corresponding height line), with some variant of svgElement.getBBox().width or maybe svgElement.getBoundingClientRect().width.

Now that I think about it, the png images should probably also be modified after rendering to trim whitespace from the righthand side.

[tomkinsc]

I'm now on the same version of Chrome as you, @ewels, 52.0.2743.116 (64-bit), on OSX 10.11.6, and the PNGs are still rendering OK for me. Strange. Do you see the squashing using incognito mode as well?

[ewels]

Weird! Yes, same thing in incognito. OSX 10.11.6 in case that could make any difference. Interestingly I just tried it on my iPhone 6 (Safari) and got the same thing, though even more extreme.

The SVGs are fine though, and browser display is fine so it's pretty obvious that it's happening.

Phil

[tomkinsc]

I can reproduce it on iOS. Not quite sure of the best fix given available time; I could use help from the group if there are any javascript wizards among us.