Floating magnifier showing details in the result image

[jsampaio]

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]

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

[jsampaio]

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

[godsic]

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

[jsampaio]

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

[kkingstoun]

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]

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]

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