savedra1 / clipse

Configurable TUI clipboard manager for Unix
MIT License
349 stars 14 forks source link

feat: display images using sixel or kitty #138

Closed ztmzzz closed 1 month ago

ztmzzz commented 2 months ago

117

The display of images has been initially implemented, but due to issues with BubbleTea or its UI library (I guess), the image rendering appears strange. When I print the image directly to the terminal using fmt.Print, it looks fine. However, when integrated with BubbleTea, the image suffers from unusual cropping.

The workaround I have found so far is to reduce m.preview.Height and scaling the image to a specific resolution. But the image resolution is unrelated to the size of the terminal window. Below is a table I tested, representing the maximum resolution at which the image can be correctly displayed on the terminal. The resolution of the image is ( windowWidth*scale.x , windowHeight*scale.y ). type m.preview.Height scale.x scale.y system.scale
kitty 1/2 9 9 100%
kitty 1/4 9 13 100%
kitty 1/2 18 20 200%
kitty 1/4 18 30 200%
sixel 1/2 14 16 200%

The display quality is poor when dealing with very tall images. Sometimes, the image only shows in the upper half of the terminal. However, it performs well with regular square images, which might be sufficient for preview purposes.

Users need to manually modify the configuration file to set ImageDisplay to either kitty or sixel. ImageScaleX and ImageScaleY represent scale.x and scale.y in the table, HeightCut represents m.preview.Height. These values need to be adjusted according to the actual situation. Personally, I recommend setting HeightCut to 2, as there's no noticeable difference compared to other values.

savedra1 commented 2 months ago

@ztmzzz Apologies for the delay in response and thank you so much for this contribution! Amazing work. I do have one suggestion. I think the image display preferences in the config.json file should be represented as it's own nested object for better organization. Something like this:

  "imageDisplay":  {
     "type": "basic",
     "scaleX": 9,
     "scaleY": 9,
     "heightCut": 2
  }

This can then be added to the main Config struct as a map[string]interface{}.

What do you think? There may have been a reason for this proposed structure that I've missed. Also, it would be good to address the CI failures if possible.

Thank you

ztmzzz commented 2 months ago

I have modified the config structure and passed the CI.

savedra1 commented 1 month ago

@ztmzzz I have just tested locally using kitty, it works very well! Again, thank you for your work on this :blue_heart: I will aim to get the a new release out soon!

Marrieto commented 1 month ago

I'm looking forward to the update! Thanks @ztmzzz! :1st_place_medal: