Thread for help with the new Shape meter

Help with creating, editing & fixing problems with skins
User avatar

Re: Thread for help with the new Shape meter

May 10th, 2017, 8:02 pm
jsmorley
Developer   [16404 posts]

Yep...

1.png

Re: Thread for help with the new Shape meter

July 27th, 2017, 8:59 pm
Peremptor
   [2 posts]

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

Re: Thread for help with the new Shape meter

July 27th, 2017, 11:47 pm
eclectic-tech
Rainmeter Sage   [2323 posts]

@ 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.

Re: Thread for help with the new Shape meter

August 3rd, 2017, 6:33 pm
Peremptor
   [2 posts]

@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

Re: Thread for help with the new Shape meter

August 4th, 2017, 1:55 am
eclectic-tech
Rainmeter Sage   [2323 posts]

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.

Re: Thread for help with the new Shape meter

August 21st, 2017, 1:12 am
prince1142003
   [54 posts]

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

Re: Thread for help with the new Shape meter

August 21st, 2017, 2:02 am
jsmorley
Developer   [16404 posts]

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.

Re: Thread for help with the new Shape meter

August 21st, 2017, 4:03 am
prince1142003
   [54 posts]

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

Re: Thread for help with the new Shape meter

August 21st, 2017, 6:52 am
balala
Rainmeter Sage   [4982 posts]

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.

Re: Thread for help with the new Shape meter

August 22nd, 2017, 12:36 am
prince1142003
   [54 posts]

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).

Return to “Help: Rainmeter Skins”



Who is online

Users browsing this forum: No registered users and 8 guests