How can I do scale Skin Size with pulling

[Yincognito]

Yeah, I wanted to mention the size of elements and the aspect ratio earlier, but somehow I forgot about it. The way to do it is to make the size of the elements the minimum between their dragged width and height, e.g.:

Code: Select all

FontSize=(Min(OriginalFontSize*DraggedBackgroundWidth/OriginalBackgroundWidth,OriginalFontSize*DraggedBackgroundHeight/OriginalBackgroundHeight))

or, if you like it better:

Code: Select all

FontSize=(OriginalFontSize*Min(DraggedBackgroundWidth/OriginalBackgroundWidth,DraggedBackgroundHeight/OriginalBackgroundHeight))

The above is mostly pseudocode, but you get the idea. When doing that and changing aspect ratio, you will get corresponding "empty space" at right and bottom skin margins, similar to the "black side bands" in a video player window when doing the same.

By the way, I think you'll have to do the same on the X and Y coordinates for the elements in the skin, except that OriginalFontSize will be replaced with OriginalX or OriginalY, depending on the adjusted coordinate.

P.S. The Original... values above are the ones you use for the standard / initial positioning and sizing, i.e. when dragging didn't occur yet.

[RicardoTM]

Here's the test skin. It uses a system I call "Units, Boxes and Grids". It consists on creating a "units system" and then use it to create a grid, then using the units to place the meters along the grid. Meters need Boxes to keep their positions and dimmensions relative to them. String meters need also dummy meters to calculate the correct font size using a formula Yincognito made some time ago.

ezgif.com-resize.png

Contains 3 variants, free mode, aspect ratio and testing ground.

UnitsBoxesAndGrids_1.0.rmskin

Free Mode

ezgif.com-video-to-gif-converter (3).gif

AspectRatio

ezgif.com-video-to-gif-converter (4).gif

It is farily simple once you understand it. If you have any questions let me know.

[balala]

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.

To be honest, I think there is no way to always keep the meters in place when altering too much the aspect ratio of a skin. In my opinion no way to have properly positioned and sized meters when you are increasing extremely much for instance the height and reduce too much the width (or vice-versa) of a skin. Your skins have a limit on how much can be reduced the size.

[RicardoTM]

To be honest, I think there is no way to always keep the meters in place when altering too much the aspect ratio of a skin. In my opinion no way to have properly positioned and sized meters when you are increasing extremely much for instance the height and reduce too much the width (or vice-versa) of a skin. Your skins have a limit on how much can be reduced the size.

It depends on how you look at it, the position and scale is always kept relative to the dimensions. Of course it won't look good on every aspect ratio or dimension but the positions and sizes are still relative. The condition stays true. The best practice in my opinion is to keep in mind at what point the skin starts looking bad and restrain the user from getting there by setting min and max limits.

At the end of the day, that's our job to guarantee the skin will work as intended, and design the skin in a way it works fine. This method is simply a useful tool that can be helpful on certain situations, but of course it has limitations, as any other method.

[Yincognito]

Besides RicordoTM's excellent example above, here are two more "brute force" ways to approach this:

Code: Select all

[Variables]
OriginalW=200
OriginalH=200
ScaleX=1
ScaleY=1
MouseX=0
MouseY=0

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

---Measures---

