Home → Suggestions →

Minor suggestion for status badges - include branch name in SVG

• Edit

Lilith River

23 Nov, 2014 11:09 PM

Status badges are great, but adding one for each popular branch can get tedious (and is very ugly, due to vertical alignment).

Waffle allows users to customize the SVG text contents:
https://badge.waffle.io/imazen/resizer.png?label=ready&title=Is...

Looking at the SVG source for two different 'title' values, I saw that only x and width attributes were changing, along with the text itself. I assume a fixed-character-width calculation is used, as the container does not grow perfectly with the text size.

I feel slightly bad for even suggesting something this minor, but it would make it easier to display a compact row of branch status badges.

1. Support Staff 1 Posted by Feodor Fitsner on 25 Nov, 2014 02:58 AM

   

   I've been thinking about using GDI.

   -Feodor

   • Edit

2. 2 Posted by Lilith River on 25 Nov, 2014 10:30 AM

   

   GDI+ on the server is nasty. Many operations create a process-wide lock. In particular, the text rendering support is very poor. ImageResizer is moving away from GDI+ as soon as possible.

   Are there particular issues with using SVG? Browser support is great.

   • Edit

3. Support Staff 3 Posted by Feodor Fitsner on 25 Nov, 2014 02:43 PM

   

   I mean how would you calculate total width of SVG image then?

   -Feodor

   • Edit

4. Support Staff 4 Posted by Feodor Fitsner on 25 Nov, 2014 02:49 PM

   

   Ah, I see it's fixed character width.

   -Feodor

   • Edit

5. Support Staff 5 Posted by Feodor Fitsner on 25 Nov, 2014 11:25 PM

   

   OK, did so you can specify any text for failing, success and pending statuses. Looks like attached.

   Will deploy later today.

   • successful-build-badge.png 3.8 KB
   • Edit

6. 6 Posted by Lilith River on 26 Nov, 2014 02:49 PM

   

   Fantastic! What are the querystring keys?

   • Edit

7. Support Staff 7 Posted by Feodor Fitsner on 26 Nov, 2014 05:56 PM

   

   Sure, it's passingText, failingText and pendingText parameters.

   For example: https://ci.appveyor.com/api/projects/status/jv0bm93plpu8gbqa?svg=tr...

   Works for SVG only (for now).

   • Edit

8. 8 Posted by Mickey Rose on 07 Feb, 2016 12:17 PM

   

   Could you also make the buildText on grey background customizable, please?
   - e.g. by default badge is {<icon> build | passing} - when I use passingText=branch:ok, badge is {<icon>| branch:ok} - I'd like to use buildText=branch&passingText=ok, and get {<icon> branch | ok}

   • Edit

9. Ilya Finkelshteyn closed this discussion on 25 Aug, 2018 02:04 AM.