User Events
This documentation demonstrates how to manipulate objects via our API. This helps to make your mirror more interactive.
Create user events
To use custom events like click events to manipulate objects you can also use our API. For example if you want to change the color of a clicked object. To do so you can create an event via JavaScript like this to get the guid of the object and change its color.
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let object = twin.scene.getObject(payload.guid);
object.setColor("red");
}
};
This code snippet changes shows a message box the name and guid of the clicked object.
Example
The following code displays an example how the whole file could look like.
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
twin.host.notify = function (topic, payload) {
if (topic == "objectClicked") {
let object = twin.scene.getObject(payload.guid);
object.setColor("red");
}
};
</script>
</body>
</html>