Jump to content

Own list DX - ScrollBar problem ...


.WhiteBlue

Recommended Posts

Hi.
I made myself a GUI system. Time has come for scrolling system. I want the dot to reach the end of the list.

My code:

function clamp(low, value, high)
	return math.max(low, math.min(value, high))
end

local scrollPosition = clamp(5, space_0 * guiSystem['rowStart'], space_0 - 16)
outputChatBox(scrollPosition)

Legend:

guiSystem['rowStart'] - From position (default value: 1)
guiSystem['rowStop'] - To position (default value: 10)

#guiSystem_element['list']['item'] - Items (default value: 20)

space_0 - List height (default value: 200)

 

My list include 20 items.
The displayed items are 10.


Please help !

Regards.

 

 

Edited by .WhiteBlue
Link to comment

So, I was working on scrollbar stuff on DX function, took me a while to figure it out how to make calculation for it. So far,  I have this:

local visibleHeight -- the visible height (panel height)
local overallHeight -- overall height for all items
local scrollPosition -- I suggest you to make it 0 - 100 range
local itemCoorY -- static coordinate Y for item (initial Y position when item created)
local currentCoorY = itemCoorY -- current Y coordinate, when it started, default is itemCoorY (assuming scroll pos is zero)

-- If there is no invisible item then we don't need to calculate this.
if overallHeight <= visibleHeight then
	return
end
-- Formula = scroll bar percentage divided by the invisible height
newY = scrollPosition/100*(overallHeight-visibleHeight)

currentCoorY = itemCoorY - newY -- newY is negative value, because item goes up when it scrolled.
	

Hope it help you.

Edited by idarrr
Little improvement
  • Thanks 1
Link to comment

@idarrr

Did not work. Now it works the other way round. I Scroll down, it goes up.
 

