new article: termtosvg

content/software/termtosvg-fr.md

@@ -0,0 +1,58 @@
+---
+Title: termtosvg pour enregister vos terminaux
+Date: 2019-04-24 17:01+5:30
+Author: Fabrice
+Category: programmes
+Tags: termtosvg
+Slug: termtosvg
+Header_Cover: ../images/covers/alcatraz-time-square.jpg
+Summary: Enregistrer le contenu de vos terminaux en svg animés.
+Lang: fr
+---
+
+Un terminal ne contient que du texte (si on excepte les hacks utilisés dans [w3m](http://w3m.sourceforge.net/)).
+Ainsi, lorsqu’on souhaite illustrer le comportement d’un programme en ligne de commande, il est commun de simplement en coller le résultat.
+
+Mais une fois la boîte de Pandore des terminaux est ouverte, un autre monde s’offre à nous : [ncurse](https://www.gnu.org/software/ncurses/).
+Pour représenter ces structures plus farfelues, on en vient souvent à recourir aux captures d’écrans.
+Si cette solution est pratique, je me suis [déjà plains]({filename}/tips/latex-adblock-fr.md) de ses limitations.
+En effet, toute l’information de texte se perd dans la rastérisation, et il devient alors impossible de sélectionner du texte (à moins de passer par un [ROC](https://fr.wikipedia.org/wiki/Reconnaissance_optique_de_caract%C3%A8res), un pic ou une péninsule ?).
+
+Toutefois, [Nicolas Bedos](https://github.com/nbedos) nous propose un outil dénommé [termtosvg](https://nbedos.github.io/termtosvg/).
+Ce petit programme python est disponible dans `pip` ainsi que sur [github](https://nbedos.github.io/termtosvg/).
+
+Son utilisation est assez directe : il suffit de l’invoquer dans notre émulateur de terminal favoris,
+```sh
+termtosvg
+```
+et le résultat est automatiquement sauvegardé dans un dossier temporaire.
+Il est aussi possible de spécifier directement le fichier cible, la géométrie du terminal à simuler, un [canevas](https://nbedos.github.io/termtosvg/pages/templates.html), etc.
+
+Un exemple simple:
+```sh
+termtosvg -g "82x19" -t progress_bar
+```
+
+qui nous donne
+
+<object data="/examples/termtosvg-sl.svg" width="100%">termtosvg : sl</object>  
+
+Ensuite, il suffit d’inclure l’animation dans votre page web pour la présenter:
+```html
+<object data="/examples/termtosvg-sl.svg">texte de remplacement</object>  
+```
+
+**Remarque:** testé dans firefox: vous pouvez aussi directement inclure le svg animé en tant qu’image, mais cela retire la possibilité d’y faire des sélections, et casse certaines fonctionnalités, comme le javascript intrégré.
+Vous pouvez le voir dans cet exemple, déjà inclus dans un [précédent billet]({filename}/cheat-sheets/git-fr.md), produit par :
+```sh
+termtosvg -g "82x30" -t window_frame_js
+```
+
+<center>
+![Image embedding]({static}/examples/git-cv.svg)  
+Un exemple de décorations cassées
+</center>
+
+Pour conclure ce billet, on peut dire que cette méthode est encore trop jeune et loin d’être parfaite (en particulier les navigateurs ne sont pas du tout optimisés pour ce format, et firefox se montrait parfois réticent à afficher ces animations).
+Mais ça reste une technique intéressante qui mérite d’être promue pour montrer des contenus interactifs, après tout un terminal n’est pas juste un [jeu textuel](https://fr.wikipedia.org/wiki/Text-based_game).
+Je pense qu’il est faisable d’aller encore plus loin en synchronisant de l’audio avec l’animation à l’aide du javascript intégré dans le SVG pour produire une vraie [vidéo](http://vimcasts.org/) avec du contenu sélectionnable, mais cela reste une théorie pour le moment, et demandera un peu de technicité au niveau de la synchronisation.

content/software/termtosvg.md

@@ -0,0 +1,57 @@
+---
+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.
+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]({static}/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>  
+```
+
+**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>
+![Image embedding]({static}/examples/git-cv.svg)  
+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
+-->