Nástroják plný ASCII artu. Libo strom či schémátko?
Nástroják je nový nepravidelný seriál, který vás seznámí s hromadou užitečných nástrojů, jenž by neměly chybět ve vašich záložkách. První díl se bude věnovat šikovným udělátkům a pochystávkám zaměřujícím se na užitkový ASCII art.
Text je programátorovi něčím, čím je rybě voda. Plave v něm celý den. Pokud je to programátor český obecný, tak se často nejedná jen o ASCII, nýbrž o Unicode, to ale na věci nic nemění.
Vyjadřovací schopnosti textu se zdají být neomezené, ale často je potřebujeme rozšířit o nějaké to grafické vyjádření. Jenže tu narazíme na řadu problémů. Možná píšeme návod, který bude kolega číst na serveru připojený jen textovou konzolí a za každý přiložený obrázek nás prokleje. Anebo píšeme komentář do kódu, kam obrázek prostě vložit nejde. A v nejhorším případě máme na grafické editory vypěstovanou alergii.
A co teď?
Snadná pomoc, zkusíme si vystačit s textem, jen si s ním trochu pohrajeme. Následující ukázky si zaslouží zařazení mezi ASCII art, ovšem mají svou informační a užitkovou hodnotu, proto jsem si je dovolil označit za užitkový ASCII art.
Asciiflow – generujeme schémata
Nástroj Asciiflow umí vytvářet schémata jako to, které vidíte níže. Schéma vytváříte z obdélníků propojených čarami, resp. šipkami, a vloženého textu. Jde to jedna dvě, já si dával práci, aby tu obdélníky byly stejně veliké, tamhle písmo vycentrované atd. Při ruční tvorbě by na to nebyl čas, ale s tímhle nástrojem to zvládnete hravě.
Asciiflow je napsán v Javě pomocí Google Web Toolkitu, běží na Google Appengine a jeho zdrojové kódy najdete na GitHubu.
+------------+
| |
+---------------+ +---------| Stroj A |
| Náš projekt | | | |
|---------------| | +------------+
| | |
| * krok 1 | |
| * krok 2 |+-----++
| * zisk ! | |
| | |
+---------------+ |
| +------------+
| | |
+--------+| Stroj B |
| |
+------------+
ASCII Artist – kreslení na psacím stroji
ASCII Artist je rozšíření pro Google Chrome. Po nainstalování ho najdete na stránce aplikací chrome://apps/ . Kromě obdélníků a rovných čar umožnuje i kreslení kružnic, oválů a obecných křivek.
Mně se s ním osobně nepracovalo moc dobře, některé nástroje nefungovaly jak měly, např. funkce save (naštěstí zkopírování textového obsahu přes schránku funguje), takže jsem ho po odzkoušení opět odinstaloval, ale třeba budete mít větší štěstí.
Seqshark aneb textový internet
Seqshark je další rozšíření prohlížeče Chrome, které po instalaci najdete na stránce chrome://apps/ . Generuje schémata zasílání paketů po síti. Umí importovat PSML formát (Packet Summary Markup Language), který získáte např. snifferem Wireshark.
Sekvenci můžete editovat v následující textové podobě:
[1]Alice(192.168.1.1) | [2]Doroty(192.168.1.2) | [3]Wendy(192.168.2.1) | [4]Bob(192.168.2.2) |1 | |off hook 1|1->2|sip|INVITE 2|2->1|sip|100 Trying 3|2->3|sip|INVITE 4|3->2|sip|100 Trying 5|3->4|sip|INVITE 6|4->3|sip|180 Ringing 7|3->2|sip|180 Ringing 8|2->1|sip|180 Ringing 9|4->3|sip|200 OK 10|3->2|sip|200 OK 11|2->1|sip|200 OK 12|1->4|sip|ACK |4 | |on hook 13|4->1|sip|BYE 14|1->4|sip|200 OK
Z té Seqshark vygeneruje schéma:
+-----------------+ +-----------------+ +-----------------+ +-----------------+
| Alice | | Dorothy | | Wendy | | Bob |
| 192.168.1.1 | | 192.168.1.2 | | 192.168.2.1 | | 192.168.2.2 |
+-----------------+ +-----------------+ +-----------------+ +-----------------+
| | | |
.--------. | | |
|off hook| | | |
'--------' | | |
| 1. INVITE | | |
|------------------->| | |
| 2. 100 Trying | | |
|<-------------------| | |
| | 3. INVITE | |
| |------------------->| |
| | 4. 100 Trying | |
| |<-------------------| |
| | | 5. INVITE |
| | |------------------->|
| | | 6. 180 Ringing |
| | |<-------------------|
| | 7. 180 Ringing | |
| |<-------------------| |
| 8. 180 Ringing | | |
|<-------------------| | |
| | | 9. 200 OK |
| | |<-------------------|
| | 10. 200 OK | |
| |<-------------------| |
| 11. 200 OK | | |
|<-------------------| | |
| 12. ACK |
|------------------------------------------------------------->|
| | | .-------.
| | | |on hook|
| | | '-------'
| 13. BYE |
|<-------------------------------------------------------------|
| 14. 200 OK |
|------------------------------------------------------------->|
| | | |
TAAG – generátor nadpisů
Nadpis hovoří za vše. Pomocí TAAG (Text to ASCII Art Generator) můžete vygenerovat výtvarně naladěné nadpisy, jako je:
_____ _ _ _
/ _ / __| |_ __ ___ (_) __ _| | __ ___ ____
\// / / _` | '__/ _ \| |/ _` | |/ / / __|_ /
/ //| (_| | | | (_) | | (_| | < | (__ / /
/____/\__,_|_| \____/ |\__,_|_|\_(_\___/___|
|__/
nebo:
____ ____ ____ ____ ____ ____ ____ ____ ____ ____ ||Z |||d |||r |||o |||j |||a |||k |||. |||c |||z || ||__|||__|||__|||__|||__|||__|||__|||__|||__|||__|| |/__\|/__\|/__\|/__\|/__\|/__\|/__\|/__\|/__\|/__\|
anebo:
_/_/_/_/_/ _/ _/ _/
_/ _/_/_/ _/ _/_/ _/_/ _/_/_/ _/ _/
_/ _/ _/ _/_/ _/ _/ _/ _/ _/ _/_/
_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
_/_/_/_/_/ _/_/_/ _/ _/_/ _/ _/_/_/ _/ _/
_/
_/
TAAG obsahuje přes 300 ascii fontů, ve kterých umí váš text vyrenderovat. Nevýhodou je, že nepodporuje české znaky. Při jeho používání mějte na paměti, že všeho moc škodí. Dejte pozor, zda je výsledný nadpis dobře čitelný (u řady z oněch 300 fontů totiž není, vybral jsem ty lepší) a nezapomeňte, že váš kamarád počítač ASCII artu moc nerozumí a při grepování, resp. prohledávání textu, je nenajde, tak to moc nepřehánějte.
Tree aneb stromečky
Zobrazení stromové struktury v ASCII se hodí poměrně často. V případě stromečku systému souborů pomůže linuxový příkaz tree (do Windows ho dostanete pomocí cygwinu, na Mac pomocí Homebrew), který použjte s parametrem tree --charset ascii. Výsledek můžete bez obav vložit přímo do kódu, dokumentace apod.:
.
|-- apiclient
| |-- __init__.py
| |-- errors.py
| |-- http.py
| |-- sample_tools.py
| `-- schema.py
|-- httplib2
| |-- __init__.py
| `-- socks.py
|-- oauth2client
| |-- __init__.py
| |-- anyjson.py
| |-- appengine.py
| |-- util.py
| `-- xsrfutil.py
`-- uritemplate
`-- __init__.py
Můžete se o to přít, ale mně lépe vyhovuje lehce upravená varianta:
.
|-- apiclient
| |-- __init__.py
| |-- errors.py
| |-- http.py
| |-- sample_tools.py
| +-- schema.py
|
|-- httplib2
| |-- __init__.py
| +-- socks.py
|
|-- oauth2client
| |-- __init__.py
| |-- anyjson.py
| |-- appengine.py
| |-- util.py
| +-- xsrfutil.py
|
+-- uritemplate
+-- __init__.py
ASCII DOMeček aneb stromeček z DOMu
Další častou stromovou strukturou, se kterou pracujete, bude nejspíš DOM. K vygenerování ASCII DOMečku použijeme skript tree.js. Pro běžnou stránku s navigací a patičkou může vypadat třeba takto:
body.index
|-- nav.navbar navbar-default opal-nav
| |-- a
| | `-- img
| `-- div.container
| |-- div.navbar-header
| | `-- a.navbar-brand
| | |-- img
| | `-- #text
| `-- div.navbar-collapse collapse
| `-- ul.nav navbar-nav
| |-- li
| | `-- a
| | `-- #text
| `-- li
| `-- a
| `-- #text
|-- div.container
| |-- div.page-header
| | |-- img
| | |-- h1
| | | `-- #text
| | |-- p
| | | |-- b
| | | | `-- #text
| | | |-- #text
| | | |-- b
| | | | `-- #text
| | | `-- #text
| | |-- br
| | `-- a.btn btn-default
| | `-- #text
`-- footer
|-- a
| `-- #text
|-- #text
`-- a
`-- #text
Pravděpodobně nebudete potřebovat vypsat celý DOM, postačí vám nějaký podstrom. Strukturu vašich widgetů můžete např. dokumentovat takhle:
`-- div.widget
|-- strong
| `-- #label
|-- div
| `-- ... telo widgetu ...
`-- a
`-- #jmeno-autora
Skript tree.js jsem pro vás upravil do podoby bookmarkletu. Po spuštění vypíše do JS konzole strom celé stránky. Skript lze upravit, aby zobrazil jen vybraný podstrom, to vám už nechám za domácí úkol.
Závěr
A to je závěr prvního nástrojáku. Představil jsem vám ASCII nástroje, které znám. Dodám, že při práci s nimi oceníte textový editor podporující vertikální bloky (dnes už snad většina), což vám usnadní horizontální posun „grafických“ objektů.
A pokud znáte další nástroje, pochlubte se v komentářích.
Martin Hassman
Martin Hassman založil a řadu let vedl magazín Zdroják, absolvoval VŠCHT Praha, pořádal řadu konferencí, pomáhal s rozšířením otevřených technologií, byl u založení projektů CZilla, Dáme roušky a dalších. Vymyslel a dva roky vedl dobrovolnický projekt Movapp pod Česko.Digital. Nyní pracuje jako produktový manažer v datové platformě Golemio.cz.
Párkrát jsem použil editor JavE.
Je hezké, že to co má Emacs asi 20 (nebo 30 let) už sobě (artist-mode), máme konečně z Lispu přeportované do Javascriptu a běží to v prohlížeči. Pokrok se zkrátka nezastaví :-)
Já myslel, že v Emacsu už je dávno celý prohlížeč i s tím JavaScriptem 8-)
Na konverziu obrazkov do ASCII Ascgen 2
Příkaz tree není opravdu nutné do win instalovat přes cygwin, ale je tam nativně už od dob DOSu …
Tento článek docela dobře ukazuje slabiny mobilní verze Zdrojáku – zalamovává řádky zdrojáků. V případě tohoto článku nemám z ukázek vůbec nic.
Páni redaktoři, koukněte na to občas i z mobilu :-)
Jo, slabiny budou, ale dokud budeme číst převážně z desktopu, budeme napřed fixovat věci co se týkají i jeho. Zbytek až zbude čas a to bohužel spíš nezbývá 8-(
Přidám ještě jeden nástroj asciinema zaznamená práci ve vaší textové konzoli a udělá z ní video, které můžete sdíle https://asciinema.org/ Narazil jsem na ni díky http://stderr.cz/asciinema-youtube-pro-terminal-ve-fedore
mplayer -vo caca video.avi