How can I do scale Skin Size with pulling

[Rooky_89]

Hello Rainmeter friends,

I have a question about enlarging the Rainmeter skin by dragging on the corners? [For more flexibility]. Either in the Y direction or in the X direction. I saw an example https://forum.rainmeter.net/viewtopic.php?t=40918#p208827. Enlarging using the mouse wheel option is " too static " for me.



Thanks for your help Kind regards

Rookie 89

Scale with MouseScroll:

size-scroll2.gif

Skin-Code:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1
;-------------------------------------------------
[Variables]
background_W=300
background_H=70
transparenz=150
ScaleFactor=1.0

[Background]
Meter=Shape
Shape=Rectangle 2,2,#background_W#,#background_H#,10 | Fill Color 0,0,0,#transparenz# | StrokeWidth 2 | Stroke Color 0,0,0,140 | Scale #ScaleFactor#,#ScaleFactor#,0,0,0,0
AntiAlias=1
DynamicVariables=1
MouseScrollUpAction=[!SetVariable ScaleFactor "(Clamp(#ScaleFactor# - 0.05,0.2,2.5))"][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable ScaleFactor "(Clamp(#ScaleFactor# + 0.05,0.2,2.5))"][!UpdateMeter *][!Redraw]

[Icon_Rainmeter]
Group=HEADLINE
Meter=Image
ImageName=Rainmeter.png
X=(Ceil(20 * #ScaleFactor#))
Y=(Ceil(12 * #ScaleFactor#))
W=(Ceil(46 * #ScaleFactor#))
H=(Ceil(48 * #ScaleFactor#))
AntiAlias=1
DynamicVariables=1


[Test String]
Meter=String
FontFace=Arial
FontStyle=BOLD
FontColor=255,255,255,255
InlineSetting=Shadow | 1 | 1 | 2 | 0,0,0,255
FontSize=(Ceil(25 * #ScaleFactor#))
X=(Ceil(180 * #ScaleFactor#))
Y=(Ceil(20 * #ScaleFactor#))
Text=Rainmeter
AntiAlias=1
StringAlign=Center
DynamicVariables=1

[eclectic-tech]

The post you are looking for about dragging to resize is in the Mouse plugin thread.

[Yincognito]

EDIT: Eclectic-tech beat me to it, but I swear I didn't look or use the post he mentioned when writing the below...

That post has links to a general view of what you need (the Mouse plugin):
https://forum.rainmeter.net/viewtopic.php?t=26030
A little more specific, but not just about the corners (in the same thread):
https://forum.rainmeter.net/viewtopic.php?t=26030&start=50#p218513
As for doing this at the corners, adjusted code for the bottom right one:

Code: Select all

[Variables]
MouseX=0
MouseY=0

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

---Measures---

[Mouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetOption Background W ($MouseX$-[#MouseX])][!SetOption Background H ($MouseY$-[#MouseY])][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure Mouse "Stop"]
RequireDragging=1
DynamicVariables=1

---Meters---

[Background]
Meter=Image
W=500
H=500
SolidColor=255,0,0,255
UpdateDivider=-1
DynamicVariables=1

[Corner]
Meter=Image
X=-50R
Y=-50R
W=50
H=50
SolidColor=0,255,0,255
UpdateDivider=-1
MouseActionCursorName=SIZE_NWSE
LeftMouseDownAction=[!SetVariable MouseX ($MouseX$-[#CURRENTSECTION#:W])][!SetVariable MouseY ($MouseY$-[#CURRENTSECTION#:H])][!CommandMeasure Mouse "Start"]
DynamicVariables=1

I'll let you implement the above in your skin or do this for other corners if you want, but obviously the latter would also involve moving the skin / changing the skin anchor accordingly, like you noticed in the other thread.

[Rooky_89]

Thanks for the great answer. You guys are the best

Can i specify a minimum size and maximum of the Size? MinValue? MaxValue?

large-hearts.gif

[Yincognito]

Can i specify a minimum size and maximum of the Size? MinValue? MaxValue?

Use the Clamp() function:
https://docs.rainmeter.net/manual/formulas/#Functions

[Rooky_89]

Hello Hello,

Unfortunately, I can't make the corresponding elements bigger or smaller when dragging. I also have the problem that the skin scales back to the base size when it is updated. I'm not really getting to grips with it yet. What am I doing wrong or what have I forgotten [To do with Scaling is simpler ]

nope2.gif

Code: Select all

[Rainmeter]

Update=1000
AccurateText=1
DynamicWindowSize=1
;-------------------------------------------------
[Variables]
MouseX=0
MouseY=0
background_W=300
background_H=70
transparenz=150
ScaleFactor=1

[Background]
Meter=Shape
Shape=Rectangle 2,2,#background_W#,#background_H#,10 | Fill Color 0,0,0,#transparenz# | StrokeWidth 2 | Stroke Color 0,0,0,140
AntiAlias=1
DynamicVariables=1


[MeterRotatedRectangle]
Meter=Shape
X=-17R
Y=-17R
Shape=Rectangle 0,0,15,15,10 | Extend MyModifiers1, MyModifiers2
MyModifiers1=Fill Color 0,0,0,100 | StrokeWidth 0 | Stroke Color 0,0,0,0
MyModifiers2=Rotate 0
LeftMouseDownAction=[!SetVariable MouseX ($MouseX$-[#CURRENTSECTION#:W])][!SetVariable MouseY ($MouseY$-[#CURRENTSECTION#:H])][!CommandMeasure Mouse "Start"]


---Measures---
;
[Mouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable background_W ($MouseX$-[#MouseX])][!SetVariable background_H ($MouseY$-[#MouseY])][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure Mouse "Stop"]
RequireDragging=1
DynamicVariables=1


[Icon_Rainmeter]
Group=HEADLINE
Meter=Image
ImageName=Rainmeter.png
X=20
Y=12
W=46
H=48
AntiAlias=1
DynamicVariables=1


[Test String]
Meter=String
FontFace=Arial
FontStyle=BOLD
FontColor=255,255,255,255
InlineSetting=Shadow | 1 | 1 | 2 | 0,0,0,255
FontSize=25
X=100R
Y=20
Text=Rainmeter
AntiAlias=1
StringAlign=Center
DynamicVariables=1

[balala]

Unfortunately, I can't make the corresponding elements bigger or smaller when dragging. I also have the problem that the skin scales back to the base size when it is updated. I'm not really getting to grips with it yet. What am I doing wrong or what have I forgotten

When you drag it you should alter the value of the variable elements (position and size of meters), same way as you did in your original code. Even if this is far from being perfect, here is a fist example. What I couldn't deal with is what do to when changing too much the aspect ration of the skin. There are solutions to this as well, but so far I did just simple things. So try the following code please and let me know what you trhink:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1
;-------------------------------------------------
[Variables]
MouseX=0
MouseY=0
background_W=300
background_H=70
transparenz=150
ScaleFactor=1

[Background]
Meter=Shape
Shape=Rectangle 2,2,#background_W#,#background_H#,10 | Fill Color 0,0,0,#transparenz# | StrokeWidth 2 | Stroke Color 0,0,0,140
AntiAlias=1
DynamicVariables=1

[MeterRotatedRectangle]
Meter=Shape
X=-17R
Y=-17R
Shape=Rectangle 0,0,15,15,10 | Extend MyModifiers1, MyModifiers2
MyModifiers1=Fill Color 0,0,0,100 | StrokeWidth 0 | Stroke Color 0,0,0,0
MyModifiers2=Rotate 0
LeftMouseDownAction=[!SetVariable MouseX ($MouseX$-[#CURRENTSECTION#:W])][!SetVariable MouseY ($MouseY$-[#CURRENTSECTION#:H])][!CommandMeasure Mouse "Start"]

;---Measures---

[Mouse]
Measure=Plugin
Plugin=Mouse
LeftMouseDragAction=[!SetVariable background_W ($MouseX$-[#MouseX])][!SetVariable background_H ($MouseY$-[#MouseY])][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!CommandMeasure Mouse "Stop"]
RequireDragging=1
DynamicVariables=1

[Icon_Rainmeter]
Group=HEADLINE
Meter=Image
ImageName=#@#Rainmeter.png
X=(#background_W#/15)
Y=(#background_H#/5.83)
W=(#background_W#/6.522)
H=(#background_H#/1.458)
AntiAlias=1
DynamicVariables=1

[Test String]
Meter=String
FontFace=Arial
FontStyle=BOLD
FontColor=255,255,255,255
InlineSetting=Shadow | 1 | 1 | 2 | 0,0,0,255
FontSize=(#background_H#/2.8)
X=(#background_W#/3)R
Y=(#background_H#/3.5)
Text=Rainmeter
AntiAlias=1
StringAlign=Center
DynamicVariables=1

[Rooky_89]

... try the following code please and let me know what you think...

That looks pretty good

The "scaling" is done by mathematics. This is how certain values ​​are created. Is it a kind of backward scaling, so to speak? With normal scaling, size * scaling.

here;
backgroundH=70 / IconsSizeH=48 ==1.458 (#background_H#/1.458) <- ("It´s the factor") [ok ]

- If you make it too big, the "Rainmeter" font will be bigger than the frame. Does it need a MinValue here? MaxValue?

- How i can automate the calculation of different sizes [dividend factor] icons, fonts, line measures...



- I love detailed Information. Enlightenment is everything. Who ask many time, there knows a lot [or has not understand it]
____________________________________________________
How can you avoid this? [Background Scales, but String stays on Size]

Screenshot 2024-10-21 231449.png

Screenshot 2024-10-21 232013.png

[balala]

For instance by replacing the FontSize option of the [Test String] meter by this: FontSize=(Min((#background_W#/12),(#background_H#/2.8))).
And add a PreserveAspectRatio=1 option to the [Icon_Rainmeter] Image meter.

[RicardoTM]

There's a way to keep all meters relative in size and position, but I think there's no post about it since I couldn't find it. I used it to make my HSLidersSTA skin so it always keep meters in place whatever the size or aspect ratio the skin is.

Hold on while I make a test skin, to be honest is a little complicated, but once is set up it's pretty easy to understand.