[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

---Meters---

[Background]
Meter=Image
W=(200*#ScaleX#)
H=(200*#ScaleY#)
SolidColor=255,0,0,255
UpdateDivider=-1
DynamicVariables=1

[Corner]
Meter=Image
X=-20R
Y=-20R
W=20
H=20
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

[TextMinScale]
Meter=String
X=(100*Min(#ScaleX#,#ScaleY#))
Y=(100*Min(#ScaleX#,#ScaleY#))
W=(160*Min(#ScaleX#,#ScaleY#))
H=(50*Min(#ScaleX#,#ScaleY#))
SolidColor=0,0,255,64
FontColor=0,0,0,255
StringAlign=CenterCenter
FontSize=(10*Min(#ScaleX#,#ScaleY#))
AntiAlias=1
Text=This skin is for you#CRLF#to try this technique :)
UpdateDivider=-1
DynamicVariables=1

[TextOwnScale]
Meter=String
X=(100*#ScaleX#)
Y=(100*#ScaleY#)
W=(160*#ScaleX#)
H=(50*#ScaleY#)
SolidColor=0,255,0,64
FontColor=255,255,255,255
StringAlign=CenterCenter
FontSize=(10*Min(#ScaleX#,#ScaleY#))
AntiAlias=1
Text=This skin is for you#CRLF#to try this technique :)
UpdateDivider=-1
DynamicVariables=1

One is using the minimum available space for coordinates and sizes, the other just follows the aspect ratio itself.
Font size is a little different, since you can't freely stretch fonts on both axes in Rainmeter, so I went with the minimum there (wrapping text has its limits).

P.S. The slightly less "fluid" dragging is because I used Image meters for simplicity, and they don't take fractional positioning the way shapes in a Shape meter do.

Multiple elements in different positions and alignments used below, with the aspect ratio version above (I used a 32x32 icon for testing):

Code: Select all

[Variables]
OriginalW=200
OriginalH=200
ScaleX=1
ScaleY=1
MouseX=0
MouseY=0

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

---Measures---

[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

---Meters---

[Background]
Meter=Image
W=(200*#ScaleX#)
H=(200*#ScaleY#)
SolidColor=255,0,0,255
UpdateDivider=-1
DynamicVariables=1

[Corner]
Meter=Image
X=-20R
Y=-20R
W=20
H=20
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

[Text1]
Meter=String
X=(17*#ScaleX#)
Y=(39*#ScaleY#)
W=(100*#ScaleX#)
SolidColor=0,255,0,64
FontColor=255,255,255,255
StringAlign=Left
FontSize=(10*Min(#ScaleX#,#ScaleY#))
AntiAlias=1
Text=Rainmeter
UpdateDivider=-1
DynamicVariables=1

[Icon1]
Meter=Image
X=(150*#ScaleX#)
Y=(-32*#ScaleY#)R
W=(32*#ScaleX#)
H=(32*#ScaleY#)
SolidColor=0,255,0,64
PreserveAspectRatio=1
ImageName=#@#1.png
UpdateDivider=-1
DynamicVariables=1

[Text2]
Meter=String
X=(100*#ScaleX#)
Y=(100*#ScaleY#)
W=(150*#ScaleX#)
H=(50*#ScaleY#)
SolidColor=0,255,0,64
FontColor=255,255,255,255
StringAlign=CenterCenter
FontSize=(10*Min(#ScaleX#,#ScaleY#))
AntiAlias=1
Text=This skin is for you#CRLF#to try this technique :)
UpdateDivider=-1
DynamicVariables=1

[Text3]
Meter=String
X=(180*#ScaleX#)
Y=(160*#ScaleY#)
W=(100*#ScaleX#)
SolidColor=0,255,0,64
FontColor=255,255,255,255
StringAlign=Right
FontSize=(10*Min(#ScaleX#,#ScaleY#))
AntiAlias=1
Text=Rainmeter
UpdateDivider=-1
DynamicVariables=1

[balala]

It depends on how you look at it, the position and scale is always kept relative to the dimensions. Of course it won't look good on every aspect ratio or dimension but the positions and sizes are still relative. The condition stays true. The best practice in my opinion is to keep in mind at what point the skin starts looking bad and restrain the user from getting there by setting min and max limits.

At the end of the day, that's our job to guarantee the skin will work as intended, and design the skin in a way it works fine. This method is simply a useful tool that can be helpful on certain situations, but of course it has limitations, as any other method.

Same here: limiting the value a variable can get is way better solution than letting it getting any value. When I wrote my example I didn't take into account this kind of limitation, but if you add such a limit, you get better results, for sure.

[Yincognito]

To be honest, I think there is no way to always keep the meters in place when altering too much the aspect ratio of a skin.

I think this is a problem similar to how there's no way to accurately project the globe map on a plane, so in the end, everyone chooses what best suits his needs and has the fewest drawbacks possible. A skin is by design made to layout stuff a certain way, so obviously empty spaces (where the other elements should fit as well) will occur when the aspect ratio is changed. I'm surprised you didn't mention TransformationMatrix yet, but that's probably because, although visually it does its job, functionally the mouse actions still register on the original position and size of meters.

[balala]

I'm surprised you didn't mention TransformationMatrix yet, but that's probably because, although visually it does its job, functionally the mouse actions still register on the original position and size of meters.

Are you? I'm glad. But no, I didn't mention it not because of its limitations, but because I didn't thought would be needed to use it.

[Yincognito]

Are you? I'm glad. But no, I didn't mention it not because of its limitations, but because I didn't thought would be needed to use it.

Oh, I see.

[RicardoTM]

Same here: limiting the value a variable can get is way better solution than letting it getting any value. When I wrote my example I didn't take into account this kind of limitation, but if you add such a limit, you get better results, for sure.

Honestly I don't really like giving too much freedom to the user because it makes it more difficult to prevent scenarios where things get out of shape. On the HSLiders skin for example, I don't give the option to change the dimensions freely even though the skin is perfectly capable of it, however I created a custom menu for the user to select from certain aspect ratios I tested that look "good enough". And to also please those with extravagant taste, I added the option to invert the aspect ratio (for vertical setup) although I don't really like how it looks, but did make sure it was still functional.