Jump to content

GUI - Input TextBlock


royibernthal
 Share

Recommended Posts

@Pryme8:  (loose quote) Why not launch invisible HTML textArea node, focus, type into that, and copy textArea.value to GUI textBlock after every HTMLTextArea.onChange?

@Deltakosh:  Because of WebVR.

DK, can you elaborate?  (thx)  WebVR people are far from a keyboard?

---------------------

This brings me to another question...  What the hell are we talking about, in this thread?  :)

@adam I don't think you are going to have any luck showing the keyboard on mobile without using an HTML input element.

Sorry that I have NO experience with tablets/similar... but... don't they have a virtual/graphical keyboard that their OS creates, and can open/close?  It seems ludicrous to NEED a browser, and moreover, need a webGL canvas framework like BJS... to provide a tablet's keyboard.  Don't they have one built-into OS?

See why I am confused?  It seems that SOMETIMES we are talking about creating <input> and <textArea> "simulators"... using new Babylon.GUI controls.  And SOMETIMES we are talking about rendering a virtual keyboard onto a canvas.

Which is the subject, here?  Both?  :D 

I guess - #1 priority - I would like to know if all tablets have a built-in virtual keyboard provided by their OS (that opens UNDER browser window, not IN it). 

If I knew THAT answer,  I would act a bit smarter.  I promise.  :)

Link to comment
Share on other sites

The goal of InputText is to provide a text editing control for GUI.

On mobile where there is no keyboard, we can rely on prompt() so not a big deal.

On desktop the current version of InputText already supports keyboard and mouse

When in VR mode, where you wear an headset, it is impossible to use the keyboard for 99% of the people on this planet because they won't see it :) Some people can use a keyboard without watching their hands but there are not the vast majority of humankind. So we need a way to display a virtual keyboard with GUI and this is what Adam demonstrated :)

 

Link to comment
Share on other sites

4 hours ago, Pryme8 said:

I thought we were just talking simulating an <input> element.

:)  textArea is just a multi-line input, and we didn't want to discriminate.  heh

Seriously, though, Dad72 has shown interest in textArea, and I share his interest.

Really, text-handling is text-handling, although a textArea has the added issues of wrapping and overflow scrolling.  TextArea is a result of a container and an input field... cross-breeding.  heh.  Ok, maybe not.

Thx dk... for enlightenment about VR.  Also, I suppose a few people will be wearing electro-thimbles, air-gesture gloves, or similar air-mice.  Standard keyboard input would require lifting the headset, removing the hand-devices, and then typing.  *nod*

It was all SO much easier... back when we used inks/dyes on cave walls.  Insert, delete, backspace... were more difficult back then, though.  ;)

Link to comment
Share on other sites

@Arte-

CasorGUI is so simple to impliment, and saves me tons of time for some of the GUI controls I require. So I highly recommend that you take another look at CastorGUI for some of your GUI - as none of the current GUI extensions solve all I personally need. However, making use of select controls from each when they're needed, allows me to spend absolutely zero time building complex and useful GUIs for my apps.

Just a thought,

DB

Link to comment
Share on other sites

2 minutes ago, dbawel said:

@Arte-

For me personally, I find HUGE advantages that CastorGUI is HTML based. It provides me great flexability in every application architecture - especially PHP and JS.

DB

I need some time to go through disadvantages and advantages.

At this moment 50/50. :unsure:

Thanks DB

Link to comment
Share on other sites

18 hours ago, Deltakosh said:

I'm happy to capture what could be missing in the GUI if that makes sense

I've seen PGs of Spinner and Progress Bar using GUI.  Now that you've added input text - I think only "select with options" is missing for actual controls.

I just went through the list (https://github.com/BabylonJS/Extensions/tree/master/CastorGUI), but have probably missed something.  ie: I know a draggable panel and Dialog are not in GUI...

Link to comment
Share on other sites

2 hours ago, brianzinn said:

I just went through the list (https://github.com/BabylonJS/Extensions/tree/master/CastorGUI), but have probably missed something.  ie: I know a draggable panel and Dialog are not in GUI...

CastorGUI is up to date here : https://bitbucket.org/JSbabylon/castorgui.

I just updated it on GitHub : https://github.com/BabylonJS/Extensions/tree/master/CastorGUI

 

Link to comment
Share on other sites

@Dad72  What if we ported your Castor System to use this method: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

and then strapped that into the GUI stuff?  It might be really cool, not sure what problems might come up but this could be a really cool solution to get your UI engine into a texture element.

Link to comment
Share on other sites

SVG GUI would be pretty coooool.

Plus... it interfaces with @NasimiAsl's meshBuilder real nicely, so you can extrude your widgets into 3D-ness.  :)

SVG = easy move-ability, scale-ability, animatable, events, text-handling, CSS, re-usable nodes (canvas strokes/fills are paint and gone.  In SVG, the stroke and fill elements are still around, after the render). 

You would likely "friendly-wrap" the SVG node-inserting... so the user never sees them unless they are building their own controls.  In other words...

VectorGUI.makeContainer() would "insert" a bunch of SVG nodes, behind the scenes, to accomplish the task  But, it's all fairly easy... it's like working-with HTML/DOM... cuzzzz... it's XML.

Major power!  But... possibly slower updating and slower initial draw.  Somebody start an SVG-GUI thread so I/we can yap and yap about SVG GUI.  :)

Dad72, are you going to make our first in-playground makeContainer()... via document.createElement("svg") and then stuff it full of child nodes?  That would be SO cool. 

I was able to get a lime-bordered svg element into the playground, but lines 61-66 didn't put the pretty star on the screen.  hmm.  I might need to get lines 59-60 operational, but I had problems escaping the namespace url string. 

And, I'm SO off-topic, sorry.  :)

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...