It is currently March 28th, 2024, 9:36 am

Round the edges of an image cover

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

Round the edges of an image cover

Post by Rafamear »

Recently a skin released brought me a little doubt (Image2(Modular Taskbar)) where it had the cover of the song with rounded edges and from what I knew so far there was only the way to have it with a solid background but in this case it didn't have a solid background and I went to see how it worked, I tried to find out how I can do the same but I got lost with so many lines of code and I didn't understand what was doing it, so I wanted to know if there is a way for someone to tell me how to do this in my case (Image 1(FTGamer)) for the my skin.

Any help will be appreciated.
Attachments
Screenshot_2 (2).png
Screenshot_1 (1).png
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Round the edges of an image cover

Post by balala »

Rafamear wrote: September 18th, 2022, 6:32 pm Recently a skin released brought me a little doubt (Image2(Modular Taskbar)) where it had the cover of the song with rounded edges and from what I knew so far there was only the way to have it with a solid background but in this case it didn't have a solid background and I went to see how it worked, I tried to find out how I can do the same but I got lost with so many lines of code and I didn't understand what was doing it, so I wanted to know if there is a way for someone to tell me how to do this in my case (Image 1(FTGamer)) for the my skin.
You need a container, which should be a rectangle with rounded corners. This meter will be used as a container of the Image meter, showing the cover. But it's extremely hard (close to impossible) to specifically help if we don't have at least a code of your skin, which shows the cover. So please either post a code, or, especially if there are involved resources, a package containing the whole config. If you've downloaded a skin which you use and if it has not been altered, a link where we can download it is also good (but if you altered the downloaded skin, a package of this modified config is needed).
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: Round the edges of an image cover

Post by Rafamear »

balala wrote: September 18th, 2022, 7:12 pm You need a container, which should be a rectangle with rounded corners. This meter will be used as a container of the Image meter, showing the cover. But it's extremely hard (close to impossible) to specifically help if we don't have at least a code of your skin, which shows the cover. So please either post a code, or, especially if there are involved resources, a package containing the whole config. If you've downloaded a skin which you use and if it has not been altered, a link where we can download it is also good (but if you altered the downloaded skin, a package of this modified config is needed).
i was almost forgetting about this, but in this case i made the skin i want to round off the edges
and here it is

Code: Select all

[Rainmeter]
Update=900
AccurateText=1

[Metadata]
Name=FTGamerSkin
Author=Rafamear
Version=1.0
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0

[Variables]
@include=#@#Variables.inc
ProgressFill=[Color2]FF
ProgressEmpty=[Color2]4D
;=====================Measures======================
;===================================================

[MusicCover]
Measure=NowPlaying
PlayerName=#PLAYERNAME#
PlayerType=COVER
DisableLeadingZero=0
Antialias=1

[MeasurePlayer]
Measure=NowPlaying
PlayerName=#PLAYERNAME#
PlayerType=TITLE
DisableLeadingZero=1
UpdateDivider=1

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

[MeasureDuration]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=DURATION

[MeasurePosition]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=POSITION

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

[ChameleonMeasure]
Measure=Plugin
Plugin=Chameleon
Type=File
Path=[mCover]
DynamicVariables=1

[Color1]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonMeasure
Color=Light1
DynamicVariables=1

[Color2]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonMeasure
Color=Light2
DynamicVariables=1

[Color3]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonMeasure
Color=Light3
DynamicVariables=1

[Color4]
Measure=Plugin
Plugin=Chameleon
Parent=ChameleonMeasure
Color=Light3
DynamicVariables=1

[mCover]
Measure=Plugin
Plugin=NowPlaying.dll
PlayerName=[MeasurePlayer]
PlayerType=Cover
Substitute="":"#@#Images\Cover.png"

[MeasureStateButton]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=STATE 
IfCondition=(MeasureStateButton=1) 
;IfTrueAction=[!ShowMeter MeterPause][!HideMeter MeterPlay]
;IfFalseAction=[!HideMeter MeterPause][!ShowMeter MeterPlay]
UpdateDivider=1
;=======================Images======================
;===================================================

[MeterCoverNoMusic]
Meter=Image
ImageName=#@#Images\Cover.png
X=0
Y=0
W=248
H=248

[MeterCover]
Meter=Image
MeasureName=MusicCover
Antialias=1
UpdateDivider=1
X=0
Y=0
W=248
H=248

[MeterPlay]
Meter=Image
ImageName=#@#Images\Play Color.png
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "Play"]
X=72
Y=72
Hidden=1

[MeterPause]
Meter=Image
ImageName=#@#Images\Pause Color.png
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "Pause"]
X=0r
Y=0r
Hidden=1

;=======================Shapes======================
;===================================================
[BackgroundProgress]
Meter=Shape
Shape=Rectangle 0,0,248,18,4 | Extend HolderFill | Extend HolderStroke 
HolderFill=Fill Color 30,30,30 
HolderStroke=Stroke Color 0,0,0,1
X=0
Y=269


