It is currently February 16th, 2019, 2:13 am

Working with Roundline

Our most popular Tips and Tricks from the Rainmeter Team and others
User avatar
jsmorley
Developer
Posts: 18819
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Working with Roundline

jsmorley » March 2nd, 2014, 7:00 pm

Roundline

One of the more popular meters in Rainmeter for graphically displaying the value of a measure is the Roundline meter.

It can be a little difficult to wrap your head around some of the options when you first start using it, so here is a little guide to how you might accomplish a few different things with the meter.

Values for the meter

First and foremost, the Roundline meter is used to display a current measure value graphically from 0% to 100%. It must be used with a MeasureName that defines a value as a Percentage. Some measures like CPU or FreeDiskSpace automatically are treated as a percentage value when used in a graphical meter like Roundline, (or Bar, Histogram, Line, and Rotator) and some you must set the MinValue and MaxValue on the measure to define a percentage the meter can evaluate.

Important Options

Next, let's examine some of the most important options you need to get the meter doing the things you want.

W
This sets the overall width of the meter.
H
This sets the overall height of the meter.

One thing to remember is that a Roundline meter always treats the meter as a circle, defined by these width and height options. As we will see in a bit, many of the other options need to be set based half of the W and H options, so the meter can know where the center of the circle defined by the meter is.

Hang on, what about those "Radians"?

Some of the options in Roundline (and Rotator incidentally) are defined as a number of Radians. That link can give you a fuller explanation of how radians work in Rainmeter, but the long and the short of it is:

Radians are a measure of arc angle, which can be used to define a distance around a circle of any size. In Rainmeter, it has a starting point that is directly to the right of the center of the circle. Don't think "compass" here. 0° / 360° is not at the top of the circle, but directly to the right. Since we tend to find it easier to visualize a circle in terms of degrees and not radians, we simply use the built-in (Rad(SomeDegrees)) Rainmeter function to turn degrees into radians in our options. This will become more clear as we explore the options.

StartAngle
This defines the starting point in radians on the circle that will be considered as 0%. In our example meters to come, we will be starting at the top of the circle, so we will be using StartAngle=(Rad(270)). This means start 270° clockwise from the 0° point on the circle. (remember, that is directly to the right of center) That value will start things at the top of the circle.

RotationAngle
This defines the distance in radians from StartAngle that the meter will travel around the circle when the measure value is 100%. So the meter starts at StartAngle when the value is 0%, and will travel clockwise up to RotationAngle radians as the value increases toward 100%. In our example meters to come, we will be using the entire circle as 100%, so we will be using RotationAngle=(Rad(360)). This means end 360° clockwise from the point defined by StartAngle, or all the way around back to the starting point.

Note that a negative number in RotationAngle will cause the meter to travel counter-clockwise. e.g. RotationAngle=(Rad(-360))

LineStart
This defines the distance in pixels from the center of the circle that the line will start drawing. Remember that our entire circle is defined in W and H, so the center would be half of those. If we have a meter that is 80 X 80 pixels, then the center of the circle is at 40 pixels. LineStart will treat that as the center, or zero. To have the line start 10 pixels from the center of the circle, you would use LineStart=10. This will become more clear in our examples in a bit.

LineLength
This defines the distance in pixels from the center of the circle that the line will extend.

Note: It is important to understand that this value is always measured from the center of the circle, no matter what LineStart is set at. So if we have our meter that is 80 X 80, the center is at 40 and if we want to have a line that draws in the outer 10 pixels of the overall meter we set LineStart=30 and LineLength=40. Again, this should be more clear in our examples.

LineWidth
If you are creating a Roundline meter that will act as a "pointer" to the measured value, then you will set the width of the pointer line in pixels with this option.

Solid
If this is set to 1 then instead of creating a "pointer" using a line, the meter will just "fill in" the circle up to the point of the measured value. If you use this, then LineWidth is ignored.

Our examples:
First, here is the code for the entire skin. It demonstrates three different ways to use Roundline meters. A pie a circle and a pointer. We will tear each one apart and explain what is being done after.

Code: Select all

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

