Radio tuning bar clipping thingy (hard to explain in title)

[Mor3bane]

TBH, both ways proposed here have the same level of involvement - code-wise.

But I digress. balala is your man here - he is after all a 'rainmeter guru'.

[balala]

balala is your man here - he is after all a 'rainmeter guru'.

Thanks for the appreciation...

[deXxterlab97]

Thanks for the appreciation...

So i also did a brief discussion on discord server

Here are the images of the bar: https://imgur.com/a/oj3xknM

The straight one, I plan on using crop function and have the value of image crop relative to what my volume is, so if my volume is at 54, it would crop to 54 area. Then I would have a volume up and down on either side and increase/decrease crop


The curve one would look much nicer (all the image will be improved later)

So use image rotate to rotate that bar, then use image mask to show only the visible part

Question is: does image mask remove the non visible part so it doesn't consume space on desktop, or I could image crop it further down the line then image mask it

https://imgur.com/a/Qsopb39

(red is the crop, blue is the mask)

[balala]

The straight one, I plan on using crop function and have the value of image crop relative to what my volume is, so if my volume is at 54, it would crop to 54 area.

Example code for this:

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=0,0,0,120
SkinWidth=188
SkinHeight=188
MouseScrollDownAction=[!CommandMeasure "MeasureWin7Audio" "ChangeVolume -#Step#"][!UpdateMeasure "MeasureWin7Audio"][!UpdateMeasure "MeasureScaleVol"][!UpdateMeter "MeterVolume"][!Redraw]
MouseScrollUpAction=[!CommandMeasure "MeasureWin7Audio" "ChangeVolume +#Step#"][!UpdateMeasure "MeasureWin7Audio"][!UpdateMeasure "MeasureScaleVol"][!UpdateMeter "MeterVolume"][!Redraw]

[Variables]
Step=2

[MeasureWin7Audio]
Measure=Plugin
Plugin=Win7AudioPlugin

[MeasureScaleVol]
Measure=Calc
Formula=( Clamp (( 15.52 * [MeasureWin7Audio:] - 94 ) , -76 , 1425 ))
DynamicVariables=1

[MeterVolume]
Meter=Image
ImageName=#@#Volume1.png
ImageCrop=[MeasureScaleVol],0,188,188
X=0
Y=0
DynamicVariables=1

[MeterValue]
Meter=Image
SolidColor=0,0,0
X=93
Y=5
W=3
H=178

I saved the straight image as Volume1.png into the @Resources folder and used this one into the above code.
I didn't add yet the volume up / down buttons, for now just the mouse scroll works. But if this is what you wanted, those buttons can be added easily. A few other improvements also will be required, this code is just for testing.

[deXxterlab97]

Example code for this:

thanks i will keep it for future reference but after few thoughts i decide to actually curve it

so replicating the bar wasn't hard

my steps:

1. Make an image rotate
2. Have an image mask (like the one cropped in original gif)
3. Have a crop (either first or later) so that the remaining transparent part dont waste space

http://imgur.com/a/f8ja6NA

Anything wrong with those steps and are there more efficient ways?

Questions: as you can see the bar isn't too curvy so the offset point of image rotate will be way below, is it possible to have an offset outside image and would it use up space?

I will be testing with mouse wheel first ir buttons, see how it goes then implement this script that controls like in actual game (surely i will figure it out) https://github.com/TheAzack9/Slider.dll

[balala]

thanks i will keep it for future reference but after few thoughts i decide to actually curve it

so replicating the bar wasn't hard

my steps:

1. Make an image rotate
2. Have an image mask (like the one cropped in original gif)
3. Have a crop (either first or later) so that the remaining transparent part dont waste space

http://imgur.com/a/f8ja6NA

Anything wrong with those steps and are there more efficient ways?

Questions: as you can see the bar isn't too curvy so the offset point of image rotate will be way below, is it possible to have an offset outside image and would it use up space?

I will be testing with mouse wheel first ir buttons, see how it goes then implement this script that controls like in actual game (surely i will figure it out) https://github.com/TheAzack9/Slider.dll

Unfortunately I think it's not possible, because when cropped / masked the image meter behaves in a completely different mode and at least me yet couldn't make it to properly work.
Sorry...

[deXxterlab97]

Unfortunately I think it's not possible, because when cropped / masked the image meter behaves in a completely different mode and at least me yet couldn't make it to properly work.
Sorry...

what about your original idea with transformation matrix?

[balala]

what about your original idea with transformation matrix?

Unfortunately couldn't get to properly work.

[deXxterlab97]

Unfortunately couldn't get to properly work.

im back with straight lines hah

are you familiar with this? https://github.com/NighthawkSLO/Mouse.dll/wiki/Documentation

simply trying to recreate this video

https://youtu.be/FrboSDFB3c4?t=289

basically u drag left to decrease vol, drag right to increase (within the skin)

but u have to it each time so after the dragging the slider will reset to original position

i was thinking of 2 sliders on each side, one to drag left and one to drag right then they reset to OG pos

[balala]

In the meantime I think I found a solution, here it is:

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=200
SkinHeight=100
MouseScrollDownAction=[!CommandMeasure "MeasureWin7Audio" "ChangeVolume -#Step#"][!UpdateMeasure "MeasureWin7Audio"][!UpdateMeterGroup "Volume"][!Redraw]
MouseScrollUpAction=[!CommandMeasure "MeasureWin7Audio" "ChangeVolume +#Step#"][!UpdateMeasure "MeasureWin7Audio"][!UpdateMeterGroup "Volume"][!Redraw]

[Variables]
Step=2
Angle=48
CenterX=100
CenterY=580

[MeasureWin7Audio]
Measure=Plugin
Plugin=Win7AudioPlugin
IfCondition=(#CURRENTSECTION#<0)
IfTrueAction=[!SetOption MeterVolumePercent Text "Mute"][!UpdateMeter "MeterVolumePercent"][!Redraw]
IfFalseAction=[!SetOption MeterVolumePercent Text "Vol: [*MeasureWin7Audio:*]%"][!UpdateMeter "MeterVolumePercent"][!Redraw]

[MeterValue]
Meter=Shape
X=(#CenterX#-100)
Y=0
Shape=Rectangle 0,0,200,100,10 | Extend MyModifiers1
MyModifiers1=Fill Color 0,0,0,100 | StrokeWidth 2 | Stroke Color 46,215,31
DynamicVariables=1

[MeterVolume]
Meter=Image
ImageName=#@#Volume3.png
X=-400
Y=0
TransformationMatrix=(Cos(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)));(-Sin(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)));(Sin(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)));(Cos(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)));(#CenterX#-#CenterX#*Cos(Rad((96*[MeasureWin7Audio:]/100)-#Angle#))-#CenterY#*Sin(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)));(#CenterY#+#CenterX#*Sin(Rad((96*[MeasureWin7Audio:]/100)-#Angle#))-#CenterY#*Cos(Rad((96*[MeasureWin7Audio:]/100)-#Angle#)))
DynamicVariables=1
Group=Volume

[MeterVolumePercent]
Meter=STRING
X=100
Y=70
Padding=15,5,15,5
FontColor=220,220,220
SolidColor=0,0,0,150
FontSize=16
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1
Group=Volume

The used image is that one posted here: https://forum.rainmeter.net/viewtopic.php?p=153265#p153265 (saved as Volume3.png, into the @Resources folder).
I probably would remove the red line.
Please test the above code and let me know how does it work.