It is currently April 18th, 2024, 10:18 pm

Invert text colour based on background

General topics related to Rainmeter.
tom0711
Posts: 40
Joined: April 29th, 2020, 5:55 pm

Re: Invert text colour based on background

Post by tom0711 »

It’s okay mate,really appreciate your hard work
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Invert text colour based on background

Post by Yincognito »

jsmorley wrote: May 4th, 2020, 2:14 pm Sorry, I have gotten a bit delayed in looking at this. I'm still planning to try and help you out.

The problems with working on this are:

1) I don't use, and would never in a million years install, iTunes on my PC.
2) Absolutely everything about this skin uses old, deprecated syntax and approaches. Not fatal, but I can't in good conscience leave them as they are.
3) The skin uses "images" for the player controls, and those are hard to effectively change colors dynamically. I want to replace them with symbol "fonts" instead.

So give me some time to chew on this.
tom0711 wrote: May 4th, 2020, 4:05 pm It’s okay mate,really appreciate your hard work
I share jsmorley's "issues" regarding this skin, so in the meantime, until he manages to make something out of it, maybe a different approach using increased character spacing and shadows in all directions would be simpler and reasonably acceptable from a visual point of view (that's up for you, Tom, to decide, of course):

Code:

Code: Select all

[Variables]
Color0=0,0,0,255
Color1=255,255,255,255
CharSpace=0.5
ShadowOffset=1
ShadowBlur=1

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

---Measures---

---Meters---

