Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Help creating a Text Cursor for multiple lines

I am having trouble trying to create a text cursor that will follow the text as you type on multiple lines. It works fine for one line but stays ahead of the text on the second line. This is just basic code I am using to test it out:

function setup()
    blinktime=ElapsedTime
    blinkstate=false

    NoteText="Hello World! Test Program..."
    myBuffer = {}
    for word in NoteText:gmatch(".") do table.insert(myBuffer, word) end
end

function draw()
    showKeyboard()
    background(0)
    textAlign(LEFT)
    textWrapWidth(300)
    textMode(CORNER)

    local textwidth, textheight = textSize(Text)

    Text = table.concat(myBuffer, "" )
    text(Text,362,700-textheight)


    if blinktime < ElapsedTime - 0.6 then
            blinktime = ElapsedTime
            blinkstate = not blinkstate
        end
        if blinkstate then
        rect(362+textwidth,700-textheight,2,25)  
        end
end

function keyboard(key)
    -- This function gets called every time a key is pressed
    if key == BACKSPACE then
        table.remove( myBuffer, #myBuffer )
    else
        myBuffer[#myBuffer+1] = key
    end

end

You may have to type a few characters in for the text to start wrapping.

I have had a look at other Codea discussions but to no avail. Thanks for your help in advance!

Comments

  • Thanks, I'll check these websites out @hpsoft

  • edited May 2015 Posts: 47

    Sorry @hpsoft, that isn't what I meant. I don't think I was specific enough. What I am looking for is to have the cursor correctly follow the text when it is wrapped using textWrapWidth() . This picture may help you and others understand. I don't know if it is possible but It aligns itself with the second line but doesn't follow where the text is.

    Image: https://www.dropbox.com/s/ayqvu025by8jph9/file 24-05-2015 16 25 55.png?dl=1

  • Posts: 456

    The measurements returned by textSize are if a box containing the entire text. So it doesn't know how long the last line is. To do what you want, you'd have to control the line wrapping yourself so that you could measure the text exactly.

    I've done this in projects and it's not overly difficult.

  • Posts: 257

    it's a code source of Dave1707 for simple line i have adapted for multiple line

    function setup()
        displayMode(FULLSCREEN) ; showKeyboard() ; textMode(CORNER)
        clr=false ; oldstr="" ; str="" ; str1=""
    end
    
    function draw()
        background(40,40,50) ; fill(255)
        if clr then    -- clear keyboard buffer
            hideKeyboard()
            showKeyboard()
            clr=false
        end
        str=keyboardBuffer()
        if str ~= "" then
            text(oldstr,100,550)
            text(str,100,500)    -- show keyed input
            stroke(247, 255, 0, 255)
            rect(textSize(str)+110,500,2,20)
        else
            text(str1,100,500)    -- show input after return pressed
        end  
    
    end
    
    function keyboard(k)
        if k==RETURN then
            str1=keyboardBuffer()
            clr=true
            output.clear()
            print(str1)
            oldstr=str
        end
    end
    

    the cursor follow text
    you must replace oldstr by a tab for more than 2 lines

  • @LoopSpace would you be able to give an example? I'm a total noob when it comes to coding...

  • edited May 2015 Posts: 2,020

    One easy (lazy?) way of having a blinking cursor follow the input point as it wraps is to use a cursor-like character from the various symbols in the extended character set, and append it to the input text when you output it to the screen. In the interests of code portability I've encoded the symbols here using Lua 5.3's UTF8 support, but if it's just a private project you won't be sharing you can just enter symbols that you like directly into your code. There's quite a few cursor-like candidates. Note that for the wrapping to work correctly you also need an "empty cursor" symbol (that's why there's two symbols in the cursor code)

    -- Cursor
    
    function setup()
        inkey="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget hendrerit ligula. Quisque vitae mauris aliquet risus efficitur hendrerit at nec quam. Nulla ut sollicitudin dolor, ut interdum nulla. Quisque malesuada fermentum erat vitae mattis. Suspendisse vitae cursus purus, sit amet dictum risus."
        font("DINAlternate-Bold")
        fill(0, 181, 255, 255)
        fontSize(20)
        textWrapWidth(WIDTH*0.4)
        textMode(CORNER) --necessary to stop cursor displacing text
        showKeyboard()
    end
    
    function draw()
        background(40, 40, 50)
    
        local cursorSpeed = 2
        local cursorLen = (ElapsedTime*cursorSpeed%2)//1
        local cursor=string.rep("\u{25af}", cursorLen)..string.rep("\u{25ae}", 1-cursorLen) 
        text(inkey..cursor, WIDTH*0.3, HEIGHT*0.5)  
    end
    
    function keyboard(key)
        if key==RETURN then 
            hideKeyboard()
            --end of text input
        elseif key==BACKSPACE then
            inkey=string.sub(inkey, 1, -2)
        else
            inkey=inkey..key
        end
    end
    
  • Thanks @yojimbo2000 this is exactly what I needed!

  • Posts: 2,020

    You're welcome. As this is the lazy method, there are limitations (cursor has to be same colour as text).

  • @yojimbo2000 Yes I did notice that, but it is still recognisable at least.

  • edited October 7 Posts: 23

    @JonoGaming00 this is my text editor, but it is not done yet :smile:

Sign In or Register to comment.