Skip to main content

Hotspots and Animation

Want to open a door? Here's how.

Rich data streams

Sometimes you'll want a user to interact with a stream, but in a way that provides accessibility and easy localization. Interactions contained within the stream can be servicable, but they're unlikely to be picked up by a screen reader and correcting a typo means altering the visualization.

The Palette SDK addresses this with "rich data streams". The rich data stream API allows integrators to subscribe to a series of data packets which describe the visualization in a way that can be leveraged by the UI. The most common example of this is to display animation node that allow you to interact with the scene by clicking a HTML element positioned using info from the stream (as demonstrated below).

LibZL takes care of keeping the data in sync with the visualization, so all you have to do is subscribe to the data, and implement the interactions. If you allow the interactive video stream below to time out, you can see how image based interactions work exactly the same way. Enabling support for hot spots in image mode simply requires richDataStreamConfig.enable2DODSupport to be set to true in the connection options, which it is here.


import LibZL, {DataSourceID} from "@zerolight-core/libzl";
import { useEnvironment,
ZLBoltStreamContainer } from "@zerolight-core/libzl-react"

We're also re-using the <ConnectionWidget/> here previously defined in the basic demo.

Also provided for you here is an animation widget that demonstrates the basic animation methods. Note that the third argument passed to the setAnimation method on the close call makes the door snap shut immediately, without any animation. Both setAnimation and triggerAnimation also take a callback as a final parameter, to allow you to respond to an animation completing.

const AnimationWidget = () => {
const zlbolt = useZLBolt();

return <WidgetGroup>
<button onClick={() => zlbolt.setAnimation("DoorFR", true)}>
Open Door
<button onClick={() => zlbolt.setAnimation("DoorFR", false, true)}>
Close Door
<button onClick={() => zlbolt.triggerAnimation("DoorFR")}>
Toggle door

Finally, hotSpotStyle provides some basic CSS to display the spots as white circles, but you can display the nodes in keeping with your own applicaiton.

Live Editor

Provisioning for this demo is light so there may be some delays getting a stream.