grafiche

annacarini · May 6, 2024 · dee91cb · dee91cb
1 parent 35f8798
commit dee91cb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 56 deletions.
diff --git a/States Flow Chart.pdf b/States Flow Chart.pdf
diff --git a/application.js b/application.js
@@ -34,6 +34,8 @@ var automaticPlay = true;
 var paused = true;
 var playing = false;    // per evitare di chiamare di nuovo play() fino a che la callback non e' stata chiamata
 
+var simulationStopped = false;  // per bloccare le animazioni e i tasti quando apri il menu
+
 
 // PARAMETRI PER GRAFICA
 var two;
@@ -253,11 +255,14 @@ function onBodyLoad() {
 
 function openMenu() {
     pause();
+    simulationStopped = true;
     document.getElementById("menu").removeAttribute("hidden");
 }
 
 
 function closeMenu() {
+    simulationStopped = false;
+    //animate(); // riprendi l'animazione visto che l'avevi fermata
     document.getElementById("menu").setAttribute("hidden", null);
 }
 
@@ -278,6 +283,7 @@ function startSimulation() {
 
     // Aggiungi controlli da tastiera (va fatto ora se no uno poteva premere la barra spaziatrice prima di avviare la simulazione)
     document.onkeydown = function(e) {
+        if (simulationStopped) return;
         switch (e.key) {
             // FRECCETTA SX: undo
             case "ArrowLeft":     
@@ -376,8 +382,9 @@ function reset() {
     playJumpButton.disabled = false;
     applicationState = States.Start; 
 
-    upperPart = new Section(document.getElementById("column_center_upper_part"));
-    lowerPart = new Section(document.getElementById("column_center_lower_part"));
+    // aggiorna sezioni
+    updateSizes();
+
     buffer.group.remove();
     relation.group.remove();    
     buffer = new Buffer(upperPart.center.x, upperPart.center.y - 15, bufferSize, frameSize, two);
@@ -825,12 +832,13 @@ function animate() {
     }
 
     TWEEN.update();
-	requestAnimationFrame(animate);
+    requestAnimationFrame(animate);
 }
 requestAnimationFrame(animate)
 
 
 
+
 function redrawEverything() {
 
     // Aggiorna misure

diff --git a/index.html b/index.html
@@ -14,6 +14,8 @@
 
         <title>External Multi-Pass Sorting</title>
         <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     </head>
     <body onload="onBodyLoad()">
         <!-- MENU INIZIALE -->
@@ -24,7 +26,7 @@
                 <img src="images/title.png" style="width:25vw;"/><br/>
 
                 <!-- Controlli -->
-                <form name="menu_form" style="font-family:Calibri; font-size:1.25vw; padding-bottom: 40px;
+                <form name="menu_form" style="font-family:Calibri; font-size:1.25vw; padding-bottom: 4vh;
                 position: relative;  width: fit-content; left: 50%; transform: translateX(-50%);">
                     Number of frames in the buffer:<br/>
                     <input class="range-slider" type="range" id="buffer_size" min="3" max="10" value="3"/>
@@ -67,14 +69,14 @@
                 <!-- TITOLO -->
                 <img src="images/title.png" style="width:20vw;"/><br/>
                 <!-- CASELLA TESTO per spiegare cosa stiamo facendo -->
-                <div style="position:relative; top:1vh; width:90%; height:fit-content; min-height:18vh; left:50%; transform:translate(-50%);
+                <div style="position:relative; top:10vh; width:90%; height:fit-content; min-height:18vh; left:50%; transform:translate(-50%, -50%);
                 border: 3px solid rgba(0, 0, 0, 0.7); border-radius:8px; padding:1%; /*background-image: linear-gradient(#bbb 0%, #fff 3%, #fff 100%);*/">
                     <div id="text_box" style="font-family:Calibri; font-size:1.25vw; padding: 1.5vh 1.5vw;">
                         Waiting to start.
                     </div>
                 </div>
                 <!-- CASELLA DI TESTO per mostrare il numero di letture I/O -->
-                <div style="position:relative; top:4vh; width: 90%; height:fit-content; min-height:5%; padding:1%; left:50%; transform:translate(-50%);
+                <div style="position:relative; top:11vh; width: 90%; height:fit-content; min-height:5%; padding:1%; left:50%; transform:translate(-50%, -50%);
                 font-family:Calibri; font-size:1.25vw; border-radius:8px; border: 3px solid rgba(0, 0, 0, 0.7);">
                     <div style="text-align:center; font-weight:bold; padding:2vh 0;"># I/O operations:</div>
                     <div style="display: flex; padding: 0 1.5vw;">
@@ -87,12 +89,12 @@
                     </div>
                 </div>
                 <!-- PULSANTI -->
-                <div style="position:relative; top:9vh; height:fit-content; width:90%; min-width: fit-content; left:50%; transform:translateX(-50%);
+                <div style="position:relative; top:13vh; width:90%; min-width: fit-content; left:50%; transform:translate(-50%, -50%); vertical-align: bottom;
                 /*background-color: #f3f3f3;*/ padding: 1.5vh 0.4vw; border-radius: 15px; text-align: center;">
-                    <button id="undo_button" class="animation_btn" type="button" title="Back" onclick="">
+                    <button id="undo_button" class="animation_btn" type="button" title="Back" onclick="" hidden>
                         <img class="animation_btn_img" src="images/buttons/back.png"/>
                     </button>
-                    <button id="pause_button" class="animation_btn" type="button" title="Pause" onclick="pause();">
+                    <button id="pause_button" class="animation_btn" type="button" title="Pause" style="height:fit-content;" onclick="pause();">
                         <img class="animation_btn_img" src="images/buttons/pause.png"/>
                     </button>
                     <button id="play_button" class="animation_btn" type="button" title="Play" onclick="playAll();">
@@ -106,7 +108,7 @@
                     </button>
                 </div>
                 <!-- Pulsanti per accelerare/rallentare le animazioni -->
-                <div style="position:absolute; bottom:8.5vh; width:90%; min-width:fit-content; left:50%; transform:translateX(-50%); padding-left:0.5vw; text-align: right;">
+                <div style="position:absolute; bottom:10vh; width:90%; min-width:fit-content; left:50%; transform:translate(-50%, 50%); padding-left:0.5vw; text-align: right;">
                     <div style="display:inline-block; font-family:Calibri; font-size:1.2vw; padding-right:0.5vw;">
                         Animation speed
                     </div>
@@ -118,8 +120,8 @@
                     </button>
                 </div>
                 <!-- SWITCH per attivare e disattivare i numeri nella relazione -->
-                <div title="" style="position:absolute; bottom:2.8vh; width:100%; left:50%; transform:translate(-50%); text-align:center;">
-                    <span style="display:inline-block; padding-right:8px; font-family:Calibri; font-size:1.2vw; transform:translateY(10%);">
+                <div style="position:absolute; bottom:4.2vh; width:100%; height:fit-content; left:50%; transform:translate(-50%, 50%); text-align:center;">
+                    <span style="display:inline-block; padding-right:0.5vw; font-family:Calibri; font-size:1.2vw; transform:translateY(10%);">
                         Show content of relation pages
                     </span>
                     <label class="switch" style="vertical-align: middle;">

diff --git a/player.js b/player.js
diff --git a/style.css b/style.css
@@ -136,7 +136,7 @@ input:checked + .slider:before {
 
   @media (min-width: 768px) {
     .button-56 {
-      padding: 0 15px;
+      padding: 0 0.8vw;
     }
   }