Mouse Pointers
The Real-time Mouse Pointers feature enables real-time tracking of participants' cursor movements, allowing seamless collaboration within the same room.
Before we start
Before utilizing the Mouse Pointers component, it is essential to initialize a room with a defined name and ID for the participant and the group. You will also need an HTML element identified by a specific ID on your web page.
Using the Mouse Pointers in a canvas
element
If you use the canvas
element, the mouse will be displayed on the canvas
element, it will consider its size and position to display the mouse pointer.
Participant limits
It's important to note that the room supports up to 16 attendees.
How to use
To add the Mouse Pointers component to any HTML element on your web page, you will need to add an ID attribute to it and then, use the following code, on your HTML file:
<div id="my-id" width="200" height="100"></div>
And in your JavaScript file:
import { MousePointers } from "@superviz/sdk"
const mousePointers = new MousePointers("my-id");
room.addComponent(mousePointers);
Properties
See below the parameters to use when initializing the Mouse Pointers:
Name | Type | Description |
---|---|---|
container | string | Required. Specify the ID of the HTML element where the "Mouse Pointers" component will be displayed. |
Callbacks
When using the Mouse Pointers, you can define a callback to handle a "Go-To" specific event. These callbacks allow you to respond to participant actions and other event-driven functionalities.
To define a callback, you need to pass a function when creating the Mouse Pointers, as shown in the example below:
const mousepointers = new MousePointers("#canvasId", {
callbacks: {
onGoToPresence: () => {},
}
});
onGoToPresence
A function that will trigger once your participant starts following another participant on the Who-is-Online component. You will receive the following parameters with the function:
Name | Type | Description |
---|---|---|
position | Position | The position of the participant that is being followed. |
Example:
const mousepointers = new MousePointers("#canvasId", {
callbacks: {
onGoToPresence: onGoToPresenceCallback
}
});
function onGoToPresenceCallback(coordinates: Position){
console.log("X position: " + coordinates.x);
console.log("Y position: " + coordinates.y);
}
Methods
transform()
The transform
method allows you to move the position of all mouse pointers to a specific location.
Example:
mouse.transform({
translate: {
x: 100,
y: 100
},
scale: 2
});
Parameters
Name | Type | Description |
---|---|---|
translate | object | The x and y coordinates to move the mouse pointers. |
translate.x | number | The x coordinate to move the mouse pointers. |
translate.y | number | The y coordinate to move the mouse pointers. |
scale | number | The scale to apply to the mouse pointers. |
Type Definitions
Position
Type: object
Position of the participant mouse pointer.
Name | Type | Description |
---|---|---|
x | number | The x coordinate of the participant that is being followed. |
y | number | The y coordinate of the participant that is being followed. |
Example:
{
x: 100,
y: 200
}