It is currently September 18th, 2019, 12:11 am

'Mouse-Aware' & 'Text-Aware' Skin Highlighting

Tips and Tricks from the Rainmeter Community
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3542
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

'Mouse-Aware' & 'Text-Aware' Skin Highlighting

eclectic-tech » August 25th, 2019, 5:14 pm

I noticed the subtle highlighting used on Windows 10 start menu tiles as you move your mouse over each tile...

So I wondered...
  Could I get a similar effect on my skins?  
After some "trial and error", I achieved a similar effect and thought I would mention it here if anyone wants to play with it.

This code will add a light or dark colored background based on the color of your text and a mouse-tracking cursor highlight color when you mouseover the skin.

Demonstration Animation
dynamichighlight.gif
The effect can be dramatic or subtle by adjusting the #HighlightColor#, #LowlightColor# settings in [MeasureTextLuminance], and alpha values in [BackgroundHighlight] 'MyRadial1' definition.

Code: Select all

[Rainmeter]
Update=100
DefaultUpdateDivider=10
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=0,0,0,1
Group=#RootConfig#

MouseOverAction=[!ShowMeter BackgroundHighlight][!Redraw]
MouseLeaveAction=[!HideMeter BackgroundHighlight][!Redraw]

ContextTitle=Light Text
ContextAction=[!WriteKeyValue Variables TextColor "240,240,240"][!Refresh]
ContextTitle2=Dark Text
ContextAction2=[!WriteKeyValue Variables TextColor "15,15,15"][!Refresh]

[Variables]
TextColor=240,240,240
LowlightColor=0,0,0
HighlightColor=245,216,29
LightDarkThreshold=0.6

;----------MEASURES----------
; Divide all RGB values by 255
; Return red/green values for comparison
[MeasureTextRG]
Measure=String
String=#TextColor#
RegExpSubstitute=1
Substitute="^(.*),(.*),(.*)$":"\1/255,\2/255"

; Divide all RGB values by 255
; Return green/blue values for comparison
[MeasureTextGB]
Measure=String
String=#TextColor#
RegExpSubstitute=1
Substitute="^(.*),(.*),(.*)$":"\2/255,\3/255"

; Luminance level (0~1) is the sum of the min and max values of RGB divided by 2
[MeasureTextLuminance]
Measure=Calc
Formula=(Min(Min([MeasureTextRG]),Min([MeasureTextGB])) + Max(Max([MeasureTextRG]),Max([MeasureTextGB])))/2
;Formula=[MeasureText]
IfCondition=(#CurrentSection#>#LightDarkThreshold#)
IfTrueAction=[!WriteKeyValue Variables LowlightColor "0,0,0"][!SetVariable LowlightColor "0,0,0"][!UpdateMeter *][!Redraw]
IfFalseAction=[!WriteKeyValue Variables LowlightColor "255,255,255"][!SetVariable LowlightColor "255,255,255"][!UpdateMeter *][!Redraw]

; Returns the current mouse X position
[MeasureMouseX]
Measure=Plugin
Plugin=MouseXY
Dimension=X
MaxValue=#CurrentConfigWidth#
UpdateDivider=1

; Returns the current mouse X position
[MeasureMouseY]
Measure=Plugin
Plugin=MouseXY
Dimension=Y
MaxValue=#CurrentConfigHeight#
UpdateDivider=1

;----------METERS------------
[BackgroundHighlight]
Meter=Shape
Shape=Rectangle 0,0,#CurrentConfigWidth#,#CurrentConfigHeight# | StrokeWidth 0 | Fill RadialGradient MyRadial1
MyRadial1=(-#CurrentConfigWidth#*0.5+([MeasureMouseX]-#CurrentConfigX#)),(-#CurrentConfigHeight#*0.5+([MeasureMouseY]-#CurrentConfigY#)) | #HighlightColor#,100 ; 0.0 | #LowlightColor#,200 ; 0.75 | #LowlightColor#,50 ; 3
Shape2=Rectangle 1,1,(#CurrentConfigWidth#-2),(#CurrentConfigHeight#-2) | StrokeWidth 1 | Stroke Color #HighlightColor#,100 | Fill Color 0,0,0,0
Hidden=1
DynamicVariables=1
UpdateDivider=1

[MeterString]
Meter=String
W=400
Padding=10,10,10,10
Text="     Lorem ipsum dolor sit amet, placerat gubergren et quo, ei vim iuvaret dolorem. Sale electram patrioque duo id, sed admodum ancillae vivendum ei. Copiosae disputando eos in. Sit decore contentiones in. Tamquam utroque accusam ut eum, modo congue facilisi duo an.#CRLF##CRLF#     His ea magna veniam. An sit tacimates periculis reprimique, has admodum imperdiet definitiones eu. Velit persius nominati no vim, cu nec tacimates percipitur delicatissimi, meliore commune gubergren ea sit. Ne tollit corpora dissentiunt duo. Scripta mnesarchum ex est, id elit mutat argumentum mei.#CRLF##CRLF#     Qui te dissentiunt liberavisse. At justo aliquando signiferumque vel, cum dicta prompta delicata in. Tantas temporibus ea eos. Ignota inimicus pericula usu ex. Quas feugiat repudiare cu nam.#CRLF##CRLF#     Alii eripuit est at. Porro nusquam voluptatum et cum, cu modus noster graeco est. Ei epicurei partiendo definiebas per, probo alienum detraxit sed no. Aperiam assentior has an, at qui senserit deseruisse. Audiam elaboraret vis id, causae viderer fabulas his at. Zril indoctum deseruisse mei an, te vel facilisis periculis necessitatibus, ea quis corpora lobortis vix."
ClipString=2
FontWeight=500
FontColor=#TextColor#
FontSize=12
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=50,50,50,100
DefaultUpdateDivider is used in the [Rainmeter] section to set the default update to 1000 ms, while allowing the mouse tracking to run smoothly without impacting other areas of the skin.

Three measures [MeasureTextRG], [MeasureTextGB], and [MeasureTextLuminance] are used to determine the brightness level of the #TextColor# variable, and modify the #LowlightColor# (background fill color of the shape meter) automatically. The crossover point can be adjusted by changing the #LightDarkThreshold# variable (0~1) ... default is 0.6.

MouseXY plugin by Fawxy is used to track the mouse position. You will need to install that plugin for this code to work. UpdateDivider=1 is used on these measures so they are updated every 100 ms.

A Shape meter is dynamically modified to display the highlighting. UpdateDivider=1 is set on this meter so it is updated every 100 ms.

Having fun yet? :D
You do not have the required permissions to view the files attached to this post.