Closed levexis closed 3 years ago
Just wanted to comment that I tried to make a modified glitch to get the basic example working, but I think I ran into a genuine bug in the repo. You can see it here: https://nebula-mangrove-mine.glitch.me/
Code is here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Super Keyboard - Basic</title>
<meta name="description" content="Basic example for Super Keyboard."></meta>
<script src="https://rawgit.com/aframevr/aframe/c4aa63e/dist/aframe-master.min.js"></script>
<script src="https://unpkg.com/aframe-super-keyboard@1.0.0/dist/aframe-super-keyboard.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene environment="preset: contact; skyColor: #112214; horizonColor: #478d54; ground: hills; groundTexture: checkerboard; groundColor: #4f3e4b; groundColor2: #4d3c47; dressing: none; grid: none">
<a-entity id="mouseCursor" cursor="rayOrigin: mouse"></a-entity>
<a-entity id="hand" laser-controls="hand: right">
<a-sphere radius="0.03"></a-sphere>
</a-entity>
<!-- Change hand to `#hand` for VR. -->
<a-entity id="keyboard" super-keyboard="hand: #mouseCursor; imagePath:https://raw.githubusercontent.com/supermedium/aframe-super-keyboard/master/dist/" position="0 1.076 -0.5" rotation="-30 0 0"></a-entity>
</a-scene>
<!-- GitHub Corner. -->
<a href="https://github.com/supermedium/aframe-super-keyboard" class="github-corner">
<svg width="80" height="80" viewbox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- End GitHub Corner. -->
</body>
</html>
Error is
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': ',.keyboard-raycastable' is not a valid selector.
That "," is strange, not in the HTML obviously. I think the source of the problem in the repo is probably this line of code:
setupHand: function(){
if (this.data.hand) {
this.hand = this.data.hand;
}
else {
this.hand = document.querySelector('[vive-controls], [tracked-controls], [oculus-touch-controls], [windows-motion-controls], [hand-controls], [daydream-controls] [cursor] > [raycaster]');
}
if (!this.hand){
console.error('super-keyboard: no controller found. Add an <a-entity> with a controller to the scene.');
}
else {
if (!this.hand.hasLoaded) {
this.hand.addEventListener('loaded', this.setupHand.bind(this));
return;
}
if (!this.handListenersSet) {
this.hand.addEventListener('triggerdown', this.click.bind(this));
this.hand.addEventListener('click', this.click.bind(this));
this.handListenersSet = true;
}
var raycaster = this.hand.components['raycaster'];
var params = {};
if (!raycaster){
this.hand.ownRaycaster = true;
params['showLine'] = true;
params['objects'] = '.keyboard-raycastable';
} else {
this.hand.ownRaycaster = false;
var objs = raycaster.data.objects.split(',');
if (objs.indexOf('.keyboard-raycastable') == -1) { objs.push('.keyboard-raycastable'); }
params['objects'] = objs.join(',');
}
this.hand.setAttribute('raycaster', params);
this.raycaster = this.hand.components.raycaster;
}
},
Specifically, probably on these lines:
var objs = raycaster.data.objects.split(',');
if (objs.indexOf('.keyboard-raycastable') == -1) { objs.push('.keyboard-raycastable'); }
params['objects'] = objs.join(',');
This would likely explain why an errant comma ended up there in the objects prop selector for the raycaster.
I went ahead and tried it out, and with a few other tweaks to get it to work on glitch, that did it. I'll go contribute a bugfix now.
you should be able to see a working version of the basic demo you were trying here: https://nebula-mangrove-mine.glitch.me/
The demo you were looking at is written to always pull the latest version of aframe, but unfortunately rawgit no longer seems to update (it is deprecated). So, it's using a version of aframe that probably doesn't support the quest properly. The glitch I posted has the correct link to the current aframe (using https://aframe.io/releases/1.1.0/aframe.min.js
) and includes a fix for the bug I described above and have proposed a pull request for.
See if that works in quest?
I hope the super-keyboard handles it automatically, btw, but just in case...
there is a comment in the example that says
<!-- Change hand to `#hand` for VR. -->
<a-entity id="keyboard" super-keyboard="hand: #mouseCursor; imagePath:https://raw.githubusercontent.com/supermedium/aframe-super-keyboard/master/dist/" position="0 1.076 -0.5" rotation="-30 0 0"></a-entity>
</a-scene>
so it's possible you'll need to edit that line by hand to get the demo working in the quest, not sure, haven't tested in VR myself yet. that would be
<a-entity id="keyboard" super-keyboard="hand: #hand; imagePath:https://raw.githubusercontent.com/supermedium/aframe-super-k
if I'm not mistaken
Sorry it has taken so long to reply. Yes the demo on glitch works once I remixed so I could change hand to #hand. And yes it did all work automatically when I implemented super keyboard for a project.
While the demo works it needs adjusting as the cursor sphere is right on the controller (see photo). Also there is a double clicking going on, i click once I get two letters(see video).
https://user-images.githubusercontent.com/2098392/104611738-bc9d5a00-5685-11eb-86f7-d426425c2c1c.mp4
I had this issue with my own project and I can't remember what the fix was but it was not complicated and will come back to me. I am going to take a look at this component anyway as I am having issues when holding the keyboard with the left controller. I suspect it is the unusual angle that the keyboard is at. Hopefully I can fix it and submit a pull request.
This component was ideal for the project I was do - thanks.
@levexis is there any chance you remember how to remove the double typing error? It came out of no where for me ..
without context, sounds like two click events being fired to me.
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