It is currently March 29th, 2024, 12:39 pm

Path Shape, Arcs, and System Information

Get help with creating, editing & fixing problems with skins
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am

Path Shape, Arcs, and System Information

Post by BlueJive »

Hey all πŸ‘‹

I'm trying to code a skin that has arcs with curved ends, like this:

Image

Now, I know that roundline meters and arcs can't do this. So I'd need to use a path shape. However, my difficulty lies in, 1: getting a path shape to look like an arc, and 2: editing the end points of the shape to be variables so that they can be used for system monitoring plugins.

Here's what I've got so far:

Code: Select all

[MeterShape]
Meter=Shape
X=700
Y=15R
Shape=Path MyPath | StrokeWidth 8 | Stroke Color 173,220,247,255 | Fill Color 87,149,212,0
MyPath=0,0 | ArcTo 200,200 | CurveTo 0,0,100,100
Not much :( I would really appreciate some help with this (preferably explaining in slightly more detail about path shapes, I'd like to learn how to code these skins with less external help in the future) and I hope you don't mind me putting this here, rather than in the shape megathread, since this lies slightly outside of that specification.

Thanks so much :welcome:
Last edited by BlueJive on April 8th, 2021, 10:48 am, edited 1 time in total.
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Path Shape, Arcs, and System Information

Post by CyberTheWorm »

BlueJive wrote: ↑April 2nd, 2021, 12:34 pm Hey all πŸ‘‹

I'm trying to code a skin that has arcs with curved ends, like this:

Image

Now, I know that roundline meters and arcs can't do this. So I'd need to use a path shape. However, my difficulty lies in, 1: getting a path shape to look like an arc, and 2: editing the end points of the shape to be variables so that they can be used for system monitoring plugins.
Actually you can use Roundline.
2021-04-02_10h38_31.png
Here is the code I used, I'm sure you could edit this and get what you want.

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Author=CyberTheWorm
Version=1.0.0
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Circle CPU Monitor
;-------------------- Variables ----------------------
[Variables]
Blue=126,217,241,255
LightBlue=126,217,241,100
BlueBackground=69,150,221,255
MyFont=Arial
;-------------------- Measures ----------------------
[MeasureAverageCPU]
Measure=CPU

[MeasureCore0]
Measure=CPU
Processor=0

[MeasureCore1]
Measure=CPU
Processor=1

[MeasureCore2]
Measure=CPU
Processor=2

[MeasureCore3]
Measure=CPU
Processor=3
;-------------------- Meters ----------------------
;Transparent background to enable click anywhere on meter
[MeterBackground]
Meter=Roundline
X=0
Y=0
H=120
W=120
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=60
LineColor=0,0,0,1
Solid=1
AntiAlias=1

[MeterAverageCPUBackground]
Meter=Roundline
X=0
Y=0
H=120
W=120
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=60
LineStart=50
LineColor=#LightBlue#
Solid=1
AntiAlias=1

[MeterAverageCPU]
Meter=Roundline
MeasureName=MeasureAverageCPU
X=30
Y=30
H=60
W=60
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineLength=60
LineStart=50
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreBackground]
Meter=Roundline
X=30
Y=30
H=60
W=60
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=49
LineStart=39
LineColor=#LightBlue#
Solid=1
AntiAlias=1

[MeterCoreCPU0]
Meter=Roundline
MeasureName=MeasureCore0
X=30
Y=30
H=60
W=60
StartAngle=(Rad(270))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU1]
Meter=Roundline
MeasureName=MeasureCore1
X=30
Y=30
H=60
W=60
StartAngle=(Rad(0))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU2]
Meter=Roundline
MeasureName=MeasureCore2
X=30
Y=30
H=60
W=60
StartAngle=(Rad(90))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU3]
Meter=Roundline
MeasureName=MeasureCore0
X=30
Y=30
H=60
W=60
StartAngle=(Rad(180))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCPUValues]
Meter=String
MeasureName=MeasureCore0
MeasureName2=MeasureCore1
MeasureName3=MeasureCore2
MeasureName4=MeasureCore3
X=60
Y=60
FontFace=#MyFont#
FontSize=8
FontColor=#Blue#
AntiAlias=1
ClipString=1
StringAlign=CenterCenter
Text=0:%1%#CRLF#3:%4% 1:%2%#CRLF#2:%3%

You do not have the required permissions to view the files attached to this post.
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
CyberTheWorm
Posts: 860
Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada

Re: Path Shape, Arcs, and System Information

Post by CyberTheWorm »

CyberTheWorm wrote: ↑April 2nd, 2021, 5:42 pm Actually you can use Roundline.
2021-04-02_10h38_31.png
Here is the code I used, I'm sure you could edit this and get what you want.

Code: Select all

[Rainmeter]
Update=1000

