Scrollable text Area

[Antiloco]

Hi All,

Is it possibile in NGUI make an UIInput Text with horizontal e vertical  scrollbars for inserting a long text by user?.

[ArenMook]

Create a scroll view with a pair of scroll bars like you normally would. Place the input field inside the scroll view and change the label to "Resize Freely". For the input's On Change notification, choose some function that will call UIScrollView's UpdateScrollbars().

[Antiloco]

Thank's Aren,

This solution work fine, but i have a problem.
When I'm editing text, and text row length became greater than scrollView width, i need a system that automatically scroll horizontal scrollBar up to caret position.
I thought to force horizontal.value =1 after onChange event, but it works only if append text.

Solution could be know the localPosition of caret, ad tell to ScrollView to scroll at this position,if position is not in the scrollView bounds.If that is the right way, what I have to do to know caret localPosition?.

[ArenMook]

You can determine the position of the caret by exposing the UIInput's mCaret property and accessing its geometry. Just note that you will want to transform the geometry's verts by the label's transform to bring it to world space, then by inverse of whatever you need it to be relative to (like the label's parent).

[Antiloco]

Thank's

In general i prefer avoid to modify directly your code, to avoid reimplementing changes at every ngui updates. I hope that in future NGUI release mCaret  will'be accessible.
For now I'm accessing caret in this way

1.         UITexture findCaret ()[
2.                 {
3.                                 UITexture caretTexture = null;
4.                                 UITexture[] cs = label.GetComponentsInChildren<UITexture> ();
5.                                 foreach (UITexture c in cs) {
6.                                                 if (c.name == "Input Caret") {                         
7.                                                                 caretTexture = c;
8.                                                                 break;
9.                                                 }                      
10.                                 }
11.                                 return caretTexture;
12.                 }
13.  

And get caret limit

1.  
2.                 void CalcCaretLimit(UITexture caret)
3.                 {
4.                                 MaxCaretX = float.MinValue;
5.                                 MinCaretX = float.MaxValue;
6.                                 MaxCaretY = float.MaxValue;
7.                                 MinCaretY = float.MinValue;                    
8.                                 foreach (Vector3 v in caret.geometry.verts) {                                          
9.                                                 if (v.x > MaxCaretX) {
10.                                                                 MaxCaretX = v.x;
11.                                                 }
12.                                                 if (v.x < MinCaretX) {
13.                                                                 MinCaretX = v.x;
14.                                                 }
15.                                                 if (v.y > MinCaretY) {
16.                                                                 MinCaretY = v.y;
17.                                                 }
18.                                                 if (v.y < MaxCaretY) {
19.                                                                 MaxCaretY = v.y;
20.                                                 }
21.                                 }                                      
22.                 }      
23.  

Calculate ScrollView  limit

1.  
2. void CalcScrollViewLimit ()
3.                 {                                              
4.                         minclipX = scrollViewPanel.clipOffset.x - initialOffsetX;
5.                         maxClipX = (minclipX + scrollViewPanel.finalClipRegion.z);
6.                         minclipY = scrollViewPanel.clipOffset.y - initialOffsetY;
7.                         maxClipY = minclipY + (scrollViewPanel.finalClipRegion.w * -1);
8.                 }
9.  

At every key press I execute this method.

1.  
2.         void UpdateScroll ()
3.                 {                              
4.                                 UITexture caret = findCaret ();
5.                                 CalcCaretLimit (caret);                
6.                                 if (MaxCaretX != float.MinValue) {                                     
7.                                                 CalcScrollViewLimit ();                                
8.                                                 if (MaxCaretX > minclipX && MaxCaretX < maxClipX) {
9.                                                         // inside scroll area
10.                                                 } else {
11.                                                                 if (MaxCaretX > maxClipX) {                                                            
12.                                                                                 scroll.MoveRelative (new Vector3 ((maxClipX) - MaxCaretX, 0, 0));
13.                                                                 } else if (MinCaretX < minclipX) {
14.                                                                                 scroll.MoveRelative (new Vector3 (minclipX - MinCaretX, 0, 0));
15.                                                                 }
16.                                                 }
17.                                                 if (MaxCaretY > minclipY && MaxCaretY < maxClipY) {    
18.                                                         // inside scroll area
19.                                                 } else {                                                               
20.                                                                 if (MaxCaretY < maxClipY) {                                                            
21.                                                                                 scroll.MoveRelative (new Vector3 (0, maxClipY - MaxCaretY, 0));
22.                                                                 } else if (MinCaretY > minclipY) {
23.                                                                                 scroll.MoveRelative (new Vector3 (0, minclipY - MinCaretY, 0));
24.                                                                 }
25.                                                 }
26.                                 }
27.                                 scroll.UpdateScrollbars (true);
28.                 }
29.  

I simply look if caret is outside bounds area, and i move scroll for the difference between  bounds area limit and cursor position.It's quite rudimental, but seems it works. Is it in your roadmap implements this kind of component in future NGUI release?

[ArenMook]

Yeah, I'll expose the caret in the next update.

[kenshin]

Hello ArenMook,

I am working arount the textarea problem too and I think the Antiloco proposed solution is interesting.
I saw you expoosed the caret in this update, thanks a lot!

Are you planning to add textarea support in next version of NGUI?
I think this will be a great feature update for your system.

Cheers,
Kenshin

[ArenMook]

It's certainly something I can look into in a bit. Not this moment though. Taxes = pain.