Skip to content

Major new functionality - zooming in the image viewer!

Latest

Choose a tag to compare

@iustin iustin released this 24 May 21:51
v2025.21.0

After many years, finally added image zooming to the main image viewer, together with mouse and gesture support for panning and pinch-zooming. This was on the cards since movie support was implemented, but my previous efforts failed to work well, for various reasons, one of them being the HammerJS library not being flexible enough. I used Claude (3.7 Sonnet) to help me implement fully-manual gesture handling, and then reverse engineer my code - at which it was not so good. I spent then a lot of time to understand the old viewer code, and it resulted in a significant simplification as well.

The zoom was tested on both small images, and large images, up to a ~96 Megapixel image from NASA (~200MiB disk size). It takes a while to load that, but afterwards panning and zooming is smooth.

As a side effect of the changes, I redid the way the HTML elements are laid out in order to remove manual state management, and this uncovered something that seems to be a bug in Safari iOS on iPads related to fullscreen corrupting viewport sizing -
https://bugs.webkit.org/show_bug.cgi?id=293514. There's no workaround for it, except either don't enter full-screen, or close the tab and open a new one - page reload doesn't help.

Additional new feature: Added simple yearly and monthly timeline graphs to the curate page, to help understand the growth of the collection over time.

Bug fixes

  • When going to image view from a search, preserve (as intended) the search parameters; before it was going to the first image that matches the search, but the search filter was dropped, so it was simply jumping
    into all image search at a specific position.
  • In the image viewer, when the navigation bar changes height due to wrapping (which in itself is a UI bug), the canvas was not resized
    correctly, as the positioning was done manually. Fix that by switching to a flex columnar layout, which automatically triggers a CSS resize of the page layout, including the image canvas. That, coupled with switching the method used to observe size changes (from window resize to ResizeObserver) fixes the issue. In the new model, the canvas will resize automatically with the navigation bar, which in some cases is more jarring than the over or underflow, but it's more correct, as it doesn't leave permanent wrong positioning, just a one-time visible change.
  • Cover image generation for movies has been made more reliable, as sometimes ffmpeg was trying and failing to read from standard input, leading to no cover images.

Small improvements

  • The breadcrumbs are now so styled, that they will not wrap, but instead be clipped (and show an ellipsis on overflow), to keep the page structure constant no matter the folder/image names. Before, the wrapping could cause reflow when navigating between images.
  • Furthermore, the breadcrumb has been customised for the viewer specifically, to not show the "Viewer" final item, and on small sizes,
    show only the folder name, since that's most representative of the context, on medium sizes the image name too, and on large size also the
    top level folder. This should result in more meaningful context of the picture being viewed, as the viewer only shows (briefly) the image name.
  • The image viewer (the full page one) has been sped up by skipping some expensive CSS computations in the call path for every image drawing; this leads to a small performance improvement, but also potential visual bugs if display changes are missed.
  • The image viewer's image navigation bar is now centred on small screens, which finally solves a very old UI annoyance (on small screens in portrait mode, it was consuming ~70% of the screen width, but not centred). Additionally, move the nav bar a bit higher, so that on iOS phones or tablets, it doesn't conflict with the bottom "swipe-up" element (the black bar used to go to the home screen).
  • Make all Plotly graphs responsive, as it seems this is not the default, even in 2024+.