How can I highlight text (like in Kindle)?

I’m a beginner here. I want to create a mobile app that will load a string of text, and allow users to touch and select part of a string to save to a variable (e.g. just the part “good to be here” from the string “Hello world, it’s good to be here with you.”) I imagine it would work similarly to the Kindle, where you can use your finger to select a portion of text from an entire page of text. Is there a way I can do this through Corona? 

 

Hi @sanette.tanaka,

This is potentially tricky, but I think it’s possible. My first question would be, where do you need to display this text? Can it reside in front (on top) of all other graphical elements? If so, the solution might be a little easier. However, if you need to display this text under or below other graphical elements, this could be more difficult to implement.

Take care,

Brent

Hi Brent,

Thanks for your reply. It could be displayed on top of all the graphical elements. I’m creating a business app that would load and display a string, and let users select and save a portion of the string into a new variable. If this is possible, could you walk me through how I would go about doing that? I looked through the API but didn’t see a ready explanation.

Thanks!

Hi @sanette.tanaka,

OK, but first another question: are you using Mac OS X or Windows?

Brent

Mac OS X

Hi @sanette.tanaka,

OK, well my first potential solution is workable but perhaps not ideal. It would involve that the user interacts with the device’s “native” text copy/paste/select pop-up dialog, for example, where on iOS, you can touch hold on some text, then a little pop-up shows where you can click “Select” and then drag around two little handles. At this point, you’d have to select “Copy” from the pop-up, and then in the Corona app, you could use a button or something to save that to a variable.

So, it’s a two-step process and a little clunky, which might not be practical for you, but technically it works.

Brent

Thanks for the idea, Brent. That does seem like it would work… from Corona, do you know if I could adjust those options that appear when you select text (i.e., instead of “copy,” I could set the options to “save” or “delete”)? 

 

Hi @sanette.tanaka,

Unfortunately we don’t have any control over what the actual OS displays in that operation.

Yesterday I was able to work up a very basic foundation for text selection using non-native display objects. However, it would need more work before I consider it truly useful, and even then it would be limited to single-line text (no multi-line paragraphs) and it wouldn’t allow for editing of the text, for example deleting characters, typing in new characters, etc. That being said, I may finish up the basic functionality soon and, if you only need basic selection and “save” of single-line text, I can share the code with you.

Brent

Got it. Makes sense.

That would be great to see what you have. I wouldn’t need to delete or type in new characters, but I would like to be able to select portions from a paragraph… my idea is to allow users to highlight portions from a larger piece of text, and save that into another variable for later use. Regardless, I’d love to see what you came up with. That would be very helpful. 

OK, in the meantime, you can experiment with the little routine I wrote that uses the native text field. I didn’t do much testing on this, and my only testing was on iOS (not Android), so you may need to tinker with it (or just scrap it, if you don’t like it).

Remember that this uses the pasteboard plugin, so you’ll need to include it in your build settings:

http://docs.coronalabs.com/plugin/pasteboard/index.html

[lua]

local widget = require( “widget” )

local pasteboard = require( “plugin.pasteboard” )

– Create a native text input field

local field = native.newTextField( display.contentCenterX, display.contentCenterY-100, display.contentWidth-20, 30 )

field.text = “Hello World!”

field.size = 24

field:setTextColor( 1 )

field.hasBackground = false

– Function to handle pasteboard event

local function onPaste( event )

    if ( event.string ) then

        print( “Pasted string: [” … event.string … “]” )

    end

end

– Function to handle button event

local function handleButtonEvent( event )

    if ( “ended” == event.phase ) then

        pasteboard.paste( onPaste )

    end

end

– Create a button widget

local button = widget.newButton

{

    x = 0,

    top = 0,

    id = “paste”,

    label = “save copied portion”,

    onEvent = handleButtonEvent

}

button.x = display.contentCenterX

button.y = field.y + 40

[/lua]

Brent

Thank you! I’ll play around with that this weekend. I really appreciate it. 

Hi @sanette.tanaka,

This is potentially tricky, but I think it’s possible. My first question would be, where do you need to display this text? Can it reside in front (on top) of all other graphical elements? If so, the solution might be a little easier. However, if you need to display this text under or below other graphical elements, this could be more difficult to implement.

Take care,

Brent

Hi Brent,

Thanks for your reply. It could be displayed on top of all the graphical elements. I’m creating a business app that would load and display a string, and let users select and save a portion of the string into a new variable. If this is possible, could you walk me through how I would go about doing that? I looked through the API but didn’t see a ready explanation.

Thanks!

Hi @sanette.tanaka,

OK, but first another question: are you using Mac OS X or Windows?

Brent

Mac OS X

Hi @sanette.tanaka,

OK, well my first potential solution is workable but perhaps not ideal. It would involve that the user interacts with the device’s “native” text copy/paste/select pop-up dialog, for example, where on iOS, you can touch hold on some text, then a little pop-up shows where you can click “Select” and then drag around two little handles. At this point, you’d have to select “Copy” from the pop-up, and then in the Corona app, you could use a button or something to save that to a variable.

So, it’s a two-step process and a little clunky, which might not be practical for you, but technically it works.

Brent

Thanks for the idea, Brent. That does seem like it would work… from Corona, do you know if I could adjust those options that appear when you select text (i.e., instead of “copy,” I could set the options to “save” or “delete”)? 

 

Hi @sanette.tanaka,

Unfortunately we don’t have any control over what the actual OS displays in that operation.

Yesterday I was able to work up a very basic foundation for text selection using non-native display objects. However, it would need more work before I consider it truly useful, and even then it would be limited to single-line text (no multi-line paragraphs) and it wouldn’t allow for editing of the text, for example deleting characters, typing in new characters, etc. That being said, I may finish up the basic functionality soon and, if you only need basic selection and “save” of single-line text, I can share the code with you.

Brent

Got it. Makes sense.

That would be great to see what you have. I wouldn’t need to delete or type in new characters, but I would like to be able to select portions from a paragraph… my idea is to allow users to highlight portions from a larger piece of text, and save that into another variable for later use. Regardless, I’d love to see what you came up with. That would be very helpful. 

OK, in the meantime, you can experiment with the little routine I wrote that uses the native text field. I didn’t do much testing on this, and my only testing was on iOS (not Android), so you may need to tinker with it (or just scrap it, if you don’t like it).

Remember that this uses the pasteboard plugin, so you’ll need to include it in your build settings:

http://docs.coronalabs.com/plugin/pasteboard/index.html

[lua]

local widget = require( “widget” )

local pasteboard = require( “plugin.pasteboard” )

– Create a native text input field

local field = native.newTextField( display.contentCenterX, display.contentCenterY-100, display.contentWidth-20, 30 )

field.text = “Hello World!”

field.size = 24

field:setTextColor( 1 )

field.hasBackground = false

– Function to handle pasteboard event

local function onPaste( event )

    if ( event.string ) then

        print( “Pasted string: [” … event.string … “]” )

    end

end

– Function to handle button event

local function handleButtonEvent( event )

    if ( “ended” == event.phase ) then

        pasteboard.paste( onPaste )

    end

end

– Create a button widget

local button = widget.newButton

{

    x = 0,

    top = 0,

    id = “paste”,

    label = “save copied portion”,

    onEvent = handleButtonEvent

}

button.x = display.contentCenterX

button.y = field.y + 40

[/lua]

Brent