60 lines
3.1 KiB
Markdown
60 lines
3.1 KiB
Markdown
---
|
||
Title: Use termtosvg to screencast your terminal
|
||
Date: 2019-04-24 17:01+5:30
|
||
Author: Fabrice
|
||
Category: software
|
||
Tags: termtosvg
|
||
Slug: termtosvg
|
||
Header_Cover: images/covers/alcatraz-time-square.jpg
|
||
Summary: Record your terminal in animated svg. But beware, this page could give a hard time to CPU to render.
|
||
Lang: en
|
||
---
|
||
|
||
A terminal contains only text information (if we except exploits such as [w3m](http://w3m.sourceforge.net/)).
|
||
Therefore, it is common to just paste those term information when it comes to show some CLI behaviour.
|
||
|
||
However, once the Pandora box of terminals is opened, yet another world reveals itself: [ncurse](https://www.gnu.org/software/ncurses/).
|
||
It is common to represent static elements with it using a screenshot, however as I already complained about it in [another post]({filename}/tips/latex-adblock.md).
|
||
It is not a fully satisfactory solution as we also loose all the text information, and it is thus impossible to copy a part of the screen content without typing it again (or [OCR](https://www.gnu.org/software/ncurses/)ise the screenshot?).
|
||
|
||
[Nicolas Bedos](https://github.com/nbedos) comes with a solution for this named [termtosvg](https://nbedos.github.io/termtosvg/).
|
||
This small python program is available on `pip` as well as [github](https://nbedos.github.io/termtosvg/).
|
||
|
||
It’s quite straighforward to use, just invoke it in your favorite terminal emulator:
|
||
```sh
|
||
termtosvg
|
||
```
|
||
and it will save the resulting image in your temporary folder.
|
||
You can also specify a target file, the geometry of the terminal you want to save, the [template](https://nbedos.github.io/termtosvg/pages/templates.html), etc.
|
||
|
||
A simple example:
|
||
```sh
|
||
termtosvg -g "82x19" -t progress_bar
|
||
```
|
||
produces
|
||
|
||
<object data="/examples/termtosvg-sl.svg" width="100%">termtosvg: sl</object>
|
||
|
||
Then you can simply embed it on your webpage as an example:
|
||
```html
|
||
<object data="/examples/termtosvg-sl.svg">replacement text</object>
|
||
```
|
||
|
||
**Warning:** The resulting file is saved with read rights only to the owner of the file. Don’t forget to fix this before uploading the file. Doing otherwise may lead you to some surprises.
|
||
|
||
**Remark:** tested on firefox: you can also embed it as an image, but then you loose interactions and the possibility to select text, as you can see in the following example I used in [this post]({filename}/cheat-sheets/git.md) produces by
|
||
```sh
|
||
termtosvg -g "82x30" -t window_frame_js
|
||
```
|
||
|
||
<center>
|
||
|
||
An example of broken decorations
|
||
</center>
|
||
|
||
To conclude, this method is still young and not yet perfect (especially, web browsers are not optimized for it yet, and firefox is showing me some reluctance to render those animations sometimes), but it is an interesting way to show some interactive contents in a terminal (which is not just a [text game](https://en.wikipedia.org/wiki/Text-based_game)).
|
||
It seems to be doable to synchronize the content of it with sound using javascript embedding in SVGs to produce a full-fledged [screencast](http://vimcasts.org/) with selectable content, but may require some works not to mess up synchronizations.
|
||
|
||
<!-- vim: spl=en
|
||
-->
|