[TimeDuration]
Meter=String
MeasureName=MeasureDuration
FontColor=#COLOR2#
StringAlign=Right
FontFace=#FONT#
FontSize=10
AntiAlias=1
Text=-  %1 -
X=237
Y=250
W=80
H=11

[TimePosition]
Meter=String
MeasureName=MeasurePosition
FontColor=#COLOR1#
StringAlign=Left
FontFace=#FONT#
FontSize=10
AntiAlias=1
Text=-  %1 -
X=10
Y=0r
W=80
H=11

;=======================Progress====================
;===================================================
[Progress]
Meter=BAR
MeasureName=MeasureProgress
BarOrientation=Horizontal
SolidColor=#ProgressEmpty#
BarColor=#ProgressFill#
Tile=1
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "SetPosition $MouseX:%$"][!Update]
X=7
Y=275
W=235
H=6

[CircleBallProgress]
meter=Shape
Shape=Ellipse ([MeasureProgress]*2.4),5,5 | Fill Color #ProgressFill# | StrokeWidth 2 | Stroke Color #ProgressFill#
DynamicVariables=1
X=r
Y=-2r
[CoverBlur]
Hidden=0
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Round the edges of an image cover

Post by eclectic-tech »

As balala suggested...
You could add a new Shape meter section and name it [CoverContainer]. Then add Container=CoverContainer to both of your cover image meters.
The container shape will be used by both cover images so they will show the same size image 248x248, but the container will 'hide' the corners because the defined rectangle shape has a corner radius of 8 pixels (change the last number in the Rectangle parameter to change the corner curve).

Code: Select all

[CoverContainer]
Meter=Shape
Shape=Rectangle 0,0,248,248,8 | StrokeWidth 0

[MeterCoverNoMusic]
Meter=Image
ImageName=#@#Images\Cover.png
X=0
Y=0
W=248
H=248
Container=CoverContainer

[MeterCover]
Meter=Image
MeasureName=MusicCover
Antialias=1
UpdateDivider=1
X=0
Y=0
W=248
H=248
Container=CoverContainer

User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Round the edges of an image cover

Post by balala »

