[Workshop] EasySearch

6 min read

Deviation Actions

smurfier's avatar
By smurfier
2 Favourites
0 Comments
2K Views
Welcome to the latest Rainmeter Workshop! Today we are going to make a skin for performing internet searches using a variety of search engine options. Our example skin is below.



As always, our first step is to create our [Rainmeter] section.

[Rainmeter]
Update=-1


Since our skin relies on user input, there's no need to have it update on a regular interval. Setting the update to -1 tells the skin to update once, and only once.

Next up is the [Variables] section. We need to create a variable to use later on so we know which one of our search engine we are going to be using. This will also make it easier to create an indicator so the user knows which search engine is selected.

[Variables]
Search=1


Might as well use a variable name we can't forget.

Now on to a much more complicated bit, the InputText plugin.

[InputText]
Measure=Plugin
Plugin=InputText
Command1=["https://www.google.com/search?q=$UserInput$"]
Command2=["http://www.bing.com/search?q=$UserInput$"]
Command3=["http://en.wikipedia.org/w/index.php?search=$UserInput$&title=Special%3ASearch"]
Command4=["http://www.imdb.com/find?q=$UserInput$&s=all"]
Command5=["https://www.google.com/search?sitesearch=docs.rainmeter.net&q=$UserInput$"]


For those of you at home following along with the example skin, we're skipping the formatting right now.

Each Command line applies to one our search engines. Where we need the search query to go is where we place $UserInput$. That is where the plugin will place what we type in before executing the command.

The Command number applies to the Search variable we created in the previous step. That is how we are keeping track of which search engine is which.

Now it's time to star with the meters. Since they are displayed in the order they are placed in the skin file then we need to start with the background.

[Background]
Meter=Image
H=55
W=200
SolidColor=50,50,50,255


Now that we have a background we need to start adding the bits that function. The first being the meter we click on to bring up the text input.

[Text]
Meter=Image
H=20
W=([Background:W]-10)
DynamicVariables=1
X=5
Y=5
SolidColor=0,0,0,255
MouseActionCursorName=Text
LeftMouseUpAction=!CommandMeasure InputText "ExecuteBatch #Search#"


We did a little trick up there when defining the width. Since then width of the text option relies on the width of the background we can have Rainmeter do the math for us via the use of Section Variables.

The next bit that should pop out is that MouseActionCurorName bit. By setting it to Text we make it so that the cursor will change to show the user the Text cursor and they will know that is where they need to click.

Right below that is our mouse action. Once again our Search variable comes into play. Not much to see here so we're going to move along.

Now is a good time to go back and add our formatting to the InputText plugin. We just take the H, W, X, Y, and SolidColor from our Text section, add a FontColor, FontSize, and FontFace and we now have what is below for our [InputText] section.

[InputText]
Measure=Plugin
Plugin=InputText
H=20
W=190
X=5
Y=5
SolidColor=0,0,0,255
FontFace=Calibri
FontSize=11
FontColor=255,255,255,255
Command1=["https://www.google.com/search?q=$UserInput$"]
Command2=["http://www.bing.com/search?q=$UserInput$"]
Command3=["http://en.wikipedia.org/w/index.php?search=$UserInput$&title=Special%3ASearch"]
Command4=["http://www.imdb.com/find?q=$UserInput$&s=all"]
Command5=["https://www.google.com/search?sitesearch=docs.rainmeter.net&q=$UserInput$"]


Notice that we didn't use the formula for the W. This is our other option if the formula is not your cup of tea. If you end up using the formula, don't forget to add DynamicVariables=1.

For our next trick we are going to add an indicator so the user knows which search engine is currently selected.

[Indicator]
Meter=Image
H=5
W=15
Y=45
X=(5+(#Search#-1)*20)
SolidColor= 50,50,255,255


That formula is the fun bit. Start at X=5 and add 20 for the Search number minus 1. We subtract 1 from the Search number because for the first Search number we do not want to add 20.

Now we need to start work on giving our search engine some icons. First off is the MeterStyle so we can skip some code later on.

[Icons]
Path=#@#
AntiAlias=1
MouseActionCursor=0
H=15
W=15
Y=r
X=5R
LeftMouseUpAction=[!WriteKeyValue Variables Search #CURRENTSECTION#][!Refresh]


By using the Path property we don't need to set it in the ImageName property of every meter. We're going to use the resources folder for this. Rainmeter does not scan this folder to look for skins.

If we name the sections properly for the icons we can use #CURRENTSECTION# and put the mouse action in the MeterStyle. We are using !WriteKeyValue to write the value of the icon we click on to the Search variable. We could also use !SetVariable but we want the value to be saved when we refresh the skin.

Now one to the icons themselves. A good place to find icons is iconfinder.com

Each icon needs to have a section name cooresponding to it's Command number in the InputText measure.

[1]
Meter=Image
MeterStyle=Icons
ImageName=Google.png
ToolTipText=Search Google
Y=30
X=5


We need to properly place the first icon, all the others will be relative positioned based on it.

From then on we just keep adding icons. After the first it gets a little bit easier as you can see.

[2]
Meter=Image
MeterStyle=Icons
ImageName=Bing.png
ToolTipText=Search Bing


And there you have it. It isn't difficult to add as many search engines you want with little effort.
Published:
© 2013 - 2021 smurfier
Comments0
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In