Dynamic bg (shape) size

[pul53dr1v3r]

Hi. I'm making a skin backgound based on a shape that will change it's height automatically adding/hiding a new meter below (Y=nR).
Sth like the use of an image for Background with BackgroundMode=3 mode.

#1: I'd like someone take a deeper look into the code and check out have i done it right and is there any better solution for any part of the code?

#2: is there a better solution to set the minimal skin height instead of using a transparent meter on the top of the code? Value of TopMarginFormula variable should be used for that purpose, to determine the minimal skin height to the top.

Code: Select all

[Rainmeter]
Update=1000
MiddleMouseDownAction=[!Refresh]
AccurateText=1
DynamicWindowSize=1

[Variables]
ShapeTopColor=0,0,0
ShapeTopOpacity=150
ShapeBodyColor=0,0,0
ShapeBodyOpacity=150
CornerRadius=5
Stroke_Width=1
Scale=1
;Content for Show-Hide
Txt1=1
Txt2=1
;Bg and content positioning
TopMargin=27
BottomMargin=0
BgOffset=5
BgShapeX=#BgOffset#
BgShapeY=#BgOffset#
BgShapeW=196
; Variables calculations
BgWidth=(#BgShapeW# + (#BgOffset# * 2))
CenterAlign=((#BgShapeW# / 2 ) + #BgOffset#)
TopMarginFormula=(#TopMargin# + #BgOffset# - 1)

[styleTitle]
StringAlign=CENTER
StringCase=UPPER
StringStyle=BOLD
FontColor=255,255,255,255
FontFace=Trebuchet MS
FontSize=10
AntiAlias=1

[MeterBackground]
Meter=Shape
;Frame
X=0
Y=0
W=(((#BgShapeW# + 1) + (#BgOffset# * 2)) * #Scale#)
H=([MeterBackgroundHeight:Y] * #scale#)
Shape=Rectangle (#BgShapeX# * #Scale#),(#BgShapeY# * #Scale#),((#BgShapeW# + 1) * #Scale#),([[#CURRENTSECTION]:H] - ((#BgShapeX# * 2) * #Scale#)),((#CornerRadius#+0.5) * #Scale#) | StrokeWidth (#Stroke_Width# * #Scale#) | Stroke Color 160,160,160,255 | Fill Color 0,0,0,0
;Top shape
Shape2=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 0.5) * #Scale#),((#BgShapeW#) * #Scale#),(21 * #Scale#),(#CornerRadius# * #Scale#) | StrokeWidth 0 | Fill Color #ShapeTopColor#,#ShapeTopOpacity#
Shape3=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 9) * #Scale#),((#BgShapeW#) * #Scale#),(14 * #Scale#)
Shape4=Combine Shape2 | Union Shape3
;Bottom shape
Shape5=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 25) * #Scale#),((#BgShapeW#) * #Scale#),([[#CURRENTSECTION]:H] - (((#BgShapeX#+12.8) * 2) * #Scale#)),(#CornerRadius# * #Scale#) | StrokeWidth 0 | Fill Color #ShapeBodyColor#,#ShapeBodyOpacity#
Shape6=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 25) * #Scale#),((#BgShapeW#) * #Scale#),(15 * #Scale#)
Shape7=Combine Shape5 | Union Shape6
DynamicVariables=1

;\\\\\\\\\\\\\\\\\\\\TEST METERS////////////////////

[Meter1]
Meter=String
MeterStyle=styleTitle
X=#CenterAlign#
Y=#TopMarginFormula#
Text=ONE
Hidden=(#Txt1# = 0)
TransformationMatrix=#Scale#;0;0;#Scale#;#Scale#;#Scale#

[Meter2]
Meter=String
MeterStyle=styleTitle
X=#CenterAlign#
Y=1R
Text=TWO
Hidden=(#Txt2# = 0)
TransformationMatrix=#Scale#;0;0;#Scale#;#Scale#;#Scale#

;;\\\\\\\\\\\\\\\\\\\\Bg HEIGHT DETERMINATOR////////////////////

[MeterBackgroundHeight]
Meter=Image
SolidColor=255,255,255,110
X=0
Y=(#BottomMargin# + #BgOffset# + 1)R
W=(#BgWidth# * #scale#)
H=1
TransformationMatrix=#Scale#;0;0;#Scale#;#Scale#;#Scale#

Pls use Txt1 and Txt2 variablees to see how the main function of the example works.

Also, set the variables to 0 to see why i want to set the min skin height.

[balala]

#2: is there a better solution to set the minimal skin height instead of using a transparent meter on the top of the code? Value of TopMarginFormula variable should be used for that purpose, to determine the minimal skin height to the top.

If none of the used variables is changed dynamically, then it's simple to write a proper SkinHeight option within the [Rainmeter] section, to set the proper height of the skin. I thought to something like this: SkinHeight=(#TopMarginFormula#+18*(#Txt1#+#Txt2#)). Unfortunately if the variables are set sometimes dynamically, this solution doesn't work, because the [Rainmeter] section is ALWAYS static, it doesn't accept dynamical changes, nor with !SetOption, nor with !SetVariable, nor otherwise.

[pul53dr1v3r]

Regrettably dynamic, but i just got rid of the SkinHeight this way since it was causing some additional complications. Thx for the input balala.

[balala]

Thx for the input balala.

Sorry didn't help.

[pul53dr1v3r]

Sorry didn't help.

An idea with the Meter would be welcome (if you have any) since i have some issues with it. In some cases it's been overpowered by the next meter after it... But it's late, probably i'm better to take a break up to tomorrow....

[eclectic-tech]

An idea with the Meter would be welcome (if you have any) since i have some issues with it. In some cases it's been overpowered by the next meter after it... But it's late, probably i'm better to take a break up to tomorrow....

I think you should look into using BackgroundMargins and BackgroundMode=3. These are designed to do exactly what you want. It sets margins of the background image that will NOT be scaled when the skin size changes due to showing or hiding meters.

Look at illustro skins for an example of how this works. The background image for every skin is the same 210x68 pixel image; the BackgroundMargins are set so the top 34 pixels and bottom 14 pixels of the image are NEVER scaled, while the center section will scale to any height based on the number of visible meters.

I haven't tested you initial code yet, but I think designing an image as a scalable background is going to be a better and simpler solution rather than using multiple variables and formulas to resize shape meters.

ADDENDUM
The issue, I know we discussed in other threads, was being able to use this method AND scale the skin. The simplest solution I find is to include additional background images pre-scaled to 100%, 125%, 150%, etc. to the extent you want to scale your skins. Yes, this adds several small images, but it simplifies the code immeasurably.

Here is a package "background" that uses an image I created to mimic your shapes and then uses BackgroundMargins and BackgroundMode=3 to automatically resize based on meters. I created 5 background images scaled from 100~200%. The skin "back2.ini" uses the "scale" variable to select the appropriate background. "Back1.ini" is your posted code so you can switch skins to compare.

2backs.gif

Hope this helps and does not "muddy" the water further.

[balala]

I think you should look into using BackgroundMargins and BackgroundMode=3. These are designed to do exactly what you want.

This applies ONLY if there is a background set with the Background option within the [Rainmeter] section. If the background is set up a standalone Shape meter, that's not applicable.

[eclectic-tech]

This applies ONLY if there is a background set with the Background option within the [Rainmeter] section. If the background is set up a standalone Shape meter, that's not applicable.

Yes, this is a completely different way to achieve a skin that reacts to hidden/shown meters, resizes itself automatically, and can be scaled.

It is simpler and more reliable than trying to do it with shape meters (in my opinion)... but feel free to offer more variables and formulas to try to do all of that for shape meters, when an image and 3 lines of code in the [Rainmeter] section achieve the desired result.

[balala]

It is simpler and more reliable than trying to do it with shape meters (in my opinion)... but feel free to offer more variables and formulas to try to do all of that for shape meters, when an image and 3 lines of code in the [Rainmeter] section achieve the desired result.

As I said a few times before, there is only one single problem when working with backgrounds defined within the [Rainmeter] section: a such background can't be modified dynamically, as the [Rainmeter] section itself doesn't support a such dynamic change. Nor !Setoption, nor !SetVariable, nor any other method can be used to modify it. This is an important disadvantage, at least in my opinion.

[jsmorley]

As I said a few times before, there is only one single problem when working with backgrounds defined within the [Rainmeter] section: a such background can't be modified dynamically, as the [Rainmeter] section itself doesn't support a such dynamic change. Nor !Setoption, nor !SetVariable, nor any other method can be used to modify it. This is an important disadvantage, at least in my opinion.

Yeah, I would lean toward Shape meters for backgrounds in all cases myself.