It is currently March 28th, 2024, 10:28 am

Thread for help with the Shape meter

Get help with creating, editing & fixing problems with skins
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

Yep...
1.png
Peremptor
Posts: 2
Joined: July 27th, 2017, 8:24 pm

Re: Thread for help with the new Shape meter

Post by Peremptor »

Hi there,

I tried to rebuild the SVG of a resistor at Wikipedia (just for getting the hang of it).

Code: Select all

[MeterShapeResistor]
Meter=Shape
X=1
Y=1
Shape=Line 0,200,700,200 | StrokeWidth 20 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape2=Rectangle 100,100,500,200 | Fill Color 255,255,255 | StrokeWidth 20 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape3=Line 180,370,500,50 | StrokeWidth 15 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape4=Path Pfeil | Fill Color 90,90,90 | StrokeWidth 20 | Stroke Color 90,90,90 | Rotate 135,525,25 | Scale 0.5,0.5
Pfeil=585,0 | LineTo 525,25 | LineTo 585,50 | LineTo 585,0 | ClosePath 1
Shape5=Combine Shape3 | Union Shape4
Unfortunately, Shape4 should be the pointer of the arrow to the top right, but it isn't shown. I just made the color grey so it would be visible around anything else. Shape5 was created for testing, but it still doesn't work.

Image

Hope, someone can find the error. Maybe I'm just blind.

Peremptor
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Thread for help with the new Shape meter

Post by eclectic-tech »

@ Peremptor

I modified the Rotate portion of Shape4 to rotate the shape around it's center (default) by removing the X,Y values. Then I would use Offset X,Y to position it in relation to Shape3. Then combine...

Code: Select all

[MeterShapeResistor]
Meter=Shape
X=1
Y=1
Shape=Line 0,200,700,200 | StrokeWidth 20 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape2=Rectangle 100,100,500,200 | Fill Color 255,255,255 | StrokeWidth 20 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape3=Line 180,370,500,50 | StrokeWidth 15 | Stroke Color 0,0,0 | Scale 0.5,0.5
Shape4=Path Pfeil | Fill Color 90,90,90 | StrokeWidth 20 | Stroke Color 90,90,90 | Scale 0.5,0.5 | Rotate 135 | Offset -110,84
Pfeil=585,0 | LineTo 525,25 | LineTo 585,50 | LineTo 585,0 | ClosePath 1
Shape5=Combine Shape3 | Union Shape4
To allow scaling, you may need to use a formula for the Offset X,Y values rather than the hard coded values I used.
Peremptor
Posts: 2
Joined: July 27th, 2017, 8:24 pm

Re: Thread for help with the new Shape meter

Post by Peremptor »

@eclectic-tech

Thanks for your help, I removed the scaling and instead made it a bit smaller.

The only remaining problem is that the arrow should be filled with black color instead of white. But it doesn't want to.

Do you know how to fill a combined shape? I couldn't find anything in the docs and as always, Google isn't any help.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Thread for help with the new Shape meter

Post by eclectic-tech »

Peremptor wrote:@eclectic-tech

Thanks for your help, I removed the scaling and instead made it a bit smaller.

The only remaining problem is that the arrow should be filled with black color instead of white. But it doesn't want to.

Do you know how to fill a combined shape? I couldn't find anything in the docs and as always, Google isn't any help.
Shape attributes in combined shapes are inherited from the first shape (parent), so to fill the combined 'arrow' shape (child) move Fill Color 0,0,0 to Shape3, instead of having it in Shape4.
Shape Meter in RM Manual wrote:Notes on Combine:
When shapes are combined, the parent shape's Attribute Modifiers, e.g. Fill and StrokeWidth, are automatically inherited by the new combined shape. Any Attribute modifiers on child shapes or the new combined shape are ignored.
The only other issue I overlooked before is in the 'arrow' Shape4 triangle; you drew all 3 lines then told it 'ClosePath 1'...
I would use this instead: Pfeil=585,0 | LineTo 525,25 | LineTo 585,50 | ClosePath 1
This will allow fill to work with the Shape4.

Hope this get everything working for you. Glad to help.
prince1142003
Posts: 56
Joined: December 27th, 2011, 12:32 pm

Re: Thread for help with the new Shape meter

Post by prince1142003 »

