Having a button become visible when a wayspot is found

Technical Support
1

Hi,
I’ve made a button to emit a call to start A-frame animation of .glb.
It works fine, but I now want it to only be visible when the wayspot is found. I declared it before my a-scene in body.html.
button id=“startAnimationButton” class=“hidden”>Lift the stone</button

in main.css I defined .hidden and .block
}

.hidden {

display: none;

}

.block {

display: block;

}

And then in app.js I added some event listeners to show the button when the wayspot was found
import ‘./main.css’

import {startAnimationComponent} from ‘./start-Animation’

AFRAME.registerComponent(‘animation-start-button’, startAnimationComponent)

document.addEventListener(‘DOMContentLoaded’, () => {
window.addEventListener(‘xrloaded’, () => {
// Setup event listener for wayspot found event to show the button
window.addEventListener(‘xrprojectwayspotfound’, () => {
// Show the button when the wayspot is found
const startButton = document.getElementById(‘startAnimationButton’)
if (startButton) {
startButton.style.display = ‘block’
}

  // Update or create the text entity to display "Wayspot Found!"
  const sceneEl = document.querySelector('a-scene')
  let messageEl = document.getElementById('wayspotMessage')

  // If the text entity does not exist, create it
  if (!messageEl) {
    messageEl = document.createElement('a-text')
    messageEl.setAttribute('id', 'wayspotMessage')
    messageEl.setAttribute('position', '0 2 -4')  // Adjust position as needed
    messageEl.setAttribute('align', 'center')
    sceneEl.appendChild(messageEl)
  }

  // Update the message
  messageEl.setAttribute('value', 'Wayspot Found!')
})

})
})

and made a start-Animation component that emits the ‘beginAnimation’ event.

const startAnimationComponent = {
init() {
const btn = document.getElementById(‘startAnimationButton’)
const box = document.getElementById(‘testCube’)
const handleClick = () => {
console.log(‘animation activated!’)
box.emit(‘beginAnimation’)
}
btn.addEventListener(‘click’, handleClick)
},
}

export {startAnimationComponent}

However I don’t see the button when the wayspot loads in. Any thoughts on mistakes I’ve made or how to approach this?

2

The problem could related to the DOMContentLoaded / xrloaded event listeners you’ve wrapped your code with. Also, the xrprojectwayspotfound event is emitted on the scene element, not the window.

Try something like this instead:

const startAnimationComponent = {
  init() {
    // Setup event listener for wayspot found event to show the button
    this.el.sceneEl.addEventListener(‘xrprojectwayspotfound’, () => {
      // Show the button when the wayspot is found
      const startButton = document.getElementById(‘startAnimationButton’)
      startButton.style.display = ‘block’
    })
  },
}

export {startAnimationComponent}
1 Like
3

Thanks Evan,
I tried and got error messages at line 8 , about the comma. Took that out, still an issue. Added a bracket on line 7 with the comma in and the build seemed fine. Does that make sense to you?

const startAnimationComponent = {
init() {
// Setup event listener for wayspot found event to show the button
this.el.sceneEl.addEventListener(‘xrprojectwayspotfound’, () => {
const startButton = document.getElementById(‘startAnimationButton’)
startButton.style.display = ‘block’
})
},
}

export {startAnimationComponent}

4

p.s. how do I paste in code like you did above?

5

Ah yes - updated the code snippet. There was a missing closing parentheses on line 8.

You can add code snippets by clicking the </> icon in the text editor.

1 Like
6

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.