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
It is currently September 8th, 2024, 1:15 am
Thread for help with the Shape meter
-
- Posts: 1383
- Joined: September 7th, 2020, 2:24 pm
- Location: QLD, Australia
Re: Thread for help with the Shape meter
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
-
- Rainmeter Sage
- Posts: 8030
- Joined: February 27th, 2015, 2:38 pm
- Location: Terra Yincognita
Re: Thread for help with the Shape meter
I don't think a mask option is absolutely required to achieve what you want. It can be done in various ways, like: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
- 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"
-
- Rainmeter Sage
- Posts: 16499
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Thread for help with the Shape meter
No, this is not possible. The TransformationMatrix Guide states this. See the last sentence of the Multiple Transformations in One! section: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
That means no trapezoids, no strange quadrilaterals, only parallelograms. But that's your only restriction.
-
- Rainmeter Sage
- Posts: 8030
- Joined: February 27th, 2015, 2:38 pm
- Location: Terra Yincognita
Re: Thread for help with the Shape meter
Ah, yes - you're right. I had a feeling that wasn't possible.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:
-
- Rainmeter Sage
- Posts: 8030
- Joined: February 27th, 2015, 2:38 pm
- Location: Terra Yincognita
Re: Thread for help with the Shape meter
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")...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
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
You do not have the required permissions to view the files attached to this post.
-
- Posts: 1383
- Joined: September 7th, 2020, 2:24 pm
- Location: QLD, Australia
Re: Thread for help with the Shape meter
No, that looks great. For mine it would be on its 'wall' rather then the 'floor'.. But that is a great place to start!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:Preview: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
Trapezoid Progress.jpg
You could probably do it another way as well, of course.
Thanks a heap!
![Thumbs Up :thumbup:](./images/smilies/ay.gif)
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
-
- Rainmeter Sage
- Posts: 8030
- Joined: February 27th, 2015, 2:38 pm
- Location: Terra Yincognita
Re: Thread for help with the Shape meter
No problem - glad to help.
![Wink ;-)](./images/smilies/innuendo.gif)
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
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.
-
- Rainmeter Sage
- Posts: 1398
- Joined: April 24th, 2021, 8:13 pm
Re: Thread for help with the Shape meter
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.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:Preview: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
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.
from the Realm of Death
-
- Rainmeter Sage
- Posts: 8030
- Joined: February 27th, 2015, 2:38 pm
- Location: Terra Yincognita
Re: Thread for help with the Shape meter
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.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.
![Confused :confused:](./images/smilies/bn.gif)
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.
-
- Rainmeter Sage
- Posts: 1398
- Joined: April 24th, 2021, 8:13 pm
Re: Thread for help with the Shape meter
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.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).
I didn't understand the second part though. Why would you need formula for a static trapezoid?
from the Realm of Death