Jump to content

dx list scrolling

Lachuks

By Lachuks
in Scripting

Recommended Posts

Lachuks Snitch

Lachuks

Posted
Posted (edited)

Hello there! I wonder how to make scrollBar for a dx list. Have seen a lot of different tutorials but none of them helped me. Seems like I'm too dumb to understand it ?
Here is how my code currently looks like:

Spoiler 

local screenW, screenH = guiGetScreenSize()
local maxRows = 15
local openPanel = true

local items = {
	{"1",2000, 1},
	{"2",2000, 1},
	{"3",2000, 1},
	{"4",2000, 1},
	{"5",2000, 1},
	{"6",2000, 1},
	{"7",2000, 1},
	{"8",2000, 1},
	{"9",2000, 1},
	{"10",2000, 1},
	{"11",2000, 1},
	{"12",2000, 1},
	{"13",2000, 1},
	{"14",2000, 1},
	{"15",2000, 1},
	{"16",2000, 1},
	{"17",2000, 1},
	{"18",2000, 1},
	{"19",2000, 1},
	{"20",2000, 1},
	{"21",2000, 1},
	{"22",2000, 1},
	{"23",2000, 1},
	{"24",2000, 1},
	{"25",2000, 1},
}

if openPanel == true then
	addEventHandler("onClientRender", root,
    function()
        dxDrawRectangle(screenW * 0.2516, screenH * 0.2843, screenW * 0.4974, screenH * 0.4352, tocolor(1, 2, 3, 147), false)

        dxDrawRectangle(screenW * 0.2516, screenH * 0.2611, screenW * 0.4807, screenH * 0.0231, tocolor(1, 2, 3, 193), false)
        dxDrawText("Shop v1.0", screenW * 0.2516, screenH * 0.2611, screenW * 0.7323, screenH * 0.2843, tocolor(255, 255, 255, 255), 1, "default-bold", "center", "center", false, false, false, false, false)
       
        dxDrawRectangle(screenW * 0.7323, screenH * 0.2611, screenW * 0.0167, screenH * 0.0231, tocolor(69, 0, 0, 193), false)
        dxDrawText("X", screenW * 0.7323, screenH * 0.2611, screenW * 0.7490, screenH * 0.2843, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        
        dxDrawRectangle(screenW * 0.2536, screenH * 0.2889, screenW * 0.1906, screenH * 0.4213, tocolor(1, 2, 3, 90), false)
        
        dxDrawRectangle(screenW * 0.2568, screenH * 0.2981, screenW * 0.1833, screenH * 0.0250, tocolor(1, 2, 3, 90), false)
        dxDrawText("Item name", screenW * 0.2599, screenH * 0.2981, screenW * 0.3682, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "center", false, false, false, false, false)
        dxDrawText("$", screenW * 0.3682, screenH * 0.2981, screenW * 0.4016, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        dxDrawText("Quantity", screenW * 0.4016, screenH * 0.2981, screenW * 0.4349, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        for key, value in ipairs ( items ) do
        	local key = key-1
        	if key <= maxRows-1 then
        		dxDrawRectangle(screenW * 0.2568, screenH * 0.3269+((key)*27), screenW * 0.1781, screenH * 0.0250, tocolor(1, 2, 3, 90), false)
        		dxDrawText(value[1], screenW * 0.2599, screenH * 0.3269+(key*54), screenW * 0.3682, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "center", false, false, false, false, false)
				dxDrawText(value[2], screenW * 0.3682, screenH * 0.3269+(key*54), screenW * 0.4016, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
				dxDrawText(value[3], screenW * 0.4016, screenH * 0.3269+(key*54), screenW * 0.4349, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
    			if isCursorOnElement(screenW * 0.2568, screenH * 0.3269+(key*27), screenW * 0.1781, screenH * 0.0250) then
					dxDrawRectangle(screenW * 0.2568, screenH * 0.3269+(key*27), screenW * 0.1781, screenH * 0.0250, tocolor(255, 255, 255, 90), false)
				end
    		end
		end
    end)
	bindKey("mouse_wheel_up", "down", function()
		if isCursorOnElement(screenW * 0.2536, screenH * 0.2889, screenW * 0.1906, screenH * 0.4389) then
			-- How to make it scrooll up?
		end
	end)
	bindKey("mouse_wheel_down", "down", function()
		if isCursorOnElement(screenW * 0.2536, screenH * 0.2889, screenW * 0.1906, screenH * 0.4389) then
			-- How to make it scrooll down?
		end
	end)
end

function isCursorOnElement( posX, posY, width, height )
	if isCursorShowing( ) then
		local mouseX, mouseY = getCursorPosition( )
		local clientW, clientH = guiGetScreenSize( )
		local mouseX, mouseY = mouseX * clientW, mouseY * clientH
		if ( mouseX > posX and mouseX < ( posX + width ) and mouseY > posY and mouseY < ( posY + height ) ) then
			return true
		end
	end
	return false
end

 

 
 

 

Edited by Emix
  • Moderators
IIYAMA Gangsta

IIYAMA

Posted
  • Moderators
Posted
2 hours ago, Emix said:

Hello there! I wonder how to make scrollBar for a dx list. Have seen a lot of different tutorials but none of them helped me. Seems like I'm too dumb to understand it ?

Your mathematics has to be at a more advanced level. Have you ever considered to use stuff that already exist?

https://community.multitheftauto.com/index.php?p=resources&amp;s=list&amp;name=lib&amp;descr=dx&amp;category=

 

To answer your question: "How?"

You could do it with:

 

 

  • Thanks 1

Do you want to improve your Lua programming skills and make less mistakes?   Start with Lua Language Server!   🙀

 

  Useful functions  3x 

Spoiler

   checkPassiveTimer

   getScreenStartPositionFromBox

   getPedGender

  Tutorials  4x 

Spoiler

    Scaling DX

    Events

    Attach an addEventHandler on a group of elements

    Debugging

 

  • Moderators
IIYAMA Gangsta

IIYAMA

Posted
  • Moderators
Posted

@Emix You have read wiki you know?

 

Screenshot-2019-02-03-dx-list-scrolling.

 

Do you want to improve your Lua programming skills and make less mistakes?   Start with Lua Language Server!   🙀

 

  Useful functions  3x 

Spoiler

   checkPassiveTimer

   getScreenStartPositionFromBox

   getPedGender

  Tutorials  4x 

Spoiler

    Scaling DX

    Events

    Attach an addEventHandler on a group of elements

    Debugging

 

SaNoR Rat

SaNoR

Posted
Posted
Spoiler 

local screenW, screenH = guiGetScreenSize()
local maxRows, currentCell = 14, 0
local openPanel = true

local items = {
	{"1",2000, 1},
	{"2",2000, 1},
	{"3",2000, 1},
	{"4",2000, 1},
	{"5",2000, 1},
	{"6",2000, 1},
	{"7",2000, 1},
	{"8",2000, 1},
	{"9",2000, 1},
	{"10",2000, 1},
	{"11",2000, 1},
	{"12",2000, 1},
	{"13",2000, 1},
	{"14",2000, 1},
	{"15",2000, 1},
	{"16",2000, 1},
	{"17",2000, 1},
	{"18",2000, 1},
	{"19",2000, 1},
	{"20",2000, 1},
	{"21",2000, 1},
	{"22",2000, 1},
	{"23",2000, 1},
	{"24",2000, 1},
	{"25",2000, 1},
}

if openPanel == true then
	addEventHandler("onClientRender", root,
    function()
        dxDrawRectangle(screenW * 0.2516, screenH * 0.2843, screenW * 0.4974, screenH * 0.4352, tocolor(1, 2, 3, 147), false)

        dxDrawRectangle(screenW * 0.2516, screenH * 0.2611, screenW * 0.4807, screenH * 0.0231, tocolor(1, 2, 3, 193), false)
        dxDrawText("Shop v1.0", screenW * 0.2516, screenH * 0.2611, screenW * 0.7323, screenH * 0.2843, tocolor(255, 255, 255, 255), 1, "default-bold", "center", "center", false, false, false, false, false)
       
        dxDrawRectangle(screenW * 0.7323, screenH * 0.2611, screenW * 0.0167, screenH * 0.0231, tocolor(69, 0, 0, 193), false)
        dxDrawText("X", screenW * 0.7323, screenH * 0.2611, screenW * 0.7490, screenH * 0.2843, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        
        dxDrawRectangle(screenW * 0.2536, screenH * 0.2889, screenW * 0.1906, screenH * 0.4213, tocolor(1, 2, 3, 90), false)
        
        dxDrawRectangle(screenW * 0.2568, screenH * 0.2981, screenW * 0.1833, screenH * 0.0250, tocolor(1, 2, 3, 90), false)
        dxDrawText("Item name", screenW * 0.2599, screenH * 0.2981, screenW * 0.3682, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "center", false, false, false, false, false)
        dxDrawText("$", screenW * 0.3682, screenH * 0.2981, screenW * 0.4016, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        dxDrawText("Quantity", screenW * 0.4016, screenH * 0.2981, screenW * 0.4349, screenH * 0.3231, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
        for i = currentCell + 1, maxRows + currentCell do
        	local value = items[i]
        	local key = i - currentCell - 1
        	if value ~= nil then
        		dxDrawRectangle(screenW * 0.2568, screenH * 0.3269+((key)*27), screenW * 0.1781, screenH * 0.0250, tocolor(1, 2, 3, 90), false)
        		dxDrawText(value[1], screenW * 0.2599, screenH * 0.3269+(key*54), screenW * 0.3682, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "center", false, false, false, false, false)
				dxDrawText(value[2], screenW * 0.3682, screenH * 0.3269+(key*54), screenW * 0.4016, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
				dxDrawText(value[3], screenW * 0.4016, screenH * 0.3269+(key*54), screenW * 0.4349, screenH * 0.3519, tocolor(255, 255, 255, 255), 1.00, "default-bold", "center", "center", false, false, false, false, false)
    			if isCursorOnElement(screenW * 0.2568, screenH * 0.3269+(key*27), screenW * 0.1781, screenH * 0.0250) then
					dxDrawRectangle(screenW * 0.2568, screenH * 0.3269+(key*27), screenW * 0.1781, screenH * 0.0250, tocolor(255, 255, 255, 90), false)
				end
    		end
		end
    end)
end

addEventHandler("onClientKey", root,
function(button, state)
	if openPanel then
		if isCursorOnElement(screenW * 0.2536, screenH * 0.2889, screenW * 0.1906, screenH * 0.4389) then
			if button == "mouse_wheel_up" and state then
				if currentCell > 0 then
					currentCell = currentCell - 1
				end
			elseif button == "mouse_wheel_down" and state then
				if maxRows + currentCell < #items then
					currentCell = currentCell + 1
				end
			end
		end
	end
end)

function isCursorOnElement( posX, posY, width, height )
	if isCursorShowing( ) then
		local mouseX, mouseY = getCursorPosition( )
		local clientW, clientH = guiGetScreenSize( )
		local mouseX, mouseY = mouseX * clientW, mouseY * clientH
		if ( mouseX > posX and mouseX < ( posX + width ) and mouseY > posY and mouseY < ( posY + height ) ) then
			return true
		end
	end
	return false
end

 

 

  • Thanks 1

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...