Embed the twin Mirror into your HMI
This shows how the twin mirror is embedded in your system.
Setting up twin Mirror
Integration of required JavaScript files
The integration starts by including the twin.js library via the <script> tag in the HTML head:
<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>
#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>
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>
<style>
#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>