It is currently December 10th, 2018, 6:37 pm

Test of new Container option

Testing and discussion of the conversion of Rainmeter to D2D.
User avatar
balala
Rainmeter Sage
Posts: 7151
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Test of new Container option

balala » November 28th, 2018, 3:58 pm

jsmorley wrote:
November 28th, 2018, 3:45 pm
Difficult to test right now, until we fix that "bug" with dynamically changing the W and H of a container meter. Today, the "content" does not react well to this change.
For now I'll play a little bit with the TransformationMatrix, then when the bug fixed, will study resizing the container modifying its size. There are infinite possibilities probably. :thumbup:
User avatar
jsmorley
Developer
Posts: 18445
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

jsmorley » December 1st, 2018, 1:00 am

Ok, we have corrected the outstanding issues we know about, and have moved this into the normal "beta" cycle for Rainmeter.

1) Corrected an issue when a "container" meter is resized dynamically.
2) Corrected an issue of duplicate "masking" when a "content" meter is switched dynamically from one "container" meter to another.
3) Corrected an issue when a "container" meter is "hidden", or otherwise has either W or H set to zero.

Get the latest Rainmeter 4.3 beta, r3266 as of this writing, at https://www.rainmeter.net

The documentation and example .rmskin for Container are at https://docs.rainmeter.net/manual-beta/meters/general-options/container/

Please continue to beat this up. We will be delighted (well, ok, not delighted exactly) if you can find and report any other bugs we may have missed, and as always are very interested to see what clever stuff you do with this new functionality.
User avatar
jsmorley
Developer
Posts: 18445
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

jsmorley » December 1st, 2018, 1:57 am

raiguard wrote:
November 14th, 2018, 4:32 am
Alas, I have come across an issue!

I am attempting to implement this new feature to create a "collapsible" section for one of my skins. What this means is that while the skin is just sitting there, I have a portion that is hidden. When I mouse over the skin, that portion "slides" out to be revealed.

Here is the skin in action:
slider.gif

It is obviously broken. I haven't tested it too much yet so I don't know the exact cause of the problem, but it is not working like I would expect it to. Additionally, there is an actual bug as well: If you set the scroll height to exactly negate the height of the content (thus making the container meter itself have a height of zero), then the entire skin disappears, and sometimes Rainmeter will crash!

One more thing: I would appreciate any input you guys might have on avoiding hardcoded values. I would like to be able to make this functionality dynamic, allowing the addition or deletion of content meters without having to recode the values themselves. In the limited experiments I performed with doing this, I would either run into problems with the skin constantly expanding downward, or Rainmeter crashing entirely. In short, the thing I need to be able to calculate is the sum total height of the container's contents. Additionally, the final product will need to be able to scale using TransformationMatrix.

Here is the skin's code. I created it within the "ContainerExamples" suite that JSMorley made, so you can just drop it right in and it'll work:

Code: Select all

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

[Variables]
hiddenContentScroll=-83

; Moon stuff
moonRadius=20
moonPhase=0.0808
moonIlluminationAngle=218
showMoonAngle=1
moonBgColor=30,30,30
moonColor=200,200,200

[StyleString]
FontFace=Trebuchet MS
FontSize=12
FontColor=230,230,230
Antialias=1

[MeasureSliderAT]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Increase,16,44
ActionList2=Repeat Decrease,16,44
Increase=[!SetVariable hiddenContentScroll "(#hiddenContentScroll# + 2)"][!UpdateMeterGroup HiddenSection][!UpdateMeter MeterBackground][!UpdateMeasure MeasureSliderAT][!Redraw]
Decrease=[!SetVariable hiddenContentScroll "(#hiddenContentScroll# - 2)"][!UpdateMeterGroup HiddenSection][!UpdateMeter MeterBackground][!UpdateMeasure MeasureSliderAT][!Redraw]
DynamicVariables=1