[MeterText]
Meter=String
X=0
Y=0
FontFace=Tahoma
FontColor=#Color1#
SolidColor=#Color0#
SolidColor2=#Color1#
GradientAngle=90
InlineSetting=CharacterSpacing | (#CharSpace#) | (#CharSpace#)
InlineSetting2=Shadow | (-#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting3=Shadow | (-#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting4=Shadow | (#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting5=Shadow | (#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
FontSize=14
AntiAlias=1
Padding=5,5,5,5
Text="Call The Police#CRLF##CRLF##CRLF##CRLF#American Dream#CRLF##CRLF##CRLF##CRLF#LCD Soundsystem"
LeftMouseUpAction=[!SetVariable Color0 #Color1#][!SetVariable Color1 #Color0#][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseScrollUpAction=[!SetVariable CharSpace (#CharSpace#+0.5)][!SetVariable ShadowOffset (#ShadowOffset#+0.5)][!SetVariable ShadowBlur (#ShadowBlur#+0.5)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseScrollDownAction=[!SetVariable CharSpace (#CharSpace#-0.5)][!SetVariable ShadowOffset (#ShadowOffset#-0.5)][!SetVariable ShadowBlur (#ShadowBlur#-0.5)][!UpdateMeter #CURRENTSECTION#][!Redraw]
DynamicVariables=1
Skin:
Test_1.0.0.rmskin
Preview (white text):
White Text.jpg
Preview (black text):
Black Text.jpg
You can toggle between white and black text by left clicking on the mouse, and increase or decrease some variables like character spacing, shadow offset and shadow blur by scrolling up or down the mouse wheel. You can, of course, modify the value of the variables in the [Variables] section as you like, until you get the values you think that look better. After that, if you think this could work, you can implement it in your skin quite easily, I think.

P.S. A somewhat similar effect can be obtained by using StringEffect=Border and FontEffectColor=#Color0#, but I believe this one is more effective to the eye.
You do not have the required permissions to view the files attached to this post.
Last edited by Yincognito on May 6th, 2020, 4:19 pm, edited 1 time in total.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
tom0711
Posts: 40
Joined: April 29th, 2020, 5:55 pm

Re: Invert text colour based on background

Post by tom0711 »

Yincognito wrote: May 6th, 2020, 4:02 pm I share jsmorley's "issues" regarding this skin, so in the meantime, until he manages to make something out of it, maybe a different approach using increased character spacing and shadows in all directions would be simpler and reasonably acceptable from a visual point of view (that's up for you, Tom, to decide, of course):

Code:

Code: Select all

[Variables]
Color0=0,0,0,255
Color1=255,255,255,255
CharSpace=0.5
ShadowOffset=1
ShadowBlur=1

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

---Measures---

---Meters---

[MeterText]
Meter=String
X=0
Y=0
FontFace=Tahoma
FontColor=#Color1#
SolidColor=#Color0#
SolidColor2=#Color1#
GradientAngle=90
InlineSetting=CharacterSpacing | (#CharSpace#) | (#CharSpace#)
InlineSetting2=Shadow | (-#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting3=Shadow | (-#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting4=Shadow | (#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting5=Shadow | (#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
FontSize=14
AntiAlias=1
Padding=5,5,5,5
Text="Call The Police#CRLF##CRLF##CRLF##CRLF#American Dream#CRLF##CRLF##CRLF##CRLF#LCD Soundsystem"
LeftMouseUpAction=[!SetVariable Color0 #Color1#][!SetVariable Color1 #Color0#][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseScrollUpAction=[!SetVariable CharSpace (#CharSpace#+0.5)][!SetVariable ShadowOffset (#ShadowOffset#+0.5)][!SetVariable ShadowBlur (#ShadowBlur#+0.5)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseScrollDownAction=[!SetVariable CharSpace (#CharSpace#-0.5)][!SetVariable ShadowOffset (#ShadowOffset#-0.5)][!SetVariable ShadowBlur (#ShadowBlur#-0.5)][!UpdateMeter #CURRENTSECTION#][!Redraw]
DynamicVariables=1
Skin:
Test_1.0.0.rmskin
Preview (white text):
White Text.jpg
Preview (black text):
Black Text.jpg
You can toggle between white and black text by left clicking on the mouse, and increase or decrease some variables like character spacing, shadow offset and shadow blur by scrolling up or down the mouse wheel. You can, of course, modify the value of the variables in the [Variables] section as you like, until you get the values you think that look better. After that, if you think this could work, you can implement it in your skin quite easily, I think.
where do i put your code in my code? this is my code:

Code: Select all

[Rainmeter]
Author=siesie.deviantart.com


[Variables]
@Include=#CurrentPath#Variables.inc
Colour=FFFFFF



[mProcessPID]
Measure=Plugin
Plugin=Plugins\Perfmon.dll
PerfMonObject="Process"
PerfMonCounter="ID Process"
PerfMonInstance=itunes
PerfMonDifference=0
UpdateDivider=0,1
	
[mPlaying]
Measure=Calc
Formula=mProcessPID > 0 ? 1 : 0
	IfEqualValue=0
	IfEqualAction=!Execute [!RainmeterShowMeter MeterTitle][!RainmeterHideMeter Track][!RainmeterHideMeter Artist][!RainmeterHideMeter MeterTitle2][!RainmeterHideMeter MeterTitle3][!RainmeterHideMeter MeterTitle4][!RainmeterHideMeter NextTunes][!RainmeterHideMeter PrevTunes][!RainmeterHideMeter PlayTunes][!RainmeterHideMeter PauseTunes][!RainmeterHideMeter Album][!RainmeterHideMeter AlbumBG][!RainmeterHideMeter Black][!RainmeterHideMeter MeterTransparent][!RainmeterHideMeter MeterSoudnVOlume][!RainmeterHideMeter VolumeDown][!RainmeterHideMeter VolumeUp][!RainmeterHideMeter MeterPlayerPosition][!RainmeterHideMeter MeterCurrentTrackTime][!RainmeterHideMeter MeterPositionPercent][!RainmeterHideMeter MeterPosition]
	IfAboveValue=0
	IfAboveAction=!Execute [!RainmeterHideMeter MeterTitle][!RainmeterShowMeter Track][!RainmeterShowMeter Artist][!RainmeterShowMeter MeterTitle2][!RainmeterShowMeter MeterTitle3][!RainmeterShowMeter MeterTitle4] [!RainmeterShowMeter NextTunes][!RainmeterShowMeter PrevTunes][!RainmeterShowMeter PlayTunes][!RainmeterShowMeter PauseTunes][!RainmeterShowMeter Album][!RainmeterShowMeter AlbumBG][!RainmeterShowMeter Black][!RainmeterShowMeter MeterTransparent][!RainmeterShowMeter MeterSoudnVOlume][!RainmeterShowMeter VolumeDown][!RainmeterShowMeter VolumeUp][!RainmeterShowMeter MeterPlayerPosition][!RainmeterShowMeter MeterCurrentTrackTime][!RainmeterShowMeter MeterPositionPercent][!RainmeterShowMeter MeterPosition]
	UpdateDivider=0,0001

[mPositionPercent]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetPlayerPositionPercent
MaxValue=100

[mCurrentTrackTime]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetCurrentTrackTime






[mAlbum]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetCurrentTrackArtwork



[mTrack]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetCurrentTrackName

[mArtist]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetCurrentTrackArtist
	

[mAlbum2]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetCurrentTrackAlbum
	
[mPrev]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=PreviousTrack

[mNext]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=NextTrack


[mPlay]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=Play

[mPause]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=Pause

[mSoundVolume]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetSoundVolume
MaxValue=100

[mVolumeDown]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=SoundVolumeDown

[mVolumeUp]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=SoundVolumeUp


[MeterTitle]
Meter=String
####################################
Text=
####################################
FontColor=#Colour#
FontSize=11
FontFace=MV Boli
StringStyle=BOLD
LeftMouseDoubleClickAction=!Execute ["C:\Program Files\Tunes\Tunes.exe"]
AntiAlias=1
x=0

[MeterTitle2]
Meter=String
MeasureName=mTrack
Text=%1
W=#Width#
H=#Height#
FontColor=#Colour#
FontSize=11
FontFace=MV Boli
StringStyle=BOLD
StringAlign=Left
AntiAlias=1
Hidden=0
LeftMouseDoubleClickAction=!Execute ["#AddonsPath#RainRGB\RainRGB.exe" "VarName=Colour" "FileName=#CurrentPath#Spliced_Tunes.ini" "RefreshConfig=Wolfgang\Music"]
x=100
y=10

[MeterTitle3]
Meter=String
MeasureName=mArtist
Text=%1
w=#Width#
H=#Height#
FontColor=#Colour#
FontSize=10
FontFace=MV Boli
StringStyle=Bold
StringAlign=Left
AntiAlias=1
Hiden=0
y=40
x=100


[MeterTitle4]
Meter=String
MeasureName=mAlbum2
Text=%1
w=#Width#
H=#Height#
FontColor=FFFFFF
FontSize=10
FontFace=MV Boli
StringStyle=BOLD
//StringCase=Upper
StringAlign=Left
AntiAlias=1
Hiden=0
y=25
x=100







[PrevTunes]
Meter=Image
ImageName=Prev.png
x=100
Y=60
FontColor=255,255,255,255
FontFace=MV Boli
FontSize=20
AntiAlias=1
LeftMouseUpAction=!RainmeterPluginBang "mPrev"




[NextTunes]
Meter=Image
ImageName=Next.png
x=190
Y=60
AntiAlias=1
LeftMouseUpAction=!RainmeterPluginBang "mNext"

[PauseTunes]
Meter=Image
ImageName=Pause.png
X=130
Y=60
AntiAlias=1
LeftMouseUpAction=!RainmeterPluginBang "mPause"

[PlayTunes]
Meter=Image
ImageName=Play.png
X=160
Y=60
AntiAlias=1
LeftMouseUpAction=!RainmeterPluginBang "mPlay"

[AlbumBG]
Meter=IMAGE
imageName=bg.png
w=94
h=94
x=3
y=1


[Album]
Meter=IMAGE
MeasureName=mAlbum
X=10
Y=8
W=80
H=80



[MeterPosition]
Meter=Image
ImageName=black.png
x=10
y=70
w=80
h=18
hidden=1



[MeterPositionPercent]
Meter=Bar
MeasureName=mPositionPercent
X=13
Y=84
W=80
H=2
BarColor=FFFFFF
BarOrientation=HORIZONTAL
Hidden=1

[MeterCurrentTrackTime]
Meter=STRING
MeasureName=mCurrentTrackTime
X=62
Y=70
FontColor=FFFFFF
FontFace=MV Boli
FontSize=7
StringStyle=Bold
StringEffect=Shadow
StringAlign=left
FontEffectColor=000000
AntiAlias=1
Hidden=1

[mPlayerPosition]
Measure=Plugin
Plugin=Plugins\iTunesPlugin.dll
Command=GetPlayerPosition
MaxValue=100

[mMin]
Measure=Calc
Formula=(mPlayerPosition - (mPlayerPosition % 60)) /60

[mSec1]
Measure=Calc
Formula=(mPlayerPosition % 60) < 10 ? 0 : 1
Substitute="1":""

[mSec2]
Measure=Calc
Formula=mPlayerPosition % 60

[MeterPlayerPosition]
Meter=STRING
MeasureName=mMin
MeasureName2=mSec1
MeasureName3=mSec2
X=11
Y=70
FontColor=FFFFFF
FontFace=MV Boli
FontSize=7
FontEffectColor=000000
StringStyle=Bold
StringEffect=shadow
StringAlign=LEFT
Text="%1:%2%3"
AntiAlias=1
Hidden=1

[Black]
Meter=Image
ImageName=black.png
x=10
y=8
w=80
h=18
hidden=1

[MeterSoundVolume]
Meter=Bar
MeasureName=mSoundVolume
X=29
Y=16
W=40
H=2
BarColor=FFFFFF
BarOrientation=HORIZONTAL
Hidden=1

[MeterVolumeDown]
Meter=Image
X=11
Y=11
ImageName=VolumeDown.png
LeftMouseDownAction=!execute [!RainmeterPluginBang "mVolumeDown"]
Hidden=1


[MeterVolumeUp]
Meter=Image
X=74
Y=11
ImageName=VolumeUp.png
LeftMouseDownAction=!execute [!RainmeterPluginBang "mVolumeUp"]
Hidden=1

[MeterTransparent]
Meter=Image
Imagename=Transp.png
w=100
h=100
x=0
y=0
MouseOverAction=!execute [!RainmeterShowMeter MeterPosition][!RainmeterShowMeter MeterPlayerPosition][!RainmeterShowMeter MeterCurrentTrackTime][!RainmeterShowMeter MeterPositionPercent][!RainmeterShowMeter MeterSoundVolume][!RainmeterShowMeter MeterVolumeUp][!RainmeterShowMeter MeterVolumeDown][!RainmeterShowMeter Black]
MouseLeaveAction=!execute [!RainmeterHideMeter MeterPosition][!RainmeterHideMeter MeterPlayerPosition][!RainmeterHideMeter MeterCurrentTrackTime][!RainmeterHideMeter MeterPositionPercent][!RainmeterHideMeter MeterSoundVolume][!RainmeterHideMeter MeterVolumeUp][!RainmeterHideMeter MeterVolumeDown][!RainmeterHideMeter Black]





User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Invert text colour based on background

Post by Yincognito »

tom0711 wrote: May 6th, 2020, 4:18 pm where do i put your code in my code?
Let's take it one step at a time. First, do you think this is suitable for you? If so, maybe you want to play a bit with the skin I posted (the .rmskin file, which you can download, install and load to see how it looks "live") and settle on the values you think look best (i.e. which color you'd like for the text between white and black, which spacing, extent of the shadow, etc). Then, I can walk you through the process of adding the right things in your code for it to work. Not right away, as a man got to eat at least once in a day LOL, but later today for sure. :D
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Invert text colour based on background

Post by Yincognito »

tom0711 wrote: May 6th, 2020, 4:18 pmwhere do i put your code in my code?
In principle, you should add:

Code: Select all

Color0=0,0,0,255
CharSpace=0.5
ShadowOffset=1
ShadowBlur=1
in your [Variables] section, i.e. after:

Code: Select all

[Variables]
@Include=#CurrentPath#Variables.inc
Colour=FFFFFF
from your skin code.

Then, you should add:

Code: Select all

InlineSetting=CharacterSpacing | (#CharSpace#) | (#CharSpace#)
InlineSetting2=Shadow | (-#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting3=Shadow | (-#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting4=Shadow | (#ShadowOffset#) | (-#ShadowOffset#) | (#ShadowBlur#) | #Color0#
InlineSetting5=Shadow | (#ShadowOffset#) | (#ShadowOffset#) | (#ShadowBlur#) | #Color0#
DynamicVariables=1
in each one of your [MeterTitle2], [MeterTitle3] and [MeterTitle4] sections of your skin code (say, after your x=... and y=... lines in those sections).

Normally, this should be it, nothing else required. Let me know if you get a satisfying result.

P.S. The width / length of your text might increase after this operation, and possibly extend "outside" the skin. If so, you can decrease the newly added CharSpace variable from the [Variables] section, until you get a suitable result. Or, if you want to increase a bit the width of the skin instead, rather than decreasing the character spacing, you can modify the value of the Width variable in the C:\Users\[YourUserName]\Documents\Rainmeter\Skins\iTunes Player 2\Variables.inc file, from 500 to, say, 550 or 600, whatever feels convenient.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
tom0711
Posts: 40
Joined: April 29th, 2020, 5:55 pm

Re: Invert text colour based on background

Post by tom0711 »

wow,amazing! thank you very much,and I understood it not possible to do the same for the control buttons,am i right?
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Invert text colour based on background

Post by Yincognito »

tom0711 wrote: May 6th, 2020, 5:06 pm wow,amazing! thank you very much,and I understood it not possible to do the same for the control buttons,am i right?
Not exactly like that, but something can be done there too. Everything is possible... :D
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
tom0711
Posts: 40
Joined: April 29th, 2020, 5:55 pm

Re: Invert text colour based on background

Post by tom0711 »

If you can guide me how to do this or even do it yourself it’ll be really fantastic,really appreciate your help and work mate, thank you very much for this.
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Invert text colour based on background

Post by Yincognito »

tom0711 wrote: May 6th, 2020, 5:50 pm If you can guide me how to do this or even do it yourself it’ll be really fantastic,really appreciate your help and work mate, thank you very much for this.
So, to be clear, the buttons are white and you want them to be more visible on bright colors (including white, for example), is that it?
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
tom0711
Posts: 40
Joined: April 29th, 2020, 5:55 pm

Re: Invert text colour based on background

Post by tom0711 »

Yes but only if you want they have kind of a shadow so they are quite visible