Thanks for this amazing tool. I am going to need this a lot.

Question: The virtual keyboard works well, but I'm trying to use the "physical-keyboard" feature, but nothing seems to be responding. The wasd controls works (even when I remove them from the a-camera), but that is about all I can get the physical keyboard to do... perhaps I'm missing how this attribute should work?

Hi,
I am using your library for multiple choice test but my problem is when the text is doesn't fit in 1 line, it gets cut. Could there be a way to add a height attribute to the a-radioButtons or a-checkbox so the text could fit in ? Also I saw on the inspector an attribute ( on the radiobutton ) called lineHeight i tried changing it, but it didn't solve my problem. Sometimes when click on the text it works for half a second .

Is there any other way to test the enter input on keyboard than this ?

let keyboard = document.querySelector('a-keyboard')
    keyboard.addEventListener('input', (e)=>{
      console.log(e)
      if(e.detail==='\n')
        console.log('SUBMIT')
    })

Hello,

I am currently experimenting with a pause-state in which my cursor should only be able to click the a-button with id continue. Setting the raycaster to either .clickable or #continue does not work. It does not work either with different id and class names on any a-button inside an a-form I have tried so far.

Setting raycaster objects to ids/classes works fine for all other objects in my scene and a-buttons can be clicked normal, if I set raycaster objects to "" - but then all objects in the Backdround can be clicked aswell which I wanted to prevent in the first place.

Below is the relevant code:

<a-entity id="camera" camera look-controls wasd-controls="fly: enabled" position="0 1.5 4" light="type: spot; intensity: 0.5" cursor="fuse: false; fuseTimeout: 500; rayOrigin: mouse"  raycaster="objects: #continue">
  <a-entity id="hud" position="0 0 -2.5" look-at="[camera]" visible="true">
    <a-rounded position="-0.3425 -0.5 0.5" width="1.375" height="0.7" radius="0.05" rotation="0 0 0" scale="0.5 0.5 0.5" opacity="0.5">
      <a-form>
        <a-button class="clickable" position="0.2 0.35 0" id="continue" width="1" value="Exit" type="flat"></a-button>
      </a-form>
    </a-rounded>
  </a-entity>
</a-entity>

How to make button to link to any webpages or urls?

Any luck on using this for 0.8.0?

i simply dont get how to fix de controlers now

I tried to simply add submit code to the a-form and it doesn't communicate like a standard form.
I do have php reading in a text file. http://www.cablecenter.org/vr/aframe-material-master/
The text reads, "MY TEXT FILE" but I want the form to write to the text file like a standard php form would. Is this possible? This is the code I used in simple html:

`<?php
if(isset($_POST['submit']))
{

$name = $_POST['name'];
$age = $_POST['age'];
$comment = $_POST['comment'];

$file = fopen("test.txt","w+") or die("file not open"); // create and open text file

$s = $name."
".$age."

".$comment."

fclose($file); // close file
}
?>

Data Form

Whats written in the text file:

`

Any plan for an update for Aframe 0.8.0 version? Thanks 👍

Hi I am trying to bind look control to current project by which it allow user to rayinput feature on cardboard like vr headset but when i did something like

<!-- Camera + cursor. --> <a-entity camera look-controls> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: springgreen" event-set__2="_event: mouseleave; color: black" fuse="true" raycaster="objects: .link"></a-cursor> </a-entity>

it add the ray input but i am not able to add listener to form elements.

In 0.7.1, the raycaster-intersected event was emitted every frame.

In master, it's only emitted on the first intersection.

As a result, the sound will keep playing on hover at the moment.

Perhaps drop a version log in the README until we release 0.8.0 soon.

Hi,

For some reason the latest version of Edge stable does not work with aframe-material.

I am happy to report this to Microsoft as I see no error messages in the browser.

But wanted to raise it here.

Many thanks,

Andrew

I get this error while adding it to a scene ncaught (in promise) Error: Entity.setObject3D was called with an object that was not an instance of THREE.Object3D..

Please help me how do i fix that

Hey,

Many thanks for getting this working with Edge! Thanks so much.

I noticed that the latest version of master works in Edge but that the keyboard does not appear when you click on the text boxes. Not sure if I am doing something wrong here?

I have attached a screenshot.

Best regards,

Andrew

?

An option for shader:flat materials would be nice

Here is a quick basic example for the visual feedback

document.addEventListener('keydown', function(event) { 
    var key=event.key;
    document.querySelector("[key-value="+key+"]").setAttribute("color", "grey");
    setTimeout( () => { document.querySelector("[key-value="+key+"]").setAttribute("color", "#263238")
}, 100 ); });

It doesn't add content to the target element but using something like

var target = document.querySelector("[placeholder=Username]");
// surely there is a proper way to get the current input element instead
target.setAttribute("value", target.getAttribute("value") + "a");

