It is currently October 19th, 2019, 7:23 pm

Beginner's Guide to creating an Application Launcher / Dock

Tips and Tricks from the Rainmeter Community
User avatar
jsmorley
Developer
Posts: 19588
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Beginner's Guide to creating an Application Launcher / Dock

jsmorley » June 25th, 2009, 9:27 pm

A lot of folks use a "dock" program like ObjectDock or RocketDock and they are very useful. However, if you want to build your own dock in Rainmeter, you will find that you can get most of the functionality of these other programs, while adding almost unlimited flexibility to make the dock look and behave the way you want.

I thought I would do a quick tutorial on how to use Rainmeter to build one of these popular dock / application launcher skins.

First off, my general approach. What I do is use Rainmeter's "Buttons" for the dock. There are other ways to accomplish this, but I find that using buttons for this purpose is somewhat easier to build, gives you the "animations" without a ton of .ini code and hiding/unhiding meters, and you end up with elements that can easily be used in variations of your dock without a lot of changes.

We are going to end up with this:

Image

The basics are:

1. Choose a graphics program to create some image elements for the dock. Photoshop works great, but so will The Gimp, Paint.Net or any other graphics program which will create "layers". It can be done without layers, but it's MUCH easier with.
2. Create a "background" for your dock. This can be anything you want.
3. Create one "button" which will be used multiple times behind each of the icons you want on your dock.
4. Gather the "icons" you want to use for your dock. These can be .png, .gif or even .ico images, but you want to use a format which has the ability to have a transparent background.
4. Create shortcuts to the applications you want to run and / or the folders you want to open.
5. Put the pieces together in a skin .ini file and off you go...

Let's do it...

The "Graphics"

First the "background". I won't go into much detail on this, it doesn't really matter what you use, as long as it looks good to you and is big enough to hold the buttons and icons you want.

I just did a quick background with a "rounded rectangle" shape and a gradient color in Photoshop.


Now let's create that "button" we will use over and over again for our dock.

First, there is a much more comprehensive guide on creating buttons at http://www.rainmeter.net/forum/viewtopic.php?f=15&t=124. Take a look there and make sure you understand the concept.

So we need to create the button, which will be a .png image containing THREE copies of our button arranged horizontally. I used Photoshop and first created a single version of my button on a transparent layer. I just drew a circle and used a color overlay to make it a nice orange brown color. Then I did a "bevel and emboss" to raise it up a bit and make it look like a button. This is going to be my "UP" state for the button.



Now we need to create the "DOWN" and "OVER" states for the button, so that we have all three states in one image. I created a new image, THREE TIMES as wide as that first button image. I had made the button image 50x50, so my new image is 150x50. Copy the button layer from the first image onto the new one.

You can also just use the original file and in Photoshop expand the "canvas" of the image to 150 wide. Either way...



Then I made two more copies of that layer containing my button, and changed each of them to reflect what I wanted for my "DOWN" and "OVER" states. I decided to lighten the color of the button for the "OVER" state, to "light it up" when you hover over it, and to reverse the "bevel and emboss" for the "DOWN" state, to make it look like the button has been "pushed".



Ok, save that button file as DockButton.png and WHEW! We are all done with graphics...

The "Skin"

Ok, let's build a skin. Start with the basics:

Code: Select all

;=================================================
; Rainmeter configuration file
; Updated June 25, 2009
;=================================================

;[BEGIN CONFIG FILE]==============================

[Rainmeter]
Author=Jeffrey Morley
Update=100
Note I have my "Update=" set to 100. This is to make sure the buttons are nice and responsive and there is no lag on the state changes. This is fine and won't use any additional CPU as long as the dock is the only thing in the skin. Keep your system monitors and WebParsers in their own skins with much higher refresh rates.

Code: Select all

[Variables]
LINKS="C:\Program Files\Rainmeter\Skins\MyDock\Links\"
This is the folder where I will keep all those "shortcuts" to my folders and application. I made it a variable so I don't have to type it over and over...

Code: Select all

