Text Input > dynamicTexture

[Noyogi]

Please send me in the right direction, this is what I am looking to do:

 

My GUI is a sphere

Clicking on the sphere activates the keyboard

While typing, letters are produced on the sphere

Pressing Enter will

     if "#" begins string, js file with that name will run, example typing "#login" will run login.js

     if no "#" begining string, then createsphere.js will run, creating a sphere with the text added to the sphere's texture

 

My real question at the moment, How do I display, WHILE TYPING, letters on a sphere?

my first naive thought was to have a text box on a plane, with the camera facing the back of the plane, camera would see no text or plane only a sphere on the other side of the plane and the sphere would be reflective so you could see the text reflected from the plane through the reflection on the sphere, LOL LOL!!!!! I quickly realised that the reflective quality is not actually reflecting, hahahaha, oh boy was that a good one

[dbawel]

Please create a playground scene, and I promise you will get the answer in code from myself, @Wingnut or another developer without a life (just joking) on this forum. Let's get a look at your code, as this should be simple.

DB

[Wingnut]

Hi guys.  @dbawel, I'm not sure Noyogi can make a playground yet... not without an "approach vector" 

Noyogi... I think the reflect-back idea is quite novel and innovative.  Essentially, you would be using a single dynamicTexture, or a cubeMap (skybox with 1 of 6 of its textures being a dynamicTexture)... as a .reflectionTexture of the sphere.  I like it.  Likely, each end of the text would stretch, but maybe not a problem for you.  Not a bad idea at all.  You have a good inventor's mind.

The other option... let's see... dynamicTexture on the diffuseTexture of the sphere.material.  Noyogi... a dynamicTexture is essentially a W3C Context2d... used as a BJS texture.  The DynamicTexture.drawText() method is a convenience provided by Babylon.js... to make text on mesh.  (context2d is really not part of BJS... its a 2d thing). 

But, the entire power of the context2D is available on dynamicTextures, if you choose to exercise it.  Get a dynamicTexture mapped onto the diffuseTexture of the sphere's material, and its .drawText() should nicely match the curvature of the sphere.  You have already discovered dynamicTextures... as you used the term in the title of this post.  But sometimes I use threads... as places to create mini-tutorials for ALL users.  Sorry if I am saying things that you already know.

http://www.babylonjs-playground.com/#1282WV#12

(basic dynamicTexture on a sphere)

DynamicTextures are not the easiest thing to "erase" text-from.  For example, I believe a backspace would need to "fill" a rectangle where the deleted text character WAS.  In other words, it would need to paint-over the deleted character.  Not easy to determine how much area, and where... to paint-over.  Font sizes, string length, all major hassles in perfectly placing and sizing the paint-over area.

It might be wisest to onTextChange recreate the dynamicTexture... using the current "string".  That way, the browser-based keypress eventHandler can do work directly on the (global) variable string.  With each keypress, dispose the old dyna-Texture and install a new one.

DynamicTexture has no simple .text property that auto-updates on-change.  Essentially, you would make your own version of BJS dynamicTexture that DID do that.  I wonder if a global string variable could become an observerable, and have an observer.  Perhaps that would be a cool way of doing this.

I'm pretty sure @dbawel will want to flesh-out the above playground, and get it all working for you.    Ok, maybe not.  heh

No life, huh DB?    Yeah. 

Oh, you mean no tension-causing responsibilities?  Yeah, I minimize those.  Jealous?    I like being a 59 yr old child.  My life is actually FILLED with webGL/JS enjoyments, learning, social, experiments... totally fun!  What else could I guy ask-for from a life?  And the people... the coolest.  I don't know if there is ANYTHING more enjoyable... than watching people dream, design, invent, experiment, and "hearing" their smiles when they get things working so easily.  Watching others jump-for-joy, is just as joyful for me... as it is for them.  I get "caught up" in other people's fun.

Oh, that other really fun thing?  *nod*  Yeah, it has no life.  I lost my "other really fun thing" in Korea, so I don't have that issue.  No, not shot-off.  Wore-off.  heh

