flet icon indicating copy to clipboard operation
flet copied to clipboard

Added ImageViewer Control to display full screen Image with Zoom, Pan & paging

Open Skquark opened this issue 2 years ago • 10 comments

A ImageViewer displays a full screen Image that allows Zoom, Pan, and paging through multipe images.

The image src can be a single image path String or a List of image strings to page through. Example:

import flet as ft
def main(page):
    def show_image_viewer_click(e):
        img = e.control.data
        page.dialog = ft.ImageViewer(src=img, swipe_dismissable=False)
        page.dialog.open = True
        page.update()
    images = ft.GridView(expand=1, runs_count=5)
    for i in range(0, 60):
        images.controls.append(
            ft.GestureDetector(
                content=ft.Image(
                    src=f"https://picsum.photos/150/150?{i}",
                    fit=ft.ImageFit.NONE,
                ),
                data=f"https://picsum.photos/150/150?{i}",
                on_tap=show_image_viewer_click,
            )
        )
    
    page.add(images)
ft.app(target=main)

Skquark avatar Dec 18 '23 12:12 Skquark

Sorry for the delay with reply... I honestly believe widgets like ImageViewer should be implemented as "out-of-band" (OOB) Flet controls in separate libraries, that user can optionally add to the app (via flet build command).

We will create guidelines (there is an item on roadmap) on how to create a Python part (Python adapter) for a custom control and how to create and publish Flutter/Dart part of the control.

I think some of the existing or future Flet "core" controls could be implemented as optional "extensions", e.g. audioplayer, video, webview - they add a certain weight into the resulting app, but not all users need them.

FeodorFitsner avatar Jan 09 '24 17:01 FeodorFitsner

I'm leaving this PR open as a possible candidate for testing OOB control extensions.

FeodorFitsner avatar Jan 09 '24 17:01 FeodorFitsner

Aw, but it seemed like a simple, useful, general use UI function that so many apps use when you click on an image. I've used a full-screen Image Zoom feature in every Flutter app I've done, seemed like it should be a core feature, but it is up to you. I hope I'll be able to use your OOB extension framework when deploying on Google Colab since that's my apps primary platform, I'm a bit confused how it's going to install a personal build of Flet there but will have to figure it out then. My Diffusion Deluxe app would be using the Image Viewer everywhere since the whole purpose of it is to generate high-resolution upscaled AI images that everyone wants to zoom into.. Check my progress at https://DiffusionDeluxe.com/screenshots and see what I mean, the project got really elaborate last year, way too many fun ways to use the Python AI code to make complex images.. Anyways, let me know when there's any updates, I look forward to expanding more features this year, thanks Feodor...

Skquark avatar Jan 10 '24 08:01 Skquark

🤓 OK, could you please update this PR from main and fix the conflicts?

FeodorFitsner avatar Jan 10 '24 20:01 FeodorFitsner

Looks like merging gone wrong - CI is failing: https://ci.appveyor.com/project/flet-dev/flet/builds/48927108/job/bb574ivys2ifw3d3#L145 shake is no longer required: https://github.com/flet-dev/flet/blob/main/package/pubspec.yaml#L23-L43

FeodorFitsner avatar Jan 11 '24 17:01 FeodorFitsner

Thanks Feodor, I fixed those minor issues and got the changes merged. Hopefully it's all good now, let me know if there's anything else I can do. Appreciate your hard work, trying to make it as easy as possible for ya..

Skquark avatar Jan 13 '24 01:01 Skquark

Wondering how this control is going...

yunguangli avatar Mar 01 '24 23:03 yunguangli

We need to make it in a separate package.

FeodorFitsner avatar Mar 02 '24 00:03 FeodorFitsner

Wondering how this control is going...

pychans avatar Apr 17 '24 14:04 pychans

Wondering how this control is going...

I had it all done, even though the commit might need to be redone because main was updated where I couldn't update my PR. However Feodore then said it should be a separate package rather than core, which I have no idea how to do where I can still use it in my install without having to rebuild the package which I don't think would work for me in my Colab launcher. I had it done almost a year ago and it sat, but for me this was still a much needed feature that I've been living without... So I don't know what the next step would be if we have any hope of a standard full screen image viewer.

Skquark avatar Apr 21 '24 21:04 Skquark