Images in textual

[arjunj132]

Hi, I couldn't find anything on just using an image in textual, not a discussion or a issue or anything, even though there must be one🤷‍♂️. (I did find one for rich but it really didn't help)

An image would be a cool feature, and there's not really a easy solution to have one.

There's a package called textual-imageview, and it works really well.

Installing the library and doing this removes the zoom feature that I think is not really required:

from textual_imageview import img
from pathlib import Path
from PIL import Image
import math
from textual.app import RenderResult


# copy and pasted from viewer.py without zoom components
class ImageViewer(Widget):
    DEFAULT_CSS = """
    ImageViewer{
        height: 30%;
    }
    """

    def __init__(self, image: Image.Image):
        super().__init__()
        if not isinstance(image, Image.Image):
            raise TypeError(
                f"Expected PIL Image, but received '{type(image).__name__}' instead."
            )

        self.image = img.ImageView(image)
        self.mouse_down = False
    
    def on_show(self):
        w, h = self.size.width, self.size.height
        img_w, img_h = self.image.size

        # Compute zoom such that image fits in container
        zoom_w = math.log(max(w, 1) / img_w, self.image.ZOOM_RATE)
        zoom_h = math.log((max(h, 1) * 2) / img_h, self.image.ZOOM_RATE)
        zoom = max(0, math.ceil(max(zoom_w, zoom_h)))
        self.image.set_zoom(zoom)

        # Position image in center of container
        img_w, img_h = self.image.zoomed_size
        self.image.origin_position = (-round((w - img_w) / 2), -round(h - img_h / 2))
        self.image.set_container_size(w, h, maintain_center=False)

        self.refresh()
    
    def render(self) -> RenderResult:
        return self.image
    
    def on_resize(self, event: events.Resize):
        self.image.set_container_size(event.size.width, event.size.height)
        self.refresh()

And just calling it with this:

yield ImageViewer(Image.open(Path("vs.png")))

But i'm just saying that an image without having to do it with an external library or anything would be nice.

Sorry if this just doesn't fit what textual is meant for or there's already an issue or whatever.

[davep]

It is the first question in the FAQ.

[arjunj132]

My bad, i didn't see this