Another Text Input field

@Jmv38 - You are welcome! When I have the chance I’ll add licensing terms. I think LGPL or the like so that anyone can use it freely.

@LightDye licencing terms is a good topic! I would like:

  • to use code from others (when they agree).
  • to share my code with codea users so they can use freely the functionnalities of the program, without restrictions,
  • to keep some rights if the code itself is copied in a commercial app. At least the the user should mention he uses my code, in a ‘credits’ section for instance, and tells me he does, so i can use this to promote my skills.
    Do you think this possible? What knind of licence should i use then?

@Jmv38 - I use open source all the time and I’d like to give back too, but to be honest I don’t know all the details about licenses. I’d go with something like LGPL that allows you to use the code in commercial products for free, or something like Creative Commons attribution (by) which is also very liberal.

I think it would be a good idea to share this info in the wiki so people know the best way to license their code. Because, sure enough, someone is one day going to abuse our trust and the way we share freely.

I’ve chosen Creative Commons Attribution (http://creativecommons.org/licenses/by/3.0/au/) for this work and updated the code accordingly in Codea Community.

@LightDye can you tell me why you’re using underscores in function names, for example:

function Input._touched(touch)

I notice you also call those functions using dot notation and not colons. Why is that?

Oh yeah, also: awesome code!

Hi @UberGoober, and thanks. It’s been a year since I wrote that code and I had to check it out to reply. I rarely find time to code in Codea these days.

I used the underscores to prefix class functions (functions that can be called without creating an object of the class, i.e. invoked in a “static” context). The dot notation is used to invoke a class function, whereas colons are used to invoke instance functions, i.e. functions that run in the context of an object which is just an instance of the class.

Since the visual difference between a dot and a colon is subtle, I prefixed class functions with underscores just to make the difference more obvious. Other than that, there is no real need for the underscores. I could have chosen to name class functions with an initial capital letter, for example.

Just curious-could you explain how you did the cursor processing to work with non-monospaced fonts? I’m writing my own textboxes, but they only support one specific font.

@FLCode - the textSize function tells you how wide and tall any piece of text is, which will help you position the cursor

Hi @FlCode, exactly as @Ignatz pointed out, the TextSize function is used in Input:posCursor() after calculating the portion of text that is currently visible in the field.

Is there a way to tell the height of the keyboard, so that we can mimic Apple’s “slide stuff up if the keyboard covers it” animation?

@Jmv38 - Really useful bit of code, thanks :slight_smile:

@calinefrangieh This discussion is a year to 2 years old. There are newer discussions that deal with text input and I’m not sure if anyone is going to look thru this code to answer you. But someone might.

How can I save the input text? Can anybody help!

@calinefrangieh Are you looking for help on this particular code, or are you interested on how to get input from a simple text area.

@dave1707 no i am interrested in the second how o get input from a simple text area!!

@dave1707 can you help me find newer discussions please!

@calinefrangieh Here’s a simple example I had. If you have any questions, just ask.

displayMode(FULLSCREEN)
supportedOrientations(PORTRAIT_ANY)

function setup()
    inp=1    
    var1,var2,str="","",""
    bcolor= 0
    x=300
    y=500
    w=200
    h=50
    l=x-w/2    --button left
    r=x+w/2    --right
    b=y-h/2    --bottom
    t=y+h/2    --top
    rectMode(CENTER) 
end

function draw()
    background(30,30,0,255)
    strokeWidth(6)
    fill(255)
    text("Tap button then input data",x,700)
    text("Press RETURN to show input",x,650)    
    text("Enter value",x,550)   
    if bcolor == 0 then
        fill(255, 0, 0, 255)
    else
        fill(128,0,0,255)
    end    
    rect(x,y,w,h)    -- input area        
    fill(255)
    if keyboardBuffer() ~= nil then
        text(keyboardBuffer(),x,500)    -- show data as it is keyed
    else
        text(str,x,500)    -- show data in input area  
    end  
    if inp==1 and str~="" then
        var1=str
        str=""
        inp=2
    end
    if inp==2 and str~="" then
        var2=str
        str=""
        inp=1
    end
    text(var1,x,HEIGHT-100)
    text(var2,x,HEIGHT-200)
end

function touched(tch) -- check if input area was touched
    if tch.x > l and tch.x < r then
        if tch.y > b and tch.y < t then
            showKeyboard()
            bcolor = 1
        end
    end
end

function keyboard(key) -- move keyboardBuffer to str when return is pressed
    if key == RETURN then
        str = keyboardBuffer()
        hideKeyboard()
        bcolor = 0
    end
end

@calinefrangieh Here’s another example I had if you want something with multiple text input areas. There isn’t a lot of editing of the input, so you can key something that will cause an error.

displayMode(FULLSCREEN)

function setup()
    rectMode(CENTER)
    tbTab={}
    table.insert(tbTab,textBox(WIDTH*.25,HEIGHT*.75,100,50,"Fahrenheit"))
    table.insert(tbTab,textBox(WIDTH*.75,HEIGHT*.75,100,50,"Centigrade"))
end

function draw()
    background(0)
    fill(255)
    text("Tap an input area and enter a value, then press return. ",WIDTH/2,HEIGHT-100)
    for a,b in pairs(tbTab) do
        b:draw()
    end
end

function touched(t)
    if t.state==BEGAN then
        for a,b in pairs(tbTab) do
            b:touched(t)
        end
    end
end

function keyboard(k)
    for a,b in pairs(tbTab) do
        if b.selected then
            b:keyboard(k)
        end
    end
end

textBox=class()

function textBox:init(x,y,w,h,n)
    self.x=x
    self.y=y
    self.w=w
    self.h=h
    self.name=n
    self.str=""
    self.selected=false
end

function textBox:draw()
    fill(128,0,0)
    if self.selected then
        fill(255,0,0)
    end
    rect(self.x,self.y,self.w,self.h)   -- input area  
    fill(255)
    text(self.name,self.x,self.y+self.h)
    text(self.str,self.x,self.y)
end

function textBox:keyboard(k)
    if k==RETURN then
        hideKeyboard()
        if tbTab[1].selected then
            tbTab[2].str=string.format("%.2f",((tonumber(tbTab[1].str)-32)*5/9))
        end
        if tbTab[2].selected then
            tbTab[1].str=string.format("%.2f",(tonumber(tbTab[2].str)*9/5+32))
        end
        self.selected=false
    elseif k>="0" and k<="9" or k=="." or k=="-" then 
        self.str=self.str..k
    elseif k==BACKSPACE then
        self.str=string.sub(self.str,1,string.len(self.str)-1)
    end
end
    
function textBox:touched(t)
    if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and 
            t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
        showKeyboard()
        for a,b in pairs(tbTab) do
            b.selected=false
            b.str=""
        end
        self.selected=true
        self.str=""
    end
end

@dave1707 why are you using ~?? And what should i add to be able to save the text?