Whether to and how to display image message?

[chinggg]

I have read the docs of blessed and written some code snippets to test the Image element. I could not find practical code of using blessed to display images in a scrollable box.

In general, Image in blessed confuses me in the following aspects:

1. It provide two types of Image: ansi and overlay. The former use ascii characters to render images so it lacks precision. The latter use w3mimgdisplay to display real image but it lacks compatibility with terminal. Which type should I use?
2. It maybe difficult to display image in proper location and size.

• Must specify style option like top/left, cannot really "append" new image after the last message automatically.
• The doc says height/width are options of ansi image that differs from other element's height/width in that only one of them is needed since blessed will maintain the aspect ratio. But I found that set either of them will cause freeze of the whole program. And the scale option does not work either.
• For overlay image, height/width are independent of each other, it will be difficult to keep the ratio.

3. Image behaves like element more than content so it is unnatural to fit images into the log element which is containter of text messages.

I have searched node-facenet for blessed.image but the only usage is to show icon. Displaying images in the chat client is more difficult. Maybe we can just save non-text messages as local file.
@huan Do you have experience in using blessed to display lots of images? Can you give me any suggestions? Thanks!

[huan]

Thank you very much for asking this great question. The CLI would be great if we can display beautiful images for users.

For your first question, I believe we should always make sure we are compatible with the terminal because the CLI is mainly for terminal users, we must make sure all terminals can run our cli without any problem. One additional reason is that we are planning to use the react-blessed to run our cli in the browser (for example, here and there), which means the compatibility with the terminal is the key (I guess, please correct me if I'm wrong).

It may be difficult to display images in the proper location and size.

For size, I remember that in the facenet manager, I'll resize the image to fit the terminal first, then paint it. This way might help.

BTW: I have just recorded a Facenet Manager screenshot at https://asciinema.org/a/427927:

you can use the same command to run it locally, and try more with docker command:

docker run --rm -ti zixia/facenet npx ts-node bin/facenet-manager.ts

At last, as you said:

Image behaves like element more than content so it is unnatural to fit images into the log element which is the container of text messages.

I believe, for now, we can just show a clickable text message in our term to let user know it's an image message (like "Image message, click me to view"), then if the user clicks the image message, we pop up an image element to show the image for the user. We do not require scroll-able image messages now, maybe not necessary in the future, too.

Please let me know if the above suggestion works for you or not, thanks.