✅ otro sistema de pantalla completa y mover controles

enflujo · Jan 16, 2025 · 3a354f3 · 3a354f3
1 parent f543bd5
commit 3a354f3
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -52,11 +52,25 @@
     ></script>
   </head>
   <body>
-    <div id="menu"></div>
-
     <main id="contenedor">
+      <span id="cerrarControles">X</span>
+
       <div id="controles">
+        <div id="configuracionConfianza">
+          <p>Confidence level:</p>
+          <input id="barraConfianza" type="range" min="0.01" max="1.0" step="0.01" value="0.5" />
+          <span id="valorConfianza"></span>
+        </div>
+        <div id="confianzaInfo">
+          <p class="info">
+            Setting a low confidence level makes the model detect more "objects" but makes more mistakes, while high
+            confidence detects less "objects" but the model has more confidence it is detecting the correct object. The
+            default is 50% - just in the middle of confidence and ability to detect.
+          </p>
+        </div>
+
         <div id="mensaje"></div>
+
         <ul id="listaVideos"></ul>
       </div>
 
@@ -66,22 +80,11 @@
         <canvas id="lienzo3" class="lienzo"></canvas>
 
         <video id="video" class="visible" autoplay controls></video>
-        <button id="iconoFullScreen">Full screen</button>
-        <div id="configuracionConfianza">
-          <p>Confidence level: <span id="valorConfianza"></span></p>
-          <input id="barraDeRangos" type="range" min="0.01" max="1.0" step="0.01" value="0.5" class="slider" />
-        </div>
-        <div id="confianzaInfo">
-          <p class="info">
-            Setting a low confidence level makes the model detect more "objects" but makes more mistakes, while high
-            confidence detects less "objects" but the model has more confidence it is detecting the correct object. The
-            default is 50% - just in the middle of confidence and ability to detect.
-          </p>
-          <input id="descargar" type="button" value="Download Data" />
-        </div>
       </div>
 
       <div id="categorias">
+        <!-- <input id="descargar" type="button" value="Download Data" /> -->
+
         <div class="columnas">
           <span id="verVideo" class="modo activo">Video</span>
           <span id="verVis" class="modo activo">Heatmap</span>

diff --git a/src/componentes/pantallaCompleta.ts b/src/componentes/pantallaCompleta.ts
@@ -1,21 +1,17 @@
-const contenedor = document.getElementById('contenedor') as HTMLElement;
-const controles = document.getElementById('controles') as HTMLDivElement;
-const iconoFullScreen = document.getElementById('iconoFullScreen') as HTMLButtonElement;
-let pantallaCompleta = false;
+export function controlesPantallaCompleta() {
+  const controles = document.getElementById('controles') as HTMLDivElement;
+  const botonCerrar = document.getElementById('cerrarControles') as HTMLButtonElement;
 
-function cambiarModoPantalla() {
-  if (!pantallaCompleta) {
-    controles.classList.add('oculto');
-    contenedor.classList.add('pantallaCompleta');
-    iconoFullScreen.innerText = 'Exit full screen';
-  } else {
-    controles.classList.remove('oculto');
-    contenedor.classList.remove('pantallaCompleta');
-    iconoFullScreen.innerText = 'Full screen';
-  }
-  pantallaCompleta = !pantallaCompleta;
-}
+  let pantallaCompleta = false;
 
-export function controlesPantallaCompleta() {
-  iconoFullScreen.onclick = cambiarModoPantalla;
+  botonCerrar.onclick = () => {
+    if (!pantallaCompleta) {
+      controles.classList.add('oculto');
+      botonCerrar.innerText = '>>';
+    } else {
+      controles.classList.remove('oculto');
+      botonCerrar.innerText = 'X';
+    }
+    pantallaCompleta = !pantallaCompleta;
+  };
 }
diff --git a/src/programa.ts b/src/programa.ts
@@ -60,7 +60,7 @@ function cargarVideo(nombre: string, formato: string) {
 }
 
 async function inicio() {
-  const barraDeRangos = document.getElementById('barraDeRangos') as HTMLInputElement;
+  const barraConfianza = document.getElementById('barraConfianza') as HTMLInputElement;
   const valorConfianza = document.getElementById('valorConfianza') as HTMLInputElement;
 
   imprimirMensaje('Loading model, this can take some time...');
@@ -71,7 +71,7 @@ async function inicio() {
       modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/float16/1/efficientdet_lite0.tflite`,
       delegate: 'GPU',
     },
-    scoreThreshold: +barraDeRangos.value,
+    scoreThreshold: +barraConfianza.value,
     runningMode: 'VIDEO',
   });
 
@@ -144,22 +144,22 @@ async function inicio() {
   let reloj: ReturnType<typeof setTimeout> | null = null;
 
   async function actualizarConfianza() {
-    const valor = +barraDeRangos.value;
+    const valor = +barraConfianza.value;
     valorConfianza.innerText = `${Math.floor(valor * 100)}%`;
 
     if (reloj !== null) {
       clearTimeout(reloj);
     }
     reloj = setTimeout(() => {
-      modelo.setOptions({ scoreThreshold: +barraDeRangos.value });
+      modelo.setOptions({ scoreThreshold: +barraConfianza.value });
       reloj = null;
     }, 500);
   }
 
   controlesPantallaCompleta();
   actualizarConfianza();
 
-  barraDeRangos.oninput = actualizarConfianza;
+  barraConfianza.oninput = actualizarConfianza;
 
   function escalar() {
     video.width = lienzo.width = lienzo2.width = lienzo3.width = video.clientWidth;

diff --git a/src/scss/estilos.scss b/src/scss/estilos.scss
@@ -46,21 +46,65 @@ main {
   font-variation-settings: 'wdth' 100;
 }
 
-#menu {
-  height: $altoMenu;
-  width: 100%;
-  background-color: var(--negro);
+#barraConfianza {
+  width: 80%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#valorConfianza {
+  font-weight: bold;
+}
+
+#cerrarControles {
+  padding: 0.3em;
+  text-align: right;
+  display: block;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  height: 5px;
+  background: #dadaf9;
+  border: none;
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: solid 1px #242323;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgb(218, 241, 248);
+  margin-top: -5.4px;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: #dadaf9;
 }
 
 #controles {
   width: 15vw;
+  padding: 1.25em 2em;
   max-height: $altoContenido;
   overflow: auto;
   z-index: 99;
   display: block;
+  transition: all 0.3s ease-out;
 
   &.oculto {
-    display: none;
+    width: 0;
+    padding: 0;
   }
 }
 
@@ -75,7 +119,7 @@ main {
 }
 
 #seccionVideo {
-  width: 70vw;
+  flex: 1;
   height: $altoContenido;
   position: relative;
   background-color: var(--negro);
@@ -199,7 +243,6 @@ video {
 
 #listaVideos {
   font-size: 0.75em;
-  padding: 1.25em 2em;
   list-style: none;
   visibility: visible;
 }
@@ -257,11 +300,9 @@ video::-webkit-media-controls-fullscreen-button {
   background-color: dimgrey;
 }
 
-.confianza {
-  .info {
-    font-style: italic;
-    font-size: 0.9em;
-  }
+.info {
+  font-style: italic;
+  font-size: 0.8em;
 }
 
 .pantallaCompleta {