ecs.input.UI_CLICK does not count as a gesture for iPhone Permissions

Technical Support
1

Hey, I am working on a game right now that uses the phones Gyro. I am trying to use the build in UI system to create a button as a user input so I can prompt for Gyro permissions.

Here is Ui controller that triggers gyro permissions:

// This is a component file. You can use this file to define a custom component for your project.
// This component will appear as a custom component in the editor.

import * as ecs from '@8thwall/ecs'  // This is how you access the ecs library.
import {requestGyroscopePermission} from './gyro-permissions'

ecs.registerComponent({
  name: 'uiController',
  schema: {
    gyroContinueButton: ecs.eid,
    gyroContinueDiv: ecs.eid,
  },
  // schemaDefaults: {
  // },
  // data: {
  // },
  // add: (world, component) => {
  // },
  // tick: (world, component) => {
  // },
  // remove: (world, component) => {
  // },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    ecs.defineState('default').initial()
      .listen(schemaAttribute.get(eid).gyroContinueButton, ecs.input.UI_CLICK, () => {
        ecs.Hidden.set(world, schemaAttribute.get(eid).gyroContinueDiv)
        ecs.Disabled.set(world, schemaAttribute.get(eid).gyroContinueDiv)
        requestGyroscopePermission()
      })
  },
})

and here is where the function is being called from:

// .js function to Checks and requests permission to use the gyroscope.
// - On iOS devices, the user must give explicit permission to access the gyroscope.
//   Important! This permission must be requested through a direct user action,
//   such as a click, tap, or other explicit interaction. This is required for privacy and security reasons.
// - On other devices, the gyroscope may be available automatically without needing explicit permission.
const requestGyroscopePermission = () => {
  if (typeof DeviceOrientationEvent !== 'undefined') {
    // Check if explicit user permission is needed (iOS)
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
      DeviceOrientationEvent.requestPermission()
        .then((permissionStatus) => {
          if (permissionStatus === 'granted') {
            console.log('Gyroscope access granted.')
          } else {
            console.log('Gyroscope access denied by the user.')
          }
        })
        .catch((error) => {
          console.error('Error occurred while requesting gyroscope permission:', error)
        })
    } else {
      console.log('Gyroscope access is supported and does not require explicit permission.')
    }
  } else {
    console.log('Gyroscope is not supported on this device.')
  }
}

export {
  requestGyroscopePermission,
}

Here is that button:

IMG_8387.PNG
IMG_8387.PNG1179×2556 132 KB

When I click it and run the gyro permissions function I get this error:

Error occurred while requesting gyroscope permission: NotAllowedError: Requesting device orientation access requires a user gesture to prompt.

it looks like with the current UI system the button click event isn’t registering as a user gesture. Any advice on how to get through this?

@GeorgeButler

2

Hmm you might need to try with a hidden HTML button. Let me know if that works!