TMI, Wingnut!  TMI. hah.

ANYWAY, let's see if we can get a typing-on-the-dynamicTexture thing... happening for Noyogi.  I'll get more coffee, and watch. 

[dbawel]

@Wingnut - I'm always surprised with your posts, but this one definately gave me a laugh. Of course, you know I was joking, and thank God you have the time to explore all of these issues on the forum.

6 hours ago, Wingnut said:

DynamicTextures are not the easiest thing to "erase" text-from.  For example, I believe a backspace would need to "fill" a rectangle where the deleted text character WAS.  In other words, it would need to paint-over the deleted character.  Not easy to determine how much area, and where... to paint-over.  Font sizes, string length, all major hassles in perfectly placing and sizing the paint-over area.

Actually there are a couple simple methods to "erase" pixels from a dynamic texture. For your purposes, to completely erase a dynamic texture would be to declere it as a variable and when you want to change or erase, simply declare the variable as empty. Example: if the variable name is dTex, then you would use dTex = " "; then re-declare the variable as a new dynamic texture if you want.

Another method I use is to first apply a single color such as (1,1,1) to the entire dynamic texture (and for me this works best if the dynamic texture is applied to the emmisive material channel,) however it doesn't matter what the color is, but if you apply a color first to the entire dynamic texture, you can then use that base color to draw over any other color on the dynamic texture; and it will appear as if you are erasing.

There are other more complicated methods, but I doubt few would dare to tread into these areas. If you have any trouble with either method I mentioned above, I'll be happy to create a playground scene for you - however it's always best to stumble through these issues with as little guidance as possible, as you'll discover much more and understand much better without the code simply delivered to you.

Cheers,

DB

[Wingnut]

But but but...  you didn't talk about backspace.  The user has the word "Babylong.js" typed into the DT.  Ooops, need to backspace 4 characters and remove that unwanted 'g'.  (We're talking about live typing on the DT.) 

The first backspace must erase the 's', the 2nd... 'j', 3rd... period, the 4th... finally needs to wipe the 'g'.  Is the 's' wider than the 'j'?  Is the period narrower than all other chars?  In some fontfams, yes.  In others, no.  And fontSizes?  Oh goodness.

How will the programmer determine exactly where to paint-over for each backspace... and how wide of an area?

The entire text will need to be wiped/redrawn with each keypress, yes?

[Noyogi]

Okey, I have a playground:

http://www.babylonjs-playground.com/#28A13N#6

click the sphere and type "a", this would produce a sphere with a texture of a; can I upload textures to playground? if so I'll load up a whole alphabet I know it's not convenient for multi language, but this is my current solution

at the moment the letter spheres just move sideways but I would like the to either:

a)rotate around y-axis of sphere1, till reaching starting point then rotating a fraction around the x-axis of sphere one, then continue around y

b)animate around a spline that I create inside of the sphere

c)have something like a spring joint connecting them to eachother and be bound to the inside wall of sphere1

Thank you for the responses thus far.

@wingnut approach vector?

[Noyogi]

I'm in Guatemala, so my connection is a bit hit and mis.

Sorry for the double post

Edited September 19, 2016 by Noyogi
double post

[Noyogi]

http://www.babylonjs-playground.com/#28A13N#7

This is it with all the letters (they all have the same texture in the playground), I am sure there is an easier way to do this, please do chime in if you know any shortcuts

back space brings the letters back twice as far as they go per type then on release jumps one forward

current issues:

1) I'd rather not have to click on sphere1 to begin typing

2)If I type too fast the letters laydown on top of eachother and double gap

[dbawel]

Backspace is simply an event. What's the issue here? I can't do it today, but if this isn't clear tomorrow, I'll build a simle Playground scene. Also try passing an HTML character to the dynamic texture - again, I don't see this as an issue - but perhaps I'm speaking too soon. And @Noyogi, there's so much code on your current PG scene, unless I don't understand the end user experience and what you're trying to achieve.

