It is currently May 25th, 2019, 2:19 pm

Transparent shape with different corner radius

General topics related to Rainmeter.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3336
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Transparent shape with different corner radius

eclectic-tech » April 23rd, 2019, 9:16 pm

Pul53dr1v3r wrote:
April 23rd, 2019, 5:58 pm
Hi electic. I've also noticed myself that the line is almost invisible (but still there) using 2 different colors and one could live with it in that case. But it's up to someone's taste what the colors to choose. It takes all sorts to make a world, doesn't it. Seems this is a Rainmeter's "shortage" that shouldn't appear under "ideal" circumstances. Am i right?

It's also seems very hard to find a solution for this "small" issue using this method to get the two colored bg. Probably a solution could be jsmorleys' idea with the curves but i've no clue to work with it, fpr now.
Yes, there are other ways to achieve similar end results and it is up to the skin author to decide what is acceptable.

In my attempt to simulate a scalable illustro skin (illustra), I decided on 2 separate shapes for the background and header rather than a "combined" shape. Then used a combination of the Shape's Scale action and TransformationMatrix for scaling and alignment actions to properly place text for each.

If I have some time, I will look into jsmorley's path suggestion, it may eliminate the "shading" you are experiencing with your current solution.
Sometimes the "smallest" issues are the toughest to solve :D
User avatar
jsmorley
Developer
Posts: 19245
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Transparent shape with different corner radius

jsmorley » April 23rd, 2019, 10:51 pm

The path is just LineTo, CurveTo, LineTo, CurveTo, LineTo, CurveTo, LineTo, CurveTo really, but I just haven't messed much with Bézier curves.

https://docs.rainmeter.net/manual/meters/shape/#Path
https://docs.rainmeter.net/manual/meters/shape/#Curve
https://docs.rainmeter.net/manual/meters/shape/quadratic.html

Not sure if there is a simple formula that can derive the "control point" in the curve(s), which is all-important, but not something I want to "guesstimate". I'm betting there is some reasonably simple trigonometric solution.

In a sense, you just want the "center" of the curved line to be the point where the exact "corner" of the rectangle would be if it wasn't rounded. But to get a pleasing rounded rectangle, you need to know where to start and stop the straight lines, and what the "control point" is for the curves.
User avatar
Pul53dr1v3r
Posts: 164
Joined: July 30th, 2014, 10:30 am

Re: Transparent shape with different corner radius

Pul53dr1v3r » April 24th, 2019, 8:13 pm

eclectic-tech wrote:
April 23rd, 2019, 9:16 pm
just to mention that i have to apply this behaviour to the shapes:

Code: Select all

