Termtosvg is een Unix terminal recorder geschreven in Python die jouw opdrachten weergeeft als zelfstandige SVG-animaties.
Kenmerken
dany@pindabook:~$ sudo apt install termtosvg
[sudo] wachtwoord voor dany:
Pakketlijsten worden ingelezen... Klaar
Boom van vereisten wordt opgebouwd... Klaar
De statusinformatie wordt gelezen... Klaar
De volgende extra pakketten zullen geïnstalleerd worden:
python3-bs4 python3-html5lib python3-lxml python3-pyte python3-soupsieve python3-wcwidth python3-webencodings
Voorgestelde pakketten:
python3-genshi python-lxml-doc python-pyte-doc
De volgende NIEUWE pakketten zullen geïnstalleerd worden:
python3-bs4 python3-html5lib python3-lxml python3-pyte python3-soupsieve python3-wcwidth python3-webencodings termtosvg
0 opgewaardeerd, 8 nieuw geïnstalleerd, 0 te verwijderen en 0 niet opgewaardeerd.
Er moeten 1.611 kB aan archieven opgehaald worden.
Na deze bewerking zal er 10,0 MB extra schijfruimte gebruikt worden.
Wilt u doorgaan? [J/n]
Ophalen:1 http://deb.debian.org/debian bookworm/main amd64 python3-soupsieve all 2.3.2-1 [38,8 kB]
Ophalen:2 http://deb.debian.org/debian bookworm/main amd64 python3-bs4 all 4.11.2-2 [121 kB]
Ophalen:3 http://deb.debian.org/debian bookworm/main amd64 python3-webencodings all 0.5.1-5 [11,1 kB]
Ophalen:4 http://deb.debian.org/debian bookworm/main amd64 python3-html5lib all 1.1-3 [93,0 kB]
Ophalen:5 http://deb.debian.org/debian bookworm/main amd64 python3-lxml amd64 4.9.2-1+b1 [1.194 kB]
Ophalen:6 http://deb.debian.org/debian bookworm/main amd64 python3-wcwidth all 0.2.5+dfsg1-1.1 [21,4 kB]
Ophalen:7 http://deb.debian.org/debian bookworm/main amd64 python3-pyte all 0.8.0-2 [28,7 kB]
Ophalen:8 http://deb.debian.org/debian bookworm/main amd64 termtosvg all 1.1.0+dfsg-4 [103 kB]
1.611 kB opgehaald in 0s (9.078 kB/s)
Voorheen niet geselecteerd pakket python3-soupsieve wordt geselecteerd.
(Database wordt ingelezen ... 173836 bestanden en mappen momenteel geïnstalleerd.)
Uitpakken van .../0-python3-soupsieve_2.3.2-1_all.deb wordt voorbereid...
Bezig met uitpakken van python3-soupsieve (2.3.2-1) ...
Voorheen niet geselecteerd pakket python3-bs4 wordt geselecteerd.
Uitpakken van .../1-python3-bs4_4.11.2-2_all.deb wordt voorbereid...
Bezig met uitpakken van python3-bs4 (4.11.2-2) ...
Voorheen niet geselecteerd pakket python3-webencodings wordt geselecteerd.
Uitpakken van .../2-python3-webencodings_0.5.1-5_all.deb wordt voorbereid...
Bezig met uitpakken van python3-webencodings (0.5.1-5) ...
Voorheen niet geselecteerd pakket python3-html5lib wordt geselecteerd.
Uitpakken van .../3-python3-html5lib_1.1-3_all.deb wordt voorbereid...
Bezig met uitpakken van python3-html5lib (1.1-3) ...
Voorheen niet geselecteerd pakket python3-lxml:amd64 wordt geselecteerd.
Uitpakken van .../4-python3-lxml_4.9.2-1+b1_amd64.deb wordt voorbereid...
Bezig met uitpakken van python3-lxml:amd64 (4.9.2-1+b1) ...
Voorheen niet geselecteerd pakket python3-wcwidth wordt geselecteerd.
Uitpakken van .../5-python3-wcwidth_0.2.5+dfsg1-1.1_all.deb wordt voorbereid...
Bezig met uitpakken van python3-wcwidth (0.2.5+dfsg1-1.1) ...
Voorheen niet geselecteerd pakket python3-pyte wordt geselecteerd.
Uitpakken van .../6-python3-pyte_0.8.0-2_all.deb wordt voorbereid...
Bezig met uitpakken van python3-pyte (0.8.0-2) ...
Voorheen niet geselecteerd pakket termtosvg wordt geselecteerd.
Uitpakken van .../7-termtosvg_1.1.0+dfsg-4_all.deb wordt voorbereid...
Bezig met uitpakken van termtosvg (1.1.0+dfsg-4) ...
Instellen van python3-webencodings (0.5.1-5) ...
Instellen van python3-wcwidth (0.2.5+dfsg1-1.1) ...
Instellen van python3-pyte (0.8.0-2) ...
Instellen van python3-html5lib (1.1-3) ...
Instellen van python3-lxml:amd64 (4.9.2-1+b1) ...
Instellen van python3-soupsieve (2.3.2-1) ...
Instellen van python3-bs4 (4.11.2-2) ...
Instellen van termtosvg (1.1.0+dfsg-4) ...
Bezig met afhandelen van triggers voor man-db (2.11.2-2) ...
Termtosvg gebruiken is super eenvoudig.
De opdracht termtosvg uitvoeren en je op te nemen opdrachten uitvoeren.
De opname stop je door met de sneltoets Ctrl+d.
De opname wordt opgeslagen in de /tmp/ map.
Als voorbeeld gaan we een opname maken van het gebruik van termtosvg.
De eerste termtosvg opdracht maakt de opname die je hieronder ziet.
De tweede termtosvg opdracht maakt deel uit van de opname zelf.
dany@pindabook:~$termtosvgRecording started, enter "exit" command or Control-D to end dany@pindabook:~$termtosvgRecording started, enter "exit" command or Control-D to end
Door de sneltoets Ctrl+d te gebruiken, stop je de laatst uitgevoerde termtosvg opdracht.
dany@pindabook:~$ exit Rendering ended, SVG animation is /tmp/termtosvg_n5g8qqly.svg
Door de tweede termtosvg met Ctrl+d af te sluiten, wordt de opname van termtosvg gestopt.
Bij het stoppen van de opname wordt deze opgeslagen in de map /tmp/ met een willekeurige naam die op het scherm verschijnt.
Kopieer de aangemaakte SVG-animatie naar een ander map met een andere naam.
dany@pindabook:~$
exit
Rendering ended, SVG animation is /tmp/termtosvg_pa01e5lh.svg
dany@pindabook:~$ cp /tmp/termtosvg_pa01e5lh.svg Downloads/test.svg
Het resultaat kan je bekijken in een browser.
Met behulp van sjablonen (templates) kan je bijvoorbeeld een vensteromgeving toevoegen, een ander kleurenschema gebruiken en een bedieningspaneel toevoegen. Alle meegeleverde sjablonen staan in een map:
dany@pindabook:~$ ls /usr/share/termtosvg/data/templates/
base16_default_dark.svg progress_bar.svg window_frame_js.svg
dracula.svg putty.svg window_frame_powershell.svg
gjm8_play.svg solarized_dark.svg window_frame.svg
gjm8_single_loop.svg solarized_light.svg xterm.svg
gjm8.svg terminal_app.svg
powershell.svg ubuntu.svg
Standaard gebruikt termtosvg het sjabloon base16_default_dark.
Om een ander sjabloon te gebruiken, gebruik je de optie -t gevolgd door de naam van het sjabloon (zonder .svg).
De beste manier om ze te leren kennen, is ze uitproberen.
Het volgende voorbeeld gebruikt een sjabloon met een vensteromgeving (pure decoratie) en een bedieningspaneel.
dany@pindabook:~$termtosvg -t window_frame_jsRecording started, enter "exit" command or Control-D to end dany@pindabook:~$termtosvg -t window_frame_jsRecording started, enter "exit" command or Control-D to end
Druk tweemaal op de sneltoets Ctrl+d om beide termtosvg opdrachten af te sluiten (demo en opname).
ddany@pindabook:~$
exit
Rendering ended, SVG animation is /tmp/termtosvg_v9qaw8bl.svg
dany@pindabook:~$
exit
Rendering ended, SVG animation is /tmp/termtosvg_2nrgs3lx.svg
dany@pindabook:~$ cp /tmp/termtosvg_2nrgs3lx.svg Downloads/test.svg
De laatste opdracht kopieert de opname naar de map Downloads. Dit is het resultaat:
De vorige opname is prachtig, maar de kleuren komen niet overeen met deze van de Konsole met het standaard KDE Breeze thema. Dit gaan we corrigeren. Eest kopiëren we het sjabloon naar een werkmap:
dany@pindabook:~$ cp /usr/share/termtosvg/data/templates/window_frame_js.svg Downloads/kde_breeze.svg
Met een editor (bijv. nano) open je het te bewerken sjabloon:
dany@pindabook:~$ nano Downloads/kde_breeze.svg
Als je gewenste kleurencodes van KDE Breeze Konsole hebt achterhaald kan je de volgende regels aanpassen van:
gjm8 color theme (source: https://terminal.sexy/) */
.foreground {fill: #c5c5c5;}
.background {fill: #1c1c1c;}
.color0 {fill: #1c1c1c;}
.color1 {fill: #ff005b;}
.color2 {fill: #cee318;}
.color3 {fill: #ffe755;}
.color4 {fill: #048ac7;}
.color5 {fill: #833c9f;}
.color6 {fill: #0ac1cd;}
.color7 {fill: #e5e5e5;}
.color8 {fill: #1c1c1c;}
.color9 {fill: #ff005b;}
.color10 {fill: #cee318;}
.color11 {fill: #ffe755;}
.color12 {fill: #048ac7;}
.color13 {fill: #833c9f;}
.color14 {fill: #0ac1cd;}
.color15 {fill: #e5e5e5;}
Naar
Konsole Breeze colors */
.foreground {fill: #fcfcfc;}
.background {fill: #232627;}
.color0 {fill: #232627;}
.color1 {fill: #ed1515;}
.color2 {fill: #11d116;}
.color3 {fill: #f67400;}
.color4 {fill: #1d99f3;}
.color5 {fill: #9b59b6;}
.color6 {fill: #1abc9c;}
.color7 {fill: #fcfcfc;}
.color8 {fill: #7f8c8d;}
.color9 {fill: #c0392b;}
.color10 {fill: #1cdc9a;}
.color11 {fill: #fdbc4b;}
.color12 {fill: #3daee9;}
.color13 {fill: #8e44ad;}
.color14 {fill: #16a085;}
.color15 {fill: #ffffff;}
En maken we een testopname:
dany@pindabook:~$ termtosvg -t Downloads/kde_breeze.svg
Recording started, enter "exit" command or Control-D to end
Stoppen de opname met Ctrl+d.
dany@pindabook:~$
exit
Rendering ended, SVG animation is /tmp/termtosvg_j0prz92a.svg
dany@pindabook:~$ cp /tmp/termtosvg_j0prz92a.svg Downloads/test.svg
En bekijken het resultaat:
Met wat SVG kennis, kan je zelf sjablonen maken of bestaande sjablonen aanpassen. Om bijvoorbeeld de enkel decoratieve vensteromgeving te verwijderen, beginnen we met het verwijderen van de drie titelbalkknoppen door het verwijderen van de drie volgende regels in ons werksjabloon van daarstraks:
<circle cx="24" cy="23" r="7" class="color1"/>
<circle cx="44" cy="23" r="7" class="color3"/>
<circle cx="64" cy="23" r="7" class="color2"/>
Nu de titelbalkpictogrammen weg zijn, kunnen we de zwarte (venster)randen verwijderen, door de hoogte en de breedte van het SVG canvas in de eerste regel van het sjabloon aan te passen van
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 703 469" width="703" version="1.1">
Naar
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 656 370" width="656" version="1.1">
Na de titelbalkpictogrammen en vensterranden weg zijn, schuiven we het terminal venster (screen) naar boven en naar links door de x- en y-positie op nul te zetten (of te verwijderen). Pas in het sjabloon de regel met de positie van het terminal venster aan van
<svg id="screen" width="656" height="323" x="23" y="50" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin slice">
Naar
<svg id="screen" width="656" height="323" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin slice">
Een testopname met het aangepaste sjabloon ziet er nu als volgt uit:
Dit aangepaste sjabloon kan je hier downloaden.
Om een SVG animatie aan een webpagina toe te voegen, gebruik je best een object. Bijvoorbeeld:
<object data="test.svg" type="image/svg+xml" alt="Zonder venster"> <img src="vangnet.png" /> </object>
Het gebruik van objecten voor SVG animaties heeft als voordeel dat je er meer dan één kunt plaatsen en dat je een vervangende afbeelding kunt voorzien voor browsers die SVG animaties blokkeren.
Termtosvg kunnen we in de terminal verwijderen met de opdracht:
dany@pindabook:~$ sudo apt purge termtosvg
[sudo] wachtwoord voor dany:
Pakketlijsten worden ingelezen... Klaar
Boom van vereisten wordt opgebouwd... Klaar
De statusinformatie wordt gelezen... Klaar
De volgende pakketten zijn automatisch geïnstalleerd en zijn niet langer nodig:
linux-image-6.1.0-12-amd64 python3-bs4 python3-html5lib python3-lxml python3-pyte python3-soupsieve python3-wcwidth
python3-webencodings
Gebruik 'sudo apt autoremove' om ze te verwijderen.
De volgende pakketten zullen VERWIJDERD worden:
termtosvg*
0 opgewaardeerd, 0 nieuw geïnstalleerd, 1 te verwijderen en 0 niet opgewaardeerd.
Na deze bewerking zal er 3.082 kB schijfruimte vrijkomen.
Wilt u doorgaan? [J/n]
(Database wordt ingelezen ... 179111 bestanden en mappen momenteel geïnstalleerd.)
termtosvg (1.1.0+dfsg-4) wordt verwijderd ...
Bezig met afhandelen van triggers voor man-db (2.11.2-2) ...
Om ook de niet meer gebruikte afhankelijke pakketten te verwijderen, voer je de volgende opdracht uit:
dany@pindabook:~$ sudo apt autoremove
Pakketlijsten worden ingelezen... Klaar
Boom van vereisten wordt opgebouwd... Klaar
De statusinformatie wordt gelezen... Klaar
De volgende pakketten zullen VERWIJDERD worden:
linux-image-6.1.0-12-amd64 python3-bs4 python3-html5lib python3-lxml python3-pyte python3-soupsieve python3-wcwidth
python3-webencodings
0 opgewaardeerd, 0 nieuw geïnstalleerd, 8 te verwijderen en 0 niet opgewaardeerd.
Na deze bewerking zal er 415 MB schijfruimte vrijkomen.
Wilt u doorgaan? [J/n]
(Database wordt ingelezen ... 179037 bestanden en mappen momenteel geïnstalleerd.)
linux-image-6.1.0-12-amd64 (6.1.52-1) wordt verwijderd ...
/etc/kernel/postrm.d/initramfs-tools:
update-initramfs: Deleting /boot/initrd.img-6.1.0-12-amd64
/etc/kernel/postrm.d/zz-update-grub:
Generating grub configuration file ...
Found background image: /usr/share/images/desktop-base/desktop-grub.png
Found linux image: /boot/vmlinuz-6.1.0-14-amd64
Found initrd image: /boot/initrd.img-6.1.0-14-amd64
Found linux image: /boot/vmlinuz-6.1.0-13-amd64
Found initrd image: /boot/initrd.img-6.1.0-13-amd64
Warning: os-prober will not be executed to detect other bootable partitions.
Systems on them will not be added to the GRUB boot configuration.
Check GRUB_DISABLE_OS_PROBER documentation entry.
Adding boot menu entry for UEFI Firmware Settings ...
done
python3-bs4 (4.11.2-2) wordt verwijderd ...
python3-html5lib (1.1-3) wordt verwijderd ...
python3-lxml:amd64 (4.9.2-1+b1) wordt verwijderd ...
python3-pyte (0.8.0-2) wordt verwijderd ...
python3-soupsieve (2.3.2-1) wordt verwijderd ...
python3-wcwidth (0.2.5+dfsg1-1.1) wordt verwijderd ...
python3-webencodings (0.5.1-5) wordt verwijderd ...