Thread for help with the Shape meter

[CodeCode]

OK, found my answer here:https://forum.rainmeter.net/viewtopic.php?t=11444#p65399

So, I think I am happy.

Cheers.

[CodeCode]

Ok, SO I have reached a point where I am getting pedantic, so apologies if that is too much.

Here is what I have so far:

Untitled.png

I think it is looking pretty cool.
But the bars are progressing in a perfect vertical edge, rather than on an angle like the fakey 3D is.

If there is a solution that is not to super complicated - since I would love to know how to do it myself in the future - please let me know.

I'll drop in what I have so far:

NeoGothica_1.xx.rmskin

Thanks for any help or recommendations.

[death.crafter]

Ok, SO I have reached a point where I am getting pedantic, so apologies if that is too much.

Here is what I have so far:
Untitled.png

I think it is looking pretty cool.
But the bars are progressing in a perfect vertical edge, rather than on an angle like the fakey 3D is.

If there is a solution that is not to super complicated - since I would love to know how to do it myself in the future - please let me know.

I'll drop in what I have so far:
NeoGothica_1.xx.rmskin
Thanks for any help or recommendations.

My first reaction: WOW! Simply Wow! I am modifying your code. So will take a bit.

[death.crafter]

Ok, SO I have reached a point where I am getting pedantic, so apologies if that is too much.

Here is what I have so far:
Untitled.png

I think it is looking pretty cool.
But the bars are progressing in a perfect vertical edge, rather than on an angle like the fakey 3D is.

If there is a solution that is not to super complicated - since I would love to know how to do it myself in the future - please let me know.

I'll drop in what I have so far:
NeoGothica_1.xx.rmskin
Thanks for any help or recommendations.

I made changes only to the CPU bar but rest are the same so I guess you can change them accordingly:

Here is the code:

Code: Select all

[MeasureCPU]
Measure=CPU
Processor=0

;[TrapTLL]
;Meter=Shape
;X=96
;Y=305
;Shape=Path TopFrame | Strokewidth 2 | Stroke Color #Main# | Fill Color 0,0,0,100
;TopFrame=10, 80 | LineTo 277,95 | LineTo 272,118 | LineTo 0, 125 | ClosePath 1

[ProgBarLTL]
Meter=Shape
X=96
Y=305
Shape=Path TopBar | Fill Color #Goth#,130 | StrokeWidth 0
TopBar=10, 80 | LineTo (10+267*[MeasureCPU]/100),(80+15*[MeasureCPU]/100) | LineTo (282*[MeasureCPU]/100),(125-7*[MeasureCPU]/100) | LineTo 0, 125 | ClosePath 1
Shape2=Path TopFrame | StrokeWidth 2 | StrokeColor #Main# | Fill Color 00000000
TopFrame=10, 80 | LineTo 277,95 | LineTo 272,118 | LineTo 0, 125 | ClosePath 1
DynamicVariables=1
Container=TrapTLL

What I did:
Changed the progress bar to the current one. Doing so I eliminated the need of a container(it's commented out in the above code), which was kinda lame cause it ate half the stroke width and little pieces from the corner.

You can replace the code in your ini to see the changes.

Edit: And yes I couldn't figure out the alpha correctly so you have to change that too.

[Yincognito]

Sorry I didn't reply earlier, but I was kind of busy today with domestic stuff. I was going to say the same thing jsmorley said about swapping the colors to avoid redrawing the trapezoid again for direction change, and I guess (didn't test it yet) death.crafter's solution to make the progress edge "oblique" / "slanted" should work. It does require using formulas for other path points, just like I mentioned and implemented earlier on (this is where flexibility comes handy).