[Wingnut]

@dbawel If you're going to delete a character off the end of the text... without doing a complete wipe and redraw... I wanna see this "simple" playground.  No matter the font size, no matter which character (W's are much wider than periods).  You claim you can paint-over just the end character... when a backspace is hit?  Nah, bet ya can't.  You're going to get a tumor trying that... and it won't be a simple playground.

Mister tough talker.  Mister "this is easy".  hehe.  Let's see what ya got, dbawel.  Don't make me have to embarrass you in front of God and Deltakosh.    Show me a delete-the-last-char WITHOUT wiping all text and doing a new filltext using the whole string.  Bet ya can't.  You'll be grabbing the last character of the string, then using measureText on THAT single letter, then trying to find WHERE on the canvas to do your one-character overpaint fill.

Not gonna do.  Bet a doobie and a 6-pack?    Remember... no erasing entire text and re-draw with a shorter string.  That's cheating.  I want to see you find that last character of the string (on the canvas), and then fill-over (erasing) ONLY that last character.  Then I'll test it with all fontFams, fontsizes, and kerns (letter spacing).  Better take your Geritol for this one, DB.  heh

@Noyogi, yeah, that's a decent attempt, but much too much code.  I would say... leave actionManagers out of it, for now.  Go find a DOM/HTML or jQuery method... to get a keypress, and make sure it's an alphanumeric.  a-z, A-Z, 0-9, and punctuation (and backspace:)).  You want to make sure you allow good keypresses and reject certain other keypresses.  This is pure DOM stuff.  HTML.  No BJS involved, yet.  Practice with things like http://www.javascripter.net/faq/keyboardinputfiltering.htm

Just an input field and a text area to print what the user types.  Step one is to learn how to accept the keys you want to allow, and reject the keys you don't want to allow.  Then you apply that... to a global variable... maybe var text = "".  Perhaps put it right after camera and lights. I think you want to trigger with inputfield.onChange and not inputField.onEnter.  You want each keypress to do something, and NOT wait until user hits enter, correct? 

If so, yeah, onChange, I believe.  InputField.onChange... if legal char... add char to current string/value in text area (later, this will be adding the legal character to that text variable).  Then, since you got a legal character... and added it to the text variable, then it's time to wipe all old text from the single dynamicTexture that is currently on the sphere, and re-paint the text (textFill?) onto the dynamicTexture.   (This is the method DBawel will try to blow past me as a "hey, I did the backspace thing" when actually he didn't.  He will resort-to doing a complete text wipe and text repaint, like I described/suggested to you, and he'll have to eat some tasty crow.) 

So essentially, if your text filtering system sees a legal character typed, you do three things.  Update text variable (appending-on the new legal typed character), then wipe old text from dynamic texture, then use textFill? or drawText() to put the NEW text onto the sphere's DT.  No need to check for each separate key like you did in your PG.  Regular expressions (regexp) have the abilities to check for alphanumerics... and you can have it reject all other keypresses.  With me?  I hope so.  Start your studies in HTML land... on the web... with tutorials about user input filtering.  I call them "keypress discriminators", but nobody on the web calls them that. 

And you can ignore what DB and I have happening here.  He's going to be scroungin' for doobs and beer to send me, soon.    He and I are actually e-buddies, so we razz each other... but it's done with love.  DB is a really good guy... I like him a lot, and I hold him in high esteem (by the throat) He and I are both card-carrying space-vegetables.  heh.

@Noyogi  Approach vector ~= "a plan".  How to approach making a test playground.    You were still wondering what would be the best way to accomplish your needs, so... you really didn't know what type of playground to make... for a testing playground.  For example, your reflection idea was pretty ok, but a test playground for that... would be quite different than a test playground for standard un-reflected dynamicTexture.  At that point, it was difficult for you to determine a proper "approach" or "angle".

[aWeirdo]

Hi, i don't have time to make a pg,

But I would input the letters in a string variable,

Var letters = "";

On keyDown, letters += keyPessed;