Rafamear wrote: September 18th, 2022, 9:27 pm i was almost forgetting about this, but in this case i made the skin i want to round off the edges
and here it is
Besides eclectic-tech's code (which as usually is extremely good, doing what it has to do), note a few things:
  • The NowPlaying measures should have a parent - child structure. Most of them do this, however there is an exception: if [MeasurePlayer] is the parent measure (for the other measures it is, all them having the PlayerName=[MeasurePlayer] option), [MusicCover] is also a parent measure (having a PlayerName=#PLAYERNAME# option). Usually we tend to have only one single parent measure and all other NowPlaying measures to be child measures of this parent measure. That's why the structure of the [MusicCover] measure is not a proper structure. But see the following point as well.
  • In fact the [MusicCover] measure is not even needed. There is another measure in the code, which has the same purpose as [MusicCover]: the [mCover] measure. This measure is written as a child measure of [MeasurePlayer]. The only issue (weird thing - don't exactly know how to name it) is that this measure is written as a NowPlaying plugin measure, while all others are NowPlaing measures. You can change this, by replacing the Measure=Plugin and Plugin=NowPlaying.dll options of the [mCover] measure with the single Measure=NowPlaying option (however even if you leave it a s Plugin measure, still works - but this is an obsolete form of these measures).
  • Why is [mCover] better to be used than [MusicCover], is because [mCover] has a Substitute option, which is used to get the measure returning the @Resources\Images\Cover.png image, when the measure itself doesn't return an image. This makes the [MeterCoverNoMusic] meter useless, because the [MeterCover] will show up the cover if it is returned by the [mCover] measure or the Cover.png image, if the measure doesn't return a cover (in fact the Cover.png image is also returned by the [mCover] measure, but this has not too much importance). With the original code the Cover.png image has been always visible, but when the [MusicCover] measure did return an image, this image overlapped the [MeterCoverNoMusic] meter, hiding it this way. But the meter was still there. Not a too important detail, however using the [mCover] measure, we can remove a meter, which might make a difference.
  • Another place where you could remove a meter, is the [MeterPlay] and [MeterPause] meters, which could be replaced by one single measure. This way you can remove one more meter. For this, you have to replace the above two meter with the following one:

    Code: Select all

    [MeterPlayPause]
    Meter=Image
    LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "PlayPause"]
    X=72
    Y=72
    As you can see, this meter has no ImageName option. Which image should be shown by this meter has to be established by two !SetOption bangs into the IfTrueAction and IfFalseAction options of the [MeasureStateButton] measure. The IfTrueAction and IfFalseAction options have been commented out in the posted code, even if this way you don't get visible none of the existing [MeterPlay] and [MeterPause] meters, both being hidden (due to their Hidden=1 option). So you should replace the [MeasureStateButton] measure with the following one:

    Code: Select all

    [MeasureStateButton]
    Measure=NowPlaying
    PlayerName=[MeasurePlayer]
    PlayerType=STATE 
    IfCondition=(MeasureStateButton=1) 
    IfTrueAction=[!SetOption MeterPlayPause ImageName "#@#Images\Pause Color.png"][!UpdateMeter "MeterPlayPause"][!Redraw]
    IfFalseAction=[!SetOption MeterPlayPause ImageName "#@#Images\Play Color.png"][!UpdateMeter "MeterPlayPause"][!Redraw]
    See that I removed the semicolons from the IfTrueAction and IfFalseAction option as well as the UpdateDivider=1 completely useless option (this is the default value of the UpdateDivider option).
The above things have nothing to do with rounding corners of the image meter, however can save a few lines, shortening the code.
Rafamear
Posts: 114
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: Round the edges of an image cover

Post by Rafamear »

balala wrote: September 19th, 2022, 6:21 pm Besides eclectic-tech's code (which as usually is extremely good, doing what it has to do), note a few things:
  • The NowPlaying measures should have a parent - child structure. Most of them do this, however there is an exception: if [MeasurePlayer] is the parent measure (for the other measures it is, all them having the PlayerName=[MeasurePlayer] option), [MusicCover] is also a parent measure (having a PlayerName=#PLAYERNAME# option). Usually we tend to have only one single parent measure and all other NowPlaying measures to be child measures of this parent measure. That's why the structure of the [MusicCover] measure is not a proper structure. But see the following point as well.
  • In fact the [MusicCover] measure is not even needed. There is another measure in the code, which has the same purpose as [MusicCover]: the [mCover] measure. This measure is written as a child measure of [MeasurePlayer]. The only issue (weird thing - don't exactly know how to name it) is that this measure is written as a NowPlaying plugin measure, while all others are NowPlaing measures. You can change this, by replacing the Measure=Plugin and Plugin=NowPlaying.dll options of the [mCover] measure with the single Measure=NowPlaying option (however even if you leave it a s Plugin measure, still works - but this is an obsolete form of these measures).
  • Why is [mCover] better to be used than [MusicCover], is because [mCover] has a Substitute option, which is used to get the measure returning the @Resources\Images\Cover.png image, when the measure itself doesn't return an image. This makes the [MeterCoverNoMusic] meter useless, because the [MeterCover] will show up the cover if it is returned by the [mCover] measure or the Cover.png image, if the measure doesn't return a cover (in fact the Cover.png image is also returned by the [mCover] measure, but this has not too much importance). With the original code the Cover.png image has been always visible, but when the [MusicCover] measure did return an image, this image overlapped the [MeterCoverNoMusic] meter, hiding it this way. But the meter was still there. Not a too important detail, however using the [mCover] measure, we can remove a meter, which might make a difference.
  • Another place where you could remove a meter, is the [MeterPlay] and [MeterPause] meters, which could be replaced by one single measure. This way you can remove one more meter. For this, you have to replace the above two meter with the following one:

    Code: Select all

    [MeterPlayPause]
    Meter=Image
    LeftMouseUpAction=[!CommandMeasure "MeasurePlayer" "PlayPause"]
    X=72
    Y=72
    As you can see, this meter has no ImageName option. Which image should be shown by this meter has to be established by two !SetOption bangs into the IfTrueAction and IfFalseAction options of the [MeasureStateButton] measure. The IfTrueAction and IfFalseAction options have been commented out in the posted code, even if this way you don't get visible none of the existing [MeterPlay] and [MeterPause] meters, both being hidden (due to their Hidden=1 option). So you should replace the [MeasureStateButton] measure with the following one:

    Code: Select all

    [MeasureStateButton]
    Measure=NowPlaying
    PlayerName=[MeasurePlayer]
    PlayerType=STATE 
    IfCondition=(MeasureStateButton=1) 
    IfTrueAction=[!SetOption MeterPlayPause ImageName "#@#Images\Pause Color.png"][!UpdateMeter "MeterPlayPause"][!Redraw]
    IfFalseAction=[!SetOption MeterPlayPause ImageName "#@#Images\Play Color.png"][!UpdateMeter "MeterPlayPause"][!Redraw]
    See that I removed the semicolons from the IfTrueAction and IfFalseAction option as well as the UpdateDivider=1 completely useless option (this is the default value of the UpdateDivider option).
The above things have nothing to do with rounding corners of the image meter, however can save a few lines, shortening the code.
Hi, I'm here again, sorry for the delay in responding, in this case the skin was extremely messy it was actually one of the first skins I had done, but anyway, now I'm redoing something similar and I'm going to leave the code much more organized and I still want to know how would i make the rounded cover ;-)
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Round the edges of an image cover

Post by balala »

Rafamear wrote: November 3rd, 2022, 10:26 pm now I'm redoing something similar and I'm going to leave the code much more organized and I still want to know how would i make the rounded cover ;-)
As eclectic-tech suggested. For such a solution you need a container meter (in his code this is the [CoverContainer] meter) and a contained meter ([MeterCover]). The contained meter shows the image returned by a NowPlaying measure having a PlayerType=Cover option (this measure has the [MusicCover] name in his code, but the measure itself is not included).
Try figuring out how can you get this working. If you don't succeed, I still think you should post the code you have so far, because there might be a lot of things involved. There would be much easier for us to help you if you were posting the code. So, please post it, if you want specific help.
Post Reply