Creating Scrolling Icon Dock? [Coding Help]

[bstonearch]

Hey everyone, hopefully this issue can be resolved relatively quickly. I'm looking for a way in which I can click on a left or right arrow (as shown in the picture next to the first and last icons) and load a new set of icons with different functions. In effect, making a scrolling icon dock. It wouldn't need to physically scroll. When clicking on either arrow it could just load a new set of icons with no added effects. I've linked my DeviantArt page which has a downloadable skin folder with everything inside of it.

http://bstonearch.deviantart.com/art/Metro-Icons-2-1-425248710



Thanks for the help!

[FlyingHyrax]

If you just want a whole new page of icons, that can be done pretty easily. Here is one way:

MetroDock.ini

Code: Select all

[Rainmeter]

[Metadata]
Author=Brandon S
Name=Metro Icons
;---------------------------------------------------------------------------------------
[Variables]
current=p3

@Include="#current#.inc"

p1.inc

Code: Select all

[Arrow Left]
Meter=IMAGE
SolidColor=0,0,0,1
x=20
y=40
ImageName=arrow left.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p3" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

[Computer]
Meter=IMAGE
x=30r
y=20
ImageName=\Devices & Drives\Computer.jpg
LeftMouseUpAction=!execute ["::{20D04FE0-3AEA-1069-A2D8-08002B30309D}"]
ToolTipText="Computer"

[Documents]
Meter=IMAGE
x=90r
y=20
ImageName=\Folders & OS\Documents2.jpg
LeftMouseUpAction=!execute ["C:\Users\Brandon\Documents"]
ToolTipText="Documents"

[Google Music]
Meter=IMAGE
x=90r
y=20
ImageName=\google services\google music.jpg
LeftMouseUpAction=!Execute ["https://play.google.com/music/listen#/now"]
ToolTipText="Google Music"

[Gmail]
Meter=IMAGE
x=90r
y=20
ImageName=\google services\gmail.jpg
LeftMouseUpAction=!Execute ["www.gmail.com"]
ToolTipText="Gmail"

[PS]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\adobe photoshop.jpg
LeftMouseUpAction=!Execute ["C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Photoshop.exe"]
ToolTipText="Adobe Photoshop"



[Arrow Right]
Meter=IMAGE
SolidColor=0,0,0,1
x=90r
y=40
ImageName=arrow right.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p2" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

p2.inc

Code: Select all

[Arrow Left]
Meter=IMAGE
SolidColor=0,0,0,1
x=20
y=40
ImageName=arrow left.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p1" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

[AI]
Meter=IMAGE
x=30r
y=20
ImageName=\applications\adobe illustrator.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Adobe\Adobe Illustrator CS5\Support Files\Contents\Windows\Illustrator.exe"]
ToolTipText="Adobe Illustrator"

[ID]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\adobe indesign.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Adobe\Adobe InDesign CS5.5\InDesign.exe"]
ToolTipText="Adobe InDesign"

[Microsoft Word]
Meter=IMAGE
x=90r
y=20
ImageName=\office apps\word 2013.jpg
LeftMouseUpAction=!Execute [C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Office]
ToolTipText="Microsoft Word"

[Rhino]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\rhino.jpg
LeftMouseUpAction=!Execute ["C:\Program Files\Rhinoceros 5.0 (64-bit)\System\Rhino.exe"]
ToolTipText="Rhino"

[Autodesk]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\autodesk.jpg
LeftMouseUpAction=!Execute ["C:\Program Files\Autodesk\AutoCAD 2013\acad.exe"]
ToolTipText="Autodesk"

[Arrow Right]
Meter=IMAGE
SolidColor=0,0,0,1
x=90r
y=40
ImageName=arrow right.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p3" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

p3.inc

Code: Select all

[Arrow Left]
Meter=IMAGE
SolidColor=0,0,0,1
x=20
y=40
ImageName=arrow left.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p2" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

[SketchUp]
Meter=IMAGE
x=30r
y=20
ImageName=\google services\Google Sketchup2.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Google\Google SketchUp 8\SketchUp.exe"]
ToolTipText="SketchUp"

[Vuze]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\vuze.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Vuze\Azureus.exe"]
ToolTipText="Vuze"

[Chrome]
Meter=IMAGE
x=90r
y=20
ImageName=\web browsers\google canary.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"]
ToolTipText="Chrome"

[Facebook]
Meter=IMAGE
x=90r
y=20
ImageName=\internet shortcuts\Facebook alt 1.jpg
LeftMouseUpAction=!Execute ["www.facebook.com"]
ToolTipText="Facebook"

[Steam]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\steam.jpg
LeftMouseUpAction=!Execute ["C:\Program Files (x86)\Steam\Steam.exe"]
ToolTipText="Steam"

