Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images flicker and don't render properly in kitty terminal #181

Open
electricjones opened this issue May 14, 2021 · 9 comments
Open

Images flicker and don't render properly in kitty terminal #181

electricjones opened this issue May 14, 2021 · 9 comments

Comments

@electricjones
Copy link

kitty version: kitty 0.20.2 created by Kovid Goyal

w3m version: w3m version w3m/0.5.3+git20210424, options lang=en,m17n,image,color,ansi-color,mouse,menu,cookie,ssl,ssl-verify,external-uri-loader,w3mmailer,nntp,gopher,ipv6,alarm,mark

This is the latest version compiled myself from this git repository. I was certain to include one that had this commit #177

When using w3m in the latest version of kitty (w3m https://google.com for example), the text renders fine, but the images do not render correctly. The render inline, but overlap the text as if they are behind the text. They also appear for a moment and then vanish. As I scroll, they flicker in and out of visibility. The issue is the same as described here: kovidgoyal/kitty#851, but there was no resolution to that issue except to say that (at the time) w3m didn't support kitty. It does now (if I understand correctly).

I have tested on the same system using xterm and the images render correctly. Kitty also renders images correctly in other applications such as ranger and using the kitten icat.

Things I have tried (after a lot of googling):

  • removing anti-aliasing in XResources
  • added image/*; kitty +kitten icat %s to mailcap to try and force w3m to use the icat kitten
  • tried the same thing with w3m -o imgdisplay='kitty +kitten icat %s and even with a local image just for kicks
  • tried scaling the image with -o image_scale=<percent>
  • tried every number from 0 to 10 with -o inline_img_protocol=<number>, as expected no images rendered except with mode 0, which was the flickering mode

I have run out of ideas. I would like to use w3m, but I have kitty too integrated into my daily driver to switch terminals. I just wanted to report that I was having the issue. Happy answer any questions. Thank you.

@bptato
Copy link
Contributor

bptato commented May 15, 2021

w3m does have kitty support, but it is sorely lacking in documentation. To use images in kitty, you'll have to:

  • install ImageMagick
  • set Inline image display method to kitty (I think that would be 4 if you're using -o inline_img_protocol, which only goes up to 4)

This is required because unlike w3mimgdisplay, the main w3m executable isn't linked to the libraries used to decode images. So the simplest workaround I found was to convert everything to PNG with ImageMagick and then send it to kitty. I may write a more proper solution in the future, but for now we're stuck with this.

@electricjones
Copy link
Author

I definitely wouldn't say "stuck with". You've gone a great job with this.
Adding the option got many websites to work. But only simple ones (google.com, xkcd.com, for example). Whenever I try to load anything even a little more complex, I get a segmentation fault:

zsh: segmentation fault (core dumped)  w3m -o inline_img_protocol=4 https://brandonsanderson.com

I do not get a segmentation fault when trying it w/o the extra option, but the images do not work.

I don't know where the logs may be to post them. And, if this seems unrelated to the original issue, I can start a new one. Or it may just be a problem with my machine in some other way.

@bptato
Copy link
Contributor

bptato commented May 16, 2021

I definitely wouldn't say "stuck with". You've gone a great job with this.

It's better than nothing, but still very far from ideal. Kitty also supports animations for example, currently however only the first frame of those is shown. Not to mention that calling convert for every image gets really slow when there's a lot of them.

I get a segmentation fault

Yeah that's my bad, thanks for reporting. Just submitted a PR which should fix it.

@Kabouik
Copy link

Kabouik commented Aug 23, 2021

I'm very interested in using w3m with kitty too. Could you please elaborate on what should be done in the below instruction?

set Inline image display method to kitty (I think that would be 4 if you're using -o inline_img_protocol, which only goes up to 4)

I have uninstalled my distribution (Solus) repository version of w3m, cloned this repository, compiled it (for the future myself trying to compile it on a new machine one day, bdwgc-devel and imlib2-devel were required), edited my ~/.config/w3m/config to set imgdisplay kitty. I can see images being displayed, but I'm not sure if it is using the kitty protocol or not, since images are still flickering (they show only when scrolling).

[Edit] Oh, my bad, I didn't understand that -o inline_img_protocol=4 was a flag to run when executing w3m, I was looking for inline_img_protocol in the configuration. It now works, thanks! Of course there are drawbacks and there are significant performance impact and delay associated with converting images, but that's still an improvement. I hope other solutions can be found in the future, but until then, it's already a great progress for me.

@bptato
Copy link
Contributor

bptato commented Aug 25, 2021

Glad you got it figured out.

Oh, my bad, I didn't understand that -o inline_img_protocol=4 was a flag to run when executing w3m, I was looking for inline_img_protocol in the configuration.

It is in the config file, at least for me... but you could try setting it up from the option setting panel too (opened by pressing `o'), it goes by the name "Inline image display method". Not that the flag doesn't work, it's just more convenient that way.

@Kabouik
Copy link

Kabouik commented Aug 26, 2021

Thanks! Adding inline_img_protocol 4 to my configuration had no effect, but I could just set Inline image display method to kitty (ImageMagick) in the options from w3m itself.

@097115
Copy link

097115 commented Feb 14, 2023

Hmm... Funny thing is, newer w3m versions with Inline image display method option set to kitty (ImageMagick) do show images in plain kitty but fail in kitty running tmux (under any method). Which is probably sort of expected?

However, older versions, which showed images with flickering, and had no Inline image display method option, they somehow manage to show those broken images in kitty with tmux.

So, may be there's some chance we can work around it? And get the best of two worlds, with w3m displaying images both in kitty and in kitty running tmux? :)

@tats, @bptato, what do you think?

@bptato
Copy link
Contributor

bptato commented Mar 1, 2023

However, older versions, which showed images with flickering, and had no Inline image display method option, they somehow manage to show those broken images in kitty with tmux.

Old versions should have the exact same behavior as the current version with external command inline image display method. But IIRC it's always been broken on gpu-based terminal emulators like kitty, alacritty, etc.

That said, I wonder why it fails even with w3m's pixel_per_char fallback. I don't remember changing anything related to it... anyways, I'll check it later.

@bptato
Copy link
Contributor

bptato commented Jan 3, 2024

After a bit more investigation on this front, my observations:

  • The pixel per char issue has been fixed in tmux, and was not the problem
    in w3m anyway. But:
  • tmux does not actually support kitty images, at least not with how they
    are implemented in w3m.

So how come kitty icat works in tmux? Turns out kitty developers have come
up with a hack to pass images through tmux recently (at least it did not
exist when I was originally working on kitty images):
https://sw.kovidgoyal.net/kitty/graphics-protocol/#unicode-placeholders

Basically you have to print private unicode characters with certain colors
to create a fake canvas for kitty to load the picture onto.

So to get kitty + tmux images, we would have to implement the above extension.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants