It is currently March 29th, 2024, 6:11 am

Adding a music duration bar in my music player

Get help with creating, editing & fixing problems with skins
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Adding a music duration bar in my music player

Post by Rafamear »

Well, I'm finishing making some details on my skin so I want to know how to make a music duration bar in my music player, I still don't know how I can do that and as a base I used a bar like that from another skin but it's not quite like i wanted it to look like and i wanted something i can do myself any help is welcome
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Adding a music duration bar in my music player

Post by balala »

Rafamear wrote: January 11th, 2022, 9:18 pm I want to know how to make a music duration bar in my music player, I still don't know how I can do that and as a base I used a bar like that from another skin but it's not quite like i wanted it to look like and i wanted something i can do myself any help is welcome
You need a NowPlaying measure (and probably the parent measure as well):

Code: Select all

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PlayerName#
PlayerType=TITLE

[MeasureProgressPercent]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=PROGRESS
MinValue=0
MaxValue=100
The [MeasureProgressPercent] measure is returning the progress as percent (a number between 0 and 100).
Now you have to use the returned value onto a Bar measure. something like this:

Code: Select all

[MeterUsedMemoryBar]
MeasureName=MeasureProgressPercent
Meter=BAR
X=0
Y=0
W=250
H=20
BarColor=255,240,0
SolidColor=50,50,50,120
BarOrientation=Horizontal
If on the other hand, you want to alter how the bar to look like, let us know what is your intention.
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: Adding a music duration bar in my music player

Post by Rafamear »

As you said yourself, all the measures were already there along with NowPlaying, I had seen some music player skins and I was building mine based on that, and the "Progress" you suggested to use seems perfect to me but it will be like what I had used as a base, what I wanted is a bar with the ball at the end, apart from that it seems perfect and I saw it apply it to my skin which by the way is almost finished.
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
CodeCode
Posts: 1363
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

Re: Adding a music duration bar in my music player

Post by CodeCode »

The ball would be a shape - or an image - your choice.
The percentage would apply to that as well, but it would be a separate meter.

What is the hurdle, since you seem to be going pretty well so far?
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Adding a music duration bar in my music player

Post by balala »

Rafamear wrote: January 14th, 2022, 12:04 am what I wanted is a bar with the ball at the end, apart from that it seems perfect and I saw it apply it to my skin which by the way is almost finished.
Here is a pretty basic example on how can this be done (at least if I didn't misunderstand you). Please try out the following code and let me know how does it match your needs:

Code: Select all

[Variables]
PlayerName=ADD-HERE-THE-PLAYER

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PlayerName#
PlayerType=TITLE

[MeasureArtist]
Measure=NowPlaying
PlayerName=#PlayerName#
PlayerType=ARTIST

[MeasureProgressPercent]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=PROGRESS
MinValue=0
MaxValue=100

[MeterTitleArtist]
Meter=STRING
MeasureName=MeasurePlayer
MeasureName2=MeasureArtist
MeasureName3=MeasureProgressPercent
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=14
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=%1#CRLF#%2#CRLF#%3%
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "PlayPause"]

[MeterPlayProgress]
Meter=Shape
X=2
Y=5R
Shape=Line 10,10,210,10 | StrokeWidth 2 | Stroke Color 220,220,220
Shape2=Ellipse (10+2*[MeasureProgressPercent]),10,10 | Fill Color 0,0,0 | StrokeWidth 2 | Stroke Color 220,220,220
DynamicVariables=1
Don't forget to add the player as the PlayerName variable to the [Variables] section. Also you have to know that this code can and has to be improved, this is just the start.
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: Adding a music duration bar in my music player

Post by Rafamear »

balala wrote: January 14th, 2022, 4:44 pm Here is a pretty basic example on how can this be done (at least if I didn't misunderstand you). Please try out the following code and let me know how does it match your needs:

Code: Select all

[Variables]
PlayerName=ADD-HERE-THE-PLAYER

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PlayerName#
PlayerType=TITLE

[MeasureArtist]
Measure=NowPlaying
PlayerName=#PlayerName#
PlayerType=ARTIST

[MeasureProgressPercent]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=PROGRESS
MinValue=0
MaxValue=100

[MeterTitleArtist]
Meter=STRING
MeasureName=MeasurePlayer
MeasureName2=MeasureArtist
MeasureName3=MeasureProgressPercent
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=14
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=%1#CRLF#%2#CRLF#%3%
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "PlayPause"]

[MeterPlayProgress]
Meter=Shape
X=2
Y=5R
Shape=Line 10,10,210,10 | StrokeWidth 2 | Stroke Color 220,220,220
Shape2=Ellipse (10+2*[MeasureProgressPercent]),10,10 | Fill Color 0,0,0 | StrokeWidth 2 | Stroke Color 220,220,220
DynamicVariables=1
Don't forget to add the player as the PlayerName variable to the [Variables] section. Also you have to know that this code can and has to be improved, this is just the start.
I'm going to send a code where I'm working on the bar, well I still want to use the bar shape and I made the little ellipse follow it, but it's not exactly at the end, like when it's at the beginning of the song it's way ahead of the bar and when it's almost at the end it's right behind it, take a look and you'll understand

Code: Select all

[Variables]
PlayerName=CAD

[Background]
Meter=Shape
X=0
Y=5
Shape=Rectangle 0,0,490,124,4 | Extend MyModifiers1 | Extend MyModifiers2
MyModifiers1=Fill Color 30,30,30 
MyModifiers2=Stroke Color 0,0,0,1
LeftMouseUpAction=!CommandMeasure "MeasurePlayer" "PlayPause"

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PLAYERNAME#
PlayerType=TITLE
DisableLeadingZero=1
Substitute="":"MPlayer"

[MeasureProgress]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=PROGRESS
MinValue=0
MaxValue=100

[Progress]
Meter=BAR
MeasureName=MeasureProgress
BarOrientation=Horizontal
X=200
Y=100
W=270
H=6
SolidColor=255,255,255,50
BarColor=236,239,244
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "SetPosition $MouseX:%$"][!Update]

[MeterRoundedProgress]
meter=Shape
Shape=Rectangle 0,0,274,10,4 | Extend MyModifiers1 | Extend MyModifiers2 | StrokeWidth 4 
MyModifiers1=Fill Color 0,0,0,1
MyModifiers2=Stroke Color 30,30,30
X=-2r
Y=-2r

[ShapeEllipseProgress]
meter=Shape
Shape=Ellipse (10+2*[MeasureProgress]),5,5 | Fill Color 30,30,30 | StrokeWidth 2 | Stroke Color 236,239,244
DynamicVariables=1
X=20r
Y=0r
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
David8192
Posts: 246
Joined: July 8th, 2021, 11:30 pm
Location: The King's Avenue, Golden Kingdom

Re: Adding a music duration bar in my music player

Post by David8192 »

Rafamear wrote: January 15th, 2022, 4:13 pm I'm going to send a code where I'm working on the bar, well I still want to use the bar shape and I made the little ellipse follow it, but it's not exactly at the end, like when it's at the beginning of the song it's way ahead of the bar and when it's almost at the end it's right behind it, take a look and you'll understand

Code: Select all

[Variables]
PlayerName=CAD

[Background]
Meter=Shape
X=0
Y=5
Shape=Rectangle 0,0,490,124,4 | Extend MyModifiers1 | Extend MyModifiers2
MyModifiers1=Fill Color 30,30,30 
MyModifiers2=Stroke Color 0,0,0,1
LeftMouseUpAction=!CommandMeasure "MeasurePlayer" "PlayPause"

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PLAYERNAME#
PlayerType=TITLE
DisableLeadingZero=1
Substitute="":"MPlayer"

[MeasureProgress]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=PROGRESS
MinValue=0
MaxValue=100

[Progress]
Meter=BAR
MeasureName=MeasureProgress
BarOrientation=Horizontal
X=200
Y=100
W=270
H=6
SolidColor=255,255,255,50
BarColor=236,239,244
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "SetPosition $MouseX:%$"][!Update]

[MeterRoundedProgress]
meter=Shape
Shape=Rectangle 0,0,274,10,4 | Extend MyModifiers1 | Extend MyModifiers2 | StrokeWidth 4 
MyModifiers1=Fill Color 0,0,0,1
MyModifiers2=Stroke Color 30,30,30
X=-2r
Y=-2r

[ShapeEllipseProgress]
meter=Shape
Shape=Ellipse (10+2*[MeasureProgress]),5,5 | Fill Color 30,30,30 | StrokeWidth 2 | Stroke Color 236,239,244
DynamicVariables=1
X=20r
Y=0r
Replace your [ShapeEllipseProgress] with this one

Code: Select all

[ShapeEllipseProgress]
meter=Shape
Shape=Ellipse ([MeasureProgress]*2.7),5,5 | Fill Color 30,30,30 | StrokeWidth 2 | Stroke Color 236,239,244
DynamicVariables=1
X=r
Y=0r
the DA GALLERY 8-) For some Reason, the square root of X2 does not involve X
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: Adding a music duration bar in my music player

Post by Rafamear »

David8192 wrote: January 15th, 2022, 7:54 pm Replace your [ShapeEllipseProgress] with this one

Code: Select all

[ShapeEllipseProgress]
meter=Shape
Shape=Ellipse ([MeasureProgress]*2.7),5,5 | Fill Color 30,30,30 | StrokeWidth 2 | Stroke Color 236,239,244
DynamicVariables=1
X=r
Y=0r
That looks perfect! thank you very much and finally i will be able to release my skin :rosegift:
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
David8192
Posts: 246
Joined: July 8th, 2021, 11:30 pm
Location: The King's Avenue, Golden Kingdom

Re: Adding a music duration bar in my music player

Post by David8192 »

Rafamear wrote: January 16th, 2022, 12:07 am That looks perfect! thank you very much and finally i will be able to release my skin :rosegift:
You are welcome
the DA GALLERY 8-) For some Reason, the square root of X2 does not involve X