Thursday·26·March·2020
Pictures in pure HTML with chafa and aha //at 05:55 //by abe
I recently stumbled upon chafa, a tool to display pictures, especially color pictures on your ANSI text terminal, e.g. inside an xterm.
And I occasionally use aha, the Ansi HTML Adapter to convert a colorful terminal content into HTML to show off terminal screenshots without the requirement of a picture — so that it also works in e.g. text browsers or for blinds.
Combining chafa and aha: Examples
A moment ago I had the thought what would happen if I feed the output
of chafa into aha and expected nothing
really usable. But I was surprised by the quality of the outcome.
looks like this after chafa -w 9 -c full -s 160x50 DSCN4692.jpg
| aha -n:
▆▅▆▃▆▃⎽⎺▄▆▄▂▅▄━▄━▂⎽▆▘▂▍▝■▌▆▘▚▄▂▄╸▂╲▌▄▚▅▶▄⎺▅▄▃▃▮▗▆▃▅▂▅━▃▆▃▃▂▌▆▮┛┷▅⎽⎻┛▚▅⎺▅●▚▋▋▘▃⎽⎺╱■▄▚▊▄▎⎺▄▗▂▄▂▅▆▃▅■▃▅▂▆▄▂⎽▍▄▃▅╲▅▄▖╱╸▖▘▂▼●▋▅⎽▚▃⎽⎺▅▂▅▃▅▆ ┻⎺⎽╸⎺▅▃▅▂▆▆▃▅▃▂▅▃▃⎺■⎺▃⎽▅▝▂━▚▃●▄▅▶▆▖╸⎺▋━▆▆┍▂●╱▅━▄▆▍⎺▅▃▄▂▄▅▃▅▃▂▂⎺▮▗╸▃⎻━╸▂▶▝▂▝▖▖▝▗▘▆▂▘▄▅▘▗▆▃╸▆▃▍▂▝▅⎺▆▃▄■▃▅▂▆▄▂▝▖▄▅▆▂▅▝▖▄▃▖▃▆▚●▃⎽▖▝▗▃⎺▃⎺▄ ⎺▄▃━▂▗▖⎺▅▂▄▂▄▅▂▄▃▆▅▖▚▗▃╸⎺▖⎺▗▝▂▂▅▃▄▖▆╺▄╲╾▃▚▃▝╸▂▲▂▄■▂▘▊▆▅▆▄■▃▅▂▅▂▃▃▄■▚▅▮▃▃▅●▅⎺▍▆⎺━▃▖╺▖⎺━┓▲▘┛▗▅▌▎╲▌╱▝▄▚▅▆▄▆▃▄▂▅▃▂▝▖⎺▅▝▅▄▂▃▖▆▃▖◼▃▚╾▘⎼▗▃▂⎽ ▃▃▂╺▘╼▝▂▃▂▆▄▆▃⎽▄▄▆▃▂▂╾▆▘▃▄▄▄╾▍▲▃▄▃▂╺▖▃▃▋▄▃◀▅▘▂▅━▘▅●▖╾▃▆⎺▆▄▆▃▆━▄■▄▃⎽▃┚⎼▆▄▚▂╴▖▅▂▗▶▃┙▘▅▂⎼▃▄▅╱▝▄▌┺╍▖▅●▄┙▍▅⎺▅▆▃▅▂▄▂▆▄▃▂▶▂⎽▃▅▄▂▝╸▖▅▌▖┛▅▖▆▃▄ ▝⎽▝▃▶▅╱⎼▃▄▂╱▅▅▂▅▂▆▆▃▅▃▖▌▄▄▂●╸╴▝▗▄━▖▖⎼▆┖▗▃┗▄▲┖╾⎺▆·▃╲▂▂╲▅▃▚▅⎺▆▄▅▃▅╾▃▆▃▃▃▄▖▃▄▃▂╸╴━▚▄■▅▆⎼┒▅⎼▆▃⎽▖╸▖╸▋▃▝▃▝▂▃▄▄▂▆▄▆▃▅▂▄▂▅▃⎽▆▂▅▆▝▗▃▂╺╼▄▖┍▍▊▌▝ ▄╺▘▲▆━▘┒▗▍▝▮▅▚▖▆▅■▄▂▄▅▂▄▂▃▃┗▂⎽▄▝▆╺▅▅▋╺▃▃▆▖╲▝▂▂▄▃▄⎺▂⎺▂╸▚▂▚▝▄▗▅⎺▅▂▄▂▄▅▂▅▂▃⎽▗▘▋╺▝▄·▄╱╸╸▍▂▃▄┰▂▎▃▂▚▅┎┎╸▂▋▅▘⎼▅◼▃▝▚▆▃▅▂▅▂▄▂▅▃▂▅▄▆▄▅▖▃▌■▄▖▝╲▅ ╸▃╱▗▄⎺╺▅▗▖▄▌━▖╾▚▂▆▆▄▆▄▚▘▄■▃▖▝▃▆▗▄▘▝▅━▖▗╺▃⎽⎼▖┭▃▄▅■▃▚▝┱╺▆■▖▂╲▅▖▊▆▃⎺▅▆▄■▃▄▂▅▃▂▝▚▖╱▄╴┛▊▄▄▂▃▂▗▖▆╾▝━▂╱━·┓┺┑⎽▌▄▃▘⎺▆▂▝⎺▆⎺▄▂▅▂▃▂▅▃▅■▂▅▖▖━▄▂┗▝■ ▋▂╼╹▅╼┏▃▃⎻▃▗▆⎼▅▚▃╸▖╸▝▅▃▅▂▆▆▃▅▃⎽▄╸▅▘┙▘▘▘▄▖▄▝▅▄╺▖▆▆▃▅▂⎽▲▘▅━▆▅▝▖▃▝╺╸▖▃▆▄▆▃▆▃▄━▄▃▖⎻╾▄▃▅▃▄▄▄▆▅▅▃━·▅▘╸▆⎼▂╴▆▆■▝┑▋▄▅▼╸▅▅▃⎺▅▆▄●▄╾▃⎽▅▖╾▝▂▃▅┗▄▝▅ ▝▅◼▂▆━▝▎▎╸▖▖▖▄▃⎽▝▃▝▖▆▂▂⎺▄●▄▂▅▅▂▄▂⎽▖▄▗▃▃⎽▅■▖▖▅⎺▃▚▘┒▂▂■▃▚╺▌▄▃▅▂■▃▂▖▆■▄▃⎺▆▃▅▃▅■▃▆▃▂▂▅┓▄⎻▍⎽─▄▖┎━▆▆▆▅▆▂▼┳▆▚▆▆▃╸▗◆┳▃▂▊▅▚◀▆⎺▅▆▘⎽▆▄▂▆▄▂▄▄▘▄◀▃ ▃▌▝╸▅▆▄▖⎻▗┳·▆▚▆▃▅▖▗▝▂▝▂▅⎻⎺▆▄▆▃▚▄▄■▄▂▂▆▖▂▅▅▆╸⎺▍▃■━▅▗▖▄▃▃╾▖▄▂▗▘▘⎺▅▃▄▝╺▅▃▲▌▝▆⎺▄▂▄▅▃▅▃▂▚▘▃▆▃▂▖▚⎼▃▃◼▘╼╺▂⎻▚▄┗▅▆▄▅▄▅▗┍▃▃╸▃▃▗▅▄▆▄▄▃⎺▆▄▂▅▃▂▆▃▃ ▝▍▌╱┗▗▅▃▗▃▄▼▆▖▘▂▆▆▘▂▘▝⎻▆▃▆▅▄▝▆▃▅▃▆▃▄▆▃▖▖▅▄▂▃▍▍▂▖╺▂▄▆■▅▗▂▆▅▝▚▃━▅▚▅▝▅▂⎽╲▃▃▃▅▖⎺▅▆▄■▃▅▂▅▂▖▝▆▆┗┒⎺▃▄⎽▗▝▘▂▝▅▅▃▅⎺⎼▄▄▄▂▝╸◀▆▅▖━▃┓▆▂▂▆▄▄▂⎺▆▄▂▃▃⎽ ▂╾▃·▅▚▖▖▅▝▂▂▌▆╾▝▄▃▄■▍▘▖▅▝▂⎽▆▆▆⎺⎺▅●▄▂▆▅▃▅▃▖▚■▃▃▄⎽⎽▅▃▖▖▗▄▚▃▗▆▅▃▂▆▄▋▂▄▂▂▅▃▄▃▆▅▄▌▃▆▄▅▃▆▃▄▆▄▂▄⎺▂⎺▃╾▲■▆⎺▅▂▂⎺▃▂⎽▃▃▆▆▆▝▖╺▎▂▃⎺▍╸●▆▆▆▅▚▆▄▄▃⎺▅▃▂ ▼▚▂▖╸▆╲▄⎺▌▆▂▖▃⎽▄◼▗╺▃▅▊▃▃▘▝▗╸▂▚▗▃▮⎺⎺▄▆▃⎽▅▄▂▅▃▗⎽▆▃⎽▆▅▂╹▊┗▆▅▄⎽●▅▄▃━▚▅▆▅▄▗▍⎽▄▃▃⎺▆▅▄▃▝▅⎺▅▂▅▂▃▆▄▂▄▆━▗▂▄▂▂▅⎺▂▘▃▄▃▄▄▅▅▆▆▆▅▝▘▍▂▄▃▃▃▗▂▝▄▅⎺▅▄▄▂⎺ ▄▂▖▄━╾◀▅▂▝▋╺▝▘▃⎽▃●⎻⎺▅▆▃▅▄▆▖╏▅▗▂▌┺▆▄▃⎺▆▃▅▂▆▃▂⎺▄▂▄▆▅▃▂▅▃◀▝▆▅⎽▂▅▆┳▃▅▄▃▄▄▃⎽▗▄▂▄▄▄▃▘╺▆▄▃━▅⎺▄▂▄▂▂▆▃▂▗▂▄▆▄▝⎽▝▅⎺▃▘▘▄▅╲╺▂⎽▆▌▃▄▅▄▆▃▂⎽▂▅▅━▅▃▃⎺▅▄ ▅▃▅▃⎽▍▆▝▝▘▘▖╺▖▖▄▆⎽▗▅▄▶▂▃▅▅▄▂▄▂▃▃▆▂▂▃▄▃▂⎺▅⎺▄▂▆▃▂▆▃▖⎺▃▅▅▃▂▂▃▌▃▃▄▅▂╍▗▅▆▄▂▅▅▃▃▆▃▃▆━▃▄▃⎽⎺▅▅⎺▅▆▃■▄⎽▂▂▝▖▘▃▅▄▂▅▅▆▄▅▄▅▆▄▆▄▄▘▅▅▄▃▅▄▄▂▄▂▃▂▆▆▆▅▃▃ ▃⎽▆▄▂▅▂⎽⎽▄▘▅▖▄▄▄⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽⎽■⎽⎽▅⎽⎽⎽▂⎽▂▂⎽⎽⎽⎽⎽⎽▗▄▄▄⎽⎽⎽⎽⎽▂⎽▗▂▂⎽⎽⎽⎽⎽▂⎽▂▂▂▂▂▂▂⎽⎺▅▃▂▂▂▂▂▂▂▂▃▂▂▂▂▂▂▂▂▂▃▂▂▂▂▂▂▂▂▃▄▄▃▄▃▂▂▃▂▅▅▂ ▅▂▅▂▘▆▄⎺▆▆▆▆▆▖▆▌▍⎺⎺⎽⎺⎺▝▆▌▊▍⎽⎺⎺⎺⎺▅▋▍▎⎺⎽⎽⎽⎺▝▆▌▋▍▂▂▂⎺⎺▖▋▊▏▼▗▂▂⎺▌▋▝▌▍▊▂⎺▂⎺▎▌▉▎▘▗▂▗⎺▝▍▝▋▌▄▉▂▗▅▌▉▘▌▎▅▂▂⎽▆▍▝▊▎▏▗▃▃⎽▝▎▍▋▋▗▃▃▃▃▋▍▃▃▃▃▃▃▃▂▅▃▃▂▄ ▂▄▆▄■▄⎽▏╺▖▄▄▖▌▋▌▍▝▍⎺▌▏▋▌▌▋▎┗▘╲╱▉▎▋▍▎▅▌─╴▝▋▋▌▌▎▉▍┮▘▉▍▌▊▋▋▋▍⎺▖▋▋▎▍▎▝▝▗▆▊▍▌▊▎▌▋▎▌▎▉▎▋▋▍▊▉▋▌▍▌▎▊▍▎▋▍▋▍▉▍╿▊┃▏▊━▃▘▊▎▎▋▋▘┻━╸▗▋▎▄▆▅▆▄▂▆▆⎺▄▂▆▅ ▂■▆▃▆▅▃▏▂⎺⎺⎺▃▌▋▌▍▃⎺▅▅▆▋▌▌▋▎▝▘▝▘▉▎▋▍▎▂▝▅▅▂▋▋▌▌▎▅▘▝▘▗▎▋▋▋▂▎▆▂▃▌▋▎▍▎▂▝▆▃▊▎▌▊▎▂▘▆▆▄▊▍▋▋▍▂▉▆▅▃▌▎▊▌▎▂▆▆▆▂▍▖▋▎▂▝▆▝▅▊▎▍▌▋▆▆▆▆▆▋▎╸╲◀⎽▌▆▖▃⎽▆▖▋╾ ▖▆▃▘╺▅▊▎▆▆▂▃▂▝▌▋▍▃▃▂▂▂▘▌▋▋▃▂▂▂▂▂▌▋▉▏▂▂▂▂▂▘▌▌▍▃▃▂▂▂▂▌▋▋▃▃▃▂▂▂▌▋▉▝▃▃▃▂▃▂▌▌▋▃▃▃▃▃▃▂▌▊▝▃▃▃▃▃▃▌▎▋▃▃▃▃▃▃▃▍▉▝▄▄▄▃▃▃▃▍▊▝▄▃▃▃▃▃▘▍⎽▄▗▆⎺▅┙▆⎽▃▊▗▌ ▃▘▝╴▅▖▆▝▄▖▍▅▂▂▂▅┷▃▋▃▃▃▃▃▂▄▄▆▃▃▃▃▃▃▄▄▆▗▃▃▃▃▃▃▄▖▋▃▃▃▃▂▂▄▄▆▄▃▃▃▃▂▃⎻▗▗▃▃▃▃▂▂▄▗▂▗▃▃▃▃▂▂▂⎺▗▄▃▃▃▃▃▂⎻■▗▄▃▃▃▃▃▂⎻━▗▄▃▃▃▃▃▖■╺▄▃▃▃▃▃▃▖▖▆▂▅▃▌▂▆▖▝▆ ▮⎻╺▶▆▄▅▼▉▎▄⎽▖▝▖▋▌▌▋▎▍▗▖▖▊▎▌▉▋▖▗▃▖▄▌▋▌▍▏▗▃▃▖▊▎▌▋▍▌▗▄▘▌▌▋▎▎▏▊▄▄▚▉▎▍▋▌▌╻▍▃▖▋▍▊▋▎▌▌▉▖▌▌▎▊┃▅▗▂▃▖▊▎▅▋▋▝▗▏▌▋▊▎▊▌▍▌▉▋▎▍▋▎▊▍▎▝▌◆▎▖▌▎▝▂╸●▘▄▝▃▃▃ ▂·▄▄▝▲▖▅▊▎▊▍▂▼▍▋▋▌▌▏▗╱┶▖▊▎▌▉▌▍▍⎻▖▝▌▋▌▍▏▊▍▂▍▊▎▌▋▍▋▎⎻▖▃▌▋▉▎▏▊▂▍▎▉▎▍▋▍▊┃⎻┃▍▋▌▋▌▎▝▗▂▌▃▌▍▊┃▍▌▄▄▖▊▎╽▋▌▖▌▂▂⎽▊▎▊▌▍▖▉▖▋▍▋▎▊▍▎▋▗⎽▌▋▋▎▝▮▄▖▅▝━⎽▝▂ ▆▃▝▆▄▂▅▘▊▎▂⎽⎽⎽▝▌▋▌▌▃▂⎽▂⎺▊▎▋▊▝▂▂⎺▘▗▍▋▌▎▂⎽⎺⎺▍▊▎▌▋▝⎽⎽▍▝▃▍▋▉▎▂⎽⎺⎺▋▗▎▍▌▝⎽⎺⎽⎺⎽▋▌▊▌▖▂⎽⎺▆▃▌▎▊┠▃⎺▂⎺⎺▗▎◼▋▝▃⎺⎺⎺⎽▋▍▊▌▍▃▉▘▘⎽▌▍▋▍▍▂▝▘▌⎽▌▎▖·▍▚▄▃▌▘▃▅ ■▄◆╾▃⎽▅▅▊▎▂▃▃▄▄▃▌▌▍▄▃▃▃▃▃▂▋▊▃▃▃▃▃▃▃⎽▌▎▃▃▃▃▃▃▂▋▌▄▃▃▃▃▃▂▌▊▃▃▃▃▃▃▃▂▌▝▄▃▃▃▃▃▃▍▋▃▄▃▃▃▃▄▘▎▝▄▄▄▃▃▄▄▘▂▝▅▄▄▄▄▄▄▎▋▄▄▄▄▄▃▄▘▂▝▄▅▄▄▄▄▄▘▍▂▂▃▄▃▄▂▋▅⎽ ┕⎽▃━▆▅▝▖▝⎺⎺▖▆▆▆━━▆▆▆▊▆▅▄▄▄▃▆▆▆▗▆▅▅▄▄▆▆▆▋▅▅▅▄▄▃▆▆▄▆▅▄▄▄▃▃▆▌▌▅▄▄▄▄▃▖▗▅▗▄▄▄▄▃▃▆▆▖▅▄▄▄▄▃▖▆▅▗▄▄▄▄▄▃▖▆▄▗▄▄▄▄▄▃▖▆▖▅▄▄▄▄▄▃▖▅▖▄▄▄▄▄▄▃▖▂▗▄▘▋⎻▄▃ ▃▅▄▄▂▂▝▖▖▗▊▍⎽⎽⎽⎽⎽▋▋▌▋▎╺━▅╸▊▎▋▍▎▅╺▂▖╾▋▋▌▋▍▖▄━▖▆▍▋▉▎▄▗▖▗╸▊▋▍▋▍▅┏─▖▅▌▌▊▍▆▗▖▗▖▉▎▗▊▋▉▖▂▗▖▊▎▉▌▍▖╺╺▏▅▌▎▉▌▎▝▌▂▘▆▍⎻▊▍▎▄▋▘▌▉▍▍▋▊▂⎽⎽⎽⎽▖▎▅▅▄▖▅▅╺╸ ▮▗⎽⎽▃▅▚▂▄▝▊▎▃▄▄▘▝▋▋▌▌▏▗╱┷▖▊▏▋▉▏▋▗▄┓▖▋▋▌▌▎▝╲▄▖▗▎▋▊▏■▝╲▘▝▊▋▍▋▎▋▏■▎▄▌▌▊▍▏▋▆▖▎▉▎▎▊▋▉▗┳▖▎▊▎▊▌▍▝▉▂▅▂▌▎▉▌▎▝▊▂▖▝▍▎▊▍▎▝▗╺▖▂▍▎▋▊▄▄▄▝▄▘▎▂▂▆▅▄▂▂▂ ▊▝▲▂▃┓▘┙▖▆▊▎▄▃▃▃▗▌▖▌▌▄▄▃⎼⎼▊⎽▋▉▝▄▃▃▃▂▍▌▌▌▝▄▃⎼▂▗▎▋▊▮▄▃▃⎽▂▋▋▍▍▝▄▃⎼⎽▗▍▍▊▍▖▃⎼⎽▂▗▍▎▋▲▄▃▃⎽▂▋▍▊▌▌▄▄▆▂▂▍▎▊▘▍▄⎼⎺▂▂▍▍▗▍▎▄▆⎽⎽▂▍▄▌┗▄▄⎼⎽⎽▗▎⎽▆▄▃⎽▆▅▄ ▋▍·▝▃▅╶╲▝▂▝▃▂⎽▃▃━━▃▃▘▆▅▅▅▅▅▄▃▊▅▄▄▄▄▄▄▃▘▝▄▄▄▄▄▅▄▃▝▄▄▄▄▄▄▄▘▃▅▅▅▄▄▄▅▄▍▘▅▅▅▅▅▅▅▂▂▝▅▅▅▅▅▅▅▂▘▅▅▅▅▅▅▅▅▃▝▆▆▅▅▅▅▅▘▃▝▆▅▅▅▅▅▅▂▃▅▆▆▅▅▅▅▅▘▂▂▆▘▅▄▂⎺ ▂▍▝▃━╺▅▄▝⎼▅▗▘▌▆▅▅▅▅▅▖▋▊▆▆▆▆▅▅▖▋▌▍▆▅▅▅▅▄▖▋▊▆▅▅▅▅▅▖▋▘▍▆▅▅▅▅▄▍▘▊▆▅▅▅▅▅▅▅▅▅▅▅▅▅▅▄▖⎺▆▗▆▅▅▅▅▄▖▝▋▆▅▅▅▅▄▄▖▆▋▆▅▅▅▅▅▄▖▆▌▆▅▅▅▅▅▖⎺▝▗▅▅▅▅▅▅▖▎⎻⎻▌▝▅ ▄▅▂⎽╺▆▄▃▂▅▝▝▄▍▗▖▖▄▃▊▎▌▊▍▄▃▃▖▆▍▋▍▍▃▃▃▃▃▉▎▌▊▍▊▃▖▗▘▌▋▎▍▂▃▂▂▃▃▎▍▊▊▖▋▍▆▃▃▃▃▂▃▃▂▖▌▌▌▍▉▍▗▃▂▂▃▖▍▌▊┃▝▂▂⎽⎽▉▎▋▋▋▅▋▗⎽▋▊▎▍▋▍▂▗▅▖▌▋▎▊▌▍▊⎽▂⎽▍▋▎━▝▖▗▄ ▃⎽▅▆▄▂▃╼▅▃▍▄▘▍▆▘▘⎺▆▊▎▌▊▍▖▘▆▘▂▍▋▍▎▅▅▅▅▅▊▎▌▋▍▝▆▅▆▍▌▋▗▍▄▅▆▅▅▅▎▍▊▊▋▌▅▃▃▃▄▄▄▆▄▃▝▝▄▌▎▖▍▝▅▅▅▅▘▍▗▊▊▌▆▅⎺⎺▉▎▖▋▋▂▝▖▘▎▊▎▎▋▍▍⎺▶⎺▖▋▗▊▌▍▆▆▅▆▆▋▎▍▗▅▃▃ ▄▂▅▂▅▃▅▃▂▘▆▄▊▎━━━▂▃▋▂▝▋▌▅━▃▃▅▂▂▗▎▅▅▂▂▃▋▂▌▌▍▅━▂▂▄▍▝▗▍╸▘▂▂▃▅▍▂▃●▅━▂▂▂▂▂▂▂▂⎽⎽⎽▂▃▍▊▖▝╸▂▂▂▂▗▎▗▗▲▄▂▂▂▂▗▎▖▌▶▅▄▂▂▂▊▊▎▘▘▅─▂▂▂▋▗▃▘▌▄▂⎽▂▂▘▍▂▄▅▅▂ ▆▅▄▄▆▄⎽▅■▄▂⎺▆▝▅▄▄▄▄▄▄▃▄▄▄▄▄▄▄▄▃▃▄▃▃▃▃▃▃▃━▃▃▃▃▃▃▃▄▃▃▄▃▃▂▄▃▃▃━▃▄▄▄▄▄▄▄▃▃▄▄▄▄▄▄▄▄▄▃▃▃▃▄▃▄▃▄▝▃▃▃▃▃▃▂▂▂▃▂▄▄▄▄▄▄▄▃▃▃▄▄▄▄▄▄▄▝▃▄▄▄▄▄▄▄▄▅▆▅▅▃▃ ▃▃▄⎺▆▄▃▅▃▆▃▅▂⎽▅▂▗▃▂╺▄▝▄▝▘▝┗╍▃╲▗▂▼▅▅▗▆▅▅▄▃▘▆▅▄▆▶▃▆▆▄▂▄▖▄▆▃▅▃⎽▂▅▆▆▆╸▗▆▃▗▖╲▄■▄▘╲··▌▄▆┍■▗▗▄▍▆▆▆▃▆⎻⎺▆▄▃▃▂⎺▅▃▆▄⎽▅▅▄▂▃⎽▂▝▖▍◼▖▅━▆⎺▅▄╾▄▂▂▝▗┯▃■ ▚▄▆▅▅▆▼▅▄⎺▅▃▅■▄▂▃▝▄▃▆▃▊▚▋▃▗▂▃▲▂▄▌▗▖▚▖▄▄╲▃▍▆▃▗▅⎽▚▆▄▅▆▆▄▆▃▂▆▄▂▅▂⎽▚▖▘▅▂━▋■▃▘⎺▘▃╸▂▗▶▄▘⎺╺▝┱▆▅┍▅┗▚┻▅━⎺▝⎺▆▄▃▃▂⎺▅▂▅▃▂▃▅╲▅▄▂▖╲▃╸━▅▄▆▃▌▖⎺▄●▅▅▃▂ ▃▃▃┷▆●▃╱▅▆▆▄▆▅▃▃▆▃⎽▝━▂▄▅⎽⎺▋▆▝⎺▖╇▼▝▃▎▝▃▖╺▂╺▍▝▝▅╺▖▄┇⎽▂▃▚▝▅▂▅▂▆▆▃▆▃▂▄▃▖⎽▗▂▅▂╏⎺▝▘▗▘╸▝▅┗▄▅▃▆▄▂╺▝▄▝⎼▂▅▋⎽▄▂▆▅▃▄▂▆▆▄▂▄▖▃▆▅▃▂⎺▆▄▄⎽▮▅╺⎽┑▝▗⎻┣⎺▃▆ ▂▄⎺▃▃╼┑┒▎▊▍▅▅▅▃▅▅▃▂▅▂▄━▄▅▖▌▗▃▆▄⎺▅┙▗▝▆▃▆▄▃▂▖▂▅▝▃▆⎽▃┤▅▄▗▂▃▅▆▄⎺▄⎽⎺▅▂▅▃⎽┛⎺▆▝╸⎽▌⎺▃▅╺▂⎽▃╺▆▅▂▚▅▂▃▄▃▄▄▝▃⎽▎▆▎▃▄⎺▆▃▃▄⎽⎺▆▃⎽▅▖╺▄▖▃▂▃▄▅▃━▆▅▂▂▂┻▄▄▂ ▆▃▆▂━▝▖▖▅╾▄▂▃▆▆▄▃▅▂▆▃■▃⎽▄┓╴┓▅▄▝▄▄▃▂▚▅▆▃▄╼▝◀●⎺▄▚▅▘▝▅▮◀⎽▅■▂⎽▝⎺▅▃▆▃⎽▆▄▂▄▂▘▖▝▌▃▝▌▘╶▊╺╼┳━▄━▮⎼▅▂▂▃━▄▃▂▌▝▂▃▗▂▘⎼▅⎺▅▃▄▃▂⎺▅▂▆▄▂▂◀⎼⎽▗▝▄▗⎺▆▅▂▄▖╾▅ ▄▄╾▼▍▄┲▅■▄▖▖▲▅▋▝▆▅▃⎺▃·▆▃▅▂▂■╸━▖⎺▃▂▘▄╾▃▝▄■▆▖▄▖▖▝▄▋▝▃▄▗▄▄┎▆╺▝▃▄▮▆▄▂▅▂▅▅▃▆▃▂▚▃⎺▃▝▂▄▄⎺┏▄▖⎼⎺━⎼▅▃▖▆▄▂▃▆▖▄▅▂▋▍┗⎺▄▃▂▆▄▂▃▂▅⎺▄▂▃▖▖▃╺▘▗▄▄▂▘▅▃▂▼▃ ▄▅▄┷╾▃▝▃▆▅▅▄▝▗▄▃▌⎺▃▆▄▃▆▂▄▅▂▄▂▖⎽▂▅▃▃▅▄▝━▼▆▚▃▖▖╲▂▗━▅▘▖▃┺▅▍▖╸▆▄⎺▖▆╸▝▄▃▆▃▂▆▄▂▅▂▗▃▄▄▅─▝▘●⎺▅▖▃━▃▍▖▂▝▂▄▝▂▗▖▂▂▆▆━╸▅⎺▼▆╾▆▄▄▃▃⎺▆▄⎽▃▂▄▃▂╺▆╸╼▆▄▗▘ ╸━▃▘▆╸▼▄▃▘▖▶▆▆▂▝╸▆▄▃▆▃▝▄⎺▅▂●▄▅▂▂▖▂■▂▃▖●╸▖▂▆▄▃▖▃┑▋▂▂▅▃■╸▅▗┗▅▍╾⎼◀▝▍▝■▆▅▂▃▂⎺▆▃■▄▂▂▂▂▃╸▗▃·▘╴╺▅⎽⎼▗▖▋▂▅▄┛━▘■●▄▌▆▅━▂╺╺▝▂⎺▅▃▄▂⎽⎺▆▃⎽▄▖▄▄▄▃▃▃▄▃ ╸▖╾╸▅┺━▖┲╺▝▖▄▆▄▄▅▖╲▄▄▅▆▃▆▆▃▆▃⎽▆━▄▂▖▅▘╾▍▆▅▅▃▋▝▚▅▂▖▄▖▖▅▚▄▅┗▗▍▖╺▆╺▄▘▌╴▄▼▝▆▄▂▃▝▆▅▃▆▃⎽▝▃▃▘⎺▅▃▂▚╾▆▝▃▖╾▄▖◼━▃▅▆▝▄▝━·▼▗▂▄▗┓▆▂▆▄▃▃▂◼⎺▅▂▅▃▆▅▅▅▅▅ ▅⎺▆▝╸▼⎺▄▄┗▅▄▂▄▃╺▗▅▄▅▅▄▃▂▆▅▆▆▄▂▅▂▄▄▅▃▂╺▂▘▝⎽▝▅▍╼▖▗▝▄▄▂▆▄┲▅▚▃▄■▘▘⎺▖╺▅▄▆▅▚▖▅▅▅▄▄▃▅▄▃▂▅▂▅▆┷▊╲╏▝━▚╸▃▆▄▅⎺▆▃⎻╸▃┗▖▗▖▘▅┵▎▗▃╺▄▂▖▄▝▆▄▅▃▂▌▆▄▂▄▃▮▄▅ ▆▂▅▄▗▆▃━▼━▂━▝▆▄⎺▃▂▅▅▄▂⎺▝▅▄⎺▝▄▖▆▄▆▄▂▅▆▄▂▃━⎺◀▎┠▍▗▅▗▂▅▄▚▄▆▄┑▆▂▄━▃▃▃▂▄▃▃━⎽▖⎺▄▝▂▆▅▃▄▂⎺▅▃▆▄▂▆▆▆┎▄▗⎺▄╼┻▍▍━╺■▎╺▗▅▖▗▘╸▗▆▗▂▅━▆▎▃▆▗▅▝▅▃▄▂▖⎺▆▄▂▄▖ ▆▂▆▄⎻▖▅▖╸▖▅▖╺▅▍▂▅▃▅▝▄▂▝▂▃╲▂▃▝▝▄▆▆▃▂▅▃▆▄▆▃⎽▖▂┕▘▂▄▃▆■▖▃▗▖▂■▝■▃▝▂▝▗▘▅▃┒━⎺▃┳▝▌▝▃╸▂▆▄▃▃▂⎺▅▂▅▃⎽▍⎼▂⎻▼▚▅▅▂━▝━⎺▖▄⎽▖▂▋━┗⎺▖▖▃▄━■▅▆▅▗▆▝⎺▆▄▃▄▂▅⎺▆▅ ╲⎽▄▚▖▂⎽▅▃▗▃▄━▅▘▅▃▲▘▄▅▝▅▂▝▅▃▃⎻⎽━▅▝▃▄▅▃⎺▄▂▆▃▄▂▍▅▍▅▅▘╸▅╲▃▅▃▂▅▂▅▃┗▝◆▅▄▚▖▄⎺▂▖⎽▄▖▚▃▃▊▅▆▅▃▃▃⎺▆▄⎽▄▂⎽▝▃▃▚▃⎺╱·┕▅━▘▆▝▘▚▂▆▃▄▍▂▂▗▘▄▗▘▄■▅▌▘▋▝▅▄▅▃▘▘ ▃▂▂▝▆▄⎽▆⎽▅▖⎽╺▆▘▘▂▅▅▅▖▃▃▃▂▄▼▆▖■▗▘╸▝▝▝▅▌▄▂▅▃▖▅▆▄▂▝┷▝▃▃⎺▍▖▗▝▚▖⎺▆▆▶▆▖▃■▌◼▆▃■▋▃▂▅▝■▗▃■▖▄⎺▄▂▄▂⎺▅▃▆▃▂▆▅▃▚▘╲▄▃▗▃▂▖▘▗⎽━▄▘▆╺▄▂▆▝┗▝⎽◀╺▅━◼▗▃▂▗▘▅▅ ▅▂▄▂▂╾▃▂▂▅▄▅▘▌▏▆▄▂⎺▃▅▃╱▌▗▆▖▆▄▂▃▄┑▗▂▄▆▃▆▄▅▄⎺▄▂▆▃▅▃⎽▝·╾┣▝▍▌▘━▆▃▂▂╸▼■▅▝╲▖▖■▃▃⎺▃▗▃▗▅▆▝▘▂▅▃▅▄▃▃▂▆▄▂▅▃▂●▆▄▖▃▘▆▄▝▅▗▆╸■▃▘▗▗▂⎼╸▃▖╸▄▄▖▗▄▅▗▗▘▄■⎼
Checking the Look in Text Browsers
It even looks not that bad in elinks — as far as I know the only text browser which supports CSS and styles:
In Lynx and Links 2, the text composing the image is displayed only in black and white, but you at least can recognise the edges in the picture:
Same Functionality in One Tool?
I knew there was a tool which did this in one step. Seems to have been png2html.
Tried to play around with it, too, but neither really understood how to use it (seems to require a text file for the characters to be used — why?) nor did I really got it working. It always ran until I aborted it and it never filled the target file with any content.
Additionally, png2html insists on one character per pixel, requiring to first properly resize the image before converting to HTML.
The Keyboard in the Pictures
Oh, and btw., the displayed keyboard is my Zlant. The Zlant is a 40% uniform staggered mechanical keyboard. Currently, only Zlant PCBs are available at 1UP Keyboards (USA), i.e. no complete kits.
It is shown with the SA
Vilebloom key cap set, currently available at MechSupply (UK).
Tagged as: 1UPKeyboards, 40% Keyboard, aha, chafa, CSS, elinks, Graphics, HTML, Keyboard, Links2, Lynx, Mechanical Keyboard, MechSupply, png2html, SA Vilebloom, Text Browser, Text Mode, xterm, Zlant
2 comments // write a comment // comments off
Related stories
Comments
Re: Pictures in pure HTML with chafa and aha
Posted by: Helga Website: mailto:homeworkforme889@gmail.com Time: Thu, 19 Nov 2020 19:02 I didnt have any time to complete my assignments and was looking for a place where I can pay someone to do my homework. Fortunately, academic writing platforms really helped me!
Your Comment
Spam Protection: To post a comment, you'll have to answer the following question: What is 42 minus 19?
Re: Pictures in pure HTML with chafa and aha
Well, this is amazing stuff of learning, I'll implement this code in my hybrid app for my new app ideas checklist.
Reply