[Plex]
Meter=IMAGE
x=90r
y=20
ImageName=\applications\plex.jpg
LeftMouseUpAction=!Execute ["http://plex.tv/web/app"]
ToolTipText="Plex"

[Arrow Right]
Meter=IMAGE
SolidColor=0,0,0,1
x=90r
y=40
ImageName=arrow right.png
LeftMouseUpAction=[!WriteKeyValue "Variables" "current" "p1" "#CURRENTPATH##CURRENTFILE#"][!Refresh]

Explanation
Basically, you are splitting your dock up into multiple files, with a separate file for each 'page.' All your main file does is use @Include to show the current 'page.' Each external page file has its own left and right arrows, and each has a !WriteKeyValue bang that changes the value of the "current" variable to the page before or after itself and refreshes the skin.

There are other ways to get a similar effect - you could do the same thing while keeping everything in the same file by using Groups of meters and Show/Hide bangs.

If you want more of an actual scrolling effect - like shifting only one icon left or right at a time when you click the arrows - I'm less sure, but personally it would be easiest for me to do something like that in Lua.

[bstonearch]

Hey, thanks for the quick response. This is exactly what I was looking for!

[exper1mental]

First off, welcome to the Rainmeter forums.

Couple of things I noticed about your skin that could use a little tweaking (and then I'll answer ur question):

• 1. Your skin is posted in the wrong section of the DeviantART forum. Under system monitoring you should put it in the Rainmeter category, currently it is listed under SkinMem.
  2. If you right-click on the skin and click Manage near the bottom left-hand corner is a button called Create .rmskin package. This is the default way to share and install rainmeter skins and also the only file format I think that is allowed in the Rainmeter subsection of DeviantART.
  3. In your code you use the !Execute bang still. This is no longer needed and is understood when you write bangs like ["www.website.com"].
  4. You can clean up the Metro Icons 2 folder by putting the images and their folders in a subfolder called @Resources. This folder is a built-in variable for Rainmeter used for accessing images and files for skins. Example, instead of the computer image path being \Devices & Drives\Computer.jpg it would be #@#Devices & Drives\Computer.jpg. Notice I removed the \ before Devices, this is b/c when you write #@# it automatically when add that \ on its own when retrieving the file.
  5. The file path ["C:\Users\Brandon\Documents"] will only work if the users name is Brandon. Instead, use the built-in windows variable %UserProfile%, so it would be ["%UserProfile%\Documents"].
  6. C:\ProgramData, C:\Program Files (x86), and C:\Program Files can be rewritten as %ProgramData%, %ProgramFiles(x86)%, and %ProgramFiles%. This uses the built-in windows variables to locate the program___ paths. Besure to leave the \ after them. Bear in mind that shortcuts which use %ProgramFiles(x86) will not work on 32-bit systems, so someone using a 32-bit system will have to edit the skin to get it to work for them.

If you don't mind there being no fancy fade affects you can relatively easily cycle through groups of icons.

• 1. To all your current meters add Group= and pick a group name (such as Group1).
  2. Copy the meters Arrow Left and Arrow Right, rename them (such as Arrow Left2), and change their group name to a second group name (such as Group2). Also add Hidden=1 to them. Be sure that all icons you want in group2 also have the group info and are hidden.
  3. Add LeftMouseUpAction=[!HideMeterGroup Group1][!ShowMeterGroup Group2] to either Arrow Left or Right. This will be how you access the second group of icons.
  4. Add LeftMouseUpAction=[!HideMeterGroup Group2][!ShowMeterGroup Group1] to Arrow Left2 or Right2 (preferably the opposite of what u did for Arrow Left or Right). This will be how you go back to the Group1 icons

You can repeat this system over and over again to add as many different sets of icons as you want. The only limitations is that if you have very many different icon groups cycling through them could become annoying.


Hope this is helpful for you!


EDIT: Looks like someone beat me to the post. I'll leave this as an alternative method.

[exper1mental]

I just had an idea an easier way to switch between groups of icons based on the concept FlyingHyrax proposed. Instead of adding .inc settings files or meter groups you'd simply create several .ini files in the same folder. The arrows would use the !ActivateConfig to switch between icon groups. Hence allowing you to have a fade effect between icon groups without advanced coding,

Example:
Two files, MetroDock.ini and MetroDock2.ini
Add LeftMouseAction=[!ActivateConfig "Metro Icons 2" "MetroDock2.ini] to Left Arrow in MetroDock.ini
Then add LeftMouseAction=[!ActivateConfig "Metro Icons 2" "MetroDock.ini] to Right Arrow in MetroDock2.ini.

This allows you to keep the code as simple as possible while also having smooth transitions between all the icon groups.