It is currently March 28th, 2024, 10:58 am

Calculating Scroll bar Size and behavior

Get help with creating, editing & fixing problems with skins
Post Reply
User avatar
StArL0rd84
Posts: 424
Joined: February 8th, 2015, 10:07 pm
Location: EU, Denmark.

Calculating Scroll bar Size and behavior

Post by StArL0rd84 »

I am making a scrollable and resizable skin which in this example contains 20 items.

And i want to make a scrollbar for it too.
It is my goal to make it so that the knob/handle represents the visible items,
and the blank areas represents whats currently hidden.

If i did not explain that clearly, please take a look at Google Chrome's scroll bar.
I want it to behave just like it does.

I believe i have all the values to calculate it, but i think i have starred myself blind on it trying to make it work.
Could use a fresh set of eyes to look at it ;P
examplegif.gif
The code below is my current calculation for the knob/handle height,
but please take a look at the attached .rmskin to get the full picture.

Code: Select all

[mKnobheight]
Measure=Calc
Formula=((#WindowHeightMax#-#WindowHeight#)-#WindowHeight#)
DynamicVariables=1
InvertMeasure=1
Attachments
scrollr_1.rmskin
(235.81 KiB) Downloaded 34 times
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Calculating Scroll bar Size and behavior

Post by balala »

First approach: I've rewritten a few things into the code of the skin, getting it to work as intended, AS LONG as the height is kept enough high to get the [mKnobheight] measure positive.
If this measure goes negative, the code doesn't work well. Check it please.
As the next step, this is what has to be resolved. Let's see if I or anyone else will succeed.
The new code:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[Metadata]
Name=Scrollr
Author=StArL0rd84
Information=Example skin to figure out the scrolling mechanics.
Version=1
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0

[Variables]
@include=#@#Include\Variables.inc
@include2=#@#Include\Measures.inc
;@include3=#@#Include\Styles.inc

[ItemBackground]
Meter=Shape
Shape=Rectangle 0,0,220,#WindowHeight# | StrokeWidth 0 | Fill Color 255,0,0,255
Shape2=Rectangle 1,1,218,(#WindowHeight#-2) | StrokeWidth 0 | Fill Color 0,0,0,255
DynamicVariables=1
Group=BG
;MouseScrollUpAction=[!UpdateMeasureGroup Max][!SetVariable Scroll "(((#Scroll#-#ScrollInc#)<#ScrollMin#)?#ScrollMin#:(#Scroll#-#ScrollInc#))"][!WriteKeyValue Variables Scroll "(((#Scroll#-#ScrollInc#)<#ScrollMin#)?#ScrollMin#:(#Scroll#-#ScrollInc#))" "#Var#"][!UpdateMeter Content1][!Redraw][!Update]
;MouseScrollDownAction=[!UpdateMeasureGroup Max][!SetVariable Scroll "(((#Scroll#+#ScrollInc#)>[mScrollMax])?[mScrollMax]:(#Scroll#+#ScrollInc#))"][!WriteKeyValue Variables Scroll "(((#Scroll#+#ScrollInc#)>[mScrollMax])?[mScrollMax]:(#Scroll#+#ScrollInc#))" "#Var#"][!UpdateMeter Content1][!Redraw][!Update]
MouseScrollUpAction=[!UpdateMeasureGroup Max][!SetVariable Scroll "(Clamp((((#Scroll#-#ScrollInc#)<#ScrollMin#)?#ScrollMin#:(#Scroll#-#ScrollInc#)),2,(#WindowHeight#-[mKnobheight]-2)))"][!WriteKeyValue Variables Scroll "(((#Scroll#-#ScrollInc#)<#ScrollMin#)?#ScrollMin#:(#Scroll#-#ScrollInc#))" "#Var#"][!UpdateMeter Content1][!Redraw][!Update]
MouseScrollDownAction=[!UpdateMeasureGroup Max][!SetVariable Scroll "(Clamp((((#Scroll#+#ScrollInc#)>[mScrollMax])?[mScrollMax]:(#Scroll#+#ScrollInc#)),2,(#WindowHeight#-[mKnobheight]-2)))"][!WriteKeyValue Variables Scroll "(((#Scroll#+#ScrollInc#)>[mScrollMax])?[mScrollMax]:(#Scroll#+#ScrollInc#))" "#Var#"][!UpdateMeter Content1][!Redraw][!Update]
MouseActionCursor=0
DynamicVariables=1

[ItemContainer]
Meter=Shape
Shape=Rectangle 0,0,220,#WindowHeight# | StrokeWidth 0 | Fill Color 255,0,0,255
Shape2=Rectangle 1,1,218,(#WindowHeight#-2) | StrokeWidth 0 | Fill Color 0,0,0,255
DynamicVariables=1
Group=BG

[ItemWindowDrag]
Meter=Shape
Shape=Rectangle 0,#WindowHeight#,220,5 | StrokeWidth 0 | Fill Color 0,255,0,255
DynamicVariables=1
LeftMouseDownAction=[!CommandMeasure mWindowDrag "Start"]
Group=BG
MouseActionCursorName=aero_ns.cur

[ScrollBarBackground]
Meter=Shape
Shape=Rectangle 0,0,30,#WindowHeight# | StrokeWidth 0 | Fill Color 255,0,0,255
Shape2=Rectangle 1,1,28,(#WindowHeight#-2) | StrokeWidth 0 | Fill Color 0,0,0,255
DynamicVariables=1
X=240

[ScrollKnob]
Meter=Shape
Shape=Rectangle 1,0,28,[mKnobheight] | StrokeWidth 0 | Fill Color 0,0,255,255
;(clamp([mKnobheight],20,#WindowHeight#))
DynamicVariables=1
X=r
Y=#Scroll#
;(clamp(#Scroll#,0,#WindowHeight#))

[Item1]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight# | StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=-#Scroll#
DynamicVariables=1
Group=Content

[Item2]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item3]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item4]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item5]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item6]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item7]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item8]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item9]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item10]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item11]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item12]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item13]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item14]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item15]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item16]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item17]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item18]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item19]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[Item20]
Meter=Shape
Shape=Rectangle 0,0,220,#ItemHeight#| StrokeWidth 0 | Fill Color 150,150,150,100
Container=ItemContainer
Y=(#ItemHeight#+#ItemSpacing#)r

[1]
Meter=String
X=110
Y=(4-#Scroll#)
Text=1
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer
DynamicVariables=1
Group=Content

[2]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=2
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[3]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=3
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[4]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=4
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[5]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=5
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[6]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=6
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[7]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=7
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[8]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=8
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[9]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=9
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[10]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=10
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[11]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=11
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[12]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=12
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[13]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=13
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[14]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=14
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[15]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=15
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[16]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=16
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[17]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=17
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[18]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=18
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[19]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=19
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer

[20]
Meter=String
X=r
Y=(#ItemHeight#+#ItemSpacing#)r
Text=20
FontFace=Arial
FontSize=12
FontColor=255, 255, 255, 255
AntiAlias=1
StringAlign=Center
Container=ItemContainer
Note: a such mouse commanded skin can have the Update value set to -1, to not get it updated continuously. If there are no other details which make this impossible, take into account to replace the default Update with Update=-1 ([Rainmeter] section).
User avatar
StArL0rd84
Posts: 424
Joined: February 8th, 2015, 10:07 pm
Location: EU, Denmark.

Re: Calculating Scroll bar Size and behavior

Post by StArL0rd84 »

balala wrote: April 5th, 2019, 7:26 pm First approach: I've rewritten a few things into the code of the skin, getting it to work as intended, AS LONG as the height is kept enough high to get the [mKnobheight] measure positive.
If this measure goes negative, the code doesn't work well. Check it please.
As the next step, this is what has to be resolved. Let's see if I or anyone else will succeed.

Note: a such mouse commanded skin can have the Update value set to -1, to not get it updated continuously. If there are no other details which make this impossible, take into account to replace the default Update with Update=-1 ([Rainmeter] section).
Yeah, it's only a problem when the measure goes negative.
And you're right. I should set the skins update rate to -1.

I have changed the ScrollKnob meter a bit and clamped some more values:

Code: Select all

[ScrollKnob]
Meter=Shape
Shape=Rectangle 1,0,28,(clamp([mKnobheight],20,#WindowHeight#)) | StrokeWidth 0 | Fill Color 0,0,255,255
DynamicVariables=1
X=r
Y=(clamp(#Scroll#,1,(#WindowHeight#-#WindowHeightMin#-1)))
It restricts the knob height to not go under WindowHeightMin=20
But then there's a range where the knob does not move.
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Calculating Scroll bar Size and behavior

Post by balala »

StArL0rd84 wrote: April 6th, 2019, 6:53 am But then there's a range where the knob does not move.
Yes, if you set the height to low. But this is an extreme situation. I think you can set the skin to limit the height to a possible smallest value.
Post Reply