Jump to content

GUI - Input TextBlock


royibernthal
 Share

Recommended Posts

Fun!  Let's see... each char in a canvas2d input box... has to be a separate object.  In that way, it is easy to click within text... to place a flashing cursor-bar.

In fact, each char... needs to be made from TWO Babylon.GUI simplebuttons... one for its left side, one for its right side.  That way, when the click arrives, we can determine if the flashing cursor should be placed BEFORE the clicked character, or after. 

Nah.  We can use some math, along-with char localCoordinates... to determine which side of the character to place the flashing cursor-bar.  Back to one object per char... smarter.  :)

Once the "where is the cursor?" system is created, then advanced crap like highlighting, inserting, backspacing, type-over, and deleting... can happen.  We will need to allow that flashing cursor to be re-positioned with arrow/cursor keys... AND shifted-arrowkeys for highlighting, AND control-arrowkeys for word-jumping.  Cool.  :)

It needs onChange and onEnter, just like the HTML input field, and payload is .value, likely.

Then there is field width, and maximum chars, etc.  We should have a set/settable fontFace, too, and that will affect/determine the initial height of the input field.

Wow!  :)

According to my web searches, nobody is even CLOSE-TO creating such a thing.  We would become (more) famous!  I'm thinkin'... oh... 10,000 lines of code.  :D

Link to comment
Share on other sites

Here's an (incomplete) lib for PIXI which attempts to do this:

https://github.com/limikael/PixiTextInput/blob/master/src/PixiTextInput.js

and here's a demo:

https://rawgit.com/limikael/pixitextinput/master/test/index.html

They're simply measuring substrings within the masked area to determine the caret position.

bjs GUI doesn't have mask at the moment, but it can definitely implement this without mask - which is only needed to support content that is longer than the textfield.

Link to comment
Share on other sites

  • 1 month later...

If there's no "purists" watching...

Why not click-to-open an absolute-positioned HTML input node, do your text work in there?  Then hit OK to CSS display: none that input node, then dispose the old textBlock, then make a new textBlock using the new text.  Yeah, that'll work.  (Probably the same method as CastorGUI, as DBawel mentioned earlier.)

Do tablets allow DOM/HTML stuff?  (I still use steam-powered Commodore PET, so I wouldn't know.)  ;)

Here's an old PG where someone launches an abs-positioned html form (with input box).   Click on the sphere to toggle "menu".

Link to comment
Share on other sites

23 hours ago, Arte said:

On PC working, tablet not reading as input. :(

I don't think you are going to have any luck showing the keyboard on mobile without using an HTML input element.  You will probably have to make your own keyboard (I don't recommend that).

Edit:  Coincidentally, I just saw this on Twitter: https://github.com/etiennepinchon/aframe-material

A keyboard control would be a cool addition to GUI.

Link to comment
Share on other sites

It's great DK,

just missing a little thing when you want to change the position of the cursor in the input field or go back to the beginning with the mouse. Currently we have to do it with the arrows on the keyboard.

I see no event in the doc as with checkbox and radios. It exist an onTextChangedObservable.add(function(value) , onTextSubmitObservable.add(function(value) .. on inputText to validate ?. This would be useful.

a property like input.placeholder = "Pseudo" could be very useful too.

Can one transform into Textarea to have multi-line text?

But otherwise it's great.

Thank you

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...