It is currently March 28th, 2024, 10:02 pm

Create my own circle skin

Get help with creating, editing & fixing problems with skins
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

Code: Select all

[MeterShape1]
Meter=Shape
Shape=Line 5,5,200,5 | StrokeWidth 10 | Extend MyColor
MyColor=Stroke Color 255,0,0,255
MouseOverAction=[!SetOption MeterShape1 MyColor "Stroke Color 0,255,0,255"][!UpdateMeter MeterShape1][!Redraw]
MouseLeaveAction=[!SetOption MeterShape1 MyColor "Stroke Color 255,0,0,255"][!UpdateMeter MeterShape1][!Redraw]
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

Or you can make things a bit easier to follow perhaps with:

Code: Select all

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

[Variables]
Red=255,0,0,255
Green=0,255,0,255

[MeterShape1]
Meter=Shape
Shape=Line 5,5,200,5 | StrokeWidth 10 | Extend MyColor
MyColor=Stroke Color #Red#
MouseOverAction=[!SetOption MeterShape1 MyColor "Stroke Color #Green#"][!UpdateMeter MeterShape1][!Redraw]
MouseLeaveAction=[!SetOption MeterShape1 MyColor "Stroke Color #Red#"][!UpdateMeter MeterShape1][!Redraw]
RoLv3r
Posts: 25
Joined: May 14th, 2018, 2:05 pm

Re: Create my own circle skin

Post by RoLv3r »

Oh I can't see the second page of messages before.. lol, sorry. Then, I prefer the second coding, it's more.. clear.
But, I can't remember all, what we need to apply a dynamicWindowsSize ? And accurate text ? And "Extend" ?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

RoLv3r wrote:Oh I can't see the second page of messages before.. lol, sorry. Then, I prefer the second coding, it's more.. clear.
But, I can't remember all, what we need to apply a dynamicWindowsSize ? And accurate text ? And "Extend" ?
Those first two are not particularly needed for this effort so far, but they are a standard part of any skin I create. Best to just use them.

The Extend modifier on a Shape meter is explained here:

https://docs.rainmeter.net/manual/meters/shape/#ExtendModifier
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

In this case, we are using Extend so we can "shorten" the amount of stuff we have to change in order to have our color change on MouseOverAction / MouseLeaveAction. Instead of having to use !SetOption and re-define the entire shape definition to change the color, we can just change the value of the option "MyColor".

The alternative would be:

Code: Select all

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

[Variables]
Red=255,0,0,255
Green=0,255,0,255

[MeterShape1]
Meter=Shape
Shape=Line 5,5,200,5 | StrokeWidth 10 | Stroke Color #Red#
MouseOverAction=[!SetOption MeterShape1 Shape "Line 5,5,200,5 | StrokeWidth 10 | Stroke Color #Green#"][!UpdateMeter MeterShape1][!Redraw]
MouseLeaveAction=[!SetOption MeterShape1 Shape "Line 5,5,200,5 | StrokeWidth 10 | Stroke Color #Red#"][!UpdateMeter MeterShape1][!Redraw]
Which is just a lot of unwanted code in my view.

Now it might be tempting to say "what if I used a #Variable# in Stroke Color, and just used !SetVariable to change the value of the variable on the mouse over?". That's fine, but the downside to that is that then you need a different set of "red" and "green" variables for each segment, so they are uniquely changed on mouse over. That means a ton of variables, and offers no real advantage.
RoLv3r
Posts: 25
Joined: May 14th, 2018, 2:05 pm

Re: Create my own circle skin

Post by RoLv3r »

I think I understand what you thinking without extend. Extend could regroup all characters we want use in different sections, and without use all the time, just "quote" it no ?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

RoLv3r wrote:I think I understand what you thinking without extend. Extend could regroup all characters we want use in different sections, and without use all the time, just "quote" it no ?
You would need the same MyColor option in each different Shape meter, and use Extend MyColor on each of the shapes. The MyColor option could be the same on each, so it's just a matter of copy / pasting it on all the Shape meters.

Code: Select all

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

[Variables]
Red=255,0,0,255
Green=0,255,0,255

[MeterShape1]
Meter=Shape
Shape=Line 5,5,200,5 | StrokeWidth 10 | Extend MyColor
MyColor=Stroke Color #Red#
MouseOverAction=[!SetOption MeterShape1 MyColor "Stroke Color #Green#"][!UpdateMeter MeterShape1][!Redraw]
MouseLeaveAction=[!SetOption MeterShape1 MyColor "Stroke Color #Red#"][!UpdateMeter MeterShape1][!Redraw]

[MeterShape2]
Meter=Shape
Y=10R
Shape=Line 5,5,200,5 | StrokeWidth 10 | Extend MyColor
MyColor=Stroke Color #Red#
MouseOverAction=[!SetOption MeterShape2 MyColor "Stroke Color #Green#"][!UpdateMeter MeterShape2][!Redraw]
MouseLeaveAction=[!SetOption MeterShape2 MyColor "Stroke Color #Red#"][!UpdateMeter MeterShape2][!Redraw]
GIF.gif
You do not have the required permissions to view the files attached to this post.
RoLv3r
Posts: 25
Joined: May 14th, 2018, 2:05 pm

Re: Create my own circle skin

Post by RoLv3r »

Ok yes that's what I understand ! I'll go try after with the Curve. Thanks you again ;)
RoLv3r
Posts: 25
Joined: May 14th, 2018, 2:05 pm

Re: Create my own circle skin

Post by RoLv3r »

Hey I'm back ! Your help are so precious. But I need help again... I send you a screenshot.

-You see my two strokes on amber and on red are cut on the top and the left. How change that ?
- I put my curve in Y=1R but she's so far ! How I could bring near the ellipse and the curve ?
- Yes, we change the color of the stroke. But, I would too change the color in the center of the ellipse.
- Finally, I want a skin like I create before. But, like you say, I need to create all parts of segments. But, how I could regroup the 4 pieces of the final curve ? (2 lines and 2 curves)

Now, I understand perfectly how use Extend thanks to you ! :)

I hope we finish to create my skin ;)
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create my own circle skin

Post by jsmorley »

Remember that ellipses are defined and drawn from the "inside out", so you need to be sure that:

1) You have positioned them so that when they draw from the center "left" and "up", that they still fit in the skin.

Anything that tries to draw outside the skin to the "left" or "top" will just be truncated. Skins can only expand "right" and "down" to accommodate the content.

2) You have allowed enough space for the fact that the "stroke" is drawn 1/2 "inside" the defined shape and 1/2 "outside" the defined shape. This factor with stroke is true of all shapes, not just Ellipse. That means that if you have a StrokeWidth of 8, 4 of it will be outside the boundary defined by the drawn shape, and 4 of it will be inside that boundary.

The analogy I use is the boundary between the US and Mexico. How wide is that boundary? The answer is zero. The two countries abut. Saying that there can be any "width" to the boundary between two countries is physically illogical. However, if you want to draw that boundary on a map, and you take a pencil, no matter how sharp it is, the line stroke you draw will have some "width". Do you draw the line inside the US, and thus make it smaller? Do you draw the line inside Mexico, and thus make it smaller? No, you draw it right on the zero-width boundary between the two, and 1/2 of the width of your very sharp pencil tip is in the US, and 1/2 is in Mexico. Everyone is happy, war is averted... That is how StrokeWidth works. Logically it has to.

That is why this functionality is called "stroke" and not "border". You do logical violence to your thinking if you consider it a border. Since the width of the actual "boundary" is always zero, even a StrokeWidth of "1" is 1/2 outside and 1/2 inside. It just creates two 1/2 pixel displays on your screen, using some clever "aliasing" to get around the physical limitations of a monitor.

P.S. To make a very long story short, not accounting for 1/2 of the StrokeWidth of 8 you have is why your shapes are truncating on the left and top of your skin. Make the center 104, 104 and the radius 100, OR set X=4 and Y=4 and then use them as they are.