Clickable text interaction

[Jim Brown]

Hi B4A team

I am trying to figure out a way to add clickable interactive text links in a view. The idea being, the user can click certain words in a text passage and hear an audio representation

Imagine for example the sentence was:

Eat the cakes and drink the water before you go home

The bold words would have audio representations when clicked. The project will have audio files pre-loaded

My first thoughts were to use HTML but it seems limited in terms of getting feedback from user clicks. Another alternative is to use labels to display the main text and attempt to place 'clickable' labels over the active words. Positioning will be a nightmare I guess

Any thoughts?

 

[thedesolatesoul]

Maybe if you use a Canvas to draw the text, and draw the Bold text in a different color (you can even vary it slightly that it is unnoticable), and use GetPixel to return the color of the touched area you can probably get away with it.
However you would need to sample some pixels around the touch coordinates.

 

[nfordbscndrd]

... Another alternative is to use labels to display the main text and attempt to place 'clickable' labels over the active words. Positioning will be a nightmare I guess.

I think that the easiest way to position the clickable label may be to use a monospaced font, which lets you easily calculate the width of a character for the font size you are using. Then you can do something like this:

Dim x as String
Dim CharWidth as Int
CharWidth = ...
Label1 = "Eat the cakes and drink the water before you go home."
x = "Eat the "
Label2 = "cakes"
Label2.Left = Label1.Left + x.Length * CharWidth

If you don't like the look of the monospaced font, you can use a proportional font and put each character into a fixed-width label for each character in the line. This lets you easily compute the position. I used this idea in the custom keyboard routines posted on the Share forum.

To display the text, you just go:

txt = "Eat the cakes and drink the water before you go home."
For i = 0 to txt.Length: charLabel(i) = txt.CharAt(i): Next

Once you've done that, it's easy to figure out which character was pressed.

 

[Jim Brown]

Thanks for the ideas guys. The Canvas Text idea seems the best way forward (with clickable zones for the interactive text)

 

[Erel]

My first thoughts were to use HTML but it seems limited in terms of getting feedback from user clicks. Another alternative is to use labels to display the main text and attempt to place 'clickable' labels over the active words. Positioning will be a nightmare I guess

You can set the words as links and then handle the OverrideUrl event. Html together with CSS allow you to make the links appear with no special style.

 

[metrick]

How about using button and set the alpha to 0 for both enable drawable and pressed drawable. Just place the button on the top of text colored word. User press the text colored word, handle the invisible button on top with click or down event.

It should do the trick but not fully tested.