Embed the twin mirror into your HMI
This guide explains how to embed the twin mirror into a web-based Human-Machine Interface (HMI).
The twin mirror allows you to render and interact with a 3D digital twin scene directly in the browser.
Setting up twin mirror
Integrate the JavaScript Library
Include the twin.min.js library in the <head> of your HTML file:
<script src="./js/twin.min.js"></script>
HTML structure
The HTML structure is straightforward, consisting of a container <div> acting as the canvas where the
3D content will be rendered.
<div id="twinMirror"></div>
CSS styling
CSS is applied to style the twinMirror div. The CSS ensures that the div takes up the full width and height of its parent container and hides any overflow content. This setup is good practice to define the display of the 3D scene.
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#twinMirror {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
Initializing the mirror
The Twin.js library is initialized by creating a new instance of twinLibrary.Twin().
The start() method of this instance is called, specifying the twinMirror div as the container for the 3D scene and mirror URL.
After this step, the mirror is already working and should display your twin project.
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
</script>
Disposing the mirror
If you no longer need the twin Mirror instance, you must call the dispose() method manually to release all resources.
Otherwise memory leaks may occur.
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
window.twin.dispose();
</script>
Example
The following is a complete example file.
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#twinMirror {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
</script>
</body>
</html>