It is currently March 29th, 2024, 9:26 am

Zoom and Scroll an Image

Get help with creating, editing & fixing problems with skins
User avatar
ZipD
Posts: 37
Joined: September 10th, 2017, 4:31 pm

Zoom and Scroll an Image

Post by ZipD »

How do I zoom into an oversized image that's currently larger than the current meter's specified Width and Height using a mouse scroll? Here's how I currently do it but the code doesn't account for larger images for some reason. Original image size is 2186x1407.

Code: Select all

[MeterMapImage]
Meter=Image
ImageName=oversizedmap.jpg
W=1080
H=695
Y=10
PreserveAspectRatio=2
DynamicVariables=1
;zoom in to mouse position
MouseScrollUpAction=[!SetOption MeterMapImage ImageCrop "$MouseX$,$MouseY$,[MeterMapImage:W],[MeterMapImage:H],1"][!UpdateMeter MeterMapImage][!Redraw]
;zoom out to full map
MouseScrollDownAction=[!SetOption MeterMapImage ImageCrop ""][!UpdateMeter MeterMapImage][!Redraw]
Here's a link to how it looks like currently: http://gph.is/2eY8cT9

Image

Also, I'm thinking if I'm unable to zoom in, can I just display the image without scaling but still constrained within a set Width and Height and let me scroll around it using a mouse action?

Any help would be much appreciated.
Last edited by ZipD on September 11th, 2017, 5:09 am, edited 1 time in total.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Zoom and Scroll an Image

Post by balala »

Not very sure this is exactly what you want, but take a look at the following code. It uses the ActionTimer plugin, to zoom in and out, but it does this for the whole image, without cropping it:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
Width=200
ImageWidth=XXX
ImageHeight=XXX
U=[!UpdateMeasure "MeasureZoom"][!UpdateMeter "MeterMapImage"][!Redraw]

[MeasureZoom]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Up,25,10
Up=[!SetVariable Width "(Clamp((#Width#+100),200,1200))"]#U#
ActionList2=Repeat Down,25,10
Down=[!SetVariable Width "(Clamp((#Width#-100),200,1200))"]#U#
DynamicVariables=1

