Custom studio ui coaching overlay

Technical Support
1

I’m trying to make some code where I have a Studio UI with an image that guides the user.
I want it to hide the UI when the image target is found, and show it again when the image target disappears.
However, I can’t get this code to work — it doesn’t hide the UI when the image target is detected.

import * as ecs from ‘@8thwall/ecs’

// Store handlers per component instance (keyed by component EID)
const onFoundMap = new Map<bigint, (ev: any) => void>()
const onLostMap = new Map<bigint, (ev: any) => void>()

ecs.registerComponent({
name: ‘XR Image Probe’,
schema: {
// @label UI Entity to toggle while scanning
uiEntity: ecs.eid, // eid = bigint
// @label Filter by target name (empty = any)
targetName: ecs.string,
// @label Start visible (true = show until FOUND)
startVisible: ecs.boolean,
},
// Keep data empty to avoid type constraints entirely
data: {},

add: (world, c) => {
const s = c.schemaAttribute as any

const ui = (s.uiEntity as unknown) as bigint | undefined

const setHidden = (eid: bigint | undefined, hidden: boolean) => {
  if (typeof eid !== 'bigint') return
  hidden ? ecs.Hidden.set(world, eid, {}) : ecs.Hidden.remove(world, eid)
}

const startVisible = typeof s.startVisible === 'boolean' ? s.startVisible : true
setHidden(ui, !startVisible)

const matches = (name: string) => {
  const filter = (s.targetName ?? '').trim()
  return !filter || filter === name
}

const onFound = (ev: any) => {
  const name = ev?.data?.name as string
  if (matches(name)) setHidden(ui, true)
}
const onLost = (ev: any) => {
  const name = ev?.data?.name as string
  if (matches(name)) setHidden(ui, false)
}

const gid = world.events.globalId as unknown as bigint
world.events.addListener(gid, (ecs.events as any).REALITY_IMAGE_FOUND, onFound)
world.events.addListener(gid, (ecs.events as any).REALITY_IMAGE_LOST,  onLost)

// Save handlers for cleanup by this component instance
const key = c.eid as unknown as bigint
onFoundMap.set(key, onFound)
onLostMap.set(key, onLost)

},

remove: (world, c) => {
const gid = world.events.globalId as unknown as bigint
const key = c.eid as unknown as bigint

const onFound = onFoundMap.get(key)
const onLost  = onLostMap.get(key)

if (onFound) world.events.removeListener(gid, (ecs.events as any).REALITY_IMAGE_FOUND, onFound)
if (onLost)  world.events.removeListener(gid, (ecs.events as any).REALITY_IMAGE_LOST,  onLost)

onFoundMap.delete(key)
onLostMap.delete(key)

},
})

2

have you tried adding console.logs throughout your code? this could help narrow down the issue. i.e. is onLost / onFound being called when you expect?