[Metadata]
Author=CyberTheWorm
Version=1.0.0
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Circle CPU Monitor
;-------------------- Variables ----------------------
[Variables]
Blue=126,217,241,255
LightBlue=126,217,241,100
BlueBackground=69,150,221,255
MyFont=Arial
;-------------------- Measures ----------------------
[MeasureAverageCPU]
Measure=CPU

[MeasureCore0]
Measure=CPU
Processor=0

[MeasureCore1]
Measure=CPU
Processor=1

[MeasureCore2]
Measure=CPU
Processor=2

[MeasureCore3]
Measure=CPU
Processor=3
;-------------------- Meters ----------------------
;Transparent background to enable click anywhere on meter
[MeterBackground]
Meter=Roundline
X=0
Y=0
H=120
W=120
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=60
LineColor=0,0,0,1
Solid=1
AntiAlias=1

[MeterAverageCPUBackground]
Meter=Roundline
X=0
Y=0
H=120
W=120
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=60
LineStart=50
LineColor=#LightBlue#
Solid=1
AntiAlias=1

[MeterAverageCPU]
Meter=Roundline
MeasureName=MeasureAverageCPU
X=30
Y=30
H=60
W=60
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineLength=60
LineStart=50
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreBackground]
Meter=Roundline
X=30
Y=30
H=60
W=60
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineLength=49
LineStart=39
LineColor=#LightBlue#
Solid=1
AntiAlias=1

[MeterCoreCPU0]
Meter=Roundline
MeasureName=MeasureCore0
X=30
Y=30
H=60
W=60
StartAngle=(Rad(270))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU1]
Meter=Roundline
MeasureName=MeasureCore1
X=30
Y=30
H=60
W=60
StartAngle=(Rad(0))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU2]
Meter=Roundline
MeasureName=MeasureCore2
X=30
Y=30
H=60
W=60
StartAngle=(Rad(90))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCoreCPU3]
Meter=Roundline
MeasureName=MeasureCore0
X=30
Y=30
H=60
W=60
StartAngle=(Rad(180))
RotationAngle=(Rad(90))
LineLength=49
LineStart=39
LineColor=#Blue#
Solid=1
AntiAlias=1

[MeterCPUValues]
Meter=String
MeasureName=MeasureCore0
MeasureName2=MeasureCore1
MeasureName3=MeasureCore2
MeasureName4=MeasureCore3
X=60
Y=60
FontFace=#MyFont#
FontSize=8
FontColor=#Blue#
AntiAlias=1
ClipString=1
StringAlign=CenterCenter
Text=0:%1%#CRLF#3:%4% 1:%2%#CRLF#2:%3%


Oops I see you need rounded ends
The only source of knowledge is experience. Albert Einstein
Deviant Art Page
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am

Re: Path Shape, Arcs, and System Information

Post by BlueJive »

CyberTheWorm wrote: ↑April 2nd, 2021, 5:44 pm Oops I see you need rounded ends
Yes, sorry. That's what I'm going for :)
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Path Shape, Arcs, and System Information

Post by balala »

