It is currently February 16th, 2019, 2:15 am

Simple way to make text buttons look nicer using the Shape meter

Tips and Tricks from the Rainmeter Community
User avatar
Virginityrocks
Posts: 494
Joined: February 26th, 2011, 10:22 pm

Simple way to make text buttons look nicer using the Shape meter

Virginityrocks » 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:

Image Image

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
If you are not familiar with the shape meter, here is a quick tutorial of a basic shape. Here we have a Rectangle shape:

Code: Select all

Shape=Rectangle 0,0,#HighlightW#,#HighlightH#,6 | Fill Color #FillColor# | Stroke Width 1 | Stroke Color #StrokeColor#
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:

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]
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:

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
Last edited by Virginityrocks on April 6th, 2018, 2:54 pm, edited 3 times in total.
User avatar
jsmorley
Developer
Posts: 18819
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Simple way to make text buttons look nicer using the Shape meter

jsmorley » April 6th, 2018, 2:44 pm

Nicely done...
User avatar
F!.OW
Posts: 21
Joined: April 1st, 2018, 12:42 pm

Re: Simple way to make text buttons look nicer using the Shape meter

F!.OW » April 7th, 2018, 12:08 am

Virginityrocks wrote: 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]
This is an interesting approach, I can learn from this and implement it in my future skins. My technique is to hide my shape, outside the skin's visible area, then set the specific Y position on a mouseover.

Thanks for this! :thumbup:
SparkShredder
Posts: 50
Joined: November 17th, 2017, 12:00 pm

Re: Simple way to make text buttons look nicer using the Shape meter

SparkShredder » December 27th, 2018, 4:39 am

Another Way:

Code: Select all

[MeterTxtBg]
Meter=Shape
Shape=Rectangle 0,0,100,20 | StrokeWidth 0| Extend BgFill
BgFill=Fill Color #color#,1 
MouseOverAction=[!SetOption MeterTxtBg Bgfill "Fill Color #color#,100"][UpdateMeter MeterTxtBg][!Redraw]
MouseLeaveAction=[!SetOption MeterTxtBg Bgfill "Fill Color #color#,1"][UpdateMeter MeterTxtBg][!Redraw]
X=10
Y=10
UpdateDivider=-1

[MeterTxt]
Meter=String
*
*
X=10
Y=10
W=100
H=20
While having multiple meters

Code: Select all

[Background]
MouseOverAction=[!SetOption #CurrentSection# #CurrentSection#Fill "Fill Color #HoverGround#"][!UpdateMeter #CurrentSection#][!Redraw]
MouseLeaveAction=[!SetOption #CurrentSection# #CurrentSection#Fill "Fill Color #BackGround#"][!UpdateMeter #CurrentSection#][!Redraw]
UpdateDivider=-1

[SkinBg]
Meter=Shape
MeterStyle=BackGround
Shape=Rectangle 0,0,280,100 | Extend SkinBgFill | StrokeWidth 0
SkinBgFill=Fill Color #BackGround#

[LauncherBg]
Meter=Shape
MeterStyle=BackGround
Shape=Rectangle 0,0,280,100 | Extend SkinBgFill | StrokeWidth 0
LauncherBgFill=Fill Color #BackGround#
Smurth
Posts: 3
Joined: February 2nd, 2019, 2:10 pm

Re: Simple way to make text buttons look nicer using the Shape meter

Smurth » February 2nd, 2019, 8:26 pm

@Virginityrocks: Perfect ;)
Thank you.