It is currently March 23rd, 2023, 8:32 pm

Get help with creating, editing & fixing problems with skins

BlueJive
Posts: 27 Joined: February 25th, 2021, 6:45 am
Post
by BlueJive » April 2nd, 2021, 12:34 pm

Hey all

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

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

Last edited by BlueJive on April 8th, 2021, 10:48 am, edited 1 time in total.

CyberTheWorm
Posts: 860 Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada
Post
by CyberTheWorm » April 2nd, 2021, 5:42 pm

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:

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.

CyberTheWorm
Posts: 860 Joined: August 22nd, 2016, 11:32 pm
Location: Surrey, B.C., Canada
Post
by CyberTheWorm » April 2nd, 2021, 5:44 pm

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

BlueJive
Posts: 27 Joined: February 25th, 2021, 6:45 am
Post
by BlueJive » April 2nd, 2021, 6:35 pm

CyberTheWorm wrote: β April 2nd, 2021, 5:44 pm
Oops I see you need rounded ends

Yes, sorry. That's what I'm going for

balala
Rainmeter Sage
Posts: 15059 Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania
Post
by balala » 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.
BlueJive
Posts: 27 Joined: February 25th, 2021, 6:45 am
Post
by BlueJive » April 8th, 2021, 10:42 am

Thank you so much! Worked a charm

balala
Rainmeter Sage
Posts: 15059 Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania
Post
by balala » April 8th, 2021, 3:48 pm

BlueJive wrote: β April 8th, 2021, 10:42 am
Thank you so much! Worked a charm

Did it? I'm glad.

zivallh
Posts: 38 Joined: October 16th, 2019, 2:26 pm
Post
by zivallh » October 3rd, 2022, 5:49 pm

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?

balala
Rainmeter Sage
Posts: 15059 Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania
Post
by balala » October 3rd, 2022, 6:02 pm

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
```

zivallh
Posts: 38 Joined: October 16th, 2019, 2:26 pm
Post
by zivallh » October 8th, 2022, 8:23 pm

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
```