f1lt3r/ansi-to-svg

😹 convert ANSI Escaped CLI strings to SVGs

Hello, World! 👋

PROFILE: I have been developing websites for 20 years, and hybrid mobile apps for 8 years. I have been instrumental in applying monorepos, cloud platforms, BDD, and DevOps to build architecture that empowers multiple engineering teams to ship a wide array of products with a unified methodology. I have led web engineering teams through the scaling journey from initial implementation, to serving the majority of K-12 classrooms in America.

• 🌱 I’m currently learning how to grow my own food.
• 🤔 I’m looking for help with long-term maintenance of React Workspaces
• 📫 How to reach me: LinkedIn

Code/Projects 👨‍💻

• ⚛️ React Workspaces Playground - Zero Config React Monorepos with Yarn Workspaces, Lerna and Storybook.
• 🏁 Markserv - Serve markdown as html (GitHub style), index directories, live-reload as you edit.
• 💲 Bitcoin Chart Scraper - Scape the entire history of BitStamp's Bitcoin charts.
• 💾 Dvorak Programmers Tutorial - An Interactive cli tutorial for Programmers Dvorak
• 🦅 Chromafi - CLI syntax highlighting: any function - any object - 176 languages.
• 🍀 Carlton Quadtree - An infinitely divisible quad tree implementation with visualizations.

Blog Posts ✍

• TypeScript?.. or JavaScript?

  To draw an analogy, JavaScript is a jump-jet and TypeScript is an aircraft carrier; And even though TypeScript is safe, it’s still not safe enough to run a nuclear power plant.

• Roll Your Own Math - Sine and Cosine

  For years I have been using JavaScript’s Math.sin() and Math.cos() to create games, animations and interactive graphs on the element. But how do Sine and Cosine work? I had to know…

Resume

Resume-Alistair-MacDonald-2020-08-v3.pdf

ansi-to-svg's Issues

doesn't support spaces and multiple SGR attribute.

The current version struggles with this terminal output:

• terminal.txt

It should look like this:

but there are two issues preventing this output:

multiple SGR attributes

Select Graphic Rendition (SGR) parameters do support "several attributes {...} in the same sequence, separated by semicolons".
e.g.: \x[32;1m for bold+green. But ansi-to-svg fails to recognize them.

workaround for multi-SGR

split them into multiple individual ANSI SGR escape sequence:

sed -r 's@(\x1b\[)([[:digit:]]+);([[:digit:]]+)(m)@\1\3\4\1\2\4@g' terminal.txt > sgr-fixed.txt

spaces

There are a few issues with the way spaces are handled:

1. string of spaces between text are pasted verbatim in the output SVG. The trouble is that SVG, just like HTML (And markdown) doesn display multiple space but considers them as a single separator and and displays one blank them. Thus:

          72_UK                      78_UK                      92_UK                      93_UK                      76_SA                      77_EU                     
   

   gets renderered as: 72_UK 78_UK 92_UK 93_UK 76_SA 77_EU
2. even if the SVG <text> boxes start at fixed X coordinates, the left-most text still has the leading space spaces left. Somewhat luckily the above bug cancels out this bug and thus it doesn't affect the output much (until one tries the workaround. then it need fixing).

   <text x="84.01" y="14.55">          72_UK
   

   should be:

   <text x="84.01" y="14.55">72_UK
   

   (but both render the same, until workaround is used).
3. harmless cosmetic: there are useless spaces at the end of SVG </text> blocks:

   77_EU                     </text>
   

   could also be written

   77_EU</text>
   

   (but they are both synonymous and render the same).

workaround for space

One needs to:

1. use non-breaking spaces (e.g.: \u00A0) in the SVG output for string of multiple space.
2. remove leading spaces (because now the non-breaking spaces cause the text to shift around, even if the <text>block is already shifted using coordinates).
3. (optionnally) remove trailing space at the end of a block.

sed command:

sed -r 's@ +(</text)@\1@g;s@> +([[:alnum:]])@>\1@g;s@  @\xC2\xA0\xC2\xA0@g;s@\xC2\xA0 @\xC2\xA0\xC2\xA0@g' terminal.svg > fixedspaces.svg

link base16-flat-dark-f1lt3r-256.itermcolors return 404 error

Hi,
Nice work.
In readme.md link https://github.com/F1LT3R/ansi-to-svg/blob/master/fxitures/base16-flat-dark-f1lt3r-256.itermcolors return 404 error.
Where it's located now?

first spaces are dropped

As you can see my ansi string have some spaces before numbers or fruits names

^[[90m┌──────┬────────────────────┬──────────┐^[[39m
^[[90m│^[[39m     1^[[90m│^[[39m               apple^[[90m│^[[39m      $1.2^[[90m│^[[39m
^[[90m│^[[39m    12^[[90m│^[[39m              banana^[[90m│^[[39m    $17.76^[[90m│^[[39m
^[[90m│^[[39m   145^[[90m│^[[39m              orange^[[90m│^[[39m   $154.23^[[90m│^[[39m
^[[90m│^[[39m  1243^[[90m│^[[39m                kiwi^[[90m│^[[39m   $1232.2^[[90m│^[[39m
^[[90m└──────┴────────────────────┴──────────┘^[[39m

the spaces are after the words not before on the svg result