Dynamic bg (shape) size

[balala]

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

Usually agree, they are much more reliable, having the advantage they can be changed dynamically when the skin is loaded.

[pul53dr1v3r]

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.

Hi ET. Ah, i used the solution since 2014. and finally got rid of it this year thx to a balala's suggestion. The only advantage of using an image as a bg (in my op. but for sure you know it better) is easiness to use. Didn't experince anything else better over using a shape as a bg.
This is one of the disadvantages of using the method:

Others are the inability to customize bg color(s), transparency, edge sharpness (radius), stroke...
Btw, if i don't find a solution to fix the min bg height, i'll control it by the content not makin any additional meter for it, since as i previously said, i wasn't able to fix it that way, but if anyone would come up with a solution, i'd be pleased to apply it.

But thank you for the effort to make the replication of my shape bg.

[eclectic-tech]

No problem creating the example, it was a good mental exercise for me

I just wanted to make sure readers were aware of the BackgroundMargins option for backgrounds that can automatically resize depending on the skin content.

I believe some of the issues you show could be corrected in the image and/or the margin settings, but it is your choice, of course, on how the skin works, and shape meters are the best alternative.

Now that I "muddied the water" I'll look at solutions for your original code

[eclectic-tech]

One suggestion to improve the appearance would be to move your 1st Shape definition (Frame) to the last shape definition since it is your "Frame" and you want it to be the topmost shape (shapes are drawn in order according to where they are defined in the meter).

I also simplified the "CenterAlign" variable formula, added a context menu to toggle Txt1 and/or Txt2, and modified the "Hidden" formulas...
None of these changes are not mandatory, they just suit my quirks

text2.gif

Try this and see what I missed...

Code: Select all

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

