[DEPRECATED] Aphrodite Starter Kit UI Text Input

Showcase
1

This extension is no longer available. You can use the following PlayCanvas example instead: PlayCanvas 3D HTML5 Game Engine

Aphrodite Starter Kit UI Text Input

A PlayCanvas ready to play starter kit providing a ready to use UI Text Input that works both in desktop and mobile. See it in action here!

2
21080Ă—1920 249 KB

A complete PlayCanvas project is forked and added to your account. You will be receiving a ready to play project and access to the full source code.

You can use it to easily add mobile friendly input boxes anywhere in your UI and even directly in your 3D world.

Features list:

  • Easy to setup with documentated parameters.
  • Works in both desktop and mobile devices.
  • Three different types provided: All text, Numbers and Password.
  • Automatically resizes when text is out of bounds.
  • Copy/paste supported via keyboard shortcuts.
  • Full source code provided.

1
11720Ă—1316 134 KB

3

4
4802Ă—906 78.5 KB

10 Likes
2

Lol why dont you make it public. Nobody will pay 70€ for that, instead you could help the community and support playcanvas.

3

Hi @Walter_Hafner and welcome!

It is always better to only talk for yourself.

I think Leonidas does help the community with this. Since it took him a lot of work to make this, he can also ask for something in return.

4 Likes
5

Are you his babysitter now or why you deleting my posts ?

6

Because your post has no substantive addition to this topic.

5 Likes
7

@Walter_Hafner This is formal warning, the language in the deleted post is not tolerated here.

2 Likes
8

Good job Leonidas. :clap:

3 Likes
9

Thank you all! This is one of our most successful products, we are very grateful for all the purchases.

At the same time I am looking forward to the native PlayCanvas implementation. This isn’t an easy extension to maintain (I am looking at you Safari). I am thinking of making an engine PR from time to time, though lack of time and the complexity of the PlayCanvas UI implementation make it easy to postpone :innocent:

3 Likes
10

I’m still thinking about this and honestly, it’s not an easy problem to solve on both mobile and desktop.

I’ve got ideas about a Unity like implementation :thinking:

3 Likes
11

I am trying to buy this, unfortunately, it says my correct password/username is incorrect.

image
image1034Ă—252 28.7 KB

12

Hi @Dava ,

Not sure why it fails, server seems to be working fine. In any case I can reset your password, and you can login and updated it in your account page.

Send me your username in a personal message and I will do.

13

I already done that, and it’s working fine with me
But still , my account is “davasoft”

14

Ah most likely that’s the issue, you need to sign in with your email address. I can’t find your account with your username.

16

@Leonidas Hi,

How can we fetch value from user?

console.log("Val1 = ", this.textBox1.script.aphroditeTextInput.inputElement.value );
console.log("Val2 = ", this.textBox2.script.aphroditeTextInput.inputElement.value );

Is this correct way?

Also, I think there is bug with textbox field…
Click and type “abc”
Click out side and again click same box and type “123”

It is showing “123abc”. It should be “abc123”

17

You can do it like that, or even simpler in any script of yours you can subscribe to the following event:

this.app.on('AphroditeTextInput:[your-input-id-attribute]:value', function(inputValue){
   
}, this);

Thanks for the reporting this bug, we will take a look at it.

1 Like
18

image

this.app.on('AphroditeTextInput:[username]:value', function(inputValue){
    console.log("output = ", inputValue);
}, this);

So is this correct? :thinking: :thinking:
I cant see output

19

Almost there, remove the brackets, it was for demonstration only:

this.app.on('AphroditeTextInput:username:value', function(inputValue){
    console.log("output = ", inputValue);
}, this);
1 Like
20

@Leonidas Thank you very much for quick reply and help! :grinning:

this.app.on('AphroditeTextInput:username:value', function(inputValue){
    this.nameVal = inputValue;
    console.log("output1 = ", this.nameVal);
}, this);

this.app.on('AphroditeTextInput:password:value', function(inputValue){
    this.passVal = inputValue;
    console.log("output2 = ", this.passVal);
}, this);

Works Great! :ok_hand: :ok_hand: :ok_hand:

Thanks again! :grinning:

1 Like
21

Hello @Leonidas

On mobile device…
I came to know that part of code does not work some times… Even after entering the value in the text field…

How it can be resolved?

22

Hi @Ketan_ATA,

I am not sure I’ve seen that before. Send me on a DM a build if you are able that reproduces the issue, to take a look.

1 Like