It is currently December 7th, 2019, 8:44 pm

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

Tips and Tricks from the Rainmeter Community
User avatar
Virginityrocks
Posts: 510
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: 19850
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#
User avatar
Smurth
Posts: 5
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.
User avatar
sl23
Posts: 408
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

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

sl23 » August 11th, 2019, 10:51 am

Nice job, except, I couldn't get it to work! Probably my fault! :oops:

So I changed it to how I could get it to work correctly.
Here's the complete skin code if anyone wishes to try it out:

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=0,0,0,1
DynamicWindowSize=1

[Metadata]
Name= Mini Launch
Author=sl23 (Thanks to code supplied by jsmorley, balala)

;To change the Paths to your desired apps, locate the LeftMouseUpActions under [BG#] sections
;To change the Name of a shortcut, locate the Text option under [BG#Name]
;To create more shortcuts, copy and paste the entire content of an APP# code and increase the numerical order of the following lines by changing the # with the next number in sequence:
;[BG#]
;[BG#Name]

[Variables]
HighlightW=50
HighlightH=10

========================================
; VLC
========================================
[mProcessVLC]
Measure=Plugin
Plugin=Process
ProcessName=VLC.exe
IfCondition=mProcessVLC=1
IfTrueAction=[!HideMeterGroup VLC] [!UpdateMeterGroup *] [!Redraw]
IfFalseAction=[!ShowMeterGroup VLC] [!UpdateMeterGroup *] [!Redraw]

========================================
; STYLES
========================================
[sStroke]
MouseOverAction=[!SetOption #CURRENTSECTION# StrokeAlpha "Stroke Color 128,255,0,255"][!ShowMeter #CURRENTSECTION#Name][!ShowMeter #CURRENTSECTION#HiLite][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# StrokeAlpha ""][!HideMeter #CURRENTSECTION#Name][!HideMeter #CURRENTSECTION#HiLite][!UpdateMeter *][!Redraw]
Shape=Rectangle 0,0,24,24,50 | Fill Color 70,70,70 | StrokeWidth 3 | Extend StrokeAlpha
StrokeAlpha=Stroke Color 128,255,0,0
DynamicVariables=1
Group=VLC
X=-2
Y=30r

[sHiLite]
Shape=Rectangle 0,0,100,20,5 | Fill Color 30,30,30 | StrokeWidth 2 | StrokeColor 255,128,0
Hidden=1
X=10R
Y=2r

[sName]
FontFace=Corbel
StringStyle=Bold
StringAlign=Center
FontSize=12
FontColor=0,255,255
AntiAlias=1
Hidden=1
X=50r
Y=r

========================================
; APP 1
========================================
[BG1]
Meter=Shape
MeterStyle=sStroke
DynamicVariables=1
LeftMouseUpAction=["#PROGRAMPATH#..\..\MyApps\WaterfoxPortable\WaterfoxPortable.exe"]

[BG1HiLite]
Meter=Shape
MeterStyle=sHiLite

[BG1Name]
Meter=String
MeterStyle=sName
Text=Waterfox

========================================
; APP 2
========================================
[BG2]
Meter=Shape
MeterStyle=sStroke
DynamicVariables=1
LeftMouseUpAction=["#PROGRAMPATH#..\..\MyApps\PA.c\PortableApps\ThunderbirdPortable\ThunderbirdPortable.exe"]

[BG2HiLite]
Meter=Shape
MeterStyle=sHiLite

[BG2Name]
Meter=String
MeterStyle=sName
Text=Thunderbird

========================================
; APP 3
========================================
[BG3]
Meter=Shape
MeterStyle=sStroke
DynamicVariables=1
LeftMouseUpAction=["#PROGRAMPATH#..\..\MyApps\MuLab\MuLab.exe"]

[BG3HiLite]
Meter=Shape
MeterStyle=sHiLite

[BG3Name]
Meter=String
MeterStyle=sName
Text=MuLab

========================================
; APP 4
========================================
[BG4]
Meter=Shape
MeterStyle=sStroke
DynamicVariables=1
LeftMouseUpAction=["#PROGRAMPATH#..\..\..\..\..\..\..\SyMenu.exe"]

[BG4HiLite]
Meter=Shape
MeterStyle=sHiLite

[BG4Name]
Meter=String
MeterStyle=sName
Text=D: SyMenu

========================================
; APP 5
========================================
[BG5]
Meter=Shape
MeterStyle=sStroke
DynamicVariables=1
LeftMouseUpAction=E:\SyMenu\SyMenu.exe

[BG5HiLite]
Meter=Shape
MeterStyle=sHiLite

[BG5Name]
Meter=String
MeterStyle=sName
Text=E: SyMenu