[MeasureMoonShapePhaseCalc]
Measure=Calc
Formula=clamp(abs((#moonRadius# * 4 * ((#moonPhase# > 0.5) ? (0.5 - (#moonPhase# - 0.5)) : #moonPhase#)) - #moonRadius#),0,#moonRadius#)
DynamicVariables=1

; ----- Background -----

[MeterBackground]
Meter=Shape
Shape=Rectangle 1,1,233,([MeterHiddenContentContainer:Y] + [MeterHiddenContentContainer:H] + 7),2 | Fill Color 15,15,15 | StrokeWidth 2 | Stroke Color 50,50,50
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureSliderAT "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureSliderAT "Execute 2"]

; ----- 'Static' Content: Always shown -----

[MeterStaticString]
Meter=String
MeterStyle=StyleString
X=9
Y=5
Text=This is a test of static content

[MeterStaticImage]
Meter=Image
ImageName=#@#Images\Abbey.jpg
X=9
Y=3R
W=216
H=50

; ----- 'Hidden' Content: Shown on hover -----

[MeterHiddenContentContainer]
Meter=Image
SolidColor=25,25,25
X=5
Y=5R
W=224
H=(#hiddenContentScroll# + 84)
DynamicVariables=1
Group=HiddenSection

[MeterMoonShape]
Meter=Shape
Shape=Ellipse #moonRadius#,#moonRadius#,#moonRadius#,#moonRadius# | StrokeWidth 1 | Stroke Color #moonBgColor# | Fill Color #moonBgColor#
Shape2=Path MoonArc | StrokeWidth 0 | Stroke Color #moonColor# | Fill Color #moonColor# | Rotate ((#showMoonAngle# = 1) ? (-#moonIlluminationAngle#) : ((#moonPhase# > 0.5) ? -90 : 90)),#moonRadius#,#moonRadius# | StrokeLineJoin Bevel
MoonArc=0,#moonRadius# | ArcTo (#moonRadius# * 2),#moonRadius#,#moonRadius#,[MeasureMoonShapePhaseCalc:],0,(((#moonPhase# > 0.25) && (#moonPhase# < 0.75)) ? 1 : 0) | ArcTo 0,#moonRadius#,#moonRadius#,#moonRadius#,0,1
X=180
Y=#hiddenContentScroll#
DynamicVariables=1
Container=MeterHiddenContentContainer
Group=HiddenSection

[MeterHiddenString]
Meter=String
MeterStyle=StyleString
X=4
Y=5r
Text=This is hidden content
Container=MeterHiddenContentContainer
Group=HiddenSection

[MeterHiddenImage]
Meter=Image
ImageName=#@#Images\Sunset.jpg
X=5
Y=5R
W=100
Container=MeterHiddenContentContainer
Group=HiddenSection
EDIT: I have also discovered that hovering and dehovering the skin rapidly will cause Rainmeter to crash as well.
By the way raiguard, the issue you were having with this skin is now fixed. It will now work as you intended.
User avatar
jsmorley
Developer
Posts: 18445
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

jsmorley » December 1st, 2018, 2:17 am

Ever wanted to cut holes in an image? You know you do...

Code: Select all

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

[MeterShape]
Meter=Shape
Shape=Rectangle 5,5,300,200,12 | StrokeWidth 5 | Stroke Color 155,155,155,255 | Fill Color 255,171,5,255
Shape2=Ellipse 100,70,50
Shape3=Ellipse 220,140,50
Shape4=Combine Shape | Exclude Shape2 | Exclude Shape3

[MeterImage]
Meter=Image
ImageName=#@#Images\lampoon.jpg
Container=MeterShape
1.jpg

lampoon.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 18445
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

jsmorley » December 1st, 2018, 3:25 am

Or create a dynamic "iris" effect?

Code: Select all

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

[Variables]
Size=0
U=[!UpdateMeasure MeasureIris][!UpdateMeter *][!Redraw]

[MeasureCPU]
Measure=CPU

[MeasureIris]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat IrisOut,5,36
IrisOut=[!SetVariable Size "(Clamp(#Size#+2,0,70))"]#U#
ActionList2=Repeat IrisIn,5,36
IrisIn=[!SetVariable Size "(Clamp(#Size#-2,0,70))"]#U#
DynamicVariables=1

[MeterBackground]
Meter=Shape
Shape=Rectangle 5,5,300,200,12 | StrokeWidth 5 | Stroke Color 155,155,155,255 | Fill Color 47,47,47,255
MouseOverAction=[!CommandMeasure MeasureIris "Stop 2"][!CommandMeasure MeasureIris "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureIris "Stop 1"][!CommandMeasure MeasureIris "Execute 2"]

[MeterContainerVisible]
Meter=Shape
Shape=Ellipse 155,105,#Size#
DynamicVariables=1

[MeterContainer]
Meter=Shape
Shape=Ellipse 155,105,#Size#
DynamicVariables=1

[MeterPercent]
Meter=String
MeasureName=MeasureCPU
X=155
Y=110
StringAlign=CenterCenter
FontSize=50
FontWeight=600
FontColor=0,0,0,255
AntiAlias=1
Text=%1%
Container=MeterContainer
GIF.gif

Created this to demonstrate that dynamically changing the size of a container meter is working correctly now, and that setting the W or H of a container meter to "zero" no longer tears holes in the fabric of spacetime.
You do not have the required permissions to view the files attached to this post.
User avatar
raiguard
Posts: 493
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA

Re: Test of new Container option

raiguard » December 1st, 2018, 5:54 pm

eclectic-tech wrote:
November 24th, 2018, 1:40 pm
I agree with balala, I do not see an issue with the Container...

However, I would ask why you design a skin with a scale starting at times 5?!
That simply over-complicates the design.

I would suggest to design at a scale of 1, then modify it using the available scaling tools.
With Shape meters, I always prefer to use the SCALE modifier rather than adding unnecessary formulas in the W & H.

For comparison here is a modified version of your skin showing an alternate approach to scaling.
The graph looks different because I did not scale it up 5 times by default...

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!WriteKeyValue Variables scale 1][!Refresh]
AccurateText=1
DynamicWindowSize=1
Update=100

[Variables]
scale=1

[MeasureCpuUsage]
Measure=CPU
MinValue=0
MaxValue=100

[MeterBackground]
Meter=Shape
Shape=Rectangle 0,0,720,200,15 | Fill Color 200,200,200 | StrokeWidth 0 | Scale #scale#,#scale#,0,0
Shape2=Rectangle (5*#scale#),(5*#scale#),710,190,15 | Fill Color 25,25,25 | StrokeWidth 0 | Scale #scale#,#scale#,0,0
MouseScrollUpAction=[!WriteKeyValue Variables scale "(clamp((#scale# + 0.1),0.2,2))"][!Refresh]
MouseScrollDownAction=[!WriteKeyValue Variables scale "(clamp((#scale# - 0.1),0.2,2))"][!Refresh]

[MeterGraphContainer]
Meter=Shape
Shape=Rectangle (5*#scale#),(5*#scale#),710,190,15 | StrokeWidth 0 | Scale #scale#,#scale#,0,0

[MeterLineGraph]
Meter=Line
LineCount=1
MeasureName=MeasureCpuUsage
LineColor=43,224,224
Container=MeterGraphContainer
X=(5*#scale#)
Y=(5*#scale#)
W=710
H=190
TransformationMatrix=#scale#;0;0;#scale#;((1-#scale#)*[#CURRENTSECTION#:X]);((1-#scale#)*[#CURRENTSECTION#:Y])
Antialias=1
There is nothing wrong with your code, just offering alternate suggestions. :rosegift:
Sorry for the extremely late response, I've been otherwise occupied so I forgot about this.

The skin's values are actually designed for 1x scale, but when I uploaded the skin code I forgot that I had it set to 5x scale. So no problems there. I am currently attempting to change it to use the scale and skew shape modifiers instead (because quite frankly, I didn't know those existed before now. I need to read the documentation more thoroughly!)
”We are pretty sure that r2922 resolves the regression in resolution caused by a reversion to a revision.” - jsmorley, 2017
User avatar
balala
Rainmeter Sage
Posts: 7151
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Test of new Container option

balala » December 1st, 2018, 6:40 pm

raiguard wrote:
December 1st, 2018, 5:54 pm
Sorry for the extremely late response, I've been otherwise occupied so I forgot about this.

The skin's values are actually designed for 1x scale, but when I uploaded the skin code I forgot that I had it set to 5x scale. So no problems there. I am currently attempting to change it to use the scale and skew shape modifiers instead (because quite frankly, I didn't know those existed before now. I need to read the documentation more thoroughly!)
Note that a TransformStroke option was added to Line meter, which
Determines how the line (stroke) width is treated when TransformationMatrix is used on the meter.
This option was added with Revision 3260, on October 16, 2018, so on 24 November, when you've posted your code, this option was already added, but I'm not sure you've seen it.
User avatar
raiguard
Posts: 493
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA

Re: Test of new Container option

raiguard » December 1st, 2018, 6:48 pm

balala wrote:
December 1st, 2018, 6:40 pm
Note that a TransformStroke option was added to Line meter, which

This option was added with Revision 3260, on October 16, 2018, so on 24 November, when you've posted your code, this option was already added, but I'm not sure you've seen it.
Yes, I know about that option. However, the default behavior is what I want, so I didn't add it in. Thanks anyway!
”We are pretty sure that r2922 resolves the regression in resolution caused by a reversion to a revision.” - jsmorley, 2017
User avatar
balala
Rainmeter Sage
Posts: 7151
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Test of new Container option

balala » December 1st, 2018, 7:10 pm

raiguard wrote:
December 1st, 2018, 6:48 pm
Yes, I know about that option. However, the default behavior is what I want, so I didn't add it in. Thanks anyway!
You're welcome.
User avatar
raiguard
Posts: 493
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA

Re: Test of new Container option

raiguard » December 1st, 2018, 7:45 pm

So upon finishing the modifications to my line graph container, I attempted to implement it into my suite... and I ran into a multitude of issues.

I extracted all of the necessary values from my suite's StyleSheet and made a test skin:
lgc-transformationmatrix.gif
As you can see, there are two issues:
1) The line graph is not scaling properly with the container
2) The background height is getting screwed up

I have a theory as to why this is happening, but I have absolutely no clue on how to fix it:

In my skins, I am using TransformationMatrix as a "one-size-fits-all" solution to scaling. This has been frowned upon by many members of the community, but I managed to get it to work almost perfectly, so I stuck with it. However, container meters do not work properly with TransformationMatrix: Even if you transform the container with the option, the actual masking is only done on the original meter shape, before it got transformed.

Therefore, I have to use actual math to scale the container. The container itself is scaling just fine (if you comment out the line graph meter, you can see that it fits inside the graph background perfectly at any scale). However, since it is not using TransformationMatrix, but is actually moving and scaling itself using the shape options and meter W/H, then it is actually being scaled BEFORE all of the other meters.

I'm having trouble finding the right words to explain it, so here is what the skin looks like if I remove TransformationMatrix from all meters, and remove the line graph so the container is visible:
lgc-no transformationmatrix.gif
So when TransformationMatrix is applied and the skin is loaded, Rainmeter is loading the skin at 1x scale as shown above, with the line graph container being scaled while everything else is at 1x. THEN, after that is done, Rainmeter is using TransformationMatrix to scale everything else. However, because the line graph container was already scaled, it had increased the background height before TransformationMatrix was applied, so when the rest of the skin is scaled, the background proportions are off.

This is also who the line graph is being moved inaccurately: It is being positioned inside the container. Since the container is already moved before TransformationMatrix is applied, the line graph is being moved preemptively as well. Therefore, you get the effect shown in the first GIF.

So far, the only way I can see of fixing this is to change the way containers work so the masking is applied after TransformationMatrix is applied. This way I could just add a TransformationMatrix to the container and everything would work perfectly. However, I see a 0% chance of this happening, so it's off the table.

Does anybody have any ideas?

WARNING: THIS SKIN IMPLEMENTS THE POSITIONING SYSTEM THAT I USE FOR MY SUITE, AND AS SUCH, IS EXTREMELY OVERCOMPLICATED. PROCEED AT YOUR OWN RISK!

LineGraphContainer.ini:

Code: Select all

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

[Variables]
; Positioning
bgOffset=5
gadgetBgWidth=150
bgWidth=#gadgetBgWidth#
bgWidthAbs=(#bgWidth# + (#bgOffset# * 2))
cornerRoundness=3

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

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

rowSpacing=1
barTextOffset=1
barHeight=1
graphHeight=40
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# * #scale#),(#bgOffset# * #scale#),(#bgWidth# * #scale#),([[#CURRENTSECTION]:H] - ((#bgOffset# * 2) * #scale#)),(#cornerRoundness# * #scale#) | StrokeWidth 0 | Fill Color #colorBgBorder#,((#showBgBorder# = 1) ? 255 : 0)
Shape2=Rectangle ((#bgOffset# + #showBgBorder#) * #scale#),((#bgOffset# + #showBgBorder#) * #scale#),((#bgWidth# - (#showBgBorder# * 2)) * #scale#),([[#CURRENTSECTION]:H] - (((#bgOffset# * 2) + (#showBgBorder# * 2)) * #scale#)),(#cornerRoundness# * #scale#) | StrokeWidth 0 | Fill Color #colorBg#
X=0
Y=0
W=((#bgWidth# + (#bgOffset# * 2)) * #scale#)
H=([MeterBackgroundHeight:Y] * #scale#)
DynamicVariables=1
Group=Background

[StyleBackgroundHeight]
SolidColor=255,255,255,0
X=0
Y=(#contentMarginAbs# + #bgOffset# + 1)R
W=(#bgWidthAbs# * #scale#)
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 | Scale #scale#,#scale#,-1,-1 | Offset #scale#,#scale#,0,0 | Fill Color 255,0,0
X=([MeterLineGraphBackground:X] * #scale#)
Y=([MeterLineGraphBackground:Y] * #scale#)
DynamicVariables=1
Group=LineGraph
Hidden=(#showLineGraph# = 0)

[StyleLineGraph]
X=1
Y=1
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
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
You do not have the required permissions to view the files attached to this post.
”We are pretty sure that r2922 resolves the regression in resolution caused by a reversion to a revision.” - jsmorley, 2017