It is currently November 4th, 2024, 4:00 am

How can I do scale Skin Size with pulling

Get help with creating, editing & fixing problems with skins
RicardoTM
Posts: 436
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: How can I do scale Skin Size with pulling

Post by RicardoTM »

Rooky_89 wrote: October 28th, 2024, 6:14 pm Hey welcome Back. :welcome:

I have a question about; how I can save the current skin size. I understand the [!WriteKeyValue Variables] [ScaleX] [ScaleY ] thing, but what I don't understand is how I get the values ​​to save the current size. How is this made up?... :confused: :oops: I hope you do understand what i mean.

Best regards


From these values ​​[marked in red] to the End Skin Size?.
dragged2.png
Not sure you understand writekeyvalue since the syntax you describe is incorrect.

The syntax shuld be [!WriteKeyValue Variables "NameOfTheVariableToWrite" "ValueToWrite" "PathToTheFileWhereToWriteTheVariable"]

So basically: [!WriteKeyValue Variables "MouseX" "[#MouseX]" "pathtosonevariablesfile.inc"]

[#MouseX] is for it to write the latest value of the variable whic was set by a set variable bang.

Or Scale or whatever variable you need to write

You can leave the path empty to write the variable to the current file
User avatar
Yincognito
Rainmeter Sage
Posts: 8597
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How can I do scale Skin Size with pulling

Post by Yincognito »

Just a small note, RicardoTM probably meant "omit the path" instead of "leave the path empty", if by any chance you want to write those values to the .ini where you execute those bangs from (not sure if leaving it empty is valid or achieving the same, didn't test).

Also, you only need to write the ScaleX and ScaleY values, since the MouseX and MouseY variables are just temporary values that store how much the mouse pointer is offset from the bottom right of the meter that triggers the resizing, when you start dragging.



By the way, Ricardo, your sample skin doesn't have the latter 2 variables (or use those ($MouseX$-[#MouseX]) and ($MouseY$-[#MouseY]) formulas), that's why when dragging is started, the bottom right of your skin appears to suddenly "jump" to where the mouse pointer is located, instead of remaining in the same position as long as the mouse isn't moved. The GIFs for your other skins don't appear to exhibit that behavior though.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Rooky_89
Posts: 89
Joined: September 21st, 2024, 4:57 pm
Location: Germany, in the stone cave

Re: How can I do scale Skin Size with pulling

Post by Rooky_89 »

Yincognito wrote: October 28th, 2024, 9:23 pm
Also, you only need to write the ScaleX and ScaleY values
Excuse me :confused: :handtohead: :oops:


I tried to understand how the scaling factor is calculated, but I can't figure it out. Ultimately, I want to know how the values ​​are put together. [please provide a calculation example]. :???: :rosegift:

Code: Select all

[DragCorner]
Meter=Image
X=-11R
Y=-11R
W=10
H=10
SolidColor=0,0,0,1
UpdateDivider=-1
MouseActionCursorName=SIZE_NWSE
LeftMouseDownAction=[!SetVariable MouseX ($MouseX$-[#CURRENTSECTION#:W])][!SetVariable MouseY ($MouseY$-[#CURRENTSECTION#:H])][!CommandMeasure Mouse "Start"]
DynamicVariables=1
;
;==================================================
;#MEASURES MOUSE	#MEASURES MOUSE	
;==================================================
;
[Mouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable ScaleX (Clamp(($MouseX$-[#MouseX])/#OriginalW#,0.1,5))][!SetVariable ScaleY (Clamp(($MouseY$-[#MouseY])/#OriginalH#,0.1,5))][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure Mouse "Stop"]
RequireDragging=1
DynamicVariables=1
RicardoTM
Posts: 436
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: How can I do scale Skin Size with pulling

Post by RicardoTM »

In the sense of your skin you are not really scaling, you are "redimensioning", essentially simply changing the dimensions of your skin trough a simple addition.

Nvm, I remembered that you are actually scaling it by dragging it from the corners, ignore the above. The next explanation is still relevant:


Let's talk about scaling first. A scale is (normally) a decimal value from 0 to 1 and it's a multiplication. Let's say you have a squared skin with dimensions 10x10. We go with a square first. So both W and H are the same value.

So we can say that 10 = 1, because 10x1 = 10

If we want to scale it down, we need to multiply its dimensions by a number, this number we call it a scaler.If we want to scale it down to half of its size, we multiply its dimensions by 0.5. 10 x 0.5 = 5. It's the same as if we divided 10/2, but we use decimal values because of the 1:1 proportion, 10x1 = 10. And we wouldn't be able to scale it up.

So if you wanted to scale the skin up to double its size, you would have to multiply 10x2 = 20, now it's bigger.

The mouse actions are simply changing this multiplier. Because you have W*Scaler and H*Scaler (and everything else as well) so the bangs normally look something like this on a mouse wheel up action: ([#Scaler]+0.1) and on a mouse wheel down would be ([#Scaler]-0.1). This is changing the scaler value on increments of 0.1, if you change that number then it would increase or decrease in size way faster. So when you have W*[#Scaler] what you really are doing is:

Scaler=1
W=10*1
H=10*1

Scaler=0.5
W=10*0.5
H=10*0.5

...

I gotta do something, I'll continue with the other explanation later.
User avatar
Yincognito
Rainmeter Sage
Posts: 8597
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How can I do scale Skin Size with pulling

Post by Yincognito »

Rooky_89 wrote: October 29th, 2024, 6:50 pm Excuse me :confused: :handtohead: :oops:


I tried to understand how the scaling factor is calculated, but I can't figure it out. Ultimately, I want to know how the values ​​are put together. [please provide a calculation example]. :???: :rosegift:

Code: Select all

[DragCorner]
Meter=Image
X=-11R
Y=-11R
W=10
H=10
SolidColor=0,0,0,1
UpdateDivider=-1
MouseActionCursorName=SIZE_NWSE
LeftMouseDownAction=[!SetVariable MouseX ($MouseX$-[#CURRENTSECTION#:W])][!SetVariable MouseY ($MouseY$-[#CURRENTSECTION#:H])][!CommandMeasure Mouse "Start"]
DynamicVariables=1
;
;==================================================
;#MEASURES MOUSE	#MEASURES MOUSE	
;==================================================
;
[Mouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable ScaleX (Clamp(($MouseX$-[#MouseX])/#OriginalW#,0.1,5))][!SetVariable ScaleY (Clamp(($MouseY$-[#MouseY])/#OriginalH#,0.1,5))][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure Mouse "Stop"]
RequireDragging=1
DynamicVariables=1
Besides RicardoTM's explanation, let's forget for a moment about the Clamp() function, which is just limiting the value between a minimum and a maximum. Let's also forget momentarily about the -[#MouseX] and -[#MouseY] parts (which, as I previously mentioned, simply take into account the offset between the mouse position and the skin's bottom right corner while dragging), and just use the plain $MouseX$ and $MouseY$. We have:

[!SetVariable ScaleX (Clamp(($MouseX$-[#MouseX])/#OriginalW#,0.1,5))][!SetVariable ScaleY (Clamp(($MouseY$-[#MouseY])/#OriginalH#,0.1,5))]

basically being:

[!SetVariable ScaleX ($MouseX$/#OriginalW#)][!SetVariable ScaleY ($MouseY$/#OriginalH#)]

Considering that $MouseX$ and $MouseY$ are the mouse X,Y position in relation to the 0,0 top left corner of the skin when dragging, they can be thought of as the "new skin size". The #OriginalW# and #OriginalH# are obviously the "old skin size", or rather the original unscaled skin size.

So, by dividing the new skin size to the old skin size when dragging, we get the scaling factors. Considering that those scaling factors are multiplied with the old / original / unscaled values in the formulas of every coordinate in the skin, that's how we get the scaled size of everything when redrawing (or, like RicardoTM pointed out, the resized dimensions of the stuff in the skin).

Example:
- skin is 150 × 100 pixels unscaled (old skin size, #OriginalW# and #OriginalH# variables)
- we drag the mouse at 450, 250 (new skin size, $MouseX$ and $MouseY$ variables)
- we compute ScaleX at 450/150=3 and ScaleY at 250/100=2.5 per !SetVariable
- on redraw, the skin size will be 150 × 3 on 100 × 2.5 pixels, so 450 × 250 pixels, per the coordinate formulas
We notice that the coordinates where we dragged the mouse will be precisely how large the skin will be when we stop dragging (or when we reload the skin with the previously written ScaleX at 3 and ScaleY at 2.5, if we used !WriteKeyValue as well at that moment).

If you want the short version of it, we divide the new size to the old size to get the scaling factors when dragging, then we multiply the old values with those factors in the coordinates. In a way, these two actions are the reverse of one another, hence the same result.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
RicardoTM
Posts: 436
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: How can I do scale Skin Size with pulling

Post by RicardoTM »

:Just before I posted I noticed Yincognito already answered, but I already wrote this stuff so I will publish it anyway, as I'm saying things differently and may also help you (or confuse you :lol:).

Ok, let's continue.

Scaling with the mouse is actually a little bit trickier to understand. If you install the Mouse Example skin that comes with the plugin, you can see that when you move the mouse inside the skin the values on X and Y are changing. If you move left to right, then you are changing X, if you move it up and down, then you are changing Y.

This is important because this is what you are doing when you use the variables $MouseX$ and $MouseY$.

The example skin also comes with a second variant that is called dragging. If you check that one, you'll see the X and Y values change as you drag the ball.

I'm gonna use example code from my skin since I'm not sure how yours works.

In my skin I have:

LeftMouseDragAction=[!SetVariable MouseX $MouseX$][!SetVariable MouseY $MouseY$][!SetVariable backgroundW "(clamp([#MouseX]+[&dragger:W],[#MinW],[#MaxW]))"][!SetVariable backgroundH "(clamp([#MouseY]+[&dragger:H],[#MinH],[#MaxH]))"][!UpdateMeter *][!Redraw]

If we break it down, We have:
[!SetVariable MouseX $MouseX$][!SetVariable MouseY $MouseY$]
This is setting the MouseX and MouseY variables to the values of $MouseX$ and $MouseY$, so esentially it's capturing the X and Y coordinates of the pointer when I click on the dragger.

Then these new MouseX and MouseY variables will be used to Scale the skin:

[!SetVariable backgroundW "(clamp([#MouseX]+[&dragger:W],[#MinW],[#MaxW]))"][!SetVariable backgroundH "(clamp([#MouseY]+[&dragger:H],[#MinH],[#MaxH]))"]

I created a backgroundW and BackgroundH variables, these variables on my skin are literally the H and W values of the whole skin, and all the meters are relative to them, so if I change those variables, the size of every meter will change as well.

Now, I said it's trickier because you have to take into account that what you essentially want to do is to increase the value of H and W.

Let's say BackgroundH and BackgroundW = 10 again. What I want is that if I drag the mouse up or down, the H changes value, and if I do it left to right then the W.

That's this:
(clamp([#MouseX]+[&dragger:W],[#MinW],[#MaxW]))
and this
(clamp([#MouseY]+[&dragger:H],[#MinH],[#MaxH]))

Ignore the clamp and everything after the comma ' , ' for now.

What's happening here is that we are setting BackgroundH and BackgroundW to the value of MouseY and MouseX. I added the + [&Dragger:W] and [&Dragger:H] to account for the size of the dragger, to make sure that it starts at the dragger and not before or after. That is important so the mouse dragging works fine, and I also noticed that without it the mouse plugin starts buggin, trying to open inexistent files for some reason lol.

So I'm just adding the size of the dragger shape, which is an ellipse. And that's it.

So in the background what's happening is that the variable MouseX and MouseY become the value of the variables $MouseX$ and $MouseY$ and we make that the value of W and H.

The clamp function simply lets you add a min and max value so the skin is not scaling beyond a boundary I set.

Not sure if all of this makes sense to you. Your'e simply changing a variable, and then using that variable for the dimmensions of your skin. You can use those variables as you want, so you can use them to scale for example.

A way to test stuff is creating measures to really see what's going on, you can check the mouse example skin. Although it is doing it somewhat differently, but its the same process, the example skin is using SetOption instead of SetVariable.