Hi all.

I'm trying to wrap my head around radial gradients and shapes. I'm trying to create a circular shape filled with a linear gradient, surrounded by a ring that is filled with a radial gradient. To do this, I'm creating the central circle first and setting it's fill to the linear gradient. To create the ring, I'm creating a slightly large circle, filling it with a radial gradient, then excluding another shape the same size as the central circle. I'm unable to get the radial gradient to work properly.

The full code, using the excluded shapes, results in this:
With Exclude.png

Code: Select all

[Rainmeter]
Update=#UpdateFreq#
AccurateText=1
Group=#ROOTCONFIG#
MouseActionCursor=0
DynamicWindowSize=1

DefaultUpdateDivider=(floor(1000/#UpdateFreq#))

[Variables]
UpdateFreq=1000

Layout_Padding=4
Layout_Panel_BaseSize=200

Layout_ShadowSize=4
Layout_Factor_W=1
Layout_Factor_H=0.5

Alpha_PanelBG_Init=210
Alpha_PanelShadow_Init=255

Alpha_PanelBG=#Alpha_PanelBG_Init#
Alpha_PanelShadow=#Alpha_PanelShadow_Init#

Layout_AdjFactor=1
Layout_Panel_W_Temp=(#Layout_Panel_BaseSize#*#Layout_AdjFactor#*(ceil(#Layout_Factor_W#*4)/4))
Layout_Panel_H_Temp=(#Layout_Panel_BaseSize#*#Layout_AdjFactor#*(ceil(#Layout_Factor_H#*4)/4))
Layout_Panel_W=(((#Layout_Panel_W_Temp#-floor(#Layout_Panel_W_Temp#/2)*2)>1?ceil(#Layout_Panel_W_Temp#/2)*2:floor(#Layout_Panel_W_Temp#/2)*2)-2*#Layout_ShadowSize#)
Layout_Panel_H=(((#Layout_Panel_H_Temp#-floor(#Layout_Panel_H_Temp#/2)*2)>1?ceil(#Layout_Panel_H_Temp#/2)*2:floor(#Layout_Panel_H_Temp#/2)*2)-2*#Layout_ShadowSize#)
Layout_HeaderTextHeight=0
Layout_ShowBorder=1

Colors_Black1=0,0,0
Colors_Black2=19,19,19

Colors_Back1=#Colors_Black2#
Colors_Back2=#Colors_Black1#

Colors_Border=255,255,255

[BackgroundTest]
Meter=Shape
Shape=Rectangle 0, 0, (#Layout_Panel_W#+2*#Layout_ShadowSize#), (#Layout_Panel_H#+2*#Layout_ShadowSize#) | Fill Color 0,0,0,1 | StrokeWidth 0
DynamicVariables=1
UpdateDivider=-1

[BackgroundCircle]
Meter=Shape
Shape=Ellipse (#Layout_Panel_W#/2+#Layout_ShadowSize#), (#Layout_Panel_H#/2+#Layout_ShadowSize#), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2) | Fill LinearGradient LinearGrad | StrokeWidth 0
Shape2=Ellipse (#Layout_Panel_W#/2+#Layout_ShadowSize#), (#Layout_Panel_H#/2+#Layout_ShadowSize#), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2+#Layout_ShadowSize#), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2+#Layout_ShadowSize#) | Fill RadialGradient ShadowGrad | StrokeWidth 0
Shape3=Ellipse (#Layout_Panel_W#/2+#Layout_ShadowSize#), (#Layout_Panel_H#/2+#Layout_ShadowSize#), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2)
Shape4=Combine Shape2 | Exclude Shape3
LinearGrad=0 | 255,0,0,128 ; 0 | 0,255,0,128 ; 1
ShadowGrad=0, 0, *, *, (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2+#Layout_ShadowSize#), (Min(#Layout_Panel_W#,#Layout_Panel_H#)/2+#Layout_ShadowSize#) | 255,0,0 ; ((Min(#Layout_Panel_W#,#Layout_Panel_H#)/2)/(#Layout_ShadowSize#+Min(#Layout_Panel_W#,#Layout_Panel_H#)/2)+0.05) | 0,0,0 ; ((Min(#Layout_Panel_W#,#Layout_Panel_H#)/2)/(#Layout_ShadowSize#+Min(#Layout_Panel_W#,#Layout_Panel_H#)/2)+0.05)
DynamicVariables=1
UpdateDivider=-1
Group=PanelBG
If I remove Shape3 and Shape4, I can preview the radial gradient on the remaining shape and it looks correct:
Without Exclude.png
But then it's missing the linear gradient in the center.

Pardon all the lengthy variable uses. I'm stripping code from one of my personal suites.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

Seems to me it might be less complicated to just fill the "stroke" of the ellipse with a gradient as well as the "fill" of the ellipse, rather than two shapes and combining and all that.

Code: Select all

[MeterEllipse]
Meter=Shape
Shape=Ellipse 100,100,50 | Fill RadialGradient MyGradient | StrokeWidth 10 | Stroke RadialGradient MyGradient2
MyGradient=0,0 | 155,200,232,255 ; 0.0 | 6,46,75,255 ; 1.0
MyGradient2=0,0 | 138,183,214,255 ; 0.8 | 47,89,119,255 ; 1.0
1.png
Not quite sure what effect you are going for, and sorry, but I can't wade through all that code to see if I can figure it out. If you have a simplified example, I might be able to provide more help.
prince1142003
Posts: 56
Joined: December 27th, 2011, 12:32 pm

Re: Thread for help with the new Shape meter

Post by prince1142003 »

I'm basically trying to achieve a shadow/glow effect around the circle.

I played with the stroke idea, but the problem is that the stroke is half inside the shape and half outside. If the interior of the shape is semitransparent, and the stroke is also semitransparent, they overlap in the interior region and it doesn't look good.

Here's a more visual example of what I was trying to do
Glow Example.png
And a simpler skin, with all the variables hardcoded:
Note: I'm using solid red and black for the gradient colors in order to better see what is going on.

Code: Select all

[Rainmeter]
Update=#UpdateFreq#
AccurateText=1
Group=#ROOTCONFIG#
MouseActionCursor=0
DynamicWindowSize=1

DefaultUpdateDivider=(floor(1000/#UpdateFreq#))

[Variables]
UpdateFreq=1000

[BackgroundTest]
Meter=Shape
Shape=Rectangle 0, 0, 200, 100 | Fill Color 0,0,0,64 | StrokeWidth 0
DynamicVariables=1
UpdateDivider=-1

[BackgroundCircle]
Meter=Shape
Shape=Ellipse 100, 50, 46, 46 | Fill LinearGradient LinearGrad | StrokeWidth 0
Shape2=Ellipse 100, 50, 50, 50 | Fill RadialGradient ShadowGrad | StrokeWidth 0
Shape3=Ellipse 100, 50, 46, 46
Shape4=Combine Shape2 | Exclude Shape3
LinearGrad=0 | 255,0,0,128 ; 0 | 0,255,0,128 ; 1
ShadowGrad=0, 0 | 0,0,0,0 ; 0.92 | 255,0,0,255 ; 0.92 | 0,0,0,255 ; 1.0
DynamicVariables=1
UpdateDivider=-1
Group=PanelBG
Which gives me not at all what I'm looking for.
Bad radial gradient.png
How do I fill the ring shape radially, fading from solid red at 92% to solid black at 100%?
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Thread for help with the new Shape meter

Post by balala »

prince1142003 wrote:To create the ring, I'm creating a slightly large circle, filling it with a radial gradient, then excluding another shape the same size as the central circle. I'm unable to get the radial gradient to work properly.
What Rainmeter version are you using? Because the earlier versions (up to r2793, released on May 10, 2017) didn't support the radial gradient on combined shapes (https://www.rainmeter.net/beta-4-1). But this issue was fixed, maybe a upgrade of Rainmeter could help, if you're using an older version.
prince1142003
Posts: 56
Joined: December 27th, 2011, 12:32 pm

Re: Thread for help with the new Shape meter

Post by prince1142003 »

balala wrote:What Rainmeter version are you using? Because the earlier versions (up to r2793, released on May 10, 2017) didn't support the radial gradient on combined shapes (https://www.rainmeter.net/beta-4-1). But this issue was fixed, maybe a upgrade of Rainmeter could help, if you're using an older version.
Should've posted that. I'm using 4.1.0 beta r2824 64-bit (Jul 7 2017).
Post Reply