Hi,
I am working with a textWrapping : https://playground.babylonjs.com/#M779CA#4
And I would like to enter a text after clicking on it. But not a text in the code, a text I write after clicking on the textWrapping if you understand what I am saying. I have found a lot of solutions but with HTML, and BabylonJS don’t take HTML if I understand so please 
Can you give me some direction so I can study it. Thank a lot !
Mathieu
Hiya Mathieu!
I THINK I understand. You might wish to change all “textWrapping” to “scrollViewer” in your first post, and in its title. 
Perhaps, here’s one solution:
https://playground.babylonjs.com/#M779CA#7
I added a pop-open textInput control… which opens beneath scrollViewer… when we click on scrollViewer. User can click-on that textInput, type text, hit enter, and then it is added to wrapped scrollViewer text. Then textInput control disappears again.
We needed a textInput control, because scrollViewer doesn’t allow text-input, directly. Maybe someday it could. Perhaps it is a good added-feature idea.
Note: Your panel1 is not being used. Maybe it needs removing. But maybe… put scrollViewer and textInput inside stackPanel… may be wise. IF you do that, you will likely remove line 173, the .top setting. All .top and .left settings might be a bad idea… for controls which are contained inside a stackPanel.
Are we getting NEAR-TO what you wish? I hope so. Feel free to ask questions, and to tell us more details about your wishes.
1 Like
Thank you for that solution ! It what I wanted. For Panel yeah I just copy/paste a thing. Thank you !
See you for all explaination !
I will try to put it directly in the textWrapping, but it’s just “CSS” I want, but it’s the function I wanted ! I want it inside because I would like to be able to remove also the text inside if I did a mistake
https://playground.babylonjs.com/#M779CA#8
Better version. Added lines 192-195, to allow repeated scrollViewer clicks… toggle textInput ON/OFF.
Yeah, BJS GUI vs. HTML form-controls GUI - quite different. But HTML GUI not usable with VR head-gear… so we wanted to be ready for VR gear.
Maybe RIGHT click on scrollViewer = undo? shrug. Maybe control-click or shifted click? hmm.
1 Like
Yeah, this function would be onlu for a tool. It would create a scene and create “hotspot” ; video, picture, infoHotspot with textWrapping. So the vr is not necessary.
Here is a new code which permit me to change the textWrapping’s text : https://playground.babylonjs.com/#M779CA#9
1 Like
Do you have a solution to have directly inside the wrapping text a possibility to write inside ?
hmm. Perhaps with ALL HTML… absolute positioning. HTML TextArea element? But that would always be in screen-center, no matter how camera panned. Putting HTML on a BJS scene plane… not possible so far. HTML absolute positioning… uses screen coordinates… and doesn’t care about in-scene camera panning.
I am trying to remove the TextBlock and to put directly the input text
Nah, I will let your version she is very good ! Thank you a lot Wingnut !
1 Like
It would be very cool to use HTML gui (with CSS styles) upon plane and plane1, eh? Many people hope that will be possible, someday. Then we can have VR computer inside BJS scene… that can ACTUALLY browse the web. (drool).
1 Like
Yeah , and so we can use some code of other tools which are doing virtual tour for example : MarziPano tool is amazing, but HTML… I will post my final version with a Title to my TextWrapping where we can also modify the title
Here we are ! https://playground.babylonjs.com/#M779CA#10 : with title, input for the title and also if you want to use it in VR : the text is moving alone.
nod. It IS possible (I think)… to pass text between HTML form elements (such as a textArea element)… and webGL-based GUI textBlocks/scrollViewer. A BJS scene DOES have access to document.createElement… and .appendChild… and can set newElement.style.whatever.
https://doc.babylonjs.com/playground/?code=createElement
754 returns… of people creating html elements… inside scene code. Here’s good one…
https://www.babylonjs-playground.com/#3U658N#1
(lots of in-scene HTML-making and absolute-positioning)
In your case, you click on the scrollViewer, then that displays HTML textArea… absolutely-positioned near canvas center. It might need an “OK” button, too (for a textArea element). When OK is hit, HTML textArea.value is sent to webGL scrollViewer.text (somehow)… and then HTML textArea.style.display = “none” (hide it).
While displaying HTML textArea or input element, you should probably disable camera panning (detach it from scene).
I dunno. Advanced tech stuff… transferring text between HTML-land and webGL-land. I have not tested such things… but might be fun to try.
2 Likes