On backspace,  letters.length -=1;  letters = letters.slice(0, -1);

Then update the texture.

 

Update;

@Noyogi
http://www.babylonjs-playground.com/#1RQL00#3 //Click on the canvas and start typing.

[Noyogi]

Wow, that is much more efficient coding, thank you, I will spend some time to understand what you have done.

Thank you,

too a weirdo,

noyogi

[dbawel]

I just sat down to write th PG scene, and @aWeirdo beat me to it. I would normally be happy about this, but @Wingnut had no faith - and after his last post, I really wanted to school him "just a bit." And although examples of this have been built onto the playgound in the past, I was going to build it from scratch without reference just to spite Wingy. Oh well, at lease you got your answer - and that's what really counts. But Wingy - Ye of little faith?

DB

[Wingnut]

Still, nobody has done a backspace that doesn't draw the entire string, and only over-paints a single (last-typed) character-area of the context2D canvas. i still win.  Nobody has proved me wrong, yet.    Not gonna happen.  heh.  Bring it on, DB... let's see what ya got.

I think we might have a mis-communication about what the true challenge... is.  Last character typed... gets filled-over... upon backspace.  No redraw of previously-typed text... allowed. 

Objective: Paint-over the last char, no matter which character it is, no matter the fontFamily, no matter the fontSize, no matter the kerning, no matter the drawText origin/position. 

It's gonna take some VERY precise erasing "fill area"... to paint-over ONLY the last character.  (I hope I have clarified properly)

[dbawel]

@Wingnut -  I suppose I still don't understand you're challenge - as I will do everything to show you that practically anything is possible with draw and erase onto dynamic textures - practically. THe way you describe above appears to be what @aWeirdos last PG scene accomplished - so what am I missing? Please clarify EXACTLY what the challenge is, and I'll bet I can build it.

Cheers,

DB

[Wingnut]

I thought I already did clarify.  hmm.

On every keypress... aW is doing...

        dynTex.drawText(letters, null, 250, "25px verdana", "black", "white");

He draws ALL letters with each keystroke.

My challenge... was... upon backspace char... NO re-draw of letters allowed.  Upon backspace... you paint-over (erase) the last char on the canvas. 

(And you can reduce the length of letters, of course, but that's irrelevant, because... for this challenge, you won't use letters during a backspace processing.  You only use a very accurate overpainting on the canvas... using background color).  With me?

I think it can be done... but oh, you will wear-out .measureText() and I doubt it would "hold-up" against all font families, kernings, sizings, drawText positions, etc.  I'm not sure we can get on-frequency with what my challenge is, though.  I don't know how to explain it any differently than what I have done.

[dbawel]

Are you saying that upon backspace, that the rest of the characters maintain their positions and don't move when a character is deleted? That's the only thing in which I might understand what you're asking. Also, I still believe a no brainer, and simpler than you might think. If indeed this is what you mean to do.

DB

[JohnK]

@dbawel can I throw in my two pence worth. Let's see where you and  @Wingnut agree and differ.

1. drawText method of a dynamicTexture erases everything on the canvas element and writes the new text  -   agree or disagree?
2. The typed in letters are held in the letters variable, when backspace is typed the last letter in letters is removed  and drawText wipes out everything done so far and then writes in the letters - agree or disagree?
3. When a letter is typed it would be extremely difficult only to change the dynamicTexture canvas by placing pixels correctly onto the existing canvas - agree/disagree?
4. When backspace is typed it would be extremely difficult to just wipe out the pixels for the last letter typed on the dynamicTexture canvas - agree/disagree?
5. When it comes to changing a font for a single letter drawText would have to be rewritten - agree/disagree?

Here's an attempt at font change http://www.babylonjs-playground.com/#1RQL00#4

EDIT Sorry forgot most important part - to change font press CTRL ONCE before typing next letter (do NOT hold CTRL down)

Here's to happy discussions.

[Wingnut]