Shape=Rectangle 6,7,197,(104+39*#SkinState#+12*([MeasureRun]-1)),5.5 | Fill Color 0,0,0,0 | StrokeWidth #Stroke_Width# | Stroke Color #StrokeColor#
;Shape=Rectangle 6,7,196,(104+39*#SkinState#+12*([MeasureRun]-1)),5 | Fill Color 0,0,0,150 | StrokeWidth 0.5 | Stroke Color 160,160,160,200
; The "top" shape
Shape2=Rectangle 6.5,7.5,196,25,5 | StrokeWidth 0 | Fill Color #SkinColor1#
Shape3=Rectangle 6.5,15,196,20
Shape4=Combine Shape2 | Union Shape3
; The "bottom" shape
Shape5=Rectangle 6.5,35,196,(75.5+39*#SkinState#+12*([MeasureRun]-1)),5 | StrokeWidth 0 | Fill Color #SkinColor2#
Shape6=Rectangle 6.5,35,196,20
Shape7=Combine Shape5 | Union Shape6
TransformationMatrix=#Scale#;0;0;#Scale#;#Scale#;#Scale#
DynamicVariables=1
So it's very dynamic.
As to your illustra package, that bg is visually similar to this one, but in essence it differs much more. Just imagine what the color of the top shape you'd get if you change the bottom shape color... Remix. Also, there are needs to extend the bg in order to show-hide the graphs and fit the bg according to the CPU Core numbers.
I'd appreciate any try to solve this, let alone making it works properly.

No matter if it isn't a trigonometric solution, but belive it' would be easier for all the further actions.

P.S. Found that the top shape of your illustra isn't ideally cenetered when scaled up, thoufg i can't notice it at lowers scales. :oops:
pic
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3336
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Transparent shape with different corner radius

eclectic-tech » April 25th, 2019, 1:29 am

That's more scaling than I ever expect to use, (but thanks for noticing) :D ... and I'm not a perfectionist, so I can live with that shift! ;-)
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3336
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Transparent shape with different corner radius

eclectic-tech » April 25th, 2019, 6:28 am

Here are 2 shape samples using Path. The first is identical to the illustro background's image visible size, and border offsets. The second shape is 210x68 pixels and includes vertical scaling based on the number of cores ([MeaureRun]-1). The corner radius can be set in the variables (set it to 10) to mimic your 5,5 corner.

Not having all of your code, these values may need to be tweaked to fit your meters.
Hopefully, this will get you closer to the scalable background you are designing.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
; Necessary to set these to maximum scale times the 1x width and height of the background to prevent clipping when using TransformationMatrix
SkinHeight=((68*2.2)*4)
SkinWidth=(210*4)
OnRefreshAction=[!CommandMeasure "MeasureRun" "Run"]
AccurateText=1
; ::::::::::SkinHeight determinator:::::::::: 
; 1Core-118,   2Cores-130,  4Cores-154,  6Cores-178,  8Cores-202,  10Cores-226, 12Cores-250,
; 14Cores-274, 16Cores-298, 18Cores-322, 20Cores-346, 22Cores-370, 24Cores-394
; 26Cores-418, 28Cores-442, 30Cores-466, 32Cores-490, 34Cores-514, 36Cores-538)

[Variables]
ShapeTopColor=0,0,0
ShapeTopOpacity=210
ShapeBodyColor=0,0,0
ShapeBodyOpacity=150
SkinState=1
.
Scale=1
CornerRadius=10

[MeterBackgroundillustro]
; illustro default background size: BgHeight=68 BgWidth=210
; illustro image offsets 6,6,8,8

Meter=Shape
DynamicVariables=1

; Top Shape
Shape=Path PathTop | StrokeWidth 1 | Stroke Color 160,160,160,255 | Fill Color #ShapeTopColor#,#ShapeTopOpacity#

PathTop=6,34 | LineTo 6,(6+#CornerRadius#) | CurveTo (6+#CornerRadius#),6,6,6 | LineTo (202-#CornerRadius#),6 | CurveTo 202,(6+#CornerRadius#),202,6 | LineTo 202,34 | ClosePath 0

; Body Shape
Shape2=Path PathBody | StrokeWidth 1 | Stroke Color 160,160,160,255 | Fill Color #ShapeBodyColor#,#ShapeBodyOpacity#

PathBody=6,34 | LineTo 6,(60-#CornerRadius#) | CurveTo (6+#CornerRadius#),60,6,60 | LineTo (202-#CornerRadius#),60 | CurveTo 202,(60-#CornerRadius#),202,60 | LineTo 202,34 | ClosePath 0

TransformationMatrix=#Scale#;0;0;#Scale#;0;0

[MeterBackground]
; 210x68 pixels
Meter=Shape
DynamicVariables=1
X=1r
Y=11R

; Top Shape
Shape=Path PathTop | StrokeWidth 1 | Stroke Color 160,160,160,255 | Fill Color #ShapeTopColor#,#ShapeTopOpacity#

PathTop=0,34 | LineTo 0,#CornerRadius# | CurveTo #CornerRadius#,0,0,0 | LineTo (210-#CornerRadius#),0 | CurveTo 210,#CornerRadius#,210,0 | LineTo 210,34 | ClosePath 0

; Body Shape
Shape2=Path PathBody | StrokeWidth 1 | Stroke Color 160,160,160,255 | Fill Color #ShapeBodyColor#,#ShapeBodyOpacity#

PathBody=0,34 | LineTo 0,(68+(12*([MeasureRun]-1))-#CornerRadius#) | CurveTo #CornerRadius#,(68+(12*([MeasureRun]-1))),0,(68+(12*([MeasureRun]-1))) | LineTo (210-#CornerRadius#),(68+(12*([MeasureRun]-1))) | CurveTo 210,((68+(12*([MeasureRun]-1))-#CornerRadius#)),210,(68+(12*([MeasureRun]-1))) | LineTo 210,34 | ClosePath 0

TransformationMatrix=#Scale#;0;0;#Scale#;0;0

[MeasureRun]
Measure=Plugin
Plugin=RunCommand
Parameter=WMIC CPU Get NumberOfLogicalProcessors
State=Hide
OutputType=ANSI
RegExpSubstitute=1
Substitute="\n":"","NumberOfLogicalProcessors":""
;FinishAction=[!EnableMeasure "MeasureRunCond"][!EnableMeasure "MeasureSkinState"][!UpdateMeasure "MeasureSkinState"]
illustro 2019-04-25 022709.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 19245
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Transparent shape with different corner radius

jsmorley » April 25th, 2019, 12:38 pm

Very nice eclectic-tech. So the math is simple indeed...

Just for future reference, here is how you can do that while defining the entire path, rather than using ClosePath=0, which might complicate Combining this shape with another. (Combined shapes are always automatically closed)

Code: Select all

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

[Variables]
CornerRadius=10
Width=200
Height=100
StrokeWidth=4
Start=(#StrokeWidth#/2)

[MeterShape]
Meter=Shape
Shape=Path ShapePath | StrokeWidth #StrokeWidth# | Stroke Color 160,160,160,255 | Fill Color 47,47,47,255
ShapePath=#Start#,#Height# | LineTo #Start#,(#Start#+(#CornerRadius#*2)) | CurveTo (#Start#+(#CornerRadius#*2)),#Start#,#Start#,#Start# | LineTo (#Width#-(#CornerRadius#*2)),#Start# | CurveTo #Width#,(#Start#+(#CornerRadius#*2)),#Width#,#Start# | LineTo #Width#,#Height# | SetNoStroke 1 | LineTo #Start#,#Height# | ClosePath 1

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

Re: Transparent shape with different corner radius

jsmorley » April 25th, 2019, 1:05 pm

Hmm... No. The SetNoStroke is ignored when the shape is combined, so you would need a different approach for that.

Code: Select all

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

[Variables]
CornerRadius=10
Width=200
Height=100
StrokeWidth=4
Start=(#StrokeWidth#/2)

[MeterShape]
Meter=Shape
Shape=Path ShapePath | StrokeWidth #StrokeWidth# | Stroke Color 160,160,160,255 | Fill Color 47,47,47,255
ShapePath=#Start#,#Height# | LineTo #Start#,(#Start#+(#CornerRadius#*2)) | CurveTo (#Start#+(#CornerRadius#*2)),#Start#,#Start#,#Start# | LineTo (#Width#-(#CornerRadius#*2)),#Start# | CurveTo #Width#,(#Start#+(#CornerRadius#*2)),#Width#,#Start# | LineTo #Width#,#Height# | SetNoStroke 1 | LineTo #Start#,#Height# | ClosePath 1
Shape2=Ellipse 40,40,20
Shape3=Combine Shape | Exclude Shape2

2.png

Both your approach (don't draw the closing segment) and mine (draw it, but don't stroke it) will automatically close the "new" shape and use the StrokeWidth from the parent shape. So in this case, I guess we would be back to drawing the "border" as a separate Path shape with no fill.
You do not have the required permissions to view the files attached to this post.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3336
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Transparent shape with different corner radius

eclectic-tech » April 26th, 2019, 2:10 am

Thanks for generalizing the method for round corner path shapes; I was going to look into that, but it was almost 3 am and I needed sleep! :D
Thanks for the tip on SetNoStroke 1/0
I have never used that in a shape meter, but definitely see the value it provides when creating adjacent shapes! :thumbup:

I see that stroke effect when combining shapes... but I think Pul53dr1v3r is attempting to replicate the illustro background using a Shape meter that can be scaled and have a varying number of information lines. If that is the case, then I see no need to "Combine" the shapes and a strokewidth of zero would be used since no border is desired.

Using your generalized approach, here is a scalable sample skin that mimics the illustro background in size and color with a header and variable body height.

The number of lines of information in any skin can be controlled by the #LineItems# variable; this can be set by a measure or a static value depending on the skin. The scaling is done in the [Variables] section to the defined line height, corner radius, width, top height, and strokewidth. Then the shape meters uses it's scale function; this eliminates the need to define Skinwidth/Skinheight in the [Rainmeter] section which are required when using TransformationMatrix.

Code: Select all

; Scalable illustro style background using shape meter with paths
; Expandable info body using LineItems variable
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]
Scale=1
; The number of displayed info lines (Cores, Memory, etc.)
LineItems=1
; The height of an info line
LineHeight=(14*#Scale#)
CornerRadius=(3*#Scale#)
Width=(196*#Scale#)
TopHeight=(27*#Scale#)
BodyHeight=(#TopHeight#+(#LineHeight#*#LineItems#))
StrokeWidth=(0*#Scale#)
Start=(#StrokeWidth#/2)

[MeterShape]
Meter=Shape
DynamicVariables=1

; Top Shape
Shape=Path ShapePath | StrokeWidth #StrokeWidth# | Stroke Color 160,160,160,255 | Fill Color 0,0,0,175 | #Scale#,#Scale#

ShapePath=#Start#,#TopHeight# | LineTo #Start#,(#Start#+(#CornerRadius#*2)) | CurveTo (#Start#+(#CornerRadius#*2)),#Start#,#Start#,#Start# | LineTo (#Width#-(#CornerRadius#*2)),#Start# | CurveTo #Width#,(#Start#+(#CornerRadius#*2)),#Width#,#Start# | LineTo #Width#,#TopHeight# | SetNoStroke 1 | LineTo #Start#,#TopHeight# | ClosePath 1

; Body Shape
Shape2=Path PathBody | StrokeWidth #StrokeWidth#  | Stroke Color 160,160,160,255 | Fill Color 0,0,0,140 | #Scale#,#Scale#

PathBody=#Start#,#TopHeight# | SetNoStroke 1 | LineTo #Width#,#TopHeight# | SetNoStroke 0 | LineTo #Width#,((#BodyHeight#+(#LineHeight#*#LineItems#))-(#CornerRadius#*2)) | CurveTo (#Width#-(#CornerRadius#*2)),(#BodyHeight#+(#LineHeight#*#LineItems#)),#Width#,(#BodyHeight#+(#LineHeight#*#LineItems#)) | LineTo (#Start#+(#CornerRadius#*2)),(#BodyHeight#+(#LineHeight#*#LineItems#)) | CurveTo #Start#,((#BodyHeight#+(#LineHeight#*#LineItems#))-(#CornerRadius#*2)),#Start#,(#BodyHeight#+(#LineHeight#*#LineItems#))| LineTo #Start#,#TopHeight# | ClosePath 1
This code can be used to create any width and height shape, with colors for the header and body, having round-corners, variable header height, and a variable body height.

@Pul53dr1v3r ... Hope this helps :welcome:
User avatar
Pul53dr1v3r
Posts: 164
Joined: July 30th, 2014, 10:30 am

Re: Transparent shape with different corner radius

Pul53dr1v3r » April 27th, 2019, 10:37 am

eclectic-tech wrote:
April 26th, 2019, 2:10 am

@Pul53dr1v3r ... Hope this helps :welcome:
Sorry for my lack of time electic. I'm preparing for tomorrow's Easter and i hope you will understand.
As to the path shape, i succeeded in adapting a big part (almost all) of the code to my requrements and it's excellent so far. Will continue with it next week.
I just can say that you're a real "Pathfinder". :bow: It doesnt look so complicated now when you have done it, but it really was before your exploit.

@ jsmorley: thx for this samples, will be very usefull and helpfull to understand the paths at least a bit better.
User avatar
Pul53dr1v3r
Posts: 164
Joined: July 30th, 2014, 10:30 am

Re: Transparent shape with different corner radius

Pul53dr1v3r » April 29th, 2019, 5:34 pm

eclectic-tech wrote:
April 26th, 2019, 2:10 am
At first i used your first variant of the code and it works fine.
Then tried the second method but the line is there again between the two shapes when scaled to any n.n alue where the second n is above 0.
O.O
Also, seems that this method (woithout Skinwidth/Skinheight) can not be used for this skin or it calls for a serious modification of the code bu the idea is excellent.




I forgot to attach the pkg if you ever need it.
You do not have the required permissions to view the files attached to this post.