-- Scroll
local visibleHeight = ((list['sizeY'] * 250) / 12)
local overallHeight = (#guiSystem_element['list']['item'] * 20)
local scrollPosition = (guiSystem['rowStart'])
local itemCoorY = list['posY']

local currentCoorY = itemCoorY
	if overallHeight <= visibleHeight then
    return
end

newY = scrollPosition/100*(overallHeight-visibleHeight)
    
currentCoorY = itemCoorY - newY
outputChatBox(currentCoorY)

dxDrawImage((((list['posX'] + list['sizeX']) - 7.5) * scaleX), (list['posY'] * scaleY), (1 * scaleX), (space_0 * scaleY), 'i/scroll/scroll.png', 0, 0, 0, tocolor(255, 255, 255, 255), false)
dxDrawImage((((list['posX'] + list['sizeX']) - 11.5) * scaleX), (currentCoorY * scaleY), (9 * scaleX), (10.5 * scaleY), 'i/scroll/scroll_circle.png', 0, 0, 0, tocolor(255, 255, 255, 255), false)



yzeEakD.jpg

KRUcOZm.jpg

Regards.

------------------------------

I Fixed.

Only now does not stop.
 

-- Scroll
local visibleHeight = ((list['sizeY'] * 250) / 12)
local overallHeight = (#guiSystem_element['list']['item'] * 20)
local scrollPosition = (guiSystem['rowStart'])
local itemCoorY = list['posY']

local currentCoorY = itemCoorY

newY = scrollPosition/100*(overallHeight-visibleHeight)

currentCoorY = itemCoorY + newY
outputChatBox(newY)

dxDrawImage((((list['posX'] + list['sizeX']) - 7.5) * scaleX), (list['posY'] * scaleY), (1 * scaleX), (space_0 * scaleY), 'i/scroll/scroll.png', 0, 0, 0, tocolor(255, 255, 255, 255), false)
dxDrawImage((((list['posX'] + list['sizeX']) - 11.5) * scaleX), (currentCoorY * scaleY), (9 * scaleX), (10.5 * scaleY), 'i/scroll/scroll_circle.png', 0, 0, 0, tocolor(255, 255, 255, 255), false)



img%5D

CsGRarg.png

Edited by .WhiteBlue
Link to comment

Create separated calculation for scroll bar.

-- items scroll
local visibleHeight = ((list['sizeY'] * 250) / 12)
local overallHeight = (#guiSystem_element['list']['item'] * 20)
local scrollPosition = 0 -- scroll position should be zero at the first time, the range is between 0 - 100
local itemCoorY = list['posY']
local currentCoorY = itemCoorY

-- scroll bar
local scrollX, scrollY -- x, y position
local scrollIconWidth -- the width of the scroll bar icon (that circle image)
local scrollIconHeight -- the height of the scroll bar icon (that circle image)
local scrollBarHeight -- the height of the scroll bar

-- find the exact Y so it doesn't move outside the scrollBarHeight
local newScrollY = (scrollBarHeight-scrollIconHeight)*scrollPosition/100

-- value is positive
currentScrollY = scrollY + newScrollY

-- and render it >
dxDrawImage(scrollX, currentScrollY, scrollIconWidth, scrollIconHeight, ...)

-- event when player scroll mouse
addEventHandler( "onClientKey", root,
	function (button, press)
    	local offset = 1 -- move by 1 value when scrolled, higher value = scroll faster
		if button == "mouse_wheel_up" then
			scrollPosition = math.max(0, scrollPosition - offset)
		elseif button == "mouse_wheel_down" then
			scrollPosition = math.min(100, scrollPosition + offset)
		end
	end
)

 

  • Thanks 1
Link to comment
  • 1 month later...
On 6.11.2017 at 21:08, idarrr said:

Create separated calculation for scroll bar.


-- items scroll
local visibleHeight = ((list['sizeY'] * 250) / 12)
local overallHeight = (#guiSystem_element['list']['item'] * 20)
local scrollPosition = 0 -- scroll position should be zero at the first time, the range is between 0 - 100
local itemCoorY = list['posY']
local currentCoorY = itemCoorY

-- scroll bar
local scrollX, scrollY -- x, y position
local scrollIconWidth -- the width of the scroll bar icon (that circle image)
local scrollIconHeight -- the height of the scroll bar icon (that circle image)
local scrollBarHeight -- the height of the scroll bar

-- find the exact Y so it doesn't move outside the scrollBarHeight
local newScrollY = (scrollBarHeight-scrollIconHeight)*scrollPosition/100

-- value is positive
currentScrollY = scrollY + newScrollY

-- and render it >
dxDrawImage(scrollX, currentScrollY, scrollIconWidth, scrollIconHeight, ...)

-- event when player scroll mouse
addEventHandler( "onClientKey", root,
	function (button, press)
    	local offset = 1 -- move by 1 value when scrolled, higher value = scroll faster
		if button == "mouse_wheel_up" then
			scrollPosition = math.max(0, scrollPosition - offset)
		elseif button == "mouse_wheel_down" then
			scrollPosition = math.min(100, scrollPosition + offset)
		end
	end
)

 

 

Don't working.

Link to comment
  • 1 year later...
On 06/11/2017 at 18:08, idarrr said:

Create separated calculation for scroll bar.


-- items scroll
local visibleHeight = ((list['sizeY'] * 250) / 12)
local overallHeight = (#guiSystem_element['list']['item'] * 20)
local scrollPosition = 0 -- scroll position should be zero at the first time, the range is between 0 - 100
local itemCoorY = list['posY']
local currentCoorY = itemCoorY

-- scroll bar
local scrollX, scrollY -- x, y position
local scrollIconWidth -- the width of the scroll bar icon (that circle image)
local scrollIconHeight -- the height of the scroll bar icon (that circle image)
local scrollBarHeight -- the height of the scroll bar

-- find the exact Y so it doesn't move outside the scrollBarHeight
local newScrollY = (scrollBarHeight-scrollIconHeight)*scrollPosition/100

-- value is positive
currentScrollY = scrollY + newScrollY

-- and render it >
dxDrawImage(scrollX, currentScrollY, scrollIconWidth, scrollIconHeight, ...)

-- event when player scroll mouse
addEventHandler( "onClientKey", root,
	function (button, press)
    	local offset = 1 -- move by 1 value when scrolled, higher value = scroll faster
		if button == "mouse_wheel_up" then
			scrollPosition = math.max(0, scrollPosition - offset)
		elseif button == "mouse_wheel_down" then
			scrollPosition = math.min(100, scrollPosition + offset)
		end
	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
  • Recently Browsing   0 members

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