Own list DX - ScrollBar problem ...

[.WhiteBlue]

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 November 5, 2017 by .WhiteBlue

[idarrr]

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 November 5, 2017 by idarrr
Little improvement

[.WhiteBlue]

@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)

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)

Edited November 5, 2017 by .WhiteBlue

[idarrr]

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
)

 

[Dzsozi (h03)]

I think this resource has a pretty good and easy example for a dx scroll bar, this might help, I would take a look and give it a try if I was you.

https://community.multitheftauto.com/index.php?p=resources&s=details&id=14403

[.WhiteBlue]

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.

[.Doctor]

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
)

 

 

[Feche1320]

local ypos = ((totalheight * scrollheight) - (youriconsize / 2)) / (totalitems - totalheight)

Change to your needs

Edited February 4, 2019 by Feche1320