It is currently May 27th, 2024, 7:46 pm

## Thread for help with the Shape meter

Get help with creating, editing & fixing problems with skins
CodeCode
Posts: 1370
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

### Re: Thread for help with the Shape meter

Hey, Not sure if this is covered somewhere, so apologies if it was.

I am thinking about using a trapezoid to create a mask for a progress bar/shape that appears to be in perspective toward the horizon plane.

Is it possible, or should I revert to the mask option?

Thanks.
CC
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
Yincognito
Rainmeter Sage
Posts: 7344
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Thread for help with the Shape meter

CodeCode wrote: June 4th, 2021, 2:15 pm Hey, Not sure if this is covered somewhere, so apologies if it was.

I am thinking about using a trapezoid to create a mask for a progress bar/shape that appears to be in perspective toward the horizon plane.

Is it possible, or should I revert to the mask option?

Thanks.
CC
I don't think a mask option is absolutely required to achieve what you want. It can be done in various ways, like:
- drawing 2 trapezoid shapes directly and use them as progress bar extent and progress, the latter one by applying a formula to determine the progress' height (the angles between the lower edges of the trapezoid would be your perspective angle, with 90 if "looked from above" and 0 if looking from the horizon plane; sin() and cos() might help with the edges length here)
- using a bar meter and (if possible for a trapezoid outcome) use some transformation matrix kung fu to make it a trapezoid instead of a plain rectangle
- combining shapes (e.g. excluding parts of a rectangle shape) to achieve a trapezoid progress "bar"
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
balala
Rainmeter Sage
Posts: 16267
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

### Re: Thread for help with the Shape meter

Yincognito wrote: June 4th, 2021, 3:49 pm - using a bar meter and (if possible for a trapezoid outcome) use some transformation matrix kung fu to make it a trapezoid instead of a plain rectangle
No, this is not possible. The TransformationMatrix Guide states this. See the last sentence of the Multiple Transformations in One! section:
That means no trapezoids, no strange quadrilaterals, only parallelograms. But that's your only restriction.
Yincognito
Rainmeter Sage
Posts: 7344
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Thread for help with the Shape meter

balala wrote: June 4th, 2021, 4:10 pm No, this is not possible. The TransformationMatrix Guide states this. See the last sentence of the Multiple Transformations in One! section:
Ah, yes - you're right. I had a feeling that wasn't possible.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Yincognito
Rainmeter Sage
Posts: 7344
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Thread for help with the Shape meter

CodeCode wrote: June 4th, 2021, 2:15 pm Hey, Not sure if this is covered somewhere, so apologies if it was.

I am thinking about using a trapezoid to create a mask for a progress bar/shape that appears to be in perspective toward the horizon plane.

Is it possible, or should I revert to the mask option?

Thanks.
CC
Without using sin() and cos(), just the height, maximum width (i.e. the length of the "lower edge" of the trapezoid) and minimum width (i.e. the length of the "upper edge" of the trapezoid) in a perspective scenario, a simple simulation using 2 shapes (the "frame" and the "progress")...

Code:

Code: Select all

``````[Variables]
StrokeColor=0,0,255,255
FrameFillColor=0,255,0,255
ProgressFillColor=255,0,0,255
StrokeWidth=2
BarHeight=300
BarMaxWidth=200
BarMinWidth=50
MaxVal=100

[Rainmeter]
Update=25
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=47,47,47,255

---Measures---

