From 8de856ba4c2480f0d45f8d7cf22a1d51f48608f4 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Tue, 25 Jun 2024 12:32:00 +0200
Subject: [PATCH] update gestione start/stop animazione

---
 WebDoorView/3DM_test/test_js_call/index3.html | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/WebDoorView/3DM_test/test_js_call/index3.html b/WebDoorView/3DM_test/test_js_call/index3.html
index 7dc640d..eb76204 100644
--- a/WebDoorView/3DM_test/test_js_call/index3.html
+++ b/WebDoorView/3DM_test/test_js_call/index3.html
@@ -6,6 +6,7 @@
         <link rel = "stylesheet" href = "style.css">
         <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <script type = "importmap">
             {
                 "imports": {
@@ -25,7 +26,7 @@
             <div class="d-flex">
             </div>
             <div class = 'container'>
-                <button class="btn btn-sm btn-light" id = 'helpButton'>?</button>
+                <button class="btn btn-sm btn-light" id = 'helpButton'><i class="fas fa-question"></i></button>
                 <!-- <button class="btn btn-sm btn-light" onclick="resetCamera()">bar</button>
                 <button class="btn btn-sm btn-light" onclick="setOrtho()">O</button>
                 <button class="btn btn-sm btn-light" onclick="setPersp()">P</button>
@@ -34,12 +35,12 @@
                 <button class="btn btn-sm btn-light" onclick="toggleGrid()">G</button>
                 <button class="btn btn-sm btn-light" onclick="toggleQuote()">Q</button>
                 <button class="btn btn-sm btn-light" onclick="toggleRotate()">R</button> -->
-                <button class="btn btn-sm btn-light" onclick="doFreeze()">A</button>
-                <button class="btn btn-sm btn-light" onclick="doAnim()">S</button>
+                <button id="btnPause" class="btn btn-sm btn-light" onclick="doFreeze()"><i class="fas fa-pause"></i></button>
+                <button id="btnPlay" class="btn btn-sm btn-secondary disabled" onclick="doAnim()"><i class="fas fa-play"></i></button>
             </div>
             <div class = 'container'>
                 <div id = 'infoDiv'>
-                    <ul class="list-group small">
+                    <ul class="list-group list-group-sm small">
                         <li class="list-group-item active">
                             <b>Camera settings</b>
                         </li>
@@ -115,6 +116,7 @@
             import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
 
             const WGL = new webgl_original();
+            var isFreezed = 0;
 
             let options ={
                 modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
@@ -144,11 +146,23 @@
             // imposta animazione vs freezed
             window.doFreeze = () =>
             {
-                WGL.doFreeze();
+                if(isFreezed == 0)
+                {
+                    isFreezed = 1;
+                    document.getElementById("btnPlay").className = "btn btn-sm btn-light";
+                    document.getElementById("btnPause").className = "btn btn-sm btn-secondary disabled";
+                    WGL.doFreeze();
+                }
             }
             window.doAnim = () =>
             {
-                WGL.doAnimate();
+                if(isFreezed == 1)
+                {
+                    isFreezed = 0;
+                    document.getElementById("btnPlay").className = "btn btn-sm btn-secondary disabled";
+                    document.getElementById("btnPause").className = "btn btn-sm btn-light";
+                    WGL.doAnimate();
+                }
             }
 
             // reset camera
@@ -234,6 +248,34 @@
                 infoDiv.style.display = "none";
             }) ;
 
+            // controllo click x avviare se fosse fermo...
+            var doorDiv = document.getElementById( "DoorRender") ;
+            doorDiv.addEventListener( "click", function( event) {
+                if(isFreezed ==1)
+                {
+                    doAnim();
+                }
+                // if ( event.key.toLowerCase() === "r")
+                //     toggleRotate();
+                // else if ( event.key.toLowerCase() === 'p') {
+                //     setPersp();
+                // }
+                // else if ( event.key.toLowerCase() === 'o') {
+                //     setOrtho();
+                // }
+                // else if ( event.key.toLowerCase() === 'q')
+                //     toggleQuote();
+                // else if ( event.key.toLowerCase() === ' ')
+                //     resetCamera();
+                // else if ( event.key.toLowerCase() === 'c')
+                //     toggleCube();
+                // else if ( event.key.toLowerCase() === 'f')
+                //     toggleFrame();
+                // else if ( event.key.toLowerCase() === 'g')
+                //     toggleGrid();
+            }) ;
+
+
         </script>
     </body>
 </html>
\ No newline at end of file