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

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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

Skquark
Copy link

@Skquark Skquark commented Dec 18, 2023

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)

@FeodorFitsner
Copy link
Contributor

FeodorFitsner commented Jan 9, 2024

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
Copy link
Contributor

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

@Skquark
Copy link
Author

Skquark commented Jan 10, 2024

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...

@FeodorFitsner
Copy link
Contributor

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

@FeodorFitsner
Copy link
Contributor

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

@Skquark
Copy link
Author

Skquark commented Jan 13, 2024

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..

@yunguangli
Copy link

Wondering how this control is going...

@FeodorFitsner
Copy link
Contributor

We need to make it in a separate package.

@icsos
Copy link

icsos commented Apr 17, 2024

Wondering how this control is going...

@Skquark
Copy link
Author

Skquark commented Apr 21, 2024

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.

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

Successfully merging this pull request may close these issues.

4 participants