Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Antiloco on April 07, 2014, 02:00:12 AM

Title: Scrollable text Area
Post by: Antiloco on April 07, 2014, 02:00:12 AM
Hi All,

Is it possibile in NGUI make an UIInput Text with horizontal e vertical  scrollbars for inserting a long text by user?.
Title: Re: Scrollable text Area
Post by: ArenMook on April 08, 2014, 12:50:07 AM
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().
Title: Re: Scrollable text Area
Post by: Antiloco on April 08, 2014, 02:24:06 AM
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?.

Title: Re: Scrollable text Area
Post by: ArenMook on April 09, 2014, 03:52:39 AM
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).
Title: Re: Scrollable text Area
Post by: Antiloco on April 16, 2014, 02:12:37 AM
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?
Title: Re: Scrollable text Area
Post by: ArenMook on April 16, 2014, 10:39:54 AM
Yeah, I'll expose the caret in the next update.
Title: Re: Scrollable text Area
Post by: kenshin on April 28, 2014, 04:01:29 AM
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
Title: Re: Scrollable text Area
Post by: ArenMook on April 29, 2014, 02:23:40 PM
It's certainly something I can look into in a bit. Not this moment though. Taxes = pain.