blog/content/software/termtosvg-fr.md

61 lines
3.7 KiB
Markdown
Raw Normal View History

2019-04-24 18:06:30 +00:00
---
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
2019-04-24 19:16:41 +00:00
Summary: Enregistrer le contenu de vos terminaux en svg animés. Attention, cette page peut être assez lourde (calculatoirement parlant) à charger.
2019-04-24 18:06:30 +00:00
Lang: fr
---
Un terminal ne contient que du texte (si on excepte les hacks utilisés dans [w3m](http://w3m.sourceforge.net/)).
Ainsi, lorsquon souhaite illustrer le comportement dun 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 soffre à 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 linformation 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 linvoquer 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 dinclure lanimation dans votre page web pour la présenter:
```html
<object data="/examples/termtosvg-sl.svg">texte de remplacement</object>
```
2019-04-24 18:12:10 +00:00
**Attention:** Le résultat est enregistré avec les droits de lecture pour le propriétaire seul, pensez à régler ça avant de téléverser votre image pour éviter les surprises.
**Remarque:** Testé dans firefox: vous pouvez aussi directement inclure le svg animé en tant quimage, mais cela retire la possibilité dy faire des sélections, et casse certaines fonctionnalités, comme le javascript intrégré.
2019-04-24 18:06:30 +00:00
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 nest pas juste un [jeu textuel](https://fr.wikipedia.org/wiki/Text-based_game).
Je pense quil est faisable daller encore plus loin en synchronisant de laudio avec lanimation à laide 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.