brick-image - Showing Images in Brick Applications Using w3mimgdisplay

137 views
Skip to first unread message

Lysergia

unread,
Apr 19, 2018, 10:42:18 AM4/19/18
to Brick Users
Hey all,

For those that don't know, w3mimgdisplay is a program that comes with the w3m commandline web browser. It lets you render images directly into your terminal:


I messed around for a day or two & made a Haskell package that interfaces w/ w3mimgdisplay to render images in the current terminal. I also included a Brick widget that lets you embed an image directly into a Brick application, as well as an example Image Viewer app:


It's still very rough and slightly buggy, but the code lives here: https://github.com/prikhi/brick-image


There's some gotchas, bugs(which you can reproduce yourself in the example app), & a couple features I'd still like to implement, they're explained in the README.


It's a pretty hacky solution - I was just trying to get it to work. 

The widget creates a viewport that consumes all the available space & fills it with blank characters.

During event updates, the widget will get the extent of the viewport & tell w3mimgdisplay to render the given picture in the extent.

Changing the image or resizing the terminal should clear the previous image & render the new one.


I was having the widget/viewport shrink to the image size(either full or scaled) but other bugs(that are now fixed) caused rendering problems with that approach. I may try that again now that those bugs are fixed.



Let me know what you think!


I've never written a Haskell library for public consumption, & the last time I made a custom Brick widget I was very confused, so any feedback is appreciated :)


If people are interested, I can try & get this on Hackage & Stackage but I've never done that before either...

Jonathan Daugherty

unread,
Apr 20, 2018, 5:42:30 PM4/20/18
to Lysergia, Brick Users
> Hey all,
>
> For those that don't know, w3mimgdisplay is a program that comes with
> the w3m commandline web browser. It lets you render images directly
> into your terminal:
>
> <https://upload.wikimedia.org/wikipedia/commons/6/62/W3m-wikipedia.png>
>
> I messed around for a day or two & made a Haskell package that
> interfaces w/ w3mimgdisplay to render images in the current terminal.
> I also included a Brick widget that lets you embed an image directly
> into a Brick application, as well as an example Image Viewer app:
>
> <https://github.com/prikhi/brick-image/blob/master/screenshot.png?raw=true>

Wow, that's pretty wild!

> I've never written a Haskell library for public consumption, & the
> last time I made a custom Brick widget I was very confused, so any
> feedback is appreciated :)

For general use, I'm wondering:

* What's the best way to deal with terminal font size and the ratio of
image pixels to character width and height? This seems like the
toughest thing to get right in general, since you won't know the
user's font size and presumably there is no way to ask the terminal
emulator itself about this. An alternative might be to just ask
w3mimgdisplay to fill the available viewport space with the image
without regard to actual size, assuming w3mimgdisplay is okay with
scaling the image, and then you wouldn't need to do any math at all
(but you'd have to be okay with non-uniformly-scaled images). But
that's just speculation, since I don't know how w3mimgdisplay works.

* Drawing the image in place as a separate pass by invoking
w3mimgdisplay could become prohibitively expensive because it
introduces input latency due to the fact that all input events
trigger redraws. There's not much that can be done about this unless
Vty were to directly support images. I bring this up just so you're
aware, and you could point it out as a gotcha in your documentation.

As far as Hackage is concerned, you could certainly always upload it and
see if there is interest. If you use Twitter and announce it, I'd be
more than happy to retweet it on my @brick_haskell account.

Cool!

--
Jonathan Daugherty
Reply all
Reply to author
Forward
0 new messages