[MeterBackground]
Meter=IMAGE
X=0
y=0
W=242
H=65
ImageName=images\DockBack.png
Now we create a "meter" for our background image.

Code: Select all

;[BUTTONS]====================================

[MeterCOMPUTER_BUTTON]
Meter=BUTTON
X=15
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#computer.lnk"]

[MeterCDRIVE_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#cdrive.lnk"]

[MeterDOCUMENTS_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#documents.lnk"]

[MeterFIREFOX_BUTTON]
Meter=BUTTON
X=5R
Y=8
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#firefox.lnk"]
And put on our "buttons" evenly spacing them out on the background with the X and Y statements.

As you can see, the meat and potatoes of this skin is the "ButtonCommand" statements on each button. This tells the skin to go find the shortcuts you created and put in "C:\Program Files\Rainmeter\Skins\MyDock\Links\" and run the shortcut when the button is clicked.

Code: Select all

;[ICONS]=======================================

[MeterCOMPUTER_ICON]
Meter=IMAGE
X=21
Y=15
H=32
W=32
ImageName=Images\icon_computer.png

[MeterCDRIVE_ICON]
Meter=IMAGE
X=24R
Y=15
H=32
W=32
ImageName=Images\icon_cdrive.png

[MeterDOCUMENTS_ICON]
Meter=IMAGE
X=24R
Y=15
H=32
W=32
ImageName=Images\icon_documents.png

[MeterFIREFOX_ICON]
Meter=IMAGE
X=21R
Y=15
H=32
W=35
ImageName=Images\icon_firefox.png
And then simply put our icons centered on top of our buttons and we are DONE!

The buttons will fire even though you are clicking on the icons on top of them, as the icons have no "action" associated with being clicked, so the click passes through and is handled by the buttons.

And as I said, we end up with this:

Image

And you can download the skin we just created here, complete with the photoshop .psd and .png files and everything you need to start building your own!

ftp://uzaeagle.serveftp.com/rainmeter/mydock/MyDock.zip
User avatar
Chewtoy
Moderator
Posts: 1010
Joined: June 10th, 2009, 12:44 pm
Location: Sweden

Re: Beginner's Guide to creating an Application Launcher / Dock

Chewtoy » June 26th, 2009, 10:03 am

So, Normal, clicked and Hover are all supposed to be in the same image, in that order? It's not 3 diffrent images?
I don't think, therefore I'm not.
DChaosBlade
Posts: 1
Joined: June 26th, 2009, 6:25 am

Re: Beginner's Guide to creating an Application Launcher / Dock

DChaosBlade » June 26th, 2009, 10:33 am

Chewtoy wrote:So, Normal, clicked and Hover are all supposed to be in the same image, in that order? It's not 3 diffrent images?
Correct. It seems it works similar to another program I used, where all three are in the same image, and the program automatically divides the image in three and simply displays one third at a time depending on it's state.
User avatar
jsmorley
Developer
Posts: 19588
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Beginner's Guide to creating an Application Launcher / Dock

jsmorley » June 26th, 2009, 1:44 pm

DChaosBlade wrote: Correct. It seems it works similar to another program I used, where all three are in the same image, and the program automatically divides the image in three and simply displays one third at a time depending on it's state.
Exactly...

Here is the DockButton.png image...

Image
User avatar
Jack with 4
Posts: 7
Joined: August 30th, 2009, 9:03 pm

Re: Beginner's Guide to creating an Application Launcher / Dock

Jack with 4 » September 20th, 2009, 12:47 pm

Its not running the shortcuts for me, It will open everything else but shortcuts.

Code: Select all

[M_foobar]
Meter=BUTTON
X=15
Y=2
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#foobar2000.lnk"]
Did I miss something?
User avatar
jsmorley
Developer
Posts: 19588
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Beginner's Guide to creating an Application Launcher / Dock

jsmorley » September 20th, 2009, 1:10 pm

Jack with 4 wrote:Its not running the shortcuts for me, It will open everything else but shortcuts.

Code: Select all

[M_foobar]
Meter=BUTTON
X=15
Y=2
ButtonImage=images\DockButton.png
ButtonCommand=!Execute ["#LINKS#foobar2000.lnk"]
Did I miss something?
It looks right. Are you sure you have LINKS set correctly up in the [Variables] section of the skin? It needs to be the correct path where the links are, with a trailing "\"
User avatar
Jack with 4
Posts: 7
Joined: August 30th, 2009, 9:03 pm

Re: Beginner's Guide to creating an Application Launcher / Dock

Jack with 4 » September 20th, 2009, 2:12 pm

EDIT:

I've been messing with the code with no success so I decided to try out yours, and yours didn't work. (I didn't forget to change LINKS var.)

Could I have a bugged Rainmeter or computer?
Last edited by Jack with 4 on September 20th, 2009, 8:24 pm, edited 1 time in total.
User avatar
Samus Aran
Posts: 86
Joined: August 7th, 2009, 11:23 pm

Re: Beginner's Guide to creating an Application Launcher / Dock

Samus Aran » September 20th, 2009, 6:05 pm

@jsmorley: You wouldn't mind telling me what clocks you have been using in your screenshots? :D
dragonmage
Developer
Posts: 1286
Joined: April 3rd, 2009, 4:31 am
Location: NC, US

Re: Beginner's Guide to creating an Application Launcher / Dock

dragonmage » September 21st, 2009, 6:53 am

Jack, please show us the path you are using in the LINKS variable.
User avatar
Jack with 4
Posts: 7
Joined: August 30th, 2009, 9:03 pm

Re: Beginner's Guide to creating an Application Launcher / Dock

Jack with 4 » September 21st, 2009, 8:23 pm

[Variables]
LINKS="C:\Documents and Settings\Jack\My Documents\Rainmeter\Skins\JackMeter\JackDock\Links\"

I put a shortcut in just my C:\ and changed it accordingly.
(LeftMouseDownAction=!Execute ["C:\foobar2000.lnk"])
Shortcut still didn't work...

Its only not using the shortcuts, but shortcuts for My documents, My Computer, etc. work fine.

Here is the entire skin I have at this point:
;- Thank you jeff morley for the tutorial -

[Rainmeter]
Author=Jack B - jackwith4@gmail.com
update=999000000
;- Altering update time didn't fix the problem

[Variables]
LINKS="C:\Documents and Settings\Jack\My Documents\Rainmeter\Skins\JackMeter\JackDock\Links\"


[M_background]
Meter=IMAGE
X=0
Y=22
H=20
W=410
ImageName=Images\bg.png

;_____ Icons ______
; I did the following below to shorten space I had to scroll through.
; shortcut didn't work as Meter=BUTTON either.
[M_foobaricon]
Meter=IMAGE
X=25
Y=2
H=32
W=32
ImageName=Images\Foobar.png
LeftMouseDownAction=!Execute ["#LINKS#foobar2000.lnk"]
; ^^^ using the link in links folder that doesn't work ^^^

[M_constructicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\config.png
LeftMouseDownAction=!Execute ["C:\Program Files\Scirra\Construct\Construct.exe"]
;^^^ direct path to "construct", works ^^^

[M_audacityicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\audacity.png
LeftMouseDownAction=!Execute ["C:\Program Files\Audacity\audacity.exe"]

[M_firefoxicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\fifo.png
LeftMouseDownAction=!Execute ["C:\Program Files\Mozilla Firefox\firefox.exe"]

[M_wlmicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\msngr.png
LeftMouseDownAction=!Execute ["C:\Program Files\Windows Live\Messenger\msnmsgr.exe"]

[M_charmapicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\mark.png
LeftMouseDownAction=!Execute ["%SystemRoot%\system32\charmap.exe"]

[M_notepadicon]
Meter=IMAGE
X=22R
Y=r
H=32
W=32
ImageName=Images\notepad.png
LeftMouseDownAction=!Execute ["#LINKS#notepad.lnk"]
; ^^^ using the link in links folder that doesn't work, like foobar2000^^^