Image zoom and pan tools/techniques

#1

Are there TW tools or techniques available to zoom and pan specified images in a tiddler?

I’m building a wiki mostly for my own learnings/notes on a new large project at GigantiCorp. Some of the (software) architectural work is already done, but the diagrams are too large to be understood at all without zooming in, and panning around them. The current one I’m looking at is 2987 x 3173 pixels. That this demonstrates a need for better diagrams is a given, but that’s not part of my job this time.

I would like to be able to view these diagrams inside my wiki, but I don’t recall seeing any tools that handle zooming and panning of images or divs that contain them. I also don’t recall seeing any pure CSS solutions for this. I’m sure I can port one of the JS solutions if necessary, but I was hoping someone here knew of a tool or technique I can just use. Something like CTRL-plus or CTRL-minus won’t work properly in this case, as scaling the tiddler title by large amounts actually reduces the room left for the image contents.

Have you seen any tools that would let me easily zoom and pan individual images inside TiddlyWiki?

1 Like
#2

With the help of AI I found this (javascript) that might give you a hint:

1 Like
#3

@Scott_Sauyet if you ever put something together based on the links @Thomas_Chuffart gave you, please share the wealth!

#4

Thank you. I know Panzoom, and it would probably be the one I would convert if necessary.

I’ve never seen openseadragon before, and it’s quite impressive, but a much larger toolset than I was imagining.

#5

I have similar UIs in some of image manipulation plugins but none of them are quite polished enough to share.

The basics are:

  • a container around the image that hides the overflow
  • use eventcatcher to make the image draggable inside the container ( modifying CSS property transform: translate or transform: translate3d)
  • make the image zoomable by modifying the CSS property zoom.
  • optionally use eventcatcher to bind the mouse scrollwheel for zooming.
Screen capture

video1-ezgif.com-optimize

1 Like
#6

Give this a try:

\procedure range(field,min,max,step,default)
<$keyboard key=escape actions="<$action-deletefield $field=<<field>>/>">
<$range field=<<field>> min=<<min>> max=<<max>> increment=<<step>> default=<<default>>/>
</$keyboard>
<$text text={{{ [<currentTiddler>get<field>] ~[<default>] }}}/>
\end

<$let zoom={{{ [{!!zoom}!match[]] ~100 }}} X={{{ [{!!X}!match[]] ~0 }}} Y={{{ [{!!Y}!match[]] ~0 }}}>
<style>
.viewer { width:30vw; height:30vh; border:1px solid; overflow:auto; }
.viewer img { max-width:auto; max-height:auto; zoom:<<zoom>>%; transform:translate(<<X>>px,<<Y>>px); transform-origin:top left; }
</style>
</$let>
<$select field=source default="">
   <option value="">none</option>
   <$list filter="[all[]is[image]]"><option><<currentTiddler>></option></$list>
</$select>
<div class=viewer><$image source={{!!source}}/></div>

| zoom:|<<range zoom 1 500 1 100>>%|
| X:|<<range X -5000 5000 10 0>>px|
| Y:|<<range Y -5000 5000 10 0>>px|

enjoy,
-e

2 Likes
#7

Thank you. I started trying something similar, and realized that I was falling into that same trap again where the tinkering starts to displace the work it was supposed to make easier. I may well return to this after the holidays, but I will skip it for now… unless Eric’s solution is trivial to implement.

But thanks. It makes it clear enough in my mind that I don’t have to port any JS solution; I can build this natively.

#8

Thank you. It seems to be a partly-working solution to the problem. But the zooming seems to stop working well below the 500% you have chosen. I’m not sure why. But I’m going to stop fiddling now and get back to learning the system. I will probably look again next week.

Thank you for the approach.

#9

When you return Scott, I just thought I would point out some websites I visit let you click on the image to to view it and allow zoom and pan but I understood it was leveraging the view of the image from the view features of the browser, not the website. A lot of websites reduce image size and restrict your seeing the more detailed version but some do not. In this case you control the image size and should be able to deliver it in a way the browser can permit pan and zoom in.

  • I don’t know how to do this but I think it could be a profitable path to research.
#10

I happened to hear someone discussing this topic recently.

‘’‘GitHub - graphif/project-graph: A node-based visual tool for organizing thoughts and notes in a non-linear way.’’’

‘’‘Noteplace’’’

‘’’
https://pimgeek.com/app/noteplace/
‘’’

#11

I don’t think this will be particularly difficult to do. (I know, I know, famous last words!). I will look at some point. But I also don’t think implementing this has much interesting too teach me, so I would happily use prior art if it were available.

I had been hoping there were going to be answers like, “Oh, just use Tobibeer’s implementation which is right here.” Or perhaps, “Just add this class to your image and include the following CSS.” Oh well. I’ll figure it out if it becomes important. If I do, I’ll report back here

#12

yes, from prior experience a lot of image tools are used to stop people leaching content and images and right size the image so any zoom in shows it’s a poor resolution, however some novices use the raw or oversized images, which you can open in full screen and look into the details. Of course you can do this intentionally.

1 Like
#13

If a lightbox approach would suit your purposes, Saq does have a nice plug-and-play implementation available at https://saqimtiaz.github.io/tw5-plugins-sandbox/. It doesn’t come with any built-in tools for panning, but you can pan normally with a mouse while zoomed in on an image in the lightbox.

The plugin itself is called Spotlight, but it also plays well with Macy, as seen in “Macy: Example with lightbox”.

1 Like
#14

Oh I should have thought about that! I’ve fiddled with it in the past, although I don’t have any real wikis using it. I love the underlying library and the integration seems well done.

I had never noticed that. I think this will work well. I’ll try it when I’m back in the office. Thank you for the recommendation.

And thank you, @saqimtiaz, for the wonderful tool!

1 Like