It is currently April 24th, 2024, 8:36 am

How to move image inside of container

Get help with creating, editing & fixing problems with skins
shift
Posts: 5
Joined: February 23rd, 2023, 4:23 pm

How to move image inside of container

Post by shift »

Basically, I want to be able to control which parts of image are being truncated by container by moving image inside of it. Yes, I can do it using x and y positions of the meter, but doing this dynamically would be much better.
EDIT: The preferred way of "moving the image" would be by y axis and using mousewheel scroll. Ideally, container should be always filled with image, so there won't be any blank parts caused by changed coordinates.

Current code:

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Name=framed
Author=shift
Information=Just a simple widget that displays your picked photo
Version=0.1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[MeterFrame]
Meter=Image
ImageName=C:\Users\shift\Downloads\kdj.jpg
W=250
Container=MeterShape

[MeterShape]
Meter=Shape
Shape=Rectangle 0,0,250,250,5
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5406
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: How to move image inside of container

Post by eclectic-tech »

Well, you updated your post while I put together an example... :D

This code will show a 600x600 image from your 'Pictures' folder every 10 seconds.
It will be masked with a rectangle shape with 10 pixel rounded corners.
I also cropped your image display to show the 600 center pixels (doesn't change your image).
I added a copy of the mask meter shape to show a border.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]

; Selects a random image from your 'Pictures' folder every 10 seconds due to the UpdateDivder setting
[MeasureQuote]
Measure=Plugin
Plugin=QuotePlugin
PathName=%UserProfile%\Pictures\
UpdateDivider=10

[MeterMask]
Meter=Shape
; Meters used as a container will not be drawn. They are used as a "mask". The '10' controls the corner radius.
Shape=Rectangle 1,1,599,599,10

; Displays the image, crops the center 600 pixels of larger images, if smaller it displays it centered
; Left-click the image to select another one before the 10 seconds elapses
[MeterImage]
Meter=Image
MeasureName=MeasureQuote
Container=MeterMask
ImageCrop=-300,-300,600,600,5
LeftMouseUpAction=[!UpdateMeasure MeasureQuote]

; Just a border with an invisible fill color
[MeterBorder]
Meter=Shape
Shape=Rectangle 1,1,599,599,10 | Stroke Color 220,220,220,220 | Fill Color 0,0,0,0
Container=MeterMask

frame.gif
You do not have the required permissions to view the files attached to this post.
shift
Posts: 5
Joined: February 23rd, 2023, 4:23 pm

Re: How to move image inside of container

Post by shift »

Thanks for providing the example! However I am still unsure about updating the image position :?.
I guess I could've done something like this:

Code: Select all

[MeasurePosition]
Measure=Plugin
Plugin=QuotePlugin
Y=#YValue#
UpdateDivider=-1
And plug it in the image meter, updating on event, but unsure how to put it together....

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Name=framed
Author=shift
Information=Just a simple widget that displays your picked photo
Version=0.1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Resolution=250
YValue=0

[MeasurePosition]
Measure=Plugin
Plugin=QuotePlugin
Y=#YValue#
UpdateDivider=-1

[MeterFrame]
Meter=Image
MeasureName=MeasurePosition
ImageName=C:\Users\shift\Downloads\kdj.jpg
W=#Resolution#
Container=MeterShape
MouseScrollDownAction=[!SetVariable YValue "(#YValue#-10)"][!UpdateMeasure MeasurePosition]
DynamicVariables=1

[MeterShape]
Meter=Shape
Shape=Rectangle 0,0,#Resolution#,#Resolution#,20
- my attempt of implementing it, however the widget just dissapears.
shift
Posts: 5
Joined: February 23rd, 2023, 4:23 pm

Re: How to move image inside of container

Post by shift »

Overlooked much more simple solution that works:

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Name=framed
Author=shift
Information=Just a simple widget that displays your picked photo
Version=0.1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Resolution=250
YValue=0

[MeterFrame]
Meter=Image
MeasureName=MeasurePosition
ImageName=C:\Users\shift\Downloads\kdj.jpg
Y=#YValue#
W=#Resolution#
DynamicVariables=1
Container=MeterShape
MouseScrollDownAction=[!SetVariable YValue "(#YValue#-10)"]

[MeterShape]
Meter=Shape
Shape=Rectangle 0,0,#Resolution#,#Resolution#,20
However the movement feels very laggy. Hence I have two questions:
1. Is it possible to just drag image inside container?
2. Is it possible to create a smooth scroll?
shift
Posts: 5
Joined: February 23rd, 2023, 4:23 pm

Re: How to move image inside of container

Post by shift »

I've came to conclusion that hardcoding values would be easier for me, because I plan to keep multiple photo widgets on my desktop, therefore I have to duplicate my skin. Maybe it is possible to spawn multiple meter instances in the same skin, I dont know. Anyways, thanks, ecletic-tech!