[MeasureCounter]
Measure=Calc
Formula=(MeasureCounter % 100) + 1
MinValue=1
MaxValue=100

[MeterBackgroundPie]
Meter=Roundline
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineLength=25
LineColor=150,150,150,255
Solid=1
AntiAlias=1

[MeterBackgroundCircle]
Meter=Roundline
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineColor=150,150,150,255
Solid=1
AntiAlias=1

[MeterPie]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineLength=25
LineColor=175,247,151,255
Solid=1
AntiAlias=1

[MeterCircle]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineColor=173,220,247,255
Solid=1
AntiAlias=1

[MeterPointer]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineWidth=3
LineLength=40
LineColor=217,54,54,255
AntiAlias=1

[MeterText]
Meter=String
MeasureName=MeasureCounter
FontSize=13
FontColor=255,255,255,255
X=80
Y=85
StringAlign=Right
AntiAlias=1
Text=%1%
Roundline.gif
We are using a simple Calc measure with a counter that counts from 1 to 100. We set MinValue and MaxValue so that result is treated as a percentage by our Roundline meters. This is just for demonstration purposes, you will be using the value of some measure that actually means something...

Code: Select all

[MeasureCounter]
Measure=Calc
Formula=(MeasureCounter % 100) + 1
MinValue=1
MaxValue=100
Then we have a couple of RoundLine meters that are used to create "backgrounds" for our meters. We won't go into those right now, except to say that you can create a Roundline meter that has NO MeasureName defined, and it is just treated as being at 100% all the time. That can be used to create a background meter for your real ones. Just give them the same option values as your real Roundline meters, but no MeasureName.


The Pie meter

Code: Select all

[MeterPie]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineLength=25
LineColor=175,247,151,255
Solid=1
AntiAlias=1
What we are doing here is setting LineLength=25 and Solid=1. What this means is that it will "fill" the circle from the start around to the measured value, starting at the center of the circle (no LineStart defined) and extending 25 pixels. That gives us that green pie chart element in the middle of the skin.

The Circle meter

Code: Select all

[MeterCircle]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineColor=173,220,247,255
Solid=1
AntiAlias=1
Here we are setting LineStart=30 and LineLength=40, and still using our Solid=1 option. What this does is fill a circle, starting 30 pixels from the center, and extending 40 pixels from the center. This gives us a circle that is 10 pixels thick (40 minus 30) at the outer edge of the overall meter. That is the blue circle in our image above.

The Pointer meter

Code: Select all

[MeterPointer]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineWidth=3
LineLength=40
LineColor=217,54,54,255
AntiAlias=1
Here we are creating a "pointer" rather than filling in the circle, so we leave off Solid=1 and set LineWidth=3 to have a pointer that travels around the circle pointing to the current measure percentage value. That is the red line in our image above.

I hope this helps a bit with Roundline. There is a lot more you can do with it if you use your imagination and play around with the various options.
You do not have the required permissions to view the files attached to this post.
User avatar
dilshad
Posts: 85
Joined: August 31st, 2012, 4:23 am

Re: Working with Roundline

dilshad » March 5th, 2014, 11:19 am

woohhh.. That helped alot.. Thanks
[ BOXES ]
I will be coming with it soon!

■■ DeviantartFacebookMy works ■■
Stan
Posts: 70
Joined: January 24th, 2013, 9:09 pm

Re: Working with Roundline

Stan » March 5th, 2014, 2:19 pm

I've had a hard time understanding Roundline.

This answered questions I didn't even know how to ask, Thank you. :thumbup:
User avatar
balala
Rainmeter Sage
Posts: 7628
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Working with Roundline

balala » July 6th, 2014, 7:44 pm

I don't know if a this kind of contribution is allowed here, but when I read this topic, I've started to create a skin, using jsmorley's example skin. Here's the resoult. This wants to be a skin simmilar with the default Busy Windows mouse cursor. It has no practical purposes, it was created just for fun.

Image

So, here's the code:

Code: Select all

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

[Variables]
ActiveColor=10,29,243,255
BckgColor=125,125,125,255

