It is currently March 28th, 2024, 5:40 pm

New Container option

General topics related to Rainmeter.
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: Test of new Container option

Post by raiguard »

...

I have no words as to how AWESOMELY STUPENDOUS this is. There are so many possibilities as to how this could be used. :o

Here is my first experiment: making my update notification changelog scrollable...
scrolling.gif
This is an enormous improvement over the previous method, which just increased the skin's height to accommodate the entire thing. This actually caused some issues when v1.4.0's changelog was too large, causing the skin to be so tall that they couldn't access the download button!

Anyway, this is fan-freaking-tastic. I'll come back with any issues that I can find.

theAzack9, I owe you an infinite supply of Root Beer. :beer:
soyelrafa
Posts: 96
Joined: March 1st, 2017, 3:09 pm

Re: Test of new Container option

Post by soyelrafa »

raiguard wrote: November 13th, 2018, 8:44 pm ...

I have no words as to how AWESOMELY STUPENDOUS this is. There are so many possibilities as to how this could be used. :o

Here is my first experiment: making my update notification changelog scrollable...

scrolling.gif

This is an enormous improvement over the previous method, which just increased the skin's height to accommodate the entire thing. This actually caused some issues when v1.4.0's changelog was too large, causing the skin to be so tall that they couldn't access the download button!

Anyway, this is fan-freaking-tastic. I'll come back with any issues that I can find.

theAzack9, I owe you an infinite supply of Root Beer. :beer:
Hello! Do you have to enter spaces on the lines or the skin does it automatically?

I mean, for example if the first line of the changelog is "added ability to show changelog scrollable with the new rainmeter update", you have to split the line into two (first one: "added ability to show changelog scrollable" second:"with the new rainmeter update") or the skin does that split automatically?
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: Test of new Container option

Post by raiguard »

soyelrafa wrote: November 13th, 2018, 9:06 pm Hello! Do you have to enter spaces on the lines or the skin does it automatically?

I mean, for example if the first line of the changelog is "added ability to show changelog scrollable with the new rainmeter update", you have to split the line into two (first one: "added ability to show changelog scrollable" second:"with the new rainmeter update") or the skin does that split automatically?
You can do it automatically by using the ClipString=2 option on a string. If you add this, and define a width to the string meter, then Rainmeter will automatically wrap the text when a line exceeds that width.

For example:

Code: Select all

[MeterText]
Meter=String
FontFace=Arial
FontColor=255,255,255
FontSize=15
W=300
ClipString=2
Text=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Antialias=1
Attachments
2018-11-13 14_11_16-Calculator.png
soyelrafa
Posts: 96
Joined: March 1st, 2017, 3:09 pm

Re: Test of new Container option

Post by soyelrafa »

raiguard wrote: November 13th, 2018, 9:11 pm You can do it automatically by using the ClipString=2 option on a string. If you add this, and define a width to the string meter, then Rainmeter will automatically wrap the text when a line exceeds that width.

For example:

Code: Select all

[MeterText]
Meter=String
FontFace=Arial
FontColor=255,255,255
FontSize=15
W=300
ClipString=2
Text=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Antialias=1
Hello, thanks for your answer, I know that option, but I'm using a notes skin in the actual version that has an issue when I scroll on notes that has lines clipped by rainmeter. The issue is I can't reach the end of the notes.

So that's why I ask if with your use of this new option that issue is solved.

Regards.
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: Test of new Container option

Post by raiguard »

soyelrafa wrote: November 13th, 2018, 9:16 pm Hello, thanks for your answer, I know that option, but I'm using a notes skin in the actual version that has an issue when I scroll on notes that has lines clipped by rainmeter. The issue is I can't reach the end of the notes.

So that's why I ask if with your use of this new option that issue is solved.

Regards.
I dunno, you'd have to post the actual skin code so we could take a look at it. That would belong in another thread.
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: Test of new Container option

Post by raiguard »

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.
soyelrafa
Posts: 96
Joined: March 1st, 2017, 3:09 pm

Re: Test of new Container option

Post by soyelrafa »

raiguard wrote: November 14th, 2018, 3:59 am I dunno, you'd have to post the actual skin code so we could take a look at it. That would belong in another thread.
Np, thanks for your answers in any case.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

Post by jsmorley »

raiguard,

I haven't dug too deep into this, but one thing I would note. It seems strange to me to use container this way. The idea, in my view, would be to "slide" the "content" in and out of a static, invisible "container", not to shrink and grow the container to display the content. That is sort of the point of Container...

There is a known issue when you "scale" a container that is holding image "content". Some kind of "lag" is happening between when the container is scaled and the image is properly sized and positioned in it. We are looking into that.

We also know that ending up with a W and / or H of "zero" for a container is a problem. We are also looking at that.

In the meantime though, seems to me that your skin works better like this:

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=100
;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
GIF.gif
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Test of new Container option

Post by jsmorley »

Of course that causes an issue with:

Code: Select all

Shape=Rectangle 1,1,233,([MeterHiddenContentContainer:Y] + [MeterHiddenContentContainer:H] + 7),2 | Fill Color 15,15,15 | StrokeWidth 2 | Stroke Color 50,50,50
Since the container is a static size, although invisible. You might want to change this to have the size of the background shape not dependent on the size of the container, but perhaps the position of the content.

Like this more or less:

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,([MeterHiddenImage:Y] + [MeterHiddenImage: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=110
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
GIF.gif

This does mean that the overall size of the skin is fixed, but in my view, that is how it should be. All in all, I'm all for moving or sliding a "container" in order to move or slide all the content that is in it, but I'm very skeptical of scaling a container in order to simulate sliding it in and out. Aside from the known issues we have with that today, which we will no doubt fix, I'm not convinced it's a good approach. I'm concerned about efficiency and performance with it doing that much work.

In general, I would not have a design view of sliding in a container and all its contents, as since you can't "nest" containers, that means it would have to slide in from outside the overall skin, and that sorta defeats the first purpose of Container. I would have a fixed size container in a fixed position, and have the first "content" meter, which will be relative to it, slide in and out of the container. Then have all subsequent "content" meters be relative to the first one, and each other, and they will tag along as needed.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Test of new Container option

Post by balala »

Extremely good new feature!
I just downloaded the newest Rainmeter version, installed it and started to modify one of my old skins to use this new feature. Works very well. No issues found yet.
Probably I will also modify other skins as well. Hope will work as expected.
:thumbup: Congratulations to to the developers and many thanks. :great:
Post Reply