It is currently June 25th, 2019, 6:33 am

Create "scrollbar"

Help with creating, editing & fixing problems with skins
raziel_albinus
Posts: 10
Joined: May 28th, 2015, 6:51 pm

Create "scrollbar"

raziel_albinus » May 28th, 2015, 7:08 pm

Hello,

I am French, sorry for the bad language used.


I want to create a scrollbar on the right of the pictures. Each image will be an icon that will launch a program or a game.
The scrollbar will move from one image to another.

Or does bring up an image at a time and when I click on an arrow it shows me the an other image.

I do not know or find in the manual an help or it done another way to achieve that.

Image


Thank.
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create "scrollbar"

balala » May 29th, 2015, 12:54 pm

I'm not sure I exactly understood what you'd like, but if I'm not wrong, here's a solution:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
OnRefreshAction=[!Move "(#SCREENAREAWIDTH#-[MeterImage0:W]-30)" "0"]

[Variables]
ImgNo=0

[MeasureImgNo]
Measure=Calc
Formula=(( #ImgNo# < 0 ) ? ( Abs ( 5 - Abs ( #ImgNo# ))) : ( Abs ( #ImgNo# )))
DynamicVariables=1

[MeterImage0]
Meter=Image
X=0
Y=((#SCREENAREAHEIGHT#/2)-50)
W=150
H=100
SolidColor=224,16,65
Hidden=([MeasureImgNo]<>0)
DynamicVariables=1

[MeterImage1]
Meter=Image
X=0r
Y=0r
W=150
H=100
SolidColor=80,230,77
Hidden=([MeasureImgNo]<>1)
DynamicVariables=1

[MeterImage2]
Meter=Image
X=0r
Y=0r
W=150
H=100
SolidColor=26,85,200
Hidden=([MeasureImgNo]<>2)
DynamicVariables=1

[MeterImage3]
Meter=Image
X=0r
Y=0r
W=150
H=100
SolidColor=82,160,82
Hidden=([MeasureImgNo]<>3)
DynamicVariables=1

[MeterImage4]
Meter=Image
X=0r
Y=0r
W=150
H=100
SolidColor=66,240,195
Hidden=([MeasureImgNo]<>4)
DynamicVariables=1

[StyleImage]
Meter=Image
X=([MeterImage0:W]+10)r
Y=0
W=20
H=#SCREENAREAHEIGHT#
SolidColor=255,0,0
DynamicVariables=1

[MeterScrollUp]
Meter=string
X=10r
Y=10r
W=20
H=20
StringAlign=CENTERCENTER
FontColor=255,255,255
FontSize=10
SolidColor=100,100,100,150
Text=p
FontFace=Wingdings 3
LeftMouseUpAction=[!SetVariable ImgNo "((#ImgNo#+1)%5)"]
DynamicVariables=1

[MeterScrollDown]
Meter=string
X=0r
Y=(#SCREENAREAHEIGHT#-60)r
W=20
H=20
StringAlign=CENTERCENTER
FontColor=255,255,255
FontSize=10
SolidColor=100,100,100,150
Text=q
FontFace=Wingdings 3
LeftMouseUpAction=[!SetVariable ImgNo "((#ImgNo#-1)%5)"]
DynamicVariables=1
You'll have a vertical scrollbar on the right side of the screen and an image. You should use ImageName options on [MeterImage0], ... ,[MeterImage4], instead of SolidColor. Also, add the LeftMouseUpAction on each of those five image meters, to can open the needed game/app with each of them.
raziel_albinus
Posts: 10
Joined: May 28th, 2015, 6:51 pm

Re: Create "scrollbar"

raziel_albinus » May 29th, 2015, 6:31 pm

Thank you very much, it's almost that. I have to move the scrollbar with the middlemouse and not the arrows.

So, I do this but I would like the Mouse action zone be the image.
What I do is probably to rewrite properly.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
OnRefreshAction=[!Move "(#SCREENAREAWIDTH#-[MeterImage0:W]-30)" "0"]

[Variables]
ImgNo=0

[MeasureImgNo]
Measure=Calc
Formula=(( #ImgNo# < 0 ) ? ( Abs ( 10 - Abs ( #ImgNo# ))) : ( Abs ( #ImgNo# )))
DynamicVariables=1

[MeterImage0]
Meter=Image
X=0
Y=0
W=170
H=350
ImageName=battlenet.jpg
Hidden=([MeasureImgNo]<>0)
DynamicVariables=1

[MeterImage1]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=diablo3.jpg
Hidden=([MeasureImgNo]<>1)
DynamicVariables=1

[MeterImage2]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=hearthstone.jpg
Hidden=([MeasureImgNo]<>2)
DynamicVariables=1

[MeterImage3]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=heroesofthestorm.jpg
Hidden=([MeasureImgNo]<>3)
DynamicVariables=1

[MeterImage4]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=minecraft.jpg
Hidden=([MeasureImgNo]<>4)
DynamicVariables=1

[MeterImage5]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=origin.jpg
Hidden=([MeasureImgNo]<>5)
DynamicVariables=1

[MeterImage6]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=overwatch.jpg
Hidden=([MeasureImgNo]<>6)
DynamicVariables=1

[MeterImage7]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=starcraft2.jpg
Hidden=([MeasureImgNo]<>7)
DynamicVariables=1

[MeterImage8]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=steam.jpg
Hidden=([MeasureImgNo]<>8)
DynamicVariables=1

[MeterImage9]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=warcraft.jpg
Hidden=([MeasureImgNo]<>9)
DynamicVariables=1

[MeterScrollDown/Up]
Meter=image
Hidden=1
X=0
Y=0
W=170
H=350
ImageName=warcraft.jpg
StringAlign=CENTERCENTER
MouseScrollDownAction=[!SetVariable ImgNo "((#ImgNo#+1)%10)"]
MouseScrollUpAction=[!SetVariable ImgNo "((#ImgNo#-1)%10)"]
DynamicVariables=1
raziel_albinus
Posts: 10
Joined: May 28th, 2015, 6:51 pm

Re: Create "scrollbar"

raziel_albinus » May 29th, 2015, 8:33 pm

Ok i found

I post the code if someone would use.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
OnRefreshAction=[!Move "(#SCREENAREAWIDTH#-[MeterImage0:W]-30)" "0"]

[Variables]
ImgNo=0

[MeterScrollDown/Up]
Meter=image
X=0
Y=0
W=170
H=350
ImageName=warcraft.jpg
ImageAlpha=0
StringAlign=CENTERCENTER
MouseScrollDownAction=[!SetVariable ImgNo "((#ImgNo#+1)%10)"]
MouseScrollUpAction=[!SetVariable ImgNo "((#ImgNo#-1)%10)"]
DynamicVariables=1

[MeasureImgNo]
Measure=Calc
Formula=(( #ImgNo# < 0 ) ? ( Abs ( 10 - Abs ( #ImgNo# ))) : ( Abs ( #ImgNo# )))
DynamicVariables=1

[MeterImage0]
Meter=Image
X=0
Y=0
W=170
H=350
ImageName=battlenet.jpg
LeftMouseUpAction=http://www.outlook.com
Hidden=([MeasureImgNo]<>0)
DynamicVariables=1

[MeterImage1]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=diablo3.jpg
Hidden=([MeasureImgNo]<>1)
DynamicVariables=1

[MeterImage2]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=hearthstone.jpg
Hidden=([MeasureImgNo]<>2)
DynamicVariables=1

[MeterImage3]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=heroesofthestorm.jpg
Hidden=([MeasureImgNo]<>3)
DynamicVariables=1

[MeterImage4]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=minecraft.jpg
Hidden=([MeasureImgNo]<>4)
DynamicVariables=1

[MeterImage5]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=origin.jpg
Hidden=([MeasureImgNo]<>5)
DynamicVariables=1

[MeterImage6]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=overwatch.jpg
Hidden=([MeasureImgNo]<>6)
DynamicVariables=1

[MeterImage7]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=starcraft2.jpg
Hidden=([MeasureImgNo]<>7)
DynamicVariables=1

[MeterImage8]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=steam.jpg
Hidden=([MeasureImgNo]<>8)
DynamicVariables=1

[MeterImage9]
Meter=Image
X=0r
Y=0r
W=170
H=350
ImageName=warcraft.jpg
Hidden=([MeasureImgNo]<>9)
DynamicVariables=1

User avatar
Mr. Spock
Posts: 46
Joined: August 5th, 2013, 6:07 pm
Location: The Netherlands

Re: Create "scrollbar"

Mr. Spock » June 7th, 2015, 6:17 am

Just a qeustion if this is possible
Image
I think people know about my HTPC screen, but i want to improve it.

I want to try to make a scrollbar that goes from right to left over the screen or the other way
If reaching the end of all the functions it returns to the first so it is like a lope
I want to place it making use of the whole horizontal screen width and if possible if using a other screen resolution it change accordingly
(with all the functions i want to place on the scrollbar i know it's gone be bigger as the screen width itself)
and if possible controled by the arrow keys of the keyboard
Indeed if the function i want to use is standing in the middle i want to show it as seen in the picture and i want to activate the function by pressing enter on the keyboard
Second qeustion is it also possible that the function is activate a rainmeter skinpart
So example if i scroll with the arrow keys to the weather function and i press enter it activate the weather skin ?

I know the noob has something crazy in his mind again :D
Just want to know if it's possible before i start on something that's out of reach
Last edited by Brian on June 8th, 2015, 2:22 am, edited 1 time in total.
Reason: Please use [hsimg] for larger images.
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create "scrollbar"

balala » June 7th, 2015, 7:54 pm

Here's a modified version of my previous code:

Code: Select all

[Rainmeter]
Update=-1
DynamicWindowSize=1
OnRefreshAction=[!Move "0" "0"]
OnFocusAction=[!CommandMeasure MeasureMoveLeft Start][!CommandMeasure MeasureMoveRight Start][!CommandMeasure MeasureEnter Start]
OnUnfocusAction=[!CommandMeasure MeasureMoveLeft Stop][!CommandMeasure MeasureMoveRight Stop][!CommandMeasure MeasureEnter Stop]

[Variables]
ImgNo=0
NumOfImages=6
XPosImg0=100
Action0=[shell:DocumentsLibrary]
Action1=[Notepad]
Action2=[firefox]
Action3=[MSPaint]
Action4=[calc]
Action5=[wmplayer]

[MeasureAction]
Measure=Calc
Formula=#ImgNo#
DynamicVariables=1
IfCondition=(MeasureAction=0)
IfTrueAction=[!SetVariable Action "#Action0#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition2=(MeasureAction=1)
IfTrueAction2=[!SetVariable Action "#Action1#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition3=(MeasureAction=2)
IfTrueAction3=[!SetVariable Action "#Action2#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition4=(MeasureAction=3)
IfTrueAction4=[!SetVariable Action "#Action3#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition5=(MeasureAction=4)
IfTrueAction5=[!SetVariable Action "#Action4#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition6=(MeasureAction=5)
IfTrueAction6=[!SetVariable Action "#Action5#"][!UpdateMeasure "MeasureEnter"][!Redraw]

[MeterBackground]
Meter=Image
X=0
Y=0
W=#SCREENAREAWIDTH#
H=20
SolidColor=180,180,180,150
DynamicVariables=1
MouseScrollDownAction=[!SetVariable ImgNo "((#ImgNo#>0)?(#ImgNo#-1):(#NumOfImages#-1))"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable ImgNo "((#ImgNo#+1)%#NumOfImages#)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterScrollLeft]
Meter=string
X=10r
Y=10r
W=20
H=20
StringAlign=CENTERCENTER
FontColor=255,255,255
FontSize=10
SolidColor=50,50,50,150
Text=t
FontFace=Wingdings 3
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "100,100,100,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "50,50,50,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=[!SetVariable ImgNo "((#ImgNo#>0)?(#ImgNo#-1):(#NumOfImages#-1))"][!UpdateMeasure "MeasureAction"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterScrollRight]
Meter=string
X=(#SCREENAREAWIDTH#-20)r
Y=0r
W=20
H=20
StringAlign=CENTERCENTER
FontColor=255,255,255
FontSize=10
SolidColor=50,50,50,150
Text=u
FontFace=Wingdings 3
MouseOverAction=[!SetOption #CURRENTSECTION# SolidColor "100,100,100,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# SolidColor "50,50,50,150"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=[!SetVariable ImgNo "((#ImgNo#+1)%#NumOfImages#)"][!UpdateMeasure "MeasureAction"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterPosition]
Meter=Image
X=(20+#ImgNo#*[MeterPosition:W])
Y=0
W=(([MeterBackground:W]-40)/#NumOfImages#)
H=20
SolidColor=255,255,255
DynamicVariables=1

[MeasureMoveLeft]
Measure=Plugin
Plugin=HotKey
HotKey=LEFT
KeyDownAction=[!SetVariable ImgNo "((#ImgNo#>0)?(#ImgNo#-1):(#NumOfImages#-1))"][!UpdateMeasure "#CURRENTSECTION#"][!UpdateMeasure "MeasureAction"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeasureMoveRight]
Measure=Plugin
Plugin=HotKey
HotKey=RIGHT
KeyDownAction=[!SetVariable ImgNo "((#ImgNo#+1)%#NumOfImages#)"][!UpdateMeasure "#CURRENTSECTION#"][!UpdateMeasure "MeasureAction"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeasureEnter]
Measure=Plugin
Plugin=HotKey
HotKey=Enter
KeyDownAction=#Action#
DynamicVariables=1

[MeterHighlighted]
Meter=Image
X=(Clamp(([MeterSoft0:X]+(((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft2:W])/2)*#ImgNo#)),#XPosImg0#,(#XPosImg0#+2*((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft3:W])/2))))
Y=40
W=[MeterSoft1:W]
H=[MeterSoft1:H]
SolidColor=160,160,160,150
DynamicVariables=1

[MeterSoft0]
Meter=Image
ImageName=#@#Soft0.png
X=(#XPosImg0#-((#ImgNo#>2)?(((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft1:W])/2)*(#ImgNo#-2)):0))
Y=40
DynamicVariables=1
LeftMouseUpAction=#Action0#

[MeterSoft1]
Meter=Image
ImageName=#@#Soft1.png
X=((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft2:W])/2)r
Y=0r
DynamicVariables=1
LeftMouseUpAction=#Action1#

[MeterSoft2]
Meter=Image
ImageName=#@#Soft2.png
X=((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft3:W])/2)r
Y=0r
DynamicVariables=1
LeftMouseUpAction=#Action2#

[MeterSoft3]
Meter=Image
ImageName=#@#Soft3.png
X=((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft4:W])/2)r
Y=0r
DynamicVariables=1
LeftMouseUpAction=#Action3#

[MeterSoft4]
Meter=Image
ImageName=#@#Soft4.png
X=((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft5:W])/2)r
Y=0r
DynamicVariables=1
LeftMouseUpAction=#Action4#

[MeterSoft5]
Meter=Image
ImageName=#@#Soft5.png
X=((#SCREENAREAWIDTH#-2*#XPosImg0#-[MeterSoft5:W])/2)r
Y=0r
DynamicVariables=1
LeftMouseUpAction=#Action5#
A few things about it:
1. This is a launcher skin. I used six image meters, which can be used to launch six apps. You can use some other meters, if you need so.
2. The NumOfImages variable represent the number of image meters. If you want to use less meters, fix the number. If you want to use more, you have to add the [MeterSoft6], ... meters to the code (be careful, first meter is [MeterSoft0], not [MeterSoft1]!) and also need to fix some minor things (like adding other IfConditions to the [MeasureAction] measure).
3. The XPosImg0 variable is the horizontal position of the first image meter.
4. The Action0, Action1 and so on variables, are the action asociated with each meter.
5. You can control the skin with mouse, mouse scroll and with the keyboard. Last possibility needs the HotKey plugin (by Brian - congratulations, it's a very useful and well made plugin). It is included into the attached installer package.
Despite it's not exactly what you asked for, I hope this skin will help you. Let me know if it is.
You do not have the required permissions to view the files attached to this post.
User avatar
Mr. Spock
Posts: 46
Joined: August 5th, 2013, 6:07 pm
Location: The Netherlands

Re: Create "scrollbar"

Mr. Spock » June 9th, 2015, 12:44 am

Thx Balala

Let's see if i can figur it out and get it to work as i have in my mind
It really come very close already.
Still a qeustion in a little test run i have the following problem
When using the left mouse it works great with the !ToggleConfig "New folder 1" "IMDB Rainmeter.ini"
It run the skin by clicking again it close.
Now i want to do the same when the icon is highlighted and i press enter
But when using Action1=[!ToggleConfig "New folder 1" "IMDB Rainmeter.ini] it opens the one before so the explorer but not the Imdb skin
Where do i go wrong ?
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create "scrollbar"

balala » June 9th, 2015, 8:40 am

The problem is that on my code, on the IfTrueAction option of the [MeasureAction] section, we have this bang: [!SetVariable Action "#Action0#"]. The Action0 variable you want to use, already contain quotation marks and if you want to use quotation marks inside other quotation marks, you have to use magic quotes. So, modify that bang on the IfTrueAction to this: [!SetVariable Action """#Action0#"""].
User avatar
Mr. Spock
Posts: 46
Joined: August 5th, 2013, 6:07 pm
Location: The Netherlands

Re: Create "scrollbar"

Mr. Spock » June 19th, 2015, 3:45 am

Sjips not smart in of yet

I edit your skin and the first work like a charm even the enter press work but the following one doen't work
Wher do i go wrong ?

Code: Select all

[Variables]
ImgNo=0
NumOfImages=6
XPosImg0=100
Action0=[!ToggleConfig "ScrollBar\Buttons" "Buttons.ini"]
Action1=[!ToggleConfig "ScrollBar\IMDB" "Imdb.ini"]
Action2=[!ToggleConfig "ScrollBar\HDD" "HDD.ini"]
Action3=[MSPaint]
Action4=[calc]
Action5=[wmplayer]

[MeasureAction]
Measure=Calc
Formula=#ImgNo#
DynamicVariables=1
IfCondition=(MeasureAction=0)
IfTrueAction=[!SetVariable Action """#Action0#"""][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition2=(MeasureAction=1)
IfTrueAction2=[!SetVariable Action """#Action1#"""][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition3=(MeasureAction=2)
IfTrueAction3=[!SetVariable Action """#Action2#"""][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition4=(MeasureAction=3)
IfTrueAction4=[!SetVariable Action """#Action3#"""][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition5=(MeasureAction=4)
IfTrueAction5=[!SetVariable Action "#Action4#"][!UpdateMeasure "MeasureEnter"][!Redraw]
IfCondition6=(MeasureAction=5)
IfTrueAction6=[!SetVariable Action "#Action5#"][!UpdateMeasure "MeasureEnter"][!Redraw]
User avatar
balala
Rainmeter Sage
Posts: 8308
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create "scrollbar"

balala » June 19th, 2015, 3:41 pm

What you mean by "doesn't work"? It opens at least the Paint, Calculator or WMP? If it is but it don't unhide / hide the skins (just the !ToggleConfig bangs don't work), check if you have for sure the skins in the provided paths. For me, it's working with existing skins. One small issue you might have on the IfTrueAction4, because the Action3 variable, don't contain quotation marks, so, here you should remove the magic quotes, leaving just IfTrueAction4=[!SetVariable Action "#Action3#"][!UpdateMeasure "MeasureEnter"][!Redraw].