basic text on screen

Eiren Rain · Eiren Rain · commit f2bf81b38f1e · 2025-03-05T19:39:00.000+01:00
diff --git a/apps/front/dist/index.html b/apps/front/dist/index.html
@@ -14,7 +14,10 @@
     <script type="module" crossorigin src="/assets/index-D4dv4Lzd.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-
+    <div style="position: fixed; top: 0; left: 0; color: white">
+      <div style="background-color: gray; width: 200px; height: 500px;">
+        HELLO
+      </div>
+    </div>
   </body>
 </html>
diff --git a/apps/front/index.html b/apps/front/index.html
@@ -13,7 +13,11 @@
     </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div style="position: fixed; top: 0; left: 0; color: white">
+      <div style="background-color: rgba(100, 100, 100, 0.2); padding: 5px;">
+        <div id="angle-text"></div>
+      </div>
+    </div>
 
     <script type="module" src="/src/index.ts"></script>
   </body>
diff --git a/apps/front/src/index.ts b/apps/front/src/index.ts
@@ -10,18 +10,33 @@ const {
 
 const {
   onMessage,
+
 } = createWebsocketClient()
 
+let currentAngle = { x: 0, y: 0, z: 0 }
+
 onMessage('server/gyro/angles', ({ angles }) => {
-  // console.log('angles', angles)
+  currentAngle = angles;
   setRotation(angles)
+
+  // You can also do it here
+  const angleText = document.getElementById("angle-text")!; // <-- whath out for the ! at the end 
+  angleText.innerHTML = `Current angle x: ${angles.x} y: ${angles.y} z: ${angles.z}`;
 })
 
 const animate = () => {
   renderer.render(scene, camera);
   requestAnimationFrame(animate);
 };
 
+
+setInterval(() => { // This is to prevent to re render every threejs -> do not update the dom in animate!
+  const angleText = document.getElementById("angle-text")!;
+
+  angleText.innerHTML = `Current angle x: ${currentAngle.x} y: ${currentAngle.y} z: ${currentAngle.z}`;
+}, 100) // this will run every 100ms
+
+
 animate();
 
 
