Using a Container as a mask [solved]

[CodeCode]

Hello3, so I guess the new thing is not to use a mask.png but instead use a container shape of the desired proportions.

I am trying this, but so far with my skin it is not working as hoped:

Code: Select all

[ContainerA]
Meter=Shape
Shape=Rectangle 63,64,211,211,32 | Fill Color 0,0,0,0 | StrokeWidth 1 | Stroke Color 0,0,0,0 

[ImageA]
Meter=Image
ImageName=swtor.png
Container=ContainerA
AntiAlias=1
W=211
H=211
UseExifOrientation=1
PreserveAspectRatio=1
DynamicVariables=1
Group=Image

What am I doing wrong?
Thanks.

[CodeCode]

Changed it to this, now is working.

Code: Select all

[ContainerA]
Meter=Shape
Shape=Rectangle 27,26,208,207,103
DynamicVariables=1

[jsmorley]

It's important to remember that the "content" is only masked onto "solid" pixels in the "container". If you have a fully transparent container, as you did in your first post, nothing will be displayed. There are no pixels to mask any content onto.

Visibility
- Content is only drawn within the rectangular W and H boundaries of the container meter.
- Content outside the container is truncated, and in effect doesn't exist.
- Content is only drawn on solid pixels of the container.
- The container meter itself is not drawn, just the content.
- Any transparency of both the container and the content is cumulative.

[balala]

I'm not entirely sure this is completely correct, but I tend to say it is.
I think the opacity of a masked meter is equal to the product of visibilities of the meter itself and its container.
Here is an example:

Code: Select all

[Variables]
Transp=150

[MeterMask]
Meter=STRING
X=100
Y=100
Padding=15,5,15,5
FontColor=220,220,220,#Transp#
FontSize=108
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=A
DynamicVariables=1

[MeterCircle]
Meter=Shape
X=0
Y=0
Shape=Ellipse 0,0,80 | Extend MyModifiers1
MyModifiers1=Fill Color 255,0,0,#Transp# | StrokeWidth 4 | Stroke Color 46,115,31,255
Container=MeterMask

[Meterstring]
Meter=STRING
X=200
Y=100
Padding=15,5,15,5
FontColor=255,0,0,(255*(#Transp#/255)*(#Transp#/255))
FontSize=108
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=B

In this example Transp is a transparency value, varying between 0 and 255. The [MeterMask] meter, which is the container of the next meter, named [MeterCircle], is set to a transparency of #Transp# (through its FontColor option), while [MeterCircle] (which is the "masked" meter) has the same transparency (#Transp#). The visibility of what you see from the above two meter after applying the container is the same (at least visually) as the visibility of the [Meterstring] meter, which has no container, its transparency depending only on the last value of its FontColor option, which is set to (255*(#Transp#/255)*(#Transp#/255)). In this expression (#Transp#/255) is the transparency of the main meter ([MeterCircle]) and of the container meter ([MeterMask]), both expressed as numbers between 0 and 1 (this in fact is a percent). These two transparencies have been multiplied together (which gives the transparency same way as a number in the 0 - 1 range) and multiplied with 255, to get the "normal" transparency value used in Rainmeter codes.
As said the above two meters are practically same opaque (or transparent), so I believe (well, in fact I'm absolutely positive) the get the transparency of a meter with a container, you have to multiply the transparencies of these two meters together, as descriobed above.
Maybe a dev should confirm (or refute) if I am right about this.

[jsmorley]

I think that is correct Balala...

Opacity / transparency is internally calculated as a percentage of "255". So when it says it is "cumulative", I guess one way to think of that is that the percentage transparent of one meter, say 204 (0.20 transparent, 0.80 opaque) and the percentage transparent of the other meter, say 178 (0.30) are added together to get 0.50 and then subtracted from the 1.0 percentage that is 255, and you end up with a result that is 50% transparent.

Code: Select all

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

[Variables]

[MeterContainer]
Meter=Image
W=100
H=50
SolidColor=0,0,0,204

[MeterString]
Meter=String
X=50
Y=25
StringAlign=CenterCenter
FontSize=11
FontWeight=400
FontColor=255,255,255,178
AntiAlias=1
Text=Hello World
Container=MeterContainer

[balala]

Opacity / transparency is internally calculated as a percentage of "255". So when it says it is "cumulative", I guess one way to think of that is that the percentage transparent of one meter, say 204 (0.20 transparent, 0.80 opaque) and the percentage transparent of the other meter, say 178 (0.30) are added together to get 0.50 and then subtracted from the 1.0 percentage that is 255, and you end up with a result that is 50% transparent.

With one single comment (hope you don't mind).
First note that Rainmeter operates with opacities, not with transparencies: for instance a completely opaque meter's value is 255, this being in this case the opacity. Accordingly its transparency is 0, not being transparent at all.
Now to calculate the opacity of a meter which has a container, we have to multiply (not to add) together the opacities. For instance in your example the opacity of the meter is calculated as 0.8 * 0.7 = 0.56, which gives the opacity of the meter (this converted to the "classic" alpha value leads to 255 * 0.56 = 143). So the two opacities have been multiplied together and the fact that what you got by adding together the transparencies gives the same result is just a coincidence.
There is one more problem with your description: let's say the opacity of the meters are set to 26 and 52, which means 0.1 and 0.2 accordingly (they are more or less transparent). The corresponding transparencies are 0.9 and 0.8, which added together gives a transparency of 0.9 + 0.8 = 1.7. Too much. The opacity of such a meter is calculated as 0.1 * 0.2 = 0.02 = 5 (practically almost completely transparent).
The multiplication avoids the possibility to overcome 1, which in case of addition in some circumstances is possible.

[jsmorley]

Balala, I don't doubt you are right.

I was just trying to shorthand how one might "think" about the result. If you think of it being the cumulative opacity, that's a little hard to follow, as it's really the cumulative transparency that is logically applied.

I just find it easier to both envision and explain if I just say "if you have a container that is 30% transparent, and content that is 40% transparent, the result will be 70% transparent." The total of all transparency is subtracted from the opacity.

In any case, I'm not sure it matters much, since my recommendation is that you just don't apply any additional transparency to the "container" meter.

[CodeCode]

In any case, I'm not sure it matters much, since my recommendation is that you just don't apply any additional transparency to the "container" meter.

I was thinking about this the whole time, but not quite so articulately. Which led inobviously to my fix of just dumping the excess parameters to see what happened. It worked, so now I am both happy I got it working, and such excellent explanations to back up my notion were provided.

Thanks guys.

[balala]

I was just trying to shorthand how one might "think" about the result. If you think of it being the cumulative opacity, that's a little hard to follow, as it's really the cumulative transparency that is logically applied.

I just find it easier to both envision and explain if I just say "if you have a container that is 30% transparent, and content that is 40% transparent, the result will be 70% transparent." The total of all transparency is subtracted from the opacity.

Yep, this definitely is right, I agree.

In any case, I'm not sure it matters much, since my recommendation is that you just don't apply any additional transparency to the "container" meter.

Yes, definitely doesn't matter too much and this is definitely the best practice. Agree again!