[MeasureCounter]
Measure=Calc
Formula=(MeasureCounter % 100) + 1
MinValue=1
MaxValue=100
IfCondition=(MeasureCounter<25)
IfTrueAction=!ShowMeter MeterCircle4
IfFalseAction=!HideMeter MeterCircle4

[MeasureCounter2]
Measure=Calc
Formula=(((MeasureCounter - 25) > 0) ? (MeasureCounter - 25) : (MeasureCounter + 75))
MinValue=1
MaxValue=100
IfCondition=(MeasureCounter2>75)
IfTrueAction=!HideMeter MeterCircle2
IfFalseAction=!ShowMeter MeterCircle2

[MeasureCounter3]
Measure=Calc
Formula=(((MeasureCounter + 25) <= 100) ? (MeasureCounter + 25) : (MeasureCounter - 75))
MinValue=1
MaxValue=100
IfCondition=(MeasureCounter3<50)
IfTrueAction=!ShowMeter MeterCircle3
IfFalseAction=!HideMeter MeterCircle3

[MeterBackgroundCircle]
Meter=Roundline
W=80
H=80
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineColor=#BckgColor#
Solid=1
AntiAlias=1

[MeterCircle]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(90))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineWidth=80
LineColor=#ActiveColor#
Solid=1
AntiAlias=1

[MeterCircle2]
Meter=Roundline
MeasureName=MeasureCounter2
W=80
H=80
StartAngle=(Rad(90))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineWidth=80
LineColor=#BckgColor#
Solid=1
AntiAlias=1

[MeterCircle3]
Meter=Roundline
MeasureName=MeasureCounter3
W=80
H=80
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineWidth=80
LineColor=#ActiveColor#
Solid=1
AntiAlias=1

[MeterCircle4]
Meter=Roundline
MeasureName=MeasureCounter
W=80
H=80
StartAngle=(Rad(0))
RotationAngle=(Rad(360))
LineStart=30
LineLength=40
LineWidth=80
LineColor=#BckgColor#
Solid=1
AntiAlias=1

[MeterText]
Meter=String
MeasureName=MeasureCounter
FontSize=12
FontColor=255,255,255,255
X=42
Y=42
StringAlign=CENTERCENTER
AntiAlias=1
Text=%1%
Comments are welcomed.
User avatar
balala
Rainmeter Sage
Posts: 7628
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Working with Roundline

balala » May 2nd, 2015, 9:07 pm

And one more, also using the Roundline meters. This is a pie chart, showing four numbers and the percentages of them from the total:

Code: Select all

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

[Variables]
Color1=60,242,24
Color2=80,160,240
Color3=220,60,90
Color4=220,250,30

[MeasureNumber1]
Measure=Calc
Formula=Random
LowBound=5
HighBound=50
UpdateRandom=1

[MeasureNumber2]
Measure=Calc
Formula=Random
LowBound=5
HighBound=50
UpdateRandom=1

[MeasureNumber3]
Measure=Calc
Formula=Random
LowBound=5
HighBound=50
UpdateRandom=1

[MeasureNumber4]
Measure=Calc
Formula=Random
LowBound=5
HighBound=50
UpdateRandom=1

[MeasurePercent1]
Measure=Calc
Formula=( MeasureNumber1 / ( MeasureNumber1 + MeasureNumber2 + MeasureNumber3 + MeasureNumber4 ))

[MeasurePercent2]
Measure=Calc
Formula=( MeasureNumber2 / ( MeasureNumber1 + MeasureNumber2 + MeasureNumber3 + MeasureNumber4 ))

[MeasurePercent3]
Measure=Calc
Formula=( MeasureNumber3 / ( MeasureNumber1 + MeasureNumber2 + MeasureNumber3 + MeasureNumber4 ))

[MeasurePercent4]
Measure=Calc
Formula=( MeasureNumber4 / ( MeasureNumber1 + MeasureNumber2 + MeasureNumber3 + MeasureNumber4 ))

[MeasurePercent1%]
Measure=Calc
Formula=( 100 * MeasurePercent1 )