Also I think being able to provide a layout system as I have for example a Microsoft Sculpt Ergonomic keyboard would help to get the exact same mapping which matters more when there is no pass through camera (i.e fine for Vive for not for Rift or WMR).

keyboard 'enter' event does not fire when the enter button is clicked.

Ran into an issue where I couldn't set the position of the keyboard. When setting it in html, it always appeared in the same place.

Commenting out:

in the aframe-materials.js allowed me to set a position in html that seems to stick for all the component drawings, refreshes, etc. I'd suggest not setting a default position to allow folks to choose one in html.

Was writing a scene using a-frame release 7.0 for support of mixed reality headsets and couldn't get the keyboard/inputs to work. I noticed the demo uses:

If I download the demo code and use 6.1 it works. If I upgrade it to:

the input controls no longer function. They load, but don't respond to any input. There are some warnings in the web console, but they appear the same regardless of the a-frame version.

I had a look at the release notes for 7.0; but nothing obvious to me or I'd attempt a PR to fix:
https://github.com/aframevr/aframe/releases

Hi,

check a radio or a checkbox then uncheck it. The checked attribute is still true.

I tried more than one way but it didn't work with me.

Because A-Frame is made by Mozilla, it would only make sense that there would also be a Firefox Photon theme.

This would result in this project changing into aframe-ui.

If I listen to the change event on a checkbox, I'm seeing different values for event.detail on Chrome and Firefox. I've seen this behavior on Windows 10, Linux, and Android. I modified the boilerplate here to demonstrate the bug. Click on the first checkbox to show an alert with the reported event.detail.

When trying to run the demo project from the repository's main page with 1.2.0, the keyboard-input interaction is broken: pressing the inputs doesn't show the keyboard, pressing the keyboard while an input is active doesn't write anything and also if there are multiple inputs, you can have multiple active at the same time.
Besides this, the following error appears:

It does seem to be an issue related to the A-Frame version, as the exact same project runs in the shown version of A-Frame (0.6.1), but not in most versions after that, including v1.2.0.

Hi,

I'm trying to run this in 0.8.2, the inputs show but when I click on them I get no keyboard and this error:

Can you suggest anything to fix?

aframe-master.js:71247 Uncaught RangeError: Maximum call stack size exceeded.
    at HTMLElement.value (aframe-master.js:71247)
    at NewComponent.init (aframe-material.min.js:1)
    at NewComponent.updateProperties (aframe-master.js:72443)
    at NewComponent.module.exports.Component (aframe-master.js:72222)
    at new NewComponent (aframe-master.js:72646)
    at HTMLElement.value (aframe-master.js:71059)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)
    at HTMLElement.value (aframe-master.js:71068)
    at HTMLElement.value (aframe-master.js:71215)
    at HTMLElement.value (aframe-master.js:71312)
    at HTMLElement.value (aframe-master.js:70780)
    at HTMLElement.wrappedMethod (aframe-master.js:72145)

Anyone else exeriencing these rendering problems? Any idea why only the buttons have these problems?

Should something like this be implemented ?

<a-input type="color" value="#RrGgBb">

Note it can be rendered differently depending on devices:

• https://www.youtube.com/watch?v=vzoUJ-v5h38&list=UUgGWtPbelycq8xjbaI1alZg&index=10

Then I plan to use it for this project:

• https://github.com/samsunginternet/color-sensor-js

Edit:

• https://github.com/mokargas/aframe-colorwheel-component

Hello

is there a way to change the keyboard layout to azerty?

Hi,

Firstly aframe-material is amazing. I just wanted to mention that on my iPad and also on my Macbook Pro using Safari the demo does not work.

The only reason I noticed was that I was using aframe-material in a project of mine and when I went to test it out on Safari/iPad I got a blank screen.

So I went back and your Live Demo has the same issue. I have not idea why this is the case.

I am in the process of upgrading my iPad and MacBook Pro to the latest versions of everything, just to make sure that I haven't missed something obvious.

That is to say that aframe works fine and all the examples. Just when I add aframe-material it causes this issue.

Many thanks,

Andrew

Hello, the keyboard 'enter' event does not fire when the enter button is clicked rather i get a diddismiss event fire

Need to rename to like destroyKeyboard.

The structure of project could be:

• material-ui system
• A bunch of components that hook into that material-ui system

The system can handle things such as opening the keyboard when an input is focused. Shared management/state.

And encapsulate each widget into an A-Frame component file. Things are a bit hard to follow with the widgets separated into 6 different files passing data to each other, and setting properties directly on the entity when they could be on component instance (i.e., el.o_position).

Unable to get this working with the latest version of A-Frame (v1.0.4). I keep getting an issue with TWEEN integration, which A-Frame no longer utilises since depreciating .