That being said, I wonder if an easier solution that involved drawing everything for the horizontal progress trapezoid case (direction shouldn't matter here) and then just rotating the shape (and hypothetically scaling it for a flip effect) to achieve either inverse direction or a different viewing angle wouldn't solve this. The only place where these 2 wouldn't help is when changing the altitude...

[Yincognito]

Ok, SO I have reached a point where I am getting pedantic, so apologies if that is too much.
I think it is looking pretty cool.
But the bars are progressing in a perfect vertical edge, rather than on an angle like the fakey 3D is.
If there is a solution that is not to super complicated - since I would love to know how to do it myself in the future - please let me know.

...I wonder if an easier solution that involved drawing everything for the horizontal progress trapezoid case (direction shouldn't matter here) and then just rotating the shape (and hypothetically scaling it for a flip effect) to achieve either inverse direction or a different viewing angle wouldn't solve this...

I can't talk about complicated or not - I'm not one to back off in front of a bit of complexity, as you probably know already - but following the idea from my last reply, here is some sort of an "innovation", LOL:
- don't bother drawing the progress trapezoid anymore or writing formulas for it
- use a single (symmetrical or not) shape, i.e. the trapezoid "frame" / "placeholder", in a "standard" position as a "base" for experimentation
- simulate the progress effect using hard-stop gradients on that single shape (the progress edge can be done using the same technique to simulate a "line")
- play with the progress, angle of rotation, horizontal flipping and horizontal skewing to get the shape you want, before placing it in your skin using the values displayed in the information area

Code:

Code: Select all

[Variables]
HFlip=1
HSkew=0

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

[Angle]
Paused=1
Measure=Loop
StartValue=0
EndValue=360
Increment=1

[Progress]
Measure=Loop
StartValue=0
EndValue=100
Increment=1

[Trapezoid]
Meter=Shape
Shape=Path ShapePath | Fill LinearGradient ShapeGradient | Rotate [Angle] | Scale #HFlip#,1 | Skew #HSkew#,0
ShapePath=50,90 | LineTo 50,130 | LineTo (50+140),(130+40) | LineTo (50+140),(90-40) | ClosePath 1
ShapeGradient=180 | FF0000 ; 0.0 | FF0000 ; ([Progress]/100) | FFFFFF ; ([Progress]/100) | FFFFFF ; 1.0
LeftMouseUpAction=[!TogglePauseMeasure Angle][!UpdateMeter #CURRENTSECTION#][!UpdateMeter Info][!Redraw]
MiddleMouseUpAction=[!SetVariable HFlip (-#HFlip#)][!UpdateMeter #CURRENTSECTION#][!UpdateMeter Info][!Redraw]
MouseScrollUpAction=[!SetVariable HSkew (#HSkew#-1)][!UpdateMeter #CURRENTSECTION#][!UpdateMeter Info][!Redraw]
MouseScrollDownAction=[!SetVariable HSkew (#HSkew#+1)][!UpdateMeter #CURRENTSECTION#][!UpdateMeter Info][!Redraw]
DynamicVariables=1

[Info]
Meter=String
X=50
Y=250
W=140
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
Text="Angle = [Angle]#CRLF#HFlip = #HFlip##CRLF#HSkew = #HSkew##CRLF#Progr = [Progress]"
DynamicVariables=1

Result (left click, middle click, scroll to animate and / or change things):

Transformations.jpg

Personally, I think this implementation is quite easy to grasp. I let "formulas" like (50+140) instead of using the result so that you can modify the symmetry of the base shape easily (I had to let some room for rotational animation, thus the increased coordinates). Once you find the desired values for the shape parameters, you can use those instead of measures and variables, of course. For example, the above boils down to (only 2 simple formulas used):

Code: Select all

[Rainmeter]
Update=25

[Progress]
Measure=Loop
StartValue=0
EndValue=100
Increment=1

[Trapezoid]
Meter=Shape
Shape=Path ShapePath | Fill LinearGradient ShapeGradient | Rotate 27 | Scale -1,1 | Skew -16,0
ShapePath=50,90 | LineTo 50,130 | LineTo 190,170 | LineTo 190,50 | ClosePath 1
ShapeGradient=180 | FF0000 ; 0.0 | FF0000 ; ([Progress]/100) | FFFFFF ; ([Progress]/100) | FFFFFF ; 1.0
DynamicVariables=1

P.S. The base shape is a horizontal trapezoid using left to right progress evolution, but playing with the coordinates, rotation angle, flipping and skewing you can probably get any shape, perspective, direction and altitude you want. This is meant to be a testing skin to get to what you need, thus the left click pause and the info text that you can then paste into your final result in your skin.

[death.crafter]

Out of everything you did, I have got only one question. How did you get that drop-dead gradient?

Edit: I got it lol.

[Yincognito]

Edit: I got it lol.

Thus, "innovative", LOL - although I'm sure it has been done before by someone else.
I had to use this "hard-stop"/"drop-dead" gradient trick (i.e. using the same color for different gradient ends) to simulate progress, since combining two shapes using Union destroyed the 2nd shape's fill color, obviously. At first I was upset that it did, but then realized the trick was in fact much simpler.

[death.crafter]

Thus, "innovative", LOL - although I'm sure it has been done before by someone else.
I had to use this "hard-stop"/"drop-dead" gradient trick (i.e. using the same color for different gradient ends) to simulate progress, since combining two shapes using Union destroyed the 2nd shape's fill color, obviously. At first I was upset that it did, but then realized the trick was in fact much simpler.

Actually I wanted do this thing with a string meter but didn't know how to... Now I got it thanks to you.

[Yincognito]

Actually I wanted do this thing with a string meter but didn't know how to... Now I got it thanks to you.

No problem - trying to do things in Photoshop (which is where I used this the first time, years ago) apparently has positives in Rainmeter too...

Other than that, here's an improved (read obsessively parameterized) version of the above code, worthy of being included in my "snippet skin collection". Here you can modify the shape's position and path points by changing the trapezoid's bases, height and offset values using mouse scroll on the associated text - no need to calculate anything anymore, just set your shape variables as you wish, rotate it, flip it, skew it, pause it till you get it right, and when you're done, replace the variables with the displayed values (changed a bit the base shape to better suit the name of the variables and their mathematical equivalents):

Code: Select all

[Variables]
;
;                  SmallBase
;         -        +-------+
;         |       /|       |\
; Height  |      / |       | \
;         |     /  |       |  \
;         -    +---+-------+---+
;   SmallBaseOffsetL       SmallBaseOffsetR
;
SmallBase=40
SmallBaseOffsetL=40
SmallBaseOffsetR=40
ShapeHeight=140
; Room For Rotation
ShapeOffset=50
; Shape Parameters (horizontal flip, horizontal skew)
HFlip=1
HSkew=0

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

---Measures---

[Angle]
Paused=1
Measure=Loop
StartValue=0
EndValue=360
Increment=1

[Progress]
Measure=Loop
StartValue=0
EndValue=100
Increment=1

---Styles---

[TextStyle]
Y=0R
W=(Max((#ShapeOffset#+#SmallBaseOffsetL#+#SmallBase#+#SmallBaseOffsetR#+#ShapeOffset#),200))
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=0,0,0,128
FontSize=12
AntiAlias=1

---Meters---

[Trapezoid]
Meter=Shape
Shape=Path ShapePath | Fill LinearGradient ShapeGradient | Rotate [Angle] | Scale #HFlip#,1 | Skew #HSkew#,0
ShapePath=(#ShapeOffset#),(#ShapeOffset#+#ShapeHeight#) | LineTo (#ShapeOffset#+#SmallBaseOffsetL#+#SmallBase#+#SmallBaseOffsetR#),(#ShapeOffset#+#ShapeHeight#) | LineTo (#ShapeOffset#+#SmallBaseOffsetL#+#SmallBase#),(#ShapeOffset#) | LineTo (#ShapeOffset#+#SmallBaseOffsetL#),(#ShapeOffset#) | ClosePath 1
ShapeGradient=270 | FF0000 ; 0.0 | FF0000 ; ([Progress]/100) | FFFFFF ; ([Progress]/100) | FFFFFF ; 1.0
LeftMouseUpAction=[!TogglePauseMeasure Angle][!UpdateMeter *][!Redraw]
MiddleMouseUpAction=[!SetVariable HFlip (-#HFlip#)][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable HSkew (#HSkew#+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable HSkew (#HSkew#-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[SmallBase]
Meter=String
MeterStyle=TextStyle
Y=300
Text="#CURRENTSECTION# = [#[#CURRENTSECTION]]"
MouseScrollUpAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[SmallBaseOffsetL]
Meter=String
MeterStyle=TextStyle
Text="#CURRENTSECTION# = [#[#CURRENTSECTION]]"
MouseScrollUpAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[SmallBaseOffsetR]
Meter=String
MeterStyle=TextStyle
Text="#CURRENTSECTION# = [#[#CURRENTSECTION]]"
MouseScrollUpAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[ShapeHeight]
Meter=String
MeterStyle=TextStyle
Text="#CURRENTSECTION# = [#[#CURRENTSECTION]]"
MouseScrollUpAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[ShapeOffset]
Meter=String
MeterStyle=TextStyle
Text="#CURRENTSECTION# = [#[#CURRENTSECTION]]"
MouseScrollUpAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]+1)][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable #CURRENTSECTION# ([#[#CURRENTSECTION]]-1)][!UpdateMeter *][!Redraw]
DynamicVariables=1

[Info]
Meter=String
MeterStyle=TextStyle
X=(#ShapeOffset#)r
Y=25R
W=(Max((#SmallBaseOffsetL#+#SmallBase#+#SmallBaseOffsetR#),125))
Text="Angle = [Angle]#CRLF#HFlip = #HFlip##CRLF#HSkew = #HSkew##CRLF#Progr = [Progress]"
DynamicVariables=1

Improved.jpg