[MeterMapImage]
Meter=Image
ImageName=oversizedmap.jpg
W=#Width#
H=(#ImageHeight#*#Width#/#ImageWidth#)
Y=10
PreserveAspectRatio=2
DynamicVariables=1
;zoom in to mouse position
MouseScrollUpAction=[!CommandMeasure "MeasureZoom" "Execute 1"][!CommandMeasure "MeasureZoom" "Stop 2"]
;zoom out to full map
MouseScrollDownAction=[!CommandMeasure "MeasureZoom" "Stop 1"][!CommandMeasure "MeasureZoom" "Execute 2"]
Initially the image is shown at the width set by the Width variable in the [Variables] section (the height is calculated accordingly). When you scroll, the size of the image increases / decreases (depending on the scroll direction). You have to add the width and height of the image to the ImageWidth and ImageHeight variable in the [Variables] section. Be careful to not mix the Width and the ImageWidth variables, because they mean different things: the first one is the width of the (resized) image meter, while the second one is the width of the imagefile. I don't know the size of your image, that's why I added the values of both variables (ImageWidth and ImageHeight) as XXX, but you have to enter the apropriate values. Later we can add ImageSize plugin measures, to check and use the size of the image, but for a first try it is much simpler to enter these values manually.
The 200 and 1200 values used in the Up and Down options of the [MeasureZoom] measure are the limits of the image scroll. You can change them.
I suppose that's not exactly what you wanted. But at least does it look like?
User avatar
ZipD
Posts: 37
Joined: September 10th, 2017, 4:31 pm

Re: Zoom and Scroll an Image

Post by ZipD »

Thank you for replying. I've seen this code before when I was searching the forum but it's not what I'm going for. I've updated my original post to show a gif of what I wanted. As you can see it works, kinda, but if I use the same code for another larger image, it will not zoom into where the mouse cursor is.

The image when zoomed, should not be resized Width or Height but stick to what I've defined. That's why I used PreserveAspectRatio=2 so that it doesn't resize itself. What it should do is, just scale itself up or down. Just like Google Maps, it doesn't resize, it just zooms in and out when you scroll the mouse.

Here's what it looks like if I use a larger image with the same code: http://gph.is/2fcudKQ
Image

I was thinking maybe TransformationMatrix should give me what I need but I'm too dumb to figure it out.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Zoom and Scroll an Image

Post by balala »

ZipD wrote:I was thinking maybe TransformationMatrix should give me what I need but I'm too dumb to figure it out.
TransformationMatrix is a very smart option, used properly it can help in many cases, but here, at least for now, I don't think you'd need it.

Below is a bit modified code. When you load (or refresh) it, the image is show at the size given by the Width and Height variables. When you scroll, the image is resized and cropped, to keep a surface with the size given by the Width and Height variable, around the momentan position of the mouse.
This time I gave up the ActionTimer plugin measure. Please check this code and let me know if it is better. If it is, later maybe we can add back the plugin, to get a smoother zoom.
The code:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
Width=200
Height=128
ImageWidth=1080
ImageHeight=695

[MeterMapImage]
Meter=Image
ImageName=oversizedmap.jpg
W=#Width#
H=#Height#
;Y=10
PreserveAspectRatio=2
DynamicVariables=1
;zoom in to mouse position
MouseScrollUpAction=[!SetOption MeterMapImage ImageCrop "(#ImageWidth#*$MouseX:%$/100-#Width#/2),(#ImageHeight#*$MouseY:%$/100-#Height#/2),#Width#,#Height#"][!UpdateMeter "MeterMapImage"][!Redraw]
;zoom out to full map
MouseScrollDownAction=[!SetOption MeterMapImage ImageCrop "0,0,#ImageWidth#,#ImageHeight#"][!UpdateMeter "MeterMapImage"][!Redraw]
User avatar
ZipD
Posts: 37
Joined: September 10th, 2017, 4:31 pm

Re: Zoom and Scroll an Image

Post by ZipD »

Thank you for the code. However, it doesn't zoom into the position of the mouse, all it does it zoom in, which I've already accomplished earlier. In your code, if you zoom into somewhere near the edges, the entire image gets displaced and no longer retain the specified #Width# and #Height# as defined in variables.

But I think you may be closer to the solution than me, can you explain this line and what does it do?

Code: Select all

[!SetOption MeterMapImage ImageCrop "(#ImageWidth#*$MouseX:%$/100-#Width#/2),(#ImageHeight#*$MouseY:%$/100-#Height#/2),#Width#,#Height#"]
I know what ImageCrop does but please explain the formula itself?

I'm thinking if I can understand your formula, I should be able to improve upon it using Calc variables with If-Then-Else conditions to limit the image from resizing itself by modifying the formula's result i.e subtracting or adding to constrain it within the given #Width# and #Height#.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Zoom and Scroll an Image

Post by balala »

ZipD wrote:Thank you for the code. However, it doesn't zoom into the position of the mouse, all it does it zoom in, which I've already accomplished earlier. In your code, if you zoom into somewhere near the edges, the entire image gets displaced and no longer retain the specified #Width# and #Height# as defined in variables.
Well, I think my last code zooms exactly where the mouse is when you zoom. If this point is too close to any of the edges of the skin, the zoomed meter will be partially transparent, being uncovered by the image. But if you zoom somewhere farther of the edges, it zooms exactly into the position of the mouse. Doesn't it?
ZipD wrote:But I think you may be closer to the solution than me, can you explain this line and what does it do?

Code: Select all

[!SetOption MeterMapImage ImageCrop "(#ImageWidth#*$MouseX:%$/100-#Width#/2),(#ImageHeight#*$MouseY:%$/100-#Height#/2),#Width#,#Height#"]
I know what ImageCrop does but please explain the formula itself?
When you scroll up, the MouseScrollUpAction option of the [MeterMapImage] meter cut out the image (being applied). The cropping is done from the point with the (#ImageWidth#*$MouseX:%$/100-#Width#/2) and (#ImageHeight#*$MouseY:%$/100-#Height#/2) coordinates. For the X coordinate for example $MouseX:%$/100 is the percentage of the width of image where you scrolled ($MouseX:%$ being a number between 0 and 100, it must be divided by 100, to get a subunit number - which in fact is the mathematically expressed percentage). This must be multiplied by the width of the image, to get the horizontal coordinate of the point where you scrolled. Finally from this calculation we've extracted half of the width of the meter. If this last extraction wouldn't be done, the mouse position wouldn't be in the center of the zoomed surface, but in its upper left corner. Same for the vertical coordinate.
The size of the cropped surface is #Width# and #Height# (last two parameters of the option).
Sorry if all this isn't clear enough, my not too good English doesn't let me to explain it better, but I hope you understood.