Simple way to make text buttons look nicer using the Shape meter
Posted: April 6th, 2018, 2:37 pm
Many, many Rainmeter skins use an outdated way of displaying a background behind a string meter on MouseOver to convey its click-ability by changing its SolidColor option on a MouseOver and MouseLeave action. Here is a simple method to convey a string's click-ability using a dynamic shape meter.
Old way & New way:
First create the shape meter:
If you are not familiar with the shape meter, here is a quick tutorial of a basic shape. Here we have a Rectangle shape:
It is simple. First define what it is (Rectangle), followed by its X,Y,W,H coordinates. For this example, we do not need to define its X,Y coordinates in the Shape option, and can leave them as 0,0. The last number (6) is how rounded the rectangle's corners should be (0 for fully square). Next we have its self-explanatory Fill Color, Stroke Width, and Stroke Color.
Tip: #HighlightW# and #HighlightH# do not need to be defined in the Variables section. Rainmeter will create them automatically when necessary, keeping your code cleaner.
On any string you would like to display this neat little trick to, simply add the following code:
This MouseOver and MouseLeave action display the hidden shape, then sets its X, Y, W, and H coordinates to be identical to #CURRENTSECTION#'s, then hides itself when the mouse leaves the string's location. This can be used for all meters, including images. Using the Padding option on meters will give a bit of wiggle-room for your meters to fit nicely inside of the shape.
;--------------------------------
You can copy and paste this as a new .ini in Rainmeter to see how easy it is:
Old way & New way:
First create the shape meter:
Code: Select all
[HighlightBackground]
Meter=Shape
Shape=Rectangle 0,0,#HighlightW#,#HighlightH#,6 | Fill Color #FillColor# | Stroke Width 1 | Stroke Color #StrokeColor#
Hidden=1
Code: Select all
Shape=Rectangle 0,0,#HighlightW#,#HighlightH#,6 | Fill Color #FillColor# | Stroke Width 1 | Stroke Color #StrokeColor#
Tip: #HighlightW# and #HighlightH# do not need to be defined in the Variables section. Rainmeter will create them automatically when necessary, keeping your code cleaner.
On any string you would like to display this neat little trick to, simply add the following code:
Code: Select all
MouseOverAction=[!ShowMeter HighlightBackground][!SetOption HighlightBackground X [#CURRENTSECTION#:X]][!SetOption HighlightBackground Y [#CURRENTSECTION#:Y]][!SetVariable HighlightW [#CURRENTSECTION#:W]][!SetVariable HighlightH [#CURRENTSECTION#:H]][!UpdateMeter HighlightBackground][!Redraw]
MouseLeaveAction=[!HideMeter HighlightBackground]
;--------------------------------
You can copy and paste this as a new .ini in Rainmeter to see how easy it is:
Code: Select all
[Rainmeter]
[Variables]
FillColor=155,55,55
StrokeColor=125,5,5
[Background]
Meter=Image
SolidColor=0,0,0,155
W=160
H=160
; -------------------------------
; Styles give repetitive instructions to multiple meters using the option MeterStyle=[StyleName]
[OldStringStyle]
FontColor=255,255,255
FontFace=Roboto Regular
FontSize=12
AntiAlias=1
Padding=5,0,5,0
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor #FillColor#][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor 0,0,0,0][!UpdateMeter #CURRENTSECTION#][!Redraw]
[NewStringStyle]
FontColor=255,255,255
FontFace=Roboto Regular
FontSize=12
AntiAlias=1
Padding=5,0,5,0
MouseOverAction=[!ShowMeter HighlightBackground][!SetOption HighlightBackground X [#CURRENTSECTION#:X]][!SetOption HighlightBackground Y [#CURRENTSECTION#:Y]][!SetVariable HighlightW [#CURRENTSECTION#:W]][!SetVariable HighlightH [#CURRENTSECTION#:H]][!UpdateMeter HighlightBackground][!Redraw]
MouseLeaveAction=[!HideMeter HighlightBackground]
; -------------------------------
; Our new shape meter
[HighlightBackground]
Meter=Shape
Shape=Rectangle 0,0,#HighlightW#,#HighlightH#,6 | Fill Color #FillColor# | Stroke Width 1 | Stroke Color #StrokeColor#
Hidden=1
; -------------------------------
; Old strings
[OldMeter1]
Meter=String
MeterStyle=OldStringStyle
Text=Old String 1
Y=10
X=10
[OldMeter2]
Meter=String
MeterStyle=OldStringStyle
Text=Old String Two
X=r
Y=R
[OldMeter3]
Meter=String
MeterStyle=OldStringStyle
Text=Old String Three
X=r
Y=R
; -------------------------------
; New strings
[NewMeter1]
Meter=String
MeterStyle=NewStringStyle
Text=New String 1
X=10
Y=R
[NewMeter2]
Meter=String
MeterStyle=NewStringStyle
Text=New String Two
X=r
Y=R
[NewMeter3]
Meter=String
MeterStyle=NewStringStyle
Text=New String Three
X=r
Y=R