Author Topic: Let’s talk about arrow keys and mouse input navigation  (Read 5454 times)

galuodo

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 65
    • View Profile
Let’s talk about arrow keys and mouse input navigation
« on: March 28, 2013, 01:30:11 AM »
Now, I am completely finished my chat window, so I will share some of my work with you. The first one is the navigation. (my ngui version is about 2.1.4)

First you should know that English is as a foreign language for me, so there will be some grammar mistakes and inappropriate expressions.

And I cannot offer you my code for: 1 this is from my job, 2 my input box have so many other functions such as hyperlinks and flash carat, and 3 I haven’t get touch with Unity3D and NGUI unity this January, so my code is very bad :(. But, I will provide the way I implement this function.
Arrow Key navigation:

the First Step:
The original UIInput is used a method call GetEndOfLineThatFits
 in UIFont.cs. It cut the text and leave some last chars so that the string will not out range the input box, but if you need insert or remove a single character, you cannot use this way to cut the string. We need the UILabel in UIInput cantinas the whole string and display only parts of the string. This sounds a little hard, however fortunately, ngui provide a panel which can clip. OR, change the code in that method.

Add clip on the parents panel.

And give the string  processed value to string fit
Now, the surplus contents will not be observed, but the surplus words will not be shown. This will solved later.

the Second Step:

In the input script, author already appand the carater ‘|’ after the text, so we need add the local parameter indexOfCarat to store the position of carater. Then, modify the code in method UpdateLabel, let the carat char insert the right place. If we detected the right arrow key, we add the index, and sub the index if left key pressed.

Now, we can see the carat moving, but the now inputs still added after.

 The text for UpdateLabel the method needs modify. You need to control the value of this index to constrain the legal value.
We already have the position of carat which user want. So, the new char is not appand at the end but insert in the index of carat.


So, it’s nearly complete.~~ if the length is not very long , this input box works well. But if the length out ranged the size of the label in input box, or adjust the position of the carat too far, there will be an error: the carat misses.

the Third Step.
The reason is that the carat is out of the input box.

The way I used to fix this problem is to change the position of the label accrounding the carat. Before solve the problem, we should know a useful method is UIFont.cs: CalculatePrintedSize, which will return the pixel size of a given text in the specific font after multiplied by the font size. So what we should do is to try to keep the carat in to the input box.

Add a Vector2 to store the current position of the label(pivot of this is left, top left or bottom left), another two Vector2 to store the position of the input box(or the clip box) and the size of it.

How? A simple way is to keep the carat on the left side of the input box after pressed the left arrow key or backspace, and on the right side after right arrow and type a letter. This is my solution.





the Last Step:
Thus, after the carat moved left, we calculate the length of text before and the then added to the position of the label to judge whether the carat is on the right of the input box. If so, move the whole label right so that the carat just in the box and on the left side.


The green arrow show the value the label should move.
We using the same way to process when the carat move right.

After this step, we can use the key to navigation.
« Last Edit: March 28, 2013, 04:00:29 AM by galuodo »

galuodo

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 65
    • View Profile
Re: Let’s talk about arrow keys and mouse input navigation
« Reply #1 on: March 28, 2013, 01:39:11 AM »
If you need a mouse cursor navigation?
(I do not do this for the hyperlink thing, but i can offer some simple idea)
Add a collider and adjust the centre and the size fit the whole input area(not the clip area). If the mouse button pressed, it is easy to know the position where the cursor on the collider, and then the position on the label, last calculate the index of carat by using CalculatePrintedSize. And if you drag the mouse and near the rim, do the same thing as arrow key:).

I do not know how to select the word~ but I also have an idea~~

When mouse pressed, calculate the index of carat and retore it~, when dragging, calc the curr carat and but a UIFilledSprite behind the label to show the selection. Because of the clip of panel, we do not have to re-calc the size of the selection if the label scrolled.
When the mouse button released, store the index, and obtain the subString user select~~


I hope my method will help.pleas do not post or translate to Chinese Unity3d Forum!!!!!

I am learning English,so if you think this is useful, and if you find some grammar mistakes and odd expression, please tell me.

[2013-4-2 11:28]
now. I have to do a mail system, and to create a powerful input after the festival, and after that, there is a better chance to provide the code :)
« Last Edit: April 01, 2013, 10:29:25 PM by galuodo »

tonyM

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 24
    • View Profile

galuodo

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 65
    • View Profile
Re: Let’s talk about arrow keys and mouse input navigation
« Reply #3 on: July 29, 2013, 08:00:15 AM »