# How to make a custom DynamicImage which support mouse wheel and show pixel value?

The built-in DynamicImage just click the plus sign or minus sign to rescale the image. I have to say click is a not very good operation. Could we make the custom DynamicImage which support the mouse wheel to rescale the image, and I hope it will show the pixel value when the image is large enough. I have recorded a gif for what I want.

It is a useful tool for debugging. But I don't know how to implement it in Mathematica

• I don't think EventHandler has access to any mouse-wheel actions. That's the main reason this won't work. You could always do a control-mouse drag though, like Graphics3D – b3m2a1 Dec 20 '17 at 8:32
• @b3m2a1 Or we can use click action to magnify image and ctrl+click to shrink image. – yode Dec 20 '17 at 9:10
• Another idea is to click + drag to zoom in to the rectangle defined by the starting and stopping points. – Chip Hurst Dec 20 '17 at 16:26
• @ChipHurst Then you have you draw a rectangle every time to zoom. – yode Dec 20 '17 at 17:26

A few simple tweaks of @Heike's answer to this question gets you most of the way there.

ImageZoom[img_Image] :=
DynamicModule[{range,range0,range1,ref,ref2,fac=.7,z=.9,dim,y,aspect,xaspect=1},
dim = ImageDimensions@img;
aspect = 1.*Divide@@dim;
If[aspect>1, xaspect = aspect];
range = range0 = {{0,xaspect}, {0,1}};
EventHandler[Graphics[{Inset[Image[img], {0,0}, {0,0}, aspect]},
PlotRange->Dynamic[range], ImageSize->500],{
"MouseDown" :> (ref=MousePosition["GraphicsImageScaled"];
range0=range;ref2=MousePosition["Graphics"];),
"MouseDragged" :> Which[
CurrentValue["ShiftKey"],
y = MousePosition["GraphicsImageScaled"][[2]]-ref[[2]];
If[y>0, range=(range-ref2)*(z-y)+ref2,(*zoom in*)
If[y<0, range=(range-ref2)/(z+y)+ref2]];,(*zoom out*)
True,
(range=range0+(ref-MousePosition["GraphicsImageScaled"])(range0[[All,2]]-range0[[All,1]]));
],
"MouseClicked" :> Which[
CurrentValue["ControlKey"], range={{0,xaspect},{0,1}},(*Back to start*)
CurrentValue["ShiftKey"],(*zoom out*)
range=(range-MousePosition["Graphics"])/fac+MousePosition["Graphics"];,
True,(*zoom in*)
range=(range-MousePosition["Graphics"])*fac+MousePosition["Graphics"];
]},Method->"Preemptive"]
]


Applying the above function to an Image gives you both click-and-drag panning and zoom.

To zoom in:

• Hold shift and drag up
• or just click anywhere

To zoom out:

• Hold shift and drag down
• or just shift click anywhere

However, the frontend starts grinding to a halt on large images:

• Good job, just don't show the pixel value. – yode Dec 21 '17 at 5:39
• @yode I can try to add the pixel values if this basic zoom functionally if working for you – M.R. Dec 21 '17 at 5:40
• Yes, it is a good solution.. – yode Dec 21 '17 at 5:40