Any way to make textbox inputs?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
CDCosma
Prole
Posts: 1
Joined: Tue Apr 10, 2012 12:26 am

Any way to make textbox inputs?

Post by CDCosma »

Is there a way to make a textbox input in love?
User avatar
veethree
Inner party member
Posts: 874
Joined: Sat Dec 10, 2011 7:18 pm

Re: Any way to make textbox inputs?

Post by veethree »

CDCosma wrote:Is there a way to make a textbox input in love?
I don't have experience with this, But i can think of a way to do it..So you'd probably have a variable assigned to the text in the textbox. Then on love.keypressed() you'd add whichever key was pressed to that string..something like this:

Code: Select all

function love.load()
	str = ""
end

function love.draw()
	love.graphics.print(str, 10, 10)
end

function love.keypressed(key)
	str = str..key
end
That should give you an idea on how to do it, But of course that won't quite do the trick since it just adds the name of the key you pressed to the end of the string. So if the string is already "something" and you press lshift, then it would turn into "somethinglshift". Hope that helps at least a little. lol
User avatar
Inny
Party member
Posts: 652
Joined: Fri Jan 30, 2009 3:41 am
Location: New York

Re: Any way to make textbox inputs?

Post by Inny »

You probably should read the code inside a GUI lib first, but if you're determined to make your own, the second parameter to love.keypressed is the unicode codepoint representing the key that was pressed. So, veethree was partially right. The wiki page gives an example: https://love2d.org/wiki/love.keypressed
User avatar
allanws
Prole
Posts: 5
Joined: Tue Apr 10, 2012 1:43 pm

Re: Any way to make textbox inputs?

Post by allanws »

Its not that hard really, you'd have to create a Textbox class and some basic methods other than update and draw. You'd have something more or less like this:

Code: Select all

Textbox = {}
Textbox.__index = Textbox

function Textbox.create(x, y, max)
	
	local temp = {}
	setmetatable(temp, Textbox)	
	
	temp.hover = false	
	temp.selected = false
	temp.text = "" 
	temp.max = max
	temp.width = font["default"]:getWidth("a") * 16
	temp.height = font["default"]:getHeight()
	temp.color = color["text"]
	temp.x = x
	temp.y = y	
	
	return temp
	
end
Here we have the create method that inits all our vars. If you're not familiar with lua's metamethods, i suggest reading about it, since you will not be using lua's full functionalities without this info.

Code: Select all

function Textbox:draw()	
	
	love.graphics.setColor(self.color)
	
	if self.selected then
		love.graphics.setColor(unpack(color["hover"]))	
	end
	
	love.graphics.quad("line", self.x, self.y, self.x + self.width, self.y, self.x + self.width, self.y + self.height, self.x, self.y + self.height)
	love.graphics.setFont(font["default"])	
	love.graphics.setColor(self.color)
	love.graphics.print(self.text, self.x, self.y)	
	
end
Then the draw function, which just prints the text in a quad and sets the quad to "hover" color if the textbox is selected.

Code: Select all

function Textbox:update(dt)	
	
	local x = love.mouse.getX()
	local y = love.mouse.getY()	
	
	if x > self.x
		and x < self.x + self.width
		and y < self.y + self.height
		and y > self.y then
		self.hover = true
	else
		self.hover = false
	end
	
end
Then update that just checks if mouse is over textbox.

Code: Select all

function Textbox:mousepressed(x, y, button)	
	
	if self.hover then 
		self.selected = true		 
	else
		self.selected = false		
	end
	
end

function Textbox:keypressed(key)	

	if string.len(self:getText()) < self.max then
	
		if self.selected then
			
			if key == "backspace" then 
	
				local str = self:getText()
						
				self:setText(string.sub(str, 1, string.len(str) - 1))			
				
			elseif key:match("[A-Za-z0-9]") and not in_table(key_disable, key) then				
				
				local str = self:getText()				
				local newKey = key
				
				if love.keyboard.isDown("shift") then newKey = string.upper(key) end
				
				str = str .. newKey
				self:setText(str)			
				
			end
		
		end
		
	end
	
end
Mousepressed is pretty self-explanatory. Keypress checks if keys being pressed are valid. You can create a table of keys you want to disable (key_disable). I found this table somewhere in the forum a long time ago, so to make it easier, here you go:

Code: Select all

key_disable = { 
	"up","down","left","right","home","end","pageup","pagedown",								--Navigation keys
	"insert","tab","clear","delete",															--Editing keys
	"f1","f2","f3","f4","f5","f6","f7","f8","f9","f10","f11","f12","f13","f14","f15",			--Function keys
	"numlock","scrollock","ralt","lalt","rmeta","lmeta","lsuper","rsuper","mode","compose", "lshift", "rshift", "lctrl", "rctrl", "capslock",		--Modifier keys
	"pause","escape","help","print","sysreq","break","menu","power","euro","undo"				--Miscellaneous keys
}
Then you just have to make getters and setters, mainly for "text" var.

I suggest you don't copy this, since I just made this real quick and I'm not sure its 100% correct. Plus, doing it yourself gives you more experience :)

Cheers.
User avatar
kraftman
Party member
Posts: 277
Joined: Sat May 14, 2011 10:18 am

Re: Any way to make textbox inputs?

Post by kraftman »

I'm actually working on a multiline editbox today, its very basic so far but I can share my code if you want.
User avatar
kraftman
Party member
Posts: 277
Joined: Sat May 14, 2011 10:18 am

Re: Any way to make textbox inputs?

Post by kraftman »

Here's what I've come up with so far today, it includes syntax highlighting but unfortunately its built on top of a quite heavy GUI lib.
Attachments
MultiLineEditBox.love
0.8
(8.22 KiB) Downloaded 246 times
User avatar
Ensayia
Party member
Posts: 399
Joined: Sat Jun 12, 2010 7:57 pm

Re: Any way to make textbox inputs?

Post by Ensayia »

There are a couple of ways to do it, the best in my opinion is using love.keypressed and checking for a specific range of unicode characters that you need. It's a bit complex, and there's no support for things like cursor positioning and copy/paste without quite a bit of extra code and creativity. Unfortunately there's no simple solution that doesn't break cross-platform compatibility with LOVE itself so there's no provided means of doing what you ask.

If you are new to LOVE I highly suggest starting with a few tutorials on the wiki and save some of the more complex stuff for later.
Post Reply

Who is online

Users browsing this forum: No registered users and 41 guests