[MeasurePercent2%]
Measure=Calc
Formula=( 100 * MeasurePercent2 )

[MeasurePercent3%]
Measure=Calc
Formula=( 100 * MeasurePercent3 )

[MeasurePercent4%]
Measure=Calc
Formula=( 100 * MeasurePercent4 )

[MeasureTorolX1]
Measure=Calc
Formula=(60*cos(2*PI*(MeasurePercent1+MeasurePercent2/2)))

[MeterNumber1]
Meter=Roundline
MeasureName=MeasurePercent1
X=0
Y=0
W=120
H=120
StartAngle=0
RotationAngle=6.283
LineLength=56
LineColor=#Color1#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterNumber2]
Meter=Roundline
MeasureName=MeasurePercent2
X=0
Y=0
W=120
H=120
StartAngle=(2*PI*[MeasurePercent1])
RotationAngle=6.283
LineLength=56
LineColor=#Color2#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterNumber3]
Meter=Roundline
MeasureName=MeasurePercent3
X=0
Y=0
W=120
H=120
StartAngle=(2*PI*([MeasurePercent1]+[MeasurePercent2]))
RotationAngle=6.283
LineLength=56
LineColor=#Color3#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterNumber4]
Meter=Roundline
MeasureName=MeasurePercent4
X=0
Y=0
W=120
H=120
StartAngle=(2*PI*([MeasurePercent1]+[MeasurePercent2]+[MeasurePercent3]))
RotationAngle=6.283
LineLength=56
LineColor=#Color4#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterString1]
MeasureName=MeasureNumber1
MeasureName2=MeasurePercent1%
Meter=STRING
X=60r
Y=10R
W=120
H=20
FontColor=#Color1#
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
NumOfDecimals=0
AntiAlias=1
Text=1. %1 (%2%)
DynamicVariables=1

[MeterString2]
MeasureName=MeasureNumber2
MeasureName2=MeasurePercent2%
Meter=STRING
X=0r
Y=0R
W=120
H=20
FontColor=#Color2#
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
NumOfDecimals=0
AntiAlias=1
Text=2. %1 (%2%)
DynamicVariables=1

[MeterString3]
MeasureName=MeasureNumber3
MeasureName2=MeasurePercent3%
Meter=STRING
X=0r
Y=0R
W=120
H=20
FontColor=#Color3#
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
NumOfDecimals=0
AntiAlias=1
Text=3. %1 (%2%)
DynamicVariables=1

[MeterString4]
MeasureName=MeasureNumber4
MeasureName2=MeasurePercent4%
Meter=STRING
X=0r
Y=0R
W=120
H=20
FontColor=#Color4#
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
NumOfDecimals=0
AntiAlias=1
Text=4. %1 (%2%)
DynamicVariables=1

[MeterUpdate]
MeasureName=MeasureNumber4
MeasureName2=MeasurePercent4%
Meter=STRING
X=0r
Y=5R
W=120
H=20
Padding=0,5,0,5
FontColor=255,255,255
SolidColor=0,0,0,150
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
AntiAlias=1
Text=Update
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "150,150,250,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "0,0,0,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=[!Update][!Redraw]
For [MeasureNumber1]...[MeasureNumber4] I used calc measures, with random values, but if you need, you can use any measures, just be sure they're returning numbers, not strings (WebParser measures probbaly won't work, you'll need to covert the results to numbers).
You do not have the required permissions to view the files attached to this post.
Oddwel
Posts: 4
Joined: January 2nd, 2013, 10:57 pm

Re: Working with Roundline

Oddwel » May 16th, 2015, 12:52 am

Just to confirm, then.

H and W are crucial for the meter to work ?

Because in the doc I actually found this
Note: If the width and height are not defined, the center point is at the X and Y position of the meter and any part of the meter that intersects with the edges of the skin window will be cut off. If width and height are specified, the center point will be in the middle of the bounding box and the skin window will include the meter.
It confuses me. If I want to stick a half-disk to the edge of my screen I have to go with an image meter then ? Or is it still supposed to work with a code resembling this ?

Code: Select all