Yep, you've said it perfectly, @JohnK, thanks... but that #4 demo doesn't seem to work properly for me.  If I type 2-10 chars, one backspace removes all of the 2-10 characters and returns to 'abc'... and I don't see a font change anywhere.  No big deal.  At least you understand the challenge.  (a challenge that is not necessary at all... to provide a solution to the user.  It was just a "side challenge".)

The main thing with Dbawel and I... was that I couldn't seem to get the challenge correctly communicated to DB.  My communication skills seem to be less than optimal. 

1. Agree, except... we can use many drawText calls, each with different starting positions, and those won't overwrite previous drawText calls.
2. Agree.  3. Agree.  4. Agree
5. Agree, and holy cow, what a nightmare to code that.     I got a little brain tumor just thinking about it.  heh  It would likely need an array of pre-made font style strings... and it would step through the array, using a different font style for each character of the text.  Each font style in the pre-made array... would likely need a kern and baseline setting, too. (Essentially, x/y location of each character).

Thanks for re-clarification, JK... you understand completely.  Again, my challenge is not-at-all necessary... in order to solve user's issue.  Just a side thing.    I'd give LIKES, but I seem to have hit the 10 LIKE limit again, somehow.  I must have done a bunch of after-midnight LIKING last night. 

[JohnK]

@Wingnut sorry forgot important instruction have now edited in.

[dbawel]

Thanks @JohnK and @Wingnut - I relaized in my last post that this was the issue. However, have you considered methods such as typing into an HTML text field and passing the string value to the dynamic texture? There are other possible solutions, but they are out there - or perhaps I've lost my mind.

DB

[Wingnut]

How one gathers the string... is irrelevant.  *sigh*  The stuff I speak-of... is character-by-character canvas painting.  Never drawText more than one character, no matter the length of text variable.  Each keystroke, does one character, and never re-paints the entire string to canvas.

9 hours ago, dbawel said:

Are you saying that upon backspace, that the rest of the characters maintain their positions and don't move when a character is deleted? That's the only thing in which I might understand what you're asking.

Yeah, you almost had this correct... but nobody was talking about "move".  Just... no drawtext of complete string.  Only drawText and eraseText of a single character... no matter the fontsize, no matter the kerning, etc etc.    Can you locate the pixel-area of a single character... out on the canvas... and replace or erase ONLY that char, no matter the... blah blah blah? 

The main thing... is that you admit that it would not be "a simple playground" or "a no brainer"... because... it would be HARD!!!    SUPER hard when using squiggly Asian-ish fonts or fonts with abnormal descenders.    #3 and #4 in JohnK's list... both "extremely difficult"... right?   So, I win. 

Let's see, what do I want sent to me by a California person.  hmm.  Do Sequoia's shed little sticks, sometimes?  I could use a Sequoia stick... if you happen to have one nearby.    If it could transform matrices with a wave of the stick, that would be nice, too.

Kinda sounds like you are wussin'-out, though... buckling... under the enormous pressure of my overwhelmingly-convincing barrage of logic. heh

Ooh, yeah, once we got a char-by-char drawText... then we get to do things like...

Ransom note-style text. 

[dbawel]

1 hour ago, Wingnut said:

The main thing... is that you admit that it would not be "a simple playground" or "a no brainer"... because... it would be HARD!!!    SUPER hard when using squiggly Asian-ish fonts or fonts with abnormal descenders.    #3 and #4 in JohnK's list... both "extremely difficult"... right?   So, I win. 

OK - it's on! It may be on my server, but still valid. I'm in Mexico today, but will have time late tomorrow or Friday to build. Oh and @Wingnut - I have tickets this Sunday to see Grand Funk Railroad and Chicago - jealous?

DB

[Wingnut]

oh man, hell yeah I'm jealous!  PARTY!!! 

But ya better allocate a solid week to get this proof-of-crow-eating coded-up.  Hope you're good with .measureText(), because you will need it to death.

And if you build a "single-character class" with a .placeMe() and a .dispose()... that's beyond "simple" and beyond "no brainer", agree?  Good man. 

[adam]

25 or 6 to 4?