DX Scroll text

[Extinction]

local screenW, screenH = guiGetScreenSize()
showCursor(true)
addEventHandler("onClientRender", root,
    function()
        dxDrawRectangle(screenW * 0.3445, screenH * 0.2042, screenW * 0.3016, screenH * 0.5528, tocolor(255, 255, 0, 82), false)
        dxDrawRectangle(screenW * 0.3445, screenH * 0.7569, screenW * 0.3016, screenH * 0.0069, tocolor(255, 255, 0, 156), false)
        dxDrawRectangle(screenW * 0.3445, screenH * 0.1750, screenW * 0.3016, screenH * 0.0292, tocolor(255, 255, 0, 156), false)
        
		dxDrawText("Top Menu", screenW * 0.3438, screenH * 0.1750, screenW * 0.6461, screenH * 0.2042, tocolor(255, 255, 255, 255), 0.80, "default-bold", "center", "center", false, false, false, false, false)
        dxDrawText("Welcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\n", 455, 165, 813, 620, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
        
		dxDrawRectangle(screenW * 0.3531, screenH * 0.2306, screenW * 0.2852, screenH * 0.5125, tocolor(201, 0, 0, 0), false) 
    end
)

I want to make it so when the dxDrawText hits the end of 

dxDrawRectangle(screenW * 0.3531, screenH * 0.2306, screenW * 0.2852, screenH * 0.5125, tocolor(201, 0, 0, 0), false) 

it cuts off the text, and then the person has to use his mouse to scroll down. How can i do this?

[NeXuS™]

• clip: if set to true, the parts of the text that don't fit within the bounding box will be cut off.

dxDrawText("Welcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\nWelcome to Test v1 - checking script, \ntoday you will be learning how\n", 455, 165, 813, 620, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", true, false, false, false, false)

 

[Extinction]

How do I make it scroll now? so players scroll down and see the other text

[NeXuS™]

You'll have to do a renderTarget for that. And then draw the text on the rendertarget on an Y pos + an integer which you'll register at the top of your script. After that, you'll draw that renderTarget (dxDrawImage) and make a bindKey for scrolling which will add or subtract 1 from that integer which you registered.

[Extinction]

Sorry didn't understand a word you said, maybe with an explained example?

[NeXuS™]

Here you are. I think it should work, not tested tho.

local renderTarget = dxCreateRenderTarget(500, 15, true) -- Creating the renderTarget, 500 width and 50 height, with alpha enabled.
local drawText = [[This is a multi-line text.
2nd line
3rd line]]
local moveY = 0

addEventHandler("onClientRender", getRootElement(), function()
	if (renderTarget) then -- Checking if we have the renderTarget.
		dxSetRenderTarget(renderTarget, true) -- Setting the renderTarget, and clearing it every frame.
			dxDrawText(drawText, 0, moveY, 500, 15, tocolor(255, 255, 255, 255), 1, "default-bold", nil, nil, true) -- Drawing the text on moveY Y pos
		dxSetRenderTarget() -- Setting the renderTarget nil, so we are out of the renderTarget
		dxDrawImage(500, 200, 500, 15, renderTarget) -- Drawing the renderTarget
	end
end)

addEventHandler("onClientKey", getRootElement(), function(cK, cS)
	if cS then
		if cK == "mouse_wheel_up" then
			if moveY > 0 then
				moveY = moveY - 1
			end
		elseif cK ==" mouse_wheel_down" then
			moveY = moveY + 1
		end
	end
end)

 

Edited March 18, 2017 by NeXuS™

[Extinction]

Shows, but no outputs in debug, and I can't scroll to show the rest.

[NeXuS™]

I'm gonna test it, wait a minute @Extinction.

Replace

addEventHandler("onClientKey", getRootElement(), function(cK, cS)
	if cS then
		if cK == "mouse_wheel_up" then
			if moveY > 0 then
				moveY = moveY - 1
			end
		elseif cK ==" mouse_wheel_down" then
			moveY = moveY + 1
		end
	end
end)

with

addEventHandler("onClientKey", getRootElement(), function(cK, cS)
	if cS then
		if cK == "mouse_wheel_up" then
			outputChatBox(moveY)
			if moveY < 0 then
				moveY = moveY + 1
			end
		elseif cK == "mouse_wheel_down" then
			moveY = moveY - 1
		end
	end
end)

I just misplaced a space and actually inverted the moving ways.
@Extinction.

Edited March 18, 2017 by NeXuS™

[Extinction]

Works, one more question, how would I make a scrollbar that functions with this?

[NeXuS™]

Just calculations.

local fullScrolled = 45 -- How many pixels to the top of the last line of the text.
local scrollerHeight = 20 -- The scroller is 20 pixel high.
local scrollerWidth = 20 -- The sroller is 20 pixel wide.
local fitHeight = 100 -- The panel is 100 pixel high.

addEventHandler("onClientRender", getRootElement(), function()
	dxDrawRectangle(500-scrollerWidth, 200+(math.abs(moveY)/fullScrolled)*fitHeight, scrollerWidth, scrollHeight, tocolor(0, 0, 0, 128))
end)

I think this one should work, not tested tho.

[Extinction]

dxDrawRectangle(screenW * 0.623 + 5, screenH * 0.2306, screenW * 0.020 - 5, screenH * 0.512, tocolor(118, 0, 0, 50))
   if (moveY <= -540) then
		scrollerHeight = scrollerHeight - 10
		else
		scrollerHeight = 40
		end
		dxDrawRectangle(815-scrollerWidth + 5, 170+(math.abs(moveY)/fullScrolled)*fitHeight, scrollerWidth, scrollerHeight, tocolor(255, 12, 0, 50))
      end
    end

I'm trying to cut down the height of the scroller everytime it hits the end the DX Rectangle at the top, it'll start to decrease the height of the scroller, and not let it go out. I think I'm doing it wrong.

[NeXuS™]

local renderTarget = dxCreateRenderTarget(500, 15)
local scrollerW, scrollerH = 20, 3.75 -- scrollerH = Rectangle height / Line count
local fullScrolled = 45 -- (Line count - 1) * dxGetFontHeight(currentSize, currentFont)
local fullSize = 60 -- Line count * dxGetFontHeight(currentSize, currentFont)
local mutliLine = [[This is a multiple line text.
2nd line
3rd line
4th line]]

function dxDraws()
	dxDrawRectangle(500, 200, 200, 15, tocolor(0, 0, 0, 255))
	dxSetRenderTarget(renderTarget)
	dxDrawText(multiLine, 0, moveY, 500, 15, tocolor(255, 255, 255, 255), 1, "default-bold")
	dxSetRenderTarget()
	dxDrawImage(500, 200, 200, 15, renderTarget)
	local scrollerPercentage = fullScrolled/fullSize
	dxDrawRectangle(500-scrollerW, 200+scrollerPercentage*15, scrollerW, scrollerH, tocolor(128, 128, 0, 255))
end

addEventHandler("onClientKey", getRootElement(), function(cK, cS)
	if cS then
		if cK == "mouse_wheel_up" then
			outputChatBox(moveY)
			if moveY < 0 then
				moveY = moveY + 1
			end
		elseif cK == "mouse_wheel_down" then
			if moveY > -fullScrolled then -- Added an if statement, so it cannot be scrolled more than it should be.
				moveY = moveY - 1
			end
		end
	end
end)

I think this one should work, but again, not tested.

Edited March 19, 2017 by NeXuS™

[Extinction]

Didn't work 

[NeXuS™]

What's not working with it?

[Extinction]

I'm not sure, nothing is outputted in the debug, and it's just stuck in one place.

[NeXuS™]

Gonna check, give me a minute.

local renderTarget = dxCreateRenderTarget(500, 15)
local scrollerW, scrollerH = 20, 3.75 -- scrollerH = Rectangle height / Line count
local fullScrolled = 45 -- (Line count - 1) * dxGetFontHeight(currentSize, currentFont)
local fullSize = 60 -- Line count * dxGetFontHeight(currentSize, currentFont)
local moveY = 0 -- Default offset of Y position
local multiLine = [[This is a multiple line text.
2nd line
3rd line
4th line]]


function dxDraws()
	dxDrawRectangle(500, 200, 200, 15, tocolor(0, 0, 0, 255))
	dxSetRenderTarget(renderTarget, true)
	dxDrawText(multiLine, 0, moveY, 500, 15, tocolor(255, 255, 255, 255), 1)
	dxSetRenderTarget()
	dxDrawImage(500, 200, 500, 15, renderTarget)
	local scrollerPercentage = (-moveY)/fullSize
	dxDrawRectangle(500-scrollerW, 200+scrollerPercentage*15, scrollerW, scrollerH, tocolor(128, 128, 0, 255))
end
addEventHandler("onClientRender", getRootElement(), dxDraws)

addEventHandler("onClientKey", getRootElement(), function(cK, cS)
	if cS then
		if cK == "mouse_wheel_up" then
			outputChatBox(moveY)
			if moveY < 0 then
				moveY = moveY + 1
			end
		elseif cK == "mouse_wheel_down" then
			if moveY > -fullScrolled then -- Added an if statement, so it cannot be scrolled more than it should be.
				moveY = moveY - 1
			end
		end
	end
end)

This one is tested, and works perfectly for me.