ContextTitle=Toggle Text1
ContextAction=[!SetVariable Txt1 (1-#Txt1#)][!UpdateMeter *][!Redraw]
ContextTitle2=Toggle Text2
ContextAction2=[!SetVariable Txt2 (1-#Txt2#)][!UpdateMeter *][!Redraw]

[Variables]
ShapeTopColor=0,0,0
ShapeTopOpacity=150
ShapeBodyColor=0,0,0
ShapeBodyOpacity=150
CornerRadius=5
Stroke_Width=1
Scale=2
;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=(#BgWidth# / 2 )
TopMarginFormula=(#TopMargin# + #BgOffset# - 1)

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

[MeterBackground]
Meter=Shape
X=0
Y=0
W=(((#BgShapeW# + 1) + (#BgOffset# * 2)) * #Scale#)
H=([MeterBackgroundHeight:Y] * #scale#)
;Top shape
Shape=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 0.5) * #Scale#),((#BgShapeW#) * #Scale#),(21 * #Scale#),(#CornerRadius# * #Scale#) | StrokeWidth 0 | Fill Color #ShapeTopColor#,#ShapeTopOpacity#
Shape2=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 9) * #Scale#),((#BgShapeW#) * #Scale#),(14 * #Scale#)
Shape3=Combine Shape | Union Shape2
; Bottom shape
Shape4=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#
Shape5=Rectangle ((#BgShapeX# + 0.5) * #Scale#),((#BgShapeY# + 25) * #Scale#),((#BgShapeW#) * #Scale#),(15 * #Scale# * Max(#Txt1#,#Txt2#))
Shape6=Combine Shape4 | Union Shape5
;Frame
Shape7=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
DynamicVariables=1

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

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

[Meter2]
Meter=String
MeterStyle=styleTitle
X=#CenterAlign#
Y=1R
Text=TWO
Hidden=(1-#Txt2#)
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#

[pul53dr1v3r]

Thx for the suggestions and small modifications.
I see that you added * Max(#Txt1#,#Txt2#) to the Shape5 to make the corners of the bottom shape round even when the 2 Variables are zeros. It's ok and is necessary to make the whole shape looks fine when no content in it but i didn't succeeded in makin the min shape height, when no content in it, and to keeps the height no to expands if no meters exceeds its bottom margin in this case. Hpe you got me.
. But as i said i could go with it, but just wanna try to fix it if possible.
A pic what it should look like

[eclectic-tech]

If I understand correctly, you want the topmost "content" area to ALWAYS be visible even if there is nothing there?!

If so, change the formula for Y in [MeterBackgroundHeight] to
Y=((16 * (#Txt1# + #Txt2#=0)?) + #BottomMargin# + #BgOffset# + 1)R

This will set the position to 16 pixels below the last meter in the skin, which if both (all) meters are hidden (#Txt1# and #Txt2# are zero), would be 16 pixels below the "top frame". If either meter is visible, then the conditional test returns zero and the 16 pixels are not added.

You would need to test for every meter in the skin, not just the 2 in your example.

I would then remove my change of adding * Max(#Txt1#,#Txt2#) to the Shape5.

If this is not what you were looking for, I would need more details.

[pul53dr1v3r]

Thanks ET, it's works just the job, after a slight adaptation to my needs.
((16 * (#Txt1#=0)?) + #BottomMargin# + #BgOffset# + 0)R so that only the first meter in the bottom shape is necessary to be in the formula, since with the two it was making some overlappings in particular situations. Now's fine.

(For those who care for this approach)
In the meanwhile, i noticed one more issue with a part of the code where the hidden Meters were stacking up one after another and making an extra empty space below (only when hidden), and more hidden Meters had been making more the space, since Y value was Y=1R in both cases, when Hidden=0 or 1 either.

Fixed it with this approach to the Y values Y=((#Txtn# = 0) ? 0 : 1)R.
If there is a better solution, i'm all ears.

[eclectic-tech]

...
(For those who care for this approach)
In the meanwhile, i noticed one more issue with a part of the code where the hidden Meters were stacking up one after another and making an extra empty space below (only when hidden), and more hidden Meters had been making more the space, since Y value was Y=1R in both cases, when Hidden=0 or 1 either.

Fixed it with this approach to the Y values Y=((#Txtn# = 0) ? 0 : 1)R.
If there is a better solution, i'm all ears.

I would suggest making additional meters Y position as Y=R and increasing the height of the meters by 1 pixel to give you the same spacing without the need to adjust it; zero relative positioning is much easier to work with when hiding and showing meters.

Just another thought would be to use a Container meter to control what is visible. You could design the skin with all possible meters stacked vertically, and hide/show them by controlling the height of the container. This would eliminate any need to hide/show meter and having to adjust positions.

There are always many ways to achieve the desired result and we all simply decide what works best for us

[pul53dr1v3r]

I would suggest making additional meters Y position as Y=R and increasing the height of the meters by 1 pixel to give you the same spacing without the need to adjust it; zero relative positioning is much easier to work with when hiding and showing meters.

yes, but it would call for determination of the height of all the meters, and it isn't always easy. Especially if we have images, shapes... Right?

Just another thought would be to use a Container meter to control what is visible. You could design the skin with all possible meters stacked vertically, and hide/show them by controlling the height of the container. This would eliminate any need to hide/show meter and having to adjust positions.

I read a bit about the containers but haven't used it in the practice as yet. But have to ask you a question of it. So, "Hidden=1" sets a meter's W and H to 0 but X and Y haven't been touched. How it works with the "Container" option set in the Meter?

There are always many ways to achieve the desired result and we all simply decide what works best for us

Ty for having wish to write about the alternatives. Btw, one of my main priorities are performance.

[jsmorley]

Hidden has no impact on how Container works. It works the same as always.

If you hide the Container meter, it will have and X and Y, but no W or H and will just be a singularity, and nothing will be masked into it. Nothing is drawn.

If you hide the "content" meter, it will be positioned relative to the X and Y of the Container, but no W or H and so will just be a singularity, and nothing is drawn.

In either case, the "content" meter(s) will be positioned relative to the starting X and Y of the Container, but nothing will be displayed.

If a meter is being "used" as a container by any other meter(s), the container itself will not be drawn. Doesn't matter if the "content" meter(s) have no substance.