[MeterClockLayout]
Meter=Roundline
RotationAngle=(PI)
LineLength=100
Solid=1
AntiAlias=1
I know this is not the place to seek support and it's not what I'm doing. I'm asking for confirmation of what is said in jsmorley's tip post.
User avatar
jsmorley
Developer
Posts: 18819
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Working with Roundline

jsmorley » May 16th, 2015, 1:09 am

Oddwel wrote:Just to confirm, then.
H and W are crucial for the meter to work ?
No, you don't have to have a W and H for the meter to work. You just have to be sure that the "skin" is large enough to hold whatever part of meter you want defined by X and Y in combination with LineLength. X and Y will then be treated as the "center" of the Roundline, and it will "clip" any part of the meter that won't fit in the overall "skin".

Code: Select all

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

[MeasureCalc]
Measure=Calc
Formula=1

[MeterBack]
Meter=Image
W=100
H=100
SolidColor=45,55,65,255

[MeterHalfSolid]
Meter=Roundline
MeasureName=MeasureCalc
StartAngle=(Rad(360))
RotationAngle=(Rad(360))
X=0
Y=50
LineLength=50
LineColor=235,245,255,255
Solid=1
AntiAlias=1
1.png
So I have a skin that is 100 X 100. I create a "circle" with Roundline, setting X=0 (the left edge of the skin) and Y=50 (half of the vertical size) and a LineLength=50 (the distance from the center to the edge) and I get "half a circle". Obviously there are easier ways to get "half a circle" using W and H and a 50% "value", but this might be something of some use in some cases.

Code: Select all

[Rainmeter]
Update=50
AccurateText=1

[MeasureLoop]
Measure=Loop
StartValue=-50
EndValue=50
Increment=5
LoopCount=1
Disabled=1

[MeasureCalc]
Measure=Calc
Formula=1

[MeterBack]
Meter=Image
W=100
H=100
SolidColor=10,15,20,150
LeftMouseUpAction=[!ShowMeter MeterCircle][!EnableMeasure MeasureLoop][!CommandMeasure MeasureLoop "Reset"]

[MeterCircle]
Meter=Roundline
MeasureName=MeasureCalc
StartAngle=(Rad(360))
RotationAngle=(Rad(360))
X=[MeasureLoop]
Y=50
LineLength=50
LineColor=235,245,255,255
SolidColor=0,0,0,1
Solid=1
AntiAlias=1
DynamicVariables=1
Hidden=1
test.gif
The tomfoolery you can do with this is a bit limited, as the "clipping" will only really fully work on the "left and top" of a skin.

So the long and the short of it is that IF you use W and H, that defines the size of the meter and the center will be half of W and half of H. If you do NOT use W and H, the center of the meter will be half of X and half of Y, and the size will be determined by the LineLength, with the caveat that the meter must then fit in the overall skin or it will be clipped.
You do not have the required permissions to view the files attached to this post.
Oddwel
Posts: 4
Joined: January 2nd, 2013, 10:57 pm

Re: Working with Roundline

Oddwel » May 16th, 2015, 1:49 am

Thanks for all this additional information. It cleared some doubts I had.
User avatar
jsmorley
Developer
Posts: 18819
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Working with Roundline

jsmorley » May 16th, 2015, 1:54 am

Code: Select all

[MeterCircle]
Meter=Roundline
MeasureName=MeasureCalc
StartAngle=(Rad(360))
RotationAngle=(Rad(360))
X=[MeasureLoop]
Y=[MeasureLoop]
LineLength=50
LineColor=235,245,255,255
SolidColor=0,0,0,1
Solid=1
AntiAlias=1
DynamicVariables=1
Hidden=1
test.gif
You do not have the required permissions to view the files attached to this post.
User avatar
moshi
Posts: 1851
Joined: November 13th, 2012, 9:53 pm

Re: Working with Roundline

moshi » May 16th, 2015, 12:33 pm

jsmorley wrote:
The tomfoolery you can do with this is a bit limited, as the "clipping" will only really fully work on the "left and top" of a skin.
to get this to work on the other edges you'll need to define an image as Background in the [Rainmeter] section of a skin.