supermedium / aframe-super-keyboard Goto Github PK

http://supermedium.com/aframe-super-keyboard/examples/wood/

The top of the keyboard should show the symbols instead of the numbers. I can see that the keys themselves are there as shown by the attached image but the keyboard visuals are not updating. It also doesn't have the wood appearance that the example thumbnail suggests.

https://imgur.com/a/gSgzyxM

I'm struggling to apply a keyboard layout on my own as this seems to be one of the few examples out there. I have the same issue where I can create "invisible" keys but I can't update the visual layout with my image to make the said keys visible.

I am new to webvr and have found quite a few examples that don't go into vrmode properly when you click the button (see attached).

There may be a problem with the master version of aframe on quest at the moment as by changing to version 1.1.0 my quest enters vr mode fine

[email protected]
[email protected]

    var sceneEl = document.querySelector('a-scene');
    var keyboardEl= sceneEl.components['super-keyboard'];
    keyboardEl.addEventListener('superkeyboardchange', function(e) {console.log(e)});

console return 'undefined' always...
error is also emitted:
Uncaught TypeError: Cannot read property 'key' of null at line below

    setTimeout(function () {
      self.updateKeyColorPlane(self.keyHover.key, self.keyHoverColor);
    }, 100);

aframe-super-keyboard: v2.0.2

Similar issue happens with aframe-super-keyboard default examples

Why this code is being used?
document.addEventListener('keydown', function (ev) {
if (ev.key === 't') {
var ss = '';
var s = 'abcdefghijklmopqrstuvQWIEUTGASDLIGKBXACQWETL102394676457';
var l = Math.floor(Math.random() * 20);
for (var i = 0; i < l; i++) ss += s[Math.floor(Math.random() * s.length)];
self.el.setAttribute('super-keyboard', {value: ss});
}
});

Bind onto mouse cursor events by default (like https://github.com/etiennepinchon/aframe-material) so we can quickly test functionality in non-VR developer environments.

I can't see where the click event that the keyboard listens to is emitted in the examples by the controller. Am I missing anything?

the hover effect doesnt render properly on this particular browser.

I think you forgot to yarn build and yarn dist after the last build. Thus, the allow multiple inputs code is not available when using this component.

Whenever I add the keyboard to an existing project that uses laser-controls, the only clicks that register are for the keyboard. Is there an easy way around this?

When the keyboard is positioned close to the camera and scaled down below 30% it starts to have problems with laser controls where the key to the left of the one the laser is pointing at becomes highlighted. This is with a right handed raycaster. The keyboard still behaves normally with the mouse cursor. I am going to take a look at why this is happening but any suggestions appreciated. For an example see https://dented-pen15.glitch.me and the photo below....

Hello, as the title suggests as a user I am not able to enter an input via the keyboard when I enter the immersive VR experience on browsers such as Firefox and the default Oculus browser.

I have tried it on various other devices and it works correctly. These devices include desktop, mobile, tablet and the static VR view which are used with the official keyboard examples found here: http://supermedium.com/aframe-super-keyboard/

The issue is that when on the immersive VR experience the lasers from the controls pass straight through the keyboard as if it doesn't exist meaning I cannot press a key. Am I maybe missing some extra configuration on this? This is the only object in my scenes I have trouble interacting with.

At the moment, super-keyboard determines the hands with a big query selector, should just have developer define. Such as cursors: #leftHand, #rightHand.

Also use cursor component versus raycaster-intersection-* events. The raycaster events will still pick up even if the keyboard is behind another raycastable entity.

Was trying to use with cursor="rayOrigin: mouse" and couldn't get it.

Hello,
Is it possible to add support to multiple hands ?
Thanks you in advance!

Thank you for building this lovely keyboard!

In the VR experience I'm building, I allow the user to use both hands interchangeably (or together). I'd love to be able to extend that to the keyboard, allowing both hands to type, instead of having to pick one of the hands.

Is this possible with this keyboard? It doesn't appear to be… I tried this attribute:

super-keyboard="hand: .left-hand, .right-hand;"

… but it only accepted hovers from the left hand.

Looking at the code I suppose it would need to be updated to support two simultaneous hovers, and when clicks happen to know which hand do the clicking, so it doesn't seem like a trivial change.

Anyway, seems like it would be nice!

If I

1. show keyboard
2. set a character
3. press enter
4. then reshow the keyboard with a new label
5. enter another character

The keyboard disapears, without any events.
If I then point the cursor at where it was, I can get it to click a character, then it shows itself again.

 this.keyboard.setAttribute('super-keyboard',{
            label, 
            show:true,
        })
        this.keyboard.addEventListener('superkeyboardismiss', e => console.log('dismiss'))
        this.keyboard.addEventListener('superkeyboardinput', e => onEnter(e.detail.value))

How I'm managing it

`    signIn: function (){
        this.hideOptions()
        this.showKeyboard('Please enter your email', this.validateEmail.bind(this))
        this.title.setAttribute('text', {value: 'Sign In'})
    },
    validateEmail: function (value){

        if(!validateEmail(value))
           return this.showKeyboard('Please enter a valid email', this.validateEmail.bind(this))
        
        this.el.setAttribute('login', {email:value})
        this.showKeyboard('Please enter your password', this.processSignIn.bind(this))
    
    },
    processSignIn: function(value){
        console.log(this.data.email, value)
    },
    signUp: function (){},

    showKeyboard: function (label, onEnter){

        this.el.setAttribute('follow-orientation', {disabled: true})
        this.keyboard.setAttribute('super-keyboard',{
            label, 
            show:true,
        })
        this.keyboard.addEventListener('superkeyboardismiss', e => console.log('dismiss'))
        this.keyboard.addEventListener('superkeyboardinput', e => onEnter(e.detail.value))
    },`
 

Hello,
is there any way to properly close the keyboard? If I set the "show" property to "false" the keyboard doesn't show but it's still there and interferes with the raycaster from the controllers. If I remove the entire entity from the HTML (.remove()) the keyboard closes correctly but I get the following error in the console: Uncaught TypeError: self.keyHover is null.
So basically I can close the keyboard but I get that error, which is annoying.
Any help?

is there a way to let the text render behind the keyboard image ?

the text behind have this properties :
<a-text class="powered" position="0.45 -0.45 0" align="right" wrap-count="35" baseline="bottom" width="0.6" value="my text" color="grey" text=""></a-text>

I'm using this with the cursor component in 0.9.0.

I can easily set the first character, to set the next one I have to look away from the keyboard, and then look on it again to set another character.

Config:

            'super-keyboard' : {  
                font: 'roboto',
                labelColor: darkViolet,
                inputColor: darkViolet,
                imagePath: '/assets/images/',
                keyHoverColor: darkViolet,
                keyPressColor: violet,
                keyBgColor: backgroundViolet,
                keyColor: backgroundViolet,
                show: true
            },

Cursor attributes

      const cursorAttributes={
        fuse: true,
        fuseTimeout: cursorFuseTimeout,
      }

      const raycasterAttributes = {
        objects: '.clickable',
      }

    recticle.setAttribute('cursor', cursorAttributes)
      recticle.setAttribute('raycaster', raycasterAttributes)

I am using superhands for my controllers and receive an error from super keyboard that it can't find a controller and need to add one in an . Is there a way around this?