From 4860c824af2586c315558905ced62732c4e8e196 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Tue, 25 Jun 2024 12:10:27 +0200
Subject: [PATCH] Fix comportamento animazione start/stop x risparmio GPU

---
 WebDoorView/3DM_test/test_js_call/index3.html | 113 +++++++++++++-----
 .../webgl-door-visualizer/webgl_draw.js       |  40 +++++--
 WebDoorView/3DM_test/test_js_call/style.css   |  32 ++---
 3 files changed, 128 insertions(+), 57 deletions(-)

diff --git a/WebDoorView/3DM_test/test_js_call/index3.html b/WebDoorView/3DM_test/test_js_call/index3.html
index 4a7655c..7dc640d 100644
--- a/WebDoorView/3DM_test/test_js_call/index3.html
+++ b/WebDoorView/3DM_test/test_js_call/index3.html
@@ -5,6 +5,7 @@
         <title> Door render </title>
         <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">
         <script type = "importmap">
             {
                 "imports": {
@@ -24,37 +25,82 @@
             <div class="d-flex">
             </div>
             <div class = 'container'>
-                <button id = 'helpButton'>?</button>
-                <button onclick="resetCamera()">bar</button>
-                <button onclick="setOrtho()">O</button>
-                <button onclick="setPersp()">P</button>
-                <button onclick="toggleCube()">C</button>
-                <button onclick="toggleFrame()">F</button>
-                <button onclick="toggleGrid()">G</button>
-                <button onclick="toggleQuote()">Q</button>
-                <button onclick="toggleRotate()">R</button>
+                <button class="btn btn-sm btn-light" id = 'helpButton'>?</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>
+                <button class="btn btn-sm btn-light" onclick="toggleCube()">C</button>
+                <button class="btn btn-sm btn-light" onclick="toggleFrame()">F</button>
+                <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>
             </div>
             <div class = 'container'>
                 <div id = 'infoDiv'>
-                    <pre>
-                        Camera settings : 
-                        Zoom : Wheel-Scroll 
-                        Pan : Mouse-Wheel and Drag
-                        Rotate : Key-CTRL + Mouse-Right and Drag
-                        Center : Key-'Space' 
-                        Type : Key-O ( orthographic ) 
-                                Key-P ( perspective ) 
-                                                
-                        Toggle Auto-rotation : Key-R 
-                                                
-                        Toggle Show-Quotes : Key-Q
-
-                        Toggle Show-Cube : Key-C
-
-                        Toggle Show-Frame : Key-F
-
-                        Toggle Show-Grid : Key-G
-                    </pre>
+                    <ul class="list-group small">
+                        <li class="list-group-item active">
+                            <b>Camera settings</b>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Toggle Show-Cube : <b>C</b>
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="toggleCube()">C</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Toggle Show-Frame : <b>F</b>
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="toggleFrame()">F</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Toggle Show-Grid : <b>G</b>
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="toggleGrid()">G</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Toggle Show-Quotes : <b>Q</b>
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="toggleQuote()">Q</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Toggle Auto-rotation : <b>R</b> 
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="toggleRotate()">R</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                Center: <b>SpaceBar</b> 
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="resetCamera()">_</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                ISO/ORTHO: <b>O</b> ( orthographic ) 
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="setOrtho()">O</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <div>
+                                PERSP: <b>P</b> ( perspective ) 
+                            </div>
+                            <button class="btn btn-sm btn-primary py-0" onclick="setPersp()">P</button>
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <b>Zoom</b> Wheel-Scroll 
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <b>Pan</b> Mouse-Wheel and Drag
+                        </li>
+                        <li class="list-group-item d-flex justify-content-between">
+                            <b>Rotate</b> CTRL + Mouse-Right + Drag
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
@@ -63,6 +109,7 @@
         <div id = 'RefRender'></div>
         <div id = 'Ref1Render'></div>
 
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
         <script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
         <script type = 'module'>
             import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
@@ -94,6 +141,16 @@
                 WGL.resetCamera();
             }
 
+            // imposta animazione vs freezed
+            window.doFreeze = () =>
+            {
+                WGL.doFreeze();
+            }
+            window.doAnim = () =>
+            {
+                WGL.doAnimate();
+            }
+
             // reset camera
             window.setOrtho = () =>
             {
diff --git a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
index b398c99..6d4f728 100644
--- a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
+++ b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
@@ -32,6 +32,7 @@ var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var fram
 /* Box3d of the door ------------ */
 var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame() 
 /* ------------------------------ */
+var freezed = 0;
 
 // costanti globali
 // scene
@@ -90,6 +91,20 @@ class webgl_original {
 		let timeElapsed = endTime - startTime;
 		console.log('init done in : ' + timeElapsed);
     }
+	
+	async doFreeze()
+	{
+		freezed = 1;
+	}
+
+	async doAnimate()
+	{
+		if(freezed == 1)
+		{
+			freezed = 0;
+			await animate();
+		}
+	}
 
 	/**
 	 * reset posizione camera
@@ -99,6 +114,7 @@ class webgl_original {
 		myResetCamera();
 	}
 
+
 	/**
 	 * imposta vista isometrica/ortografica
 	 */
@@ -161,13 +177,19 @@ export { webgl_original }
 
 // rendering
 function animate() {
-	requestAnimationFrame( animate) ;
+	if (freezed == 1)
+	{
+		console.log(freezed);
+		return;
+	}
+
 	renderer.render( scene, controls.object) ;
 	controls.update() ;
 	cube_ref.update( controls) ;
 	renderer_ref.render( scene_ref, camera_ref) ;
 	updateRef( frame_ref1, camera_ref1, controls) ;
 	renderer_ref1.render( scene_ref1, camera_ref1) ;
+	requestAnimationFrame( animate) ;
 }
 
 function readDoor() {
@@ -177,22 +199,22 @@ function readDoor() {
 	   // removing shading from colors and adjusting z-fighting with lines ( organizing groups entities )
 		for ( let i = 0 ; i < object.children.length ; ++ i)
 			setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ;
-	   // adding groups to scene
+	    // adding groups to scene
 		scene.add( dimensionGroup) ;
 		scene.add( general_entity_Group) ;
-	   // setting Box3d of the door
+	    // setting Box3d of the door
 		set3dBox( object) ;
-	   // setting camera position
+	    // setting camera position
 		setCameraPosition() ;
-	   // setting grid
+	    // setting grid
 		setGrid() ;
-	   // setting frame
+	    // setting frame
 		setFrame() ;
-	   // static cube
+	    // static cube
 		setStaticCube() ;
-	   // static frame
+	    // static frame
 		setStaticFrame() ;
-	  // render loop
+	    // render loop
 		animate() ;
 	}) ;
 }
diff --git a/WebDoorView/3DM_test/test_js_call/style.css b/WebDoorView/3DM_test/test_js_call/style.css
index 8ce32b9..65c1ccd 100644
--- a/WebDoorView/3DM_test/test_js_call/style.css
+++ b/WebDoorView/3DM_test/test_js_call/style.css
@@ -14,16 +14,16 @@ canvas {
 
 #divMenu {
     position: fixed ;
-    top: 10px ;
-    right: 10px ;
+    top: 1rem;
+    right: 1rem;
     background-color: transparent ;
-    width: 275px ;
+    width: 20rem ;
 }
 
 .container {
     width: 100% ;
     height: auto ;
-    margin-bottom: 10px ;
+    margin-bottom: 1rem ;
 }
 
 .container::after {
@@ -38,12 +38,6 @@ canvas {
     display: block ;
 }
 
-#helpButton {
-    text-decoration: underline ;
-    /* float: right ; */
-    height: auto ;
-}
-
 #infoDiv {
     width: 100% ; 
     height: auto ; 
@@ -54,19 +48,17 @@ canvas {
 
 #RefRender {
     position: fixed ;
-    width: 200px ;
-    height: 200px ;
-    bottom: 10px ;
-    right: 10px ;
-    /*border: 1px solid black ;*/
+    width: 10rem ;
+    height: 10rem ;
+    bottom: 0.5rem ;
+    right: 0.5rem ;
 }
 
 #Ref1Render {
     position: fixed ;
-    width: 150px ;
-    height: 150px ;
-    bottom: 10px ;
-    left: 10px ;
+    width: 8rem ;
+    height: 8rem ;
+    bottom: 0.5rem ;
+    left: 0.5rem ;
     background-color: transparent ;
-    /*border: 1px solid black ;*/ 
 }