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í.

ASCII Artist

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 založil a vede magazín Zdroják. Absolvoval VŠCHT Praha. Byl u založení projektu CZilla (dnes už nepamatujete, nevadí). Stavěl mosty a metal cestu pro HTML5 (to tu ještě máme). V GUG.cz organizoval akce pro vývojáře (a jestli neumřeli, kódují si dodnes…).

Komentáře: 9

Přehled komentářů

Petr JavE
Jirka Kosek
Martin Hassman Re:
Pedro Ascgen 2
Martin tree ve win
Jan Pobořil Mobilní šablona
Martin Hassman Re: Mobilní šablona
Martin Hassman Asciinema
starenka Re: Asciinema
Zdroj: https://www.zdrojak.cz/?p=11038