My try to achieve this:

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=(#CenterX#+#Radius#+10)
SkinHeight=(#CenterY#+#Radius#+10)

[Variables]
CenterX=200
CenterY=200
Radius=150

[MeasureCPU]
Measure=CPU

[MeterShape]
Meter=Shape
X=2
Y=2
Shape=Arc #CenterX#,(#CenterY#-#Radius#),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),0,180)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),0,180)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
Shape2=Arc (#CenterX#+#Radius#*Sin(Rad(((180+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((180+180)%360)))),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),180,360)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),180,360)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
MyModifiers=StrokeWidth 8 | Stroke Color 173,220,247,255 | Fill Color 0,0,0,0 | StrokeStartCap Round | StrokeEndCap Round
DynamicVariables=1
The skin using this code shows the CPU utilization, but you can replace the [MeasureCPU] measure with something else, if needed (just take care to replace the MeasureCPU measure name accordingly into the Shape and Shape2 options of the [MeterShape] meter if you replaced the name on the measure).
Also you can set the following variables:
  • CenterX and CenterY are the coordinates of the center of "roundline".
  • Radius is the radius of the same meter / arc.
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am

Re: Path Shape, Arcs, and System Information

Post by BlueJive »

Thank you so much! Worked a charm :)
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Path Shape, Arcs, and System Information

Post by balala »

BlueJive wrote: ↑April 8th, 2021, 10:42 am Thank you so much! Worked a charm :)
Did it? I'm glad.
User avatar
zivallh
Posts: 38
Joined: October 16th, 2019, 2:26 pm

Re: Path Shape, Arcs, and System Information

Post by zivallh »

balala wrote: ↑April 2nd, 2021, 7:48 pm My try to achieve this:

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=(#CenterX#+#Radius#+10)
SkinHeight=(#CenterY#+#Radius#+10)

[Variables]
CenterX=200
CenterY=200
Radius=150

[MeasureCPU]
Measure=CPU

[MeterShape]
Meter=Shape
X=2
Y=2
Shape=Arc #CenterX#,(#CenterY#-#Radius#),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),0,180)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),0,180)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
Shape2=Arc (#CenterX#+#Radius#*Sin(Rad(((180+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((180+180)%360)))),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),180,360)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureCPU]/([MeasureCPU:MaxValue]-[MeasureCPU:MinValue]))),180,360)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
MyModifiers=StrokeWidth 8 | Stroke Color 173,220,247,255 | Fill Color 0,0,0,0 | StrokeStartCap Round | StrokeEndCap Round
DynamicVariables=1
The skin using this code shows the CPU utilization, but you can replace the [MeasureCPU] measure with something else, if needed (just take care to replace the MeasureCPU measure name accordingly into the Shape and Shape2 options of the [MeterShape] meter if you replaced the name on the measure).
Also you can set the following variables:
  • CenterX and CenterY are the coordinates of the center of "roundline".
  • Radius is the radius of the same meter / arc.
I tried your code with "volume measure" but once it reaches more than 50 it's like shrink or something, isn't possible to use it with a volume measure?
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Path Shape, Arcs, and System Information

Post by balala »

zivallh wrote: ↑October 3rd, 2022, 5:49 pm I tried your code with "volume measure" but once it reaches more than 50 it's like shrink or something, isn't possible to use it with a volume measure?
It definitely is. For instance:

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=(#CenterX#+#Radius#+10)
SkinHeight=(#CenterY#+#Radius#+10)

[Variables]
CenterX=200
CenterY=200
Radius=150

[MeasureVolume]
Measure=Plugin
Plugin=Win7AudioPlugin

[MeterShape]
Meter=Shape
X=2
Y=2
Shape=Arc #CenterX#,(#CenterY#-#Radius#),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureVolume:]/([MeasureVolume:MaxValue]-[MeasureVolume:MinValue]))),0,180)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureVolume:]/([MeasureVolume:MaxValue]-[MeasureVolume:MinValue]))),0,180)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
Shape2=Arc (#CenterX#+#Radius#*Sin(Rad(((180+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((180+180)%360)))),(#CenterX#+#Radius#*Sin(Rad(((Clamp((360*([MeasureVolume:]/([MeasureVolume:MaxValue]-[MeasureVolume:MinValue]))),180,360)+180)%360)))),(#CenterY#+#Radius#*Cos(Rad(((Clamp((360*([MeasureVolume:]/([MeasureVolume:MaxValue]-[MeasureVolume:MinValue]))),180,360)+180)%360)))),#Radius#,#Radius#,0,1,0,0 | Extend MyModifiers
MyModifiers=StrokeWidth 8 | Stroke Color 173,220,247,255 | Fill Color 0,0,0,0 | StrokeStartCap Round | StrokeEndCap Round
DynamicVariables=1
User avatar
zivallh
Posts: 38
Joined: October 16th, 2019, 2:26 pm

Re: Path Shape, Arcs, and System Information

Post by zivallh »

You are a genius :) Thank you!!

We can make it clockwise? the Rad Cos Sin is really hard to understand(
And if we can make it like "SetVolume" option when we click somewhere on that arc

I saw another method from other skins as well but I couldn't understand what's the PI, I tried to use it with Volume as well but it didn't work

Code: Select all


[Variables]
Scale=1
Color1=255,255,255
Color2=240,148,101
Color3=236,64,55
Color4=0,0,0

[MeasurePositionX]
Measure=Calc
Formula=(50*#Scale#) + (50*#Scale#) * cos(PI/2 - (MeasureProgress/100) * 2 * PI)
DynamicVariables=1

[MeasurePositionY]
Measure=Calc
Formula=(50*#Scale#) - (50*#Scale#) * sin(PI/2 - (MeasureProgress/100) * 2 * PI)
DynamicVariables=1

[MeterRoundBar]
Meter=Shape
X=(30*#Scale#)
Y=(30*#Scale#)
;Shape=Ellipse (50*#Scale#),(50*#Scale#),((2*#Scale#)*#Size2#) | StrokeWidth (10*#Scale#) | Fill Color #Color1#,100 | StrokeColor #Color1#,0
Shape=Ellipse (50*#Scale#),(50*#Scale#),(50*#Scale#) | StrokeWidth (3*#Scale#) | Fill Color #Color1#,0 | StrokeColor #Color1#,100
Shape2=Arc [MeasurePositionX],[MeasurePositionY], ((50*#Scale#)+1),((50*#Scale#)-(50*#Scale#)),(50*#Scale#),(50*#Scale#),0,1,(Round([MeasureProgress]/100)),0 | StrokeWidth ((5*#Scale#)*#Size#) | Stroke Color #Color2# | StrokeStartCap Round | StrokeEndCap Round
DynamicVariables=1