Jump to content

Scrollbar position algorithm

Feche1320

By Feche1320
in Scripting

Recommended Posts

Feche1320 Hustler

Feche1320

Posted
Posted

I made this simple scroll, I managed to get the scrollbar size depending on the amount of maps, but I need the algorithm to move the scrollbar according to the index position (variable goes +1 up, -1 down), I've been for hours trying different codes but no success.. this is what I've got so far

  
-- Scroll pos 
local mapcount = _cache[inf.indextable] and #_cache[inf.indextable] or 0 
local height = (inf.rectanglesamount * inf.height) 
height = height / ((mapcount * inf.height) / height) 
local starty, endy = inf.posy[1], inf.posy[inf.rectanglesamount] + inf.height - height 
local ofst = starty + () -- This is what I am missing.. 
dxDrawRectangle(posx + inf.width, ofst, 15, height, tocolor(40, 40, 40, 255)) 
 

Here is an image so you know what I am talking about:

0E5huJ9.png

Thanks :D

Link to comment
Saml1er Hard-@ss

Saml1er

Posted
Posted

Well I was working on a userpanel and I made this but got busy so I couldn't work any longer. It was working perfect when I tested it the last time. I've made some changes so if you experience any tiny bug I hope you fix it.

Usage: Replace dxDrawImage with dxDrawRectangle ( I've already calculated their sizes. )

Start the resource and press F1.

  
--[[  
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
+++++++++ Author: Saml1er 
+++++++++ If you're using this script then please give credits to the author.  
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++]] 
local uVisible = false 
local sx,sy = guiGetScreenSize () 
local move = 150 
local current = 0 
local pos = {  
{ 0, sy*0.81,sx,sy*0.2 }, 
{    {sx*0.02, sy*0.82, sx*0.11, sy*0.11,0}, { sx*0.02, 0, 0, sy*0.96 }     }, 
{    {sx*0.18, sy*0.82, sx*0.09, sy*0.09,0}, { sx*0.19, 0, 0, sy*0.96 }     }, 
{    {sx*0.32, sy*0.82, sx*0.08, sy*0.08,0}, { sx*0.32, 0, 0, sy*0.96 }     }, 
{    {sx*0.43, sy*0.82, sx*0.09, sy*0.09,0},  { sx*0.42, 0, 0, sy*0.96 }     }, 
{    {sx*0.55, sy*0.82, sx*0.09, sy*0.09,0}, { sx*0.545, 0, 0, sy*0.96  }     }, 
{    {sx*0.68, sy*0.82, sx*0.08, sy*0.08,0}, { sx*0.69, 0, 0, sy*0.96  }     }, 
{    {sx*0.81, sy*0.82, sx*0.09, sy*0.09,0}, { sx*0.83, 0, 0, sy*0.96  }     }, 
cx = 0, cy = 0,  
scroll = sy*0.14, 
mhold = false,  -- mouse hold issue fix 
thumb=0, -- scroll thumb ( scroll box )  
getSelectedRow = false, --[[ Rectangles are too close so sometimes you select two rectangles at the same time due to for i=1 loop  
but I fixed it with this. you can also use this to get selected item ( index for Items table )]] 
rows = 24 -- how many rows exactly you want to display 
} 
  
local Items =  getElementsByType ("player" ) -- let's say we do it with players 
  
 local pI =  { } 
addEventHandler ("onClientPlayerJoin", root, 
function ( )  
local i = #Items+1 
Items[i] = source  
pI [ source ] = i 
end ) 
  
addEventHandler ("onClientPlayerQuit", root, 
function ( )  
Items[pI [ source ] ] = nil 
end ) 
  
 local function RectangleCheck(a1,a2,b1,b2,mx,my) 
  if mx >= a1 and mx <= b1+a1 and  my <= a2+b2 and my >= a2 then 
    return true else return false end 
end 
  
local function PleaseDrawMe ( i )  
local i1,i2 = i* ( sy*0.04),i * ( sy*0.02) 
if not pos.getSelectedRow and RectangleCheck(sx*0.15, (sy*0.138)+i2, sx*0.273 ,sy*0.021,  pos.cx,pos.cy)  then 
pos.getSelectedRow = i -- selected row 
dxDrawRectangle(sx*0.15, (sy*0.138)+i2, sx*0.273 ,sy*0.021, tocolor(255, 255, 255, 100), true) 
end 
  
local i = i+pos.thumb  
  
dxDrawText ( getPlayerName(Items[i]),sx*(175/10pos.rows),sy*(-540/768), sx*(430/10pos.rows),sy+i1, tocolor ( 255,255, 255, 255 ),sx*( 1.15/10pos.rows), "default-bold","left","center",false,false,true,true,false )     
end  
  
local function renUser ( ) 
if move >= 0 then  
 move = move - 3 
end 
    dxDrawRectangle ( pos[1][1]+move,pos[1][2]+move,pos[1][3],pos[1][4],  tocolor ( 128,128,128,150),false) 
     
    dxDrawImage (pos[2][1][1]+move,pos[2][1][2]+move,pos[2][1][3],pos[2][1][4], 'img/stats.png',pos[2][1][5] ) 
 dxDrawText ( "STATISTICS", pos[2][2][1],pos[2][2][2],pos[2][2][3],pos[2][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
  
 dxDrawImage ( pos[3][1][1],pos[3][1][2]+move,pos[3][1][3],pos[3][1][4], 'img/staff.png' ,pos[3][1][5] ) 
 dxDrawText ( "STAFF", pos[3][2][1],pos[3][2][2],pos[3][2][3],pos[3][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
  
  dxDrawImage ( pos[4][1][1]+move,pos[4][1][2]+move,pos[4][1][3],pos[4][1][4], 'img/notes.png' ,pos[4][1][5] ) 
  dxDrawText ( "NOTES", pos[4][2][1],pos[4][2][2],pos[4][2][3],pos[4][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
   
  dxDrawImage ( pos[5][1][1],pos[5][1][2]+move,pos[5][1][3],pos[5][1][4], 'img/setting.png' ,pos[5][1][5] ) 
  dxDrawText ( "SETTINGS",pos[5][2][1],pos[5][2][2],pos[5][2][3],pos[5][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
   
    dxDrawImage ( pos[6][1][1]+move,pos[6][1][2]+move,pos[6][1][3],pos[6][1][4], 'img/premium.png' ,pos[6][1][5] ) 
dxDrawText ( "PREMIUM", pos[6][2][1],pos[6][2][2],pos[6][2][3],pos[6][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
  
dxDrawImage ( pos[7][1][1],pos[7][1][2]+move,pos[7][1][3],pos[7][1][4], 'img/music.png' ,pos[7][1][5] ) 
dxDrawText ( "MUSIC", pos[7][2][1],pos[7][2][2],pos[7][2][3],pos[7][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
  
 dxDrawImage ( pos[8][1][1]+move,pos[8][1][2]+move,pos[8][1][3],pos[8][1][4], 'img/help.png' ,pos[8][1][5] ) 
dxDrawText ( "HELP", pos[8][2][1],pos[8][2][2],pos[8][2][3],pos[8][2][4]+move, tocolor ( 0,0, 0, 255 ),sx*( 0.6/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false ) 
  
  
  if move <= 0 and isCursorShowing() then  
    local za = {getCursorPosition()} 
  local  zc,zb = za[1]*sx,za[2]*sy 
  --- rectangles start  
if RectangleCheck(pos[2][1][1]+move,pos[1][2]+move,pos[2][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[2][1][1]+move-10,pos[1][2]+move,pos[2][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck( pos[3][1][1],pos[1][2]+move,pos[3][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[3][1][1]+move-10,pos[1][2]+move,pos[3][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck(pos[4][1][1]+move,pos[1][2]+move,pos[4][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[4][1][1]+move-10,pos[1][2]+move,pos[4][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck(pos[5][1][1],pos[1][2]+move,pos[5][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[5][1][1]+move-10,pos[1][2]+move,pos[5][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck(pos[6][1][1]+move,pos[1][2]+move,pos[6][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[6][1][1]+move-10,pos[1][2]+move,pos[6][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck(pos[7][1][1]+move,pos[1][2]+move,pos[7][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[7][1][1]+move-10,pos[1][2]+move,pos[7][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
  
elseif RectangleCheck(pos[8][1][1]+move,pos[1][2]+move,pos[8][1][3],pos[1][4],  zc,zb) then 
dxDrawRectangle (pos[8][1][1]+move-10,pos[1][2]+move,pos[8][1][3]+20,pos[1][4],  tocolor ( 0,0,0,40),true) 
-- rectangles end  
        end 
    end  
     
   if current == 2 then  
    dxDrawRectangle ( sx*0.13,sy*0.08,sx*0.7,sy*0.7,  tocolor ( 0,0,0,200),true) 
    dxDrawRectangle ( sx*0.13,sy*0.08,sx*0.7,sy*0.04,  tocolor ( 255,51,51,150),true)    
  
dxDrawText ( "statistics",sx*0.42 ,0,0,sy*0.11, tocolor ( 255,255, 255, 255 ),sx*( 0.8/10pos.rows), "bankgothic","left","bottom",false,false,true,false,false )  
-- grid list 
dxDrawRectangle ( sx*0.15,sy*0.14,sx*0.3,sy*0.5,  tocolor ( 32,32,32,90),true) 
  
--scroll 
    local pcount = #Items  
     
    if pcount > pos.rows then 
    dxDrawRectangle ( sx*0.424,sy*0.14,sx*0.0259,sy*0.5,  tocolor ( 0,0,0,180),true) -- bar 
  
    if pos.mhold == true then  
    local _,cy = getCursorPosition() 
  cy = cy*sy  
  if cy >= 454 then cy = 454 end if cy <= 108 then cy = 108 end 
  pos.scroll = cy 
local per = math.ceil  (  ( (cy-108) /  (464-108) )*pos.rows ) 
pos.thumb =   math.ceil ( (per*#Items)/pos.rows) 
end 
        dxDrawRectangle ( sx*0.424,pos.scroll,sx*0.0259,sy*0.05,  tocolor ( 255,255,255,180),true) -- scroll thumb 
end 
getSelectedRow = false 
  
for i = 1 ,pcount < pos.rows and pcount or pos.rows do  
  
if  (pos.thumb+i) <= pcount then  
PleaseDrawMe ( i )  
  
  else  
 PleaseDrawMe ( i )  
end 
    end 
    -- for more buttons in user panel 
    elseif current == 3 then  
     
    elseif current == 4 then  
     
    elseif current == 5 then  
     
    elseif current == 6 then  
     
    elseif current == 7 then  
         
    elseif current == 8 then     
      
     
    end 
 end 
  
  
     local function KeyDetection( button, press ) 
if move >= 0  then return end 
if button == "mouse1" then  
if not press then  if pos.mhold == true then pos.mhold  = false end return end 
    local za = {getCursorPosition()} 
local  zc,zb = za[1]*sx,za[2]*sy 
  
if RectangleCheck(pos[2][1][1]+move,pos[1][2]+move,pos[2][1][3],pos[1][4],  zc,zb) then 
current = 2 
  
elseif RectangleCheck( pos[3][1][1],pos[1][2]+move,pos[3][1][3],pos[1][4],  zc,zb) then 
current = 3 
  
elseif RectangleCheck(pos[4][1][1]+move,pos[1][2]+move,pos[4][1][3],pos[1][4],  zc,zb) then 
current = 4 
  
elseif RectangleCheck(pos[5][1][1],pos[1][2]+move,pos[5][1][3],pos[1][4],  zc,zb) then 
current = 5 
  
elseif RectangleCheck(pos[6][1][1]+move,pos[1][2]+move,pos[6][1][3],pos[1][4],  zc,zb) then 
current = 6 
  
elseif RectangleCheck(pos[7][1][1]+move,pos[1][2]+move,pos[7][1][3],pos[1][4],  zc,zb) then 
current = 7 
  
elseif RectangleCheck(pos[8][1][1]+move,pos[1][2]+move,pos[8][1][3],pos[1][4],  zc,zb) then 
current = 8 
--- selecting rectangle 
elseif RectangleCheck(sx*0.13,sy*0.08,sx*0.7,sy*0.7,  zc,zb) then 
pos.zc = zc 
pos.zb = zb   
if RectangleCheck(sx*0.424,pos.scroll,sx*0.0259,sy*0.05,  zc,zb) then 
  
  pos.mhold = true 
  else 
  if RectangleCheck( sx*0.424,sy*0.14,sx*0.0259,sy*0.5,  zc,zb) then 
  if zb >= 454 then zb = 454 end if zb <= 108 then zb = 108 end   
  pos.scroll = zb 
  local per = math.ceil  (  ( (zb-108) /  (464-108) ) *pos.rows) 
pos.thumb =   math.ceil ( (per*#Items)/pos.rows) 
  end  
        end 
        end 
  
  
    end  
end 
  
  
local function toggleUser(key, keyState)  
if not uVisible then  
uVisible  = true     
showCursor ( true )  
    addEventHandler("onClientRender", root, renUser)  
    addEventHandler ( "onClientKey", root, KeyDetection ) 
    showChat(false) 
    else 
    uVisible  = false  
    removeEventHandler ( "onClientKey", root, KeyDetection ) 
        removeEventHandler("onClientRender", root, renUser)  
showCursor ( false ) 
move = 150 
current = 0 
 pos.cx = 0 
 pos.cy = 0 
    showChat(true)       
end 
    end   
  
 addEventHandler("onClientResourceStart",resourceRoot, 
 function ( ) 
bindKey("F1","down", toggleUser)  
end 
) 
  
  
 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...