New Container option

[eclectic-tech]

We are going to take a look at using TransformationMatrix with Container, as it clearly has issues now. I'm not confident that we will be able to make it work perfectly without raising backwards compatibility issues, but at a minimum I'd like to understand the limitations in a clear and unambiguous way, so I can document them.

Stay tuned... Everyone is pretty busy with family and school and holidays and all the rest.

I know the team has not abandoned this issue and totally understand the restrictions life applies to all of us!

Thanks for the information, my comment was just to reiterate to raiguard that, as of now, TransformationMatrix and Containers do not always co-operate.

I will try to find time to do more test, and let you know if I can expand on what works and what doesn't.

[raiguard]

@ raiguard

I looked at your test skin code (added your Modern Gadget @includes) and got to the same place you were at.
I am seeing the actions you described, so I started trying to determine which section(s) where casing the scale and placement issues.

I started, by taking what I find to be a simpler approach to scaling, by adding the scale to all of the width and height variables you set.
Then went through your styles and removed '* #Scale#' from all variables that had been already modified in the [Variables] section.
I removed all of the TransformationMatrix just so it was not creating any additional issues in the skin.

In looking at your second GIF, the container is not being scaled properly (it increased dramatically width-wise compared to the other meters), and for me the container was being scaled so much the skin could not be moved (it filled the width of my screen).

I think the main issue was using the Scale transformer on the container shape meter while using variables that were already scaled (by you in the meter/ and by me in the [Variables] section). I removed the scale parameter of that shape.

So I was able to get a normal scale working on your skin by making the changes mentioned (and perhaps a few more... I lost track of all of them).
mg.gif{Click to animate}
The question is whether the container is needed or if applying TransformationMatrix is needed. I only use TransformationMatrix for meters where the width and height do not define the meter size... but as you said it can be applied to almost any meter.

Not sure if this helps, but from what I have been able to test, using Containers and TransformationMatrix together is only cause you grieve and pain!

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!Refresh]
AccurateText=1
Update=100

[Variables]
@includeStyleSheet=#@#StyleSheet.inc
@includeGlobalSettings=#@#Settings\GlobalSettings.inc
@includeCpuSettings=#@#Settings\CpuSettings.inc
; Positioning
scale=1
bgOffset=(5*#Scale#)
gadgetBgWidth=(150*#Scale#)
bgWidth=#gadgetBgWidth#
bgWidthAbs=(#bgWidth# + (#bgOffset# * (2*#Scale#)))
cornerRoundness=(3*#Scale#)

contentMarginAbs=3
contentMargin=(#contentMarginAbs# + #bgOffset# - 1)
contentMarginRight=(#bgWidth# - #contentMarginAbs# + #bgOffset# - 2)
contentMarginCenter=((#bgWidth# / 2) + #bgOffset#)
contentWidth=(#bgWidth# - (#contentMarginAbs# * 2))
columnX=(#contentMarginCenter# + 2)

transformationMatrix=#scale#;0;0;#scale#;0;0

rowSpacing=(1*#Scale#)
barTextOffset=(1*#Scale#)
barHeight=(1*#Scale#)
graphHeight=(40*#Scale#)
graphWidth=#contentWidth#

; Colors
colorBorder=50,50,50
colorBg=15,15,15
colorBgBorder=#colorBorder#
colorSubBg=25,25,25

colorGraphBg=#colorSubBg#
colorGraphBorder=#colorBorder#

; Local settings
showLineGraph=1
lineGraphAa=1
showBgBorder=1

; ==================================================
; STYLES
; ==================================================

[StyleBackground]
Shape=Rectangle #bgOffset#,#bgOffset#,#bgWidth#,([[#CURRENTSECTION]:H] - (#bgOffset# * 2)),#cornerRoundness# | StrokeWidth 0 | Fill Color #colorBgBorder#,((#showBgBorder# = 1) ? 255 : 0)
Shape2=Rectangle ((#bgOffset# + #showBgBorder#)),((#bgOffset# + #showBgBorder#)),((#bgWidth# - (#showBgBorder# * 2))),([[#CURRENTSECTION]:H] - (((#bgOffset# * 2) + (#showBgBorder# * 2)))),(#cornerRoundness#) | StrokeWidth 0 | Fill Color #colorBg#
X=0
Y=0
W=((#bgWidth# + (#bgOffset# * 2)))
H=([MeterBackgroundHeight:Y])
DynamicVariables=1
Group=Background

[StyleBackgroundHeight]
SolidColor=255,255,255,0
X=0
Y=(#contentMarginAbs# + #bgOffset# + 1)R
W=(#bgWidthAbs#)
H=1
Group=Background
;TransformationMatrix=#transformationMatrix#

[StyleLineGraphBackground]
Shape=Rectangle 0,0,#graphWidth#,#graphHeight#,#cornerRoundness# | Fill Color #colorBorder# | StrokeWidth 0
Shape2=Rectangle 1,1,(#graphWidth# - 2),(#graphHeight# - 2),#cornerRoundness# | Fill Color #colorGraphBg# | StrokeWidth 0
X=(#contentMargin#)
Y=(((#showLineGraph# = 0) ? -1 : #contentMarginAbs#))R
Group=LineGraph
Hidden=(#showLineGraph# = 0)
;TransformationMatrix=#transformationMatrix#

[StyleLineGraphContainer]
Shape=Rectangle 1,1,(#graphWidth# - 2),(#graphHeight# - 2),#cornerRoundness# | StrokeWidth 0 | Offset #scale#,#scale# | Fill Color 255,0,0
X=([MeterLineGraphBackground:X])
Y=([MeterLineGraphBackground:Y])
DynamicVariables=1
Group=LineGraph
Hidden=(#showLineGraph# = 0)

[StyleLineGraph]
X=(1*#Scale#)
Y=(1*#Scale#)
W=(#graphWidth# - 2)
H=(#graphHeight# - 2)
HorizontalLines=1
HorizontalLineColor=#colorBorder#
Group=LineGraph
Antialias=#lineGraphAa#
DynamicVariables=1
Hidden=(#showLineGraph# = 0)
;TransformationMatrix=#transformationMatrix#
Container=#CURRENTSECTION#Container

; ==================================================
; MEASURES
; ==================================================

[MeasureCpuUsage]
Measure=CPU

; ==================================================
; METERS
; ==================================================

[MeterBackground]
Meter=Shape
MeterStyle=StyleBackground
MouseScrollUpAction=[!WriteKeyValue Variables scale "(clamp((#scale# + 0.5),1,3))"][!Refresh]
MouseScrollDownAction=[!WriteKeyValue Variables scale "(clamp((#scale# - 0.5),1,3))"][!Refresh]

[MeterTest]
Meter=Image
SolidColor=255,255,255,50
X=#contentMargin#
Y=#contentMargin#
W=#contentWidth#
H=(40*#Scale#)
;TransformationMatrix=#transformationMatrix#

[MeterLineGraphBackground]
Meter=Shape
MeterStyle=StyleLineGraphBackground

[MeterLineGraphContainer]
Meter=Shape
MeterStyle=StyleLineGraphContainer

[MeterLineGraph]
Meter=Line
MeterStyle=StyleLineGraph
LineCount=1
MeasureName=MeasureCpuUsage
LineColor=107,238,98

[MeterBackgroundHeight]
Meter=Image
MeterStyle=StyleBackgroundHeight

Thanks for the example eclectic-tech. However, I can't do it your way in my suite, because that would involve basically rewriting every skin from scratch (and some of the skins are several thousand lines long!), and that method doesn't work at all with string meters. The reason I went with TransformationMatrix was because I could, for the most part, just add the TransformationMatrix option to the styles in the stylesheet, and they just worked. Here's an example of one of my skins being scaled:

2018-12-02 20_48_31-D__Settings_Caleb_Rainmeter_Skins_ModernGadgets_Settings_Sidebars_Control_1_Sb1C.png

So the gist of it is that I am in way too deep now to do it another way, so if I want to use containers in my skins AT ALL, they need to be able to work with TransformationMatrix if the skins are to work at any scale except for 1x.

[jsmorley]

It's going to be a challenge, as TransformationMatrix does not alter the meter size or shape, and that must stay that way. Container entirely depends on the W and H of the container, and that must stay that way.

What we will see if we can do is make sure that if you BOTH use TransformationMatrix, AND dynamically set the W and H on the container meter, it works as expected. It doesn't today.

I see additional complexities with things like Shape meters, that use device independent pixels, and don't have to be integers, and W and H, which do.

As for now, TransformationMatrix just doesn't work well with Container.

[raiguard]

We are going to take a look at using TransformationMatrix with Container, as it clearly has issues now. I'm not confident that we will be able to make it work perfectly without raising backwards compatibility issues, but at a minimum I'd like to understand the limitations in a clear and unambiguous way, so I can document them.

Stay tuned... Everyone is pretty busy with family and school and holidays and all the rest.

I created a test skin that you can use which demonstrates the behavior perfectly:

containerscaling.gif

Key:
Teal - Representation of the original container size at 1x scaling
Yellow - Representation of the container at current scale (with TransformationMatrix applied)
Green - The area that is covered by both aforementioned container states
Purple - Content within the scaled container that does not have TransformationMatrix applied to it
Red - Content within the scaled container that has TransformationMatrix applied to it

As far as I can tell, content within a container that is using TransformationMatrix has to be located in the green area in order to show up. In other words, the container will only draw content that is located both within the original container's mask before the application of TransformationMatrix, as well as within the new mask created after TransformationMatrix is applied.

ContainerScaling.ini:

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!Refresh]
AccurateText=1
DynamicWindowSize=1

[Variables]
scale=1
transformationMatrix=#scale#;0;0;#scale#;#scale#;#scale#

[MeterBackground]
Meter=Shape
Shape=Rectangle 0,0,98,60,3 | Fill Color 15,15,15 | StrokeWidth 0 | Scale #scale#,#scale#,0,0 | Offset #scale#,#scale#,0,0
MouseScrollUpAction=[!WriteKeyValue Variables scale "(clamp((#scale# + 0.5),1,3))"][!Refresh]
MouseScrollDownAction=[!WriteKeyValue Variables scale "(clamp((#scale# - 0.5),1,3))"][!Refresh]

[MeterContainerVisible-NoTransform]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0 | Fill Color 0,255,255,50
X=5
Y=5

[MeterContainerVisible-Transform]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0 | Fill Color 255,255,0,50
X=5
Y=5
TransformationMatrix=#transformationMatrix#

[MeterContainer]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0
X=5
Y=5
TransformationMatrix=#transformationMatrix#

[MeterContainerContent-NoTransform]
Meter=Shape
Shape=Ellipse 15,15,10,10 | StrokeWidth 0 | Fill Color 255,0,255,50
Container=MeterContainer

[MeterContainerContent-Transform]
Meter=Shape
Shape=Ellipse 15,15,10,10 | StrokeWidth 0 | Fill Color 255,0,0,50
Container=MeterContainer
TransformationMatrix=#transformationMatrix#

[jsmorley]

I created a test skin that you can use which demonstrates the behavior perfectly:

containerscaling.gif

Key:
Teal - Representation of the original container size at 1x scaling
Yellow - Representation of the container at current scale (with TransformationMatrix applied)
Green - The area that is covered by both aforementioned container states
Purple - Content within the scaled container that does not have TransformationMatrix applied to it
Red - Content within the scaled container that has TransformationMatrix applied to it

As far as I can tell, content within a container that is using TransformationMatrix has to be located in the green area in order to show up. In other words, the container will only draw content that is located both within the original container's mask before the application of TransformationMatrix, as well as within the new mask created after TransformationMatrix is applied.

ContainerScaling.ini:

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!Refresh]
AccurateText=1
DynamicWindowSize=1

[Variables]
scale=1
transformationMatrix=#scale#;0;0;#scale#;#scale#;#scale#

[MeterBackground]
Meter=Shape
Shape=Rectangle 0,0,98,60,3 | Fill Color 15,15,15 | StrokeWidth 0 | Scale #scale#,#scale#,0,0 | Offset #scale#,#scale#,0,0
MouseScrollUpAction=[!WriteKeyValue Variables scale "(clamp((#scale# + 0.5),1,3))"][!Refresh]
MouseScrollDownAction=[!WriteKeyValue Variables scale "(clamp((#scale# - 0.5),1,3))"][!Refresh]

[MeterContainerVisible-NoTransform]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0 | Fill Color 0,255,255,50
X=5
Y=5

[MeterContainerVisible-Transform]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0 | Fill Color 255,255,0,50
X=5
Y=5
TransformationMatrix=#transformationMatrix#

[MeterContainer]
Meter=Shape
Shape=Rectangle 0,0,88,50,3 | StrokeWidth 0
X=5
Y=5
TransformationMatrix=#transformationMatrix#

[MeterContainerContent-NoTransform]
Meter=Shape
Shape=Ellipse 15,15,10,10 | StrokeWidth 0 | Fill Color 255,0,255,50
Container=MeterContainer

[MeterContainerContent-Transform]
Meter=Shape
Shape=Ellipse 15,15,10,10 | StrokeWidth 0 | Fill Color 255,0,0,50
Container=MeterContainer
TransformationMatrix=#transformationMatrix#

As I have been clear, TransformationMatrix in and of itself does not alter the W and H of any meter it is used on, and Container depends entirely on the W and H of the container meter. That will NOT change. You are going to have to simultaneously alter the W and H of the container meter, which hopefully we can get working right before too long.

[raiguard]

As I have been clear, TransformationMatrix in and of itself does not alter the W and H of any meter it is used on, and Container depends entirely on the W and H of the container meter. That will NOT change. You are going to have to simultaneously alter the W and H of the container meter, which hopefully we can get working right before too long.

Ah, didn't see your reply before. That is quite a shame, because I will run into the same problem I had before with the background height becoming all screwed up (I think?). I will have to find a way to work around that.

Ideally, it would be amazing if Rainmeter had a built-in scale functionality for all skins as one of the general options, so you could upsize or downsize skins as you want. But that is just wishful thinking and I don't expect it to ever happen.

[jsmorley]

Ah, didn't see your reply before. That is quite a shame, because I will run into the same problem I had before with the background height becoming all screwed up (I think?). I will have to find a way to work around that.

Ideally, it would be amazing if Rainmeter had a built-in scale functionality for all skins as one of the general options, so you could upsize or downsize skins as you want. But that is just wishful thinking...

I certainly do NOT like TransformationMatrix, that is for sure...

I would note that I imagine you could use TransformationMatrix on the "visible" background, it's only the "container" meter that must be simultaneously made larger with W and H, and that isn't "drawn" anyway.

[raiguard]

I certainly do NOT like TransformationMatrix, that is for sure...

Neither do I, which is why I put off making my skins scalable until literally every third person was asking me for it. It's just an enormous headache and makes everything 10x more difficult.

EDIT:

I would note that I imagine you could use TransformationMatrix on the "visible" background, it's only the "container" meter that must be simultaneously made larger with W and H, and that isn't "drawn" anyway.

I actually did try this with my first test skin, and although it did work for fixing the background height, I still ran into issues with the line graph positioning (since the line graph still had to use TransformationMatrix)...

[raiguard]

EDIT EDIT: Oops, meant to add this on to the previous reply instead of making a new one. Oh well. Please kindly delete this reply if you're OCD enough to want a clean conversation chain.

Neither do I, which is why I put off making my skins scalable until literally every third person was asking me for it. It's just an enormous headache and makes everything 10x more difficult.

EDIT:

I would note that I imagine you could use TransformationMatrix on the "visible" background, it's only the "container" meter that must be simultaneously made larger with W and H, and that isn't "drawn" anyway.

I actually did try this with my first test skin, and although it did work for fixing the background height, I still ran into issues with the line graph positioning (since the line graph still had to use TransformationMatrix)...

[raiguard]

Well in the meantime, until Containers are able to play slightly nicer with TransformationMatrix, I decided to go and add another copy of the line graph background, just with the border, so the rounded corners will be respected without needing to use a container.

I hope a solution can be found because I would really like to use containers in ModernGadgets, but it just doesn't play nice with the way I handle scaling...

2018-12-21 20_53_09-.png