Floating magnifier showing details in the result image

mumax / 3

GPU-accelerated micromagnetic simulator

Other

450 stars 150 forks source link

Floating magnifier showing details in the result image #216

Closed jsampaio closed 5 years ago

jsampaio commented 5 years ago

This adds a magnifier to the html interface of the mumax results page. The magnifier floats on top of the image and shows a zoomed-in detail of the image under the cursor.

godsic commented 5 years ago

@jsampaio awesome, thanks! have you tried to test it against different browsers?

jsampaio commented 5 years ago

@godsic : thanks! I've tried on safari and firefox.

godsic commented 5 years ago

@jsampaio how the image of the loupe is constructed? Is it fetched from elsewhere?

jsampaio commented 5 years ago

It’s the same image, from the same address. The zoom is done just with css and JavaScript in the user’s browser

kkingstoun commented 5 years ago

Hi,

I made it in a little bit different way:

https://www.youtube.com/watch?v=xN2JIwht92g&feature=youtu.be

and second, draggable:

https://youtu.be/1cM8DxbPQsA

If you like it I plan to add zooming functionality using wheel in mouse. What do you think about this solution?

jsampaio commented 5 years ago

My solution or the two from @kkingstoun 's seem ok to me. My comments on the three solutions:

The loupe (my solution) has the advantage that the user immediately understands that there is a way to zoom in, and it works immediately; there's no learning to be done, no clicking to be remembered.
The scaling by dragging (the solutions from @kkingstoun ) has the advantage that once the user has dragged the image, they can see it entirely. However, it is not immediately clear that it is possible to do it, and it demands a bit more interaction. If you choose this, I think there should be some indication (textual or graphical) that it is possible to scale the image by dragging.
On the second video, the dragging changed the image aspect ratio. I think the aspect ratio should be kept constant.

for information, here's a screenshot of the loupe: untitled 3

kkingstoun commented 5 years ago

@jsampaio you have the right suggestions, I will prepare graphical toolbox with icons representing loupe, drag, resize, and zoom. I think that user, should have an option to use it, because not every time the loupe is useful. I'm thinking also about requesting render to return an image in higher resolution (upon request) for loop and zooming, but i have to test how it will influcene on the computing performance.