[Progress]
Measure=Calc
Formula=((Progress+1)%#MaxVal#)

---Meters---

[Trapezoid]
Meter=Shape
X=(#StrokeWidth#/2)
Y=(#StrokeWidth#/2)
Shape=Path FramePath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #FrameFillColor#
FramePath=0,#BarHeight# | LineTo #BarMaxWidth#,#BarHeight# | LineTo (#BarMaxWidth#-(#BarMaxWidth#-#BarMinWidth#)/2),0 | LineTo ((#BarMaxWidth#-#BarMinWidth#)/2),0 | ClosePath 1
Shape2=Path ProgressPath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #ProgressFillColor#
ProgressPath=0,#BarHeight# | LineTo #BarMaxWidth#,#BarHeight# | LineTo (#BarMaxWidth#-((#BarMaxWidth#-#BarMinWidth#)/2)*([Progress]/#MaxVal#)),(#BarHeight#-#BarHeight#*([Progress]/#MaxVal#)) | LineTo ((#BarMaxWidth#-#BarMinWidth#)/2*([Progress]/#MaxVal#)),(#BarHeight#-#BarHeight#*([Progress]/#MaxVal#)) | ClosePath 1
DynamicVariables=1
``````
Preview:
Trapezoid Progress.jpg
You could probably do it another way as well, of course.
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
CodeCode
Posts: 1370
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

### Re: Thread for help with the Shape meter

Yincognito wrote: June 4th, 2021, 4:38 pm Without using sin() and cos(), just the height, maximum width (i.e. the length of the "lower edge" of the trapezoid) and minimum width (i.e. the length of the "upper edge" of the trapezoid) in a perspective scenario, a simple simulation using 2 shapes (the "frame" and the "progress")...

Code:

Code: Select all

``````[Variables]
StrokeColor=0,0,255,255
FrameFillColor=0,255,0,255
ProgressFillColor=255,0,0,255
StrokeWidth=2
BarHeight=300
BarMaxWidth=200
BarMinWidth=50
MaxVal=100

[Rainmeter]
Update=25
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=47,47,47,255

---Measures---

[Progress]
Measure=Calc
Formula=((Progress+1)%#MaxVal#)

---Meters---

[Trapezoid]
Meter=Shape
X=(#StrokeWidth#/2)
Y=(#StrokeWidth#/2)
Shape=Path FramePath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #FrameFillColor#
FramePath=0,#BarHeight# | LineTo #BarMaxWidth#,#BarHeight# | LineTo (#BarMaxWidth#-(#BarMaxWidth#-#BarMinWidth#)/2),0 | LineTo ((#BarMaxWidth#-#BarMinWidth#)/2),0 | ClosePath 1
Shape2=Path ProgressPath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #ProgressFillColor#
ProgressPath=0,#BarHeight# | LineTo #BarMaxWidth#,#BarHeight# | LineTo (#BarMaxWidth#-((#BarMaxWidth#-#BarMinWidth#)/2)*([Progress]/#MaxVal#)),(#BarHeight#-#BarHeight#*([Progress]/#MaxVal#)) | LineTo ((#BarMaxWidth#-#BarMinWidth#)/2*([Progress]/#MaxVal#)),(#BarHeight#-#BarHeight#*([Progress]/#MaxVal#)) | ClosePath 1
DynamicVariables=1
``````
Preview:
Trapezoid Progress.jpg

You could probably do it another way as well, of course.
No, that looks great. For mine it would be on its 'wall' rather then the 'floor'.. But that is a great place to start!

Thanks a heap!

ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
Yincognito
Rainmeter Sage
Posts: 7344
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Thread for help with the Shape meter

CodeCode wrote: June 5th, 2021, 2:23 am No, that looks great. For mine it would be on its 'wall' rather then the 'floor'.. But that is a great place to start!

Thanks a heap!

No problem - glad to help. One thing I don't understand though: if it's on the "wall" and the wall is perpendicular on the "floor", why would you need to put it into perspective? Unless the "wall" is a side wall, that is, e.g. the "left wall" or the "right wall" of a room, but then it's one of the side edges of the (initial) bar that would need to be put into perspective, as opposed to its upper edge as it is in my example. True, it doesn't change things too much and "swapping" some of the variables in the formulas should be enough to achieve the same, but still...

EDIT: For example, taking the "right wall" as a goal, something like this should simulate it reasonably well...

Code:

Code: Select all

``````[Variables]
StrokeColor=0,0,255,255
FrameFillColor=0,255,0,255
ProgressFillColor=255,0,0,255
StrokeWidth=2
BarWidth=100
BarMaxHeight=300
BarMinHeight=150
MaxVal=100

[Rainmeter]
Update=25
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=47,47,47,255

---Measures---

[Progress]
Measure=Calc
Formula=((Progress+1)%#MaxVal#)

---Meters---

[Trapezoid]
Meter=Shape
X=(#StrokeWidth#/2)
Y=(#StrokeWidth#/2)
Shape=Path FramePath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #FrameFillColor#
FramePath=#BarWidth#,0 | LineTo #BarWidth#,#BarMaxHeight# | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2) | LineTo 0,((#BarMaxHeight#-#BarMinHeight#)/2) | ClosePath 1
Shape2=Path ProgressPath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #ProgressFillColor#
ProgressPath=#BarWidth#,(#BarMaxHeight#-#BarMaxHeight#*([Progress]/#MaxVal#)) | LineTo #BarWidth#,#BarMaxHeight# | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2) | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2-#BarMinHeight#*([Progress]/#MaxVal#)) | ClosePath 1
DynamicVariables=1
``````
Preview:
Trapezoid Progress - Right Wall.jpg
Like I said, it's mainly just a matter of swapping / adapting some things and formulas (e.g. it's the height that has a minimum and a maximum now, instead of the width, and so on).

P.S. If you want to improve the simulation further, you might want to consider using gradients to fill the shapes, so that the part closer to the observer (i.e. the right side in the case above) is of a lighter "tone" of the color, while the part farther away from the observer (i.e. the left side in the case above) is of a darker "tone" of the same color. Basically a rudimentar "shadowing" of the whole thing. Of course, the lighter part could be in other areas, depending on where you want your "light source" to be.
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
death.crafter
Rainmeter Sage
Posts: 1398
Joined: April 24th, 2021, 8:13 pm

### Re: Thread for help with the Shape meter

Yincognito wrote: June 5th, 2021, 8:38 am No problem - glad to help. One thing I don't understand though: if it's on the "wall" and the wall is perpendicular on the "floor", why would you need to put it into perspective? Unless the "wall" is a side wall, that is, e.g. the "left wall" or the "right wall" of a room, but then it's one of the side edges of the (initial) bar that would need to be put into perspective, as opposed to its upper edge as it is in my example. True, it doesn't change things too much and "swapping" some of the variables in the formulas should be enough to achieve the same, but still...

EDIT: For example, taking the "right wall" as a goal, something like this should simulate it reasonably well...

Code:

Code: Select all

``````[Variables]
StrokeColor=0,0,255,255
FrameFillColor=0,255,0,255
ProgressFillColor=255,0,0,255
StrokeWidth=2
BarWidth=100
BarMaxHeight=300
BarMinHeight=150
MaxVal=100

[Rainmeter]
Update=25
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=47,47,47,255

---Measures---

[Progress]
Measure=Calc
Formula=((Progress+1)%#MaxVal#)

---Meters---

[Trapezoid]
Meter=Shape
X=(#StrokeWidth#/2)
Y=(#StrokeWidth#/2)
Shape=Path FramePath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #FrameFillColor#
FramePath=#BarWidth#,0 | LineTo #BarWidth#,#BarMaxHeight# | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2) | LineTo 0,((#BarMaxHeight#-#BarMinHeight#)/2) | ClosePath 1
Shape2=Path ProgressPath | StrokeWidth #StrokeWidth# | Stroke Color #StrokeColor# | Fill Color #ProgressFillColor#
ProgressPath=#BarWidth#,(#BarMaxHeight#-#BarMaxHeight#*([Progress]/#MaxVal#)) | LineTo #BarWidth#,#BarMaxHeight# | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2) | LineTo 0,(#BarMaxHeight#-(#BarMaxHeight#-#BarMinHeight#)/2-#BarMinHeight#*([Progress]/#MaxVal#)) | ClosePath 1
DynamicVariables=1
``````
Preview:
Trapezoid Progress - Right Wall.jpg

Like I said, it's mainly just a matter of swapping / adapting some things and formulas (e.g. it's the height that has a minimum and a maximum now, instead of the width, and so on).

P.S. If you want to improve the simulation further, you might want to consider using gradients to fill the shapes, so that the part closer to the observer (i.e. the right side in the case above) is of a lighter "tone" of the color, while the part farther away from the observer (i.e. the left side in the case above) is of a darker "tone" of the same color. Basically a rudimentar "shadowing" of the whole thing. Of course, the lighter part could be in other areas, depending on where you want your "light source" to be.
I think this approach has it's uses alright but for what he wants to implement, a container would be an more appropriate solution imo. Since to have perspective you need different proportions than what you are using. In your way, tho possible, it is hard to get proper proportions to make a progress bar with perspective.
from the Realm of Death
Yincognito
Rainmeter Sage
Posts: 7344
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Thread for help with the Shape meter

death.crafter wrote: June 5th, 2021, 11:08 am I think this approach has it's uses alright but for what he wants to implement, a container would be an more appropriate solution imo. Since to have perspective you need different proportions than what you are using. In your way, tho possible, it is hard to get proper proportions to make a progress bar with perspective.
Well, if you think modifying the value of the Bar... variables is hard (or harder than creating a new container meter having the same final proportions), I don't know what to say. I made this as easy as possible, all one needs to do is play with the variable values until he finds the desired ratios / whatever. You'd have to do the same for the new container meter, by the way, in addition to creating a new meter in the process.

The only advantage of using a plain container meter is that you wouldn't need to bother with formulas for the frame / placeholder, but you'd still have to set the shape's coordinates through some guesswork, not to mention you wouldn't be able to avoid using some kind of formula to draw the actual progress "mask" / container (as it's a function of the [Progress] value anyway).

Feel free to post a code sample using your method though - I would be curious to see where things would get simpler in your approach.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
death.crafter
Rainmeter Sage
Posts: 1398
Joined: April 24th, 2021, 8:13 pm

### Re: Thread for help with the Shape meter

Yincognito wrote: June 5th, 2021, 12:06 pm Well, if you think modifying the value of the Bar... variables is hard (or harder than creating a new container meter having the same final proportions), I don't know what to say. I made this as easy as possible, all one needs to do is play with the variable values until he finds the desired ratios / whatever. You'd have to do the same for the new container meter, by the way, in addition to creating a new meter in the process.

The only advantage of using a plain container meter is that you wouldn't need to bother with formulas for the frame / placeholder, but you'd still have to set the shape's coordinates through some guesswork, not to mention you wouldn't be able to avoid using some kind of formula to draw the actual progress "mask" / container (as it's a function of the [Progress] value anyway).
Umm... I guess I misunderstood the context... He wanted a trapezoid for his perspective and your solution only keeps the parallel sides centered along an axis. By proportions I meant the position of the smaller parallel line.

I didn't understand the second part though. Why would you need formula for a static trapezoid?
from the Realm of Death