Debido a nuevo requerimiento se introduce la opcion (configurable) de tener una camara de contexto en la bascula. Esta camara en caso de estar

habilitada en la configuracion tomara una imagen en el momento en que el camion este completamente en la bascula, para ello hemos introducido un codigo en el nodo
"estable" que es donde se hace la deteccion del camion completamente en la bascula. Posteriormente en el nodo "Analisis del modo de Operacion" es
donde verificamos que la imagen fue tomada y la colocamos en el registro que se esta haciendo para generar el movimiento correspondiente. El Grupo
"CAMARA CONTEXTO" posee los nodos de solicitud de imagen y de recepcion de la misma. La configuracion de IP de la camara se hace en la pantalla
de configuracion al igual que su habilitacion en el sistema.
- Como herramienta de ayuda para saber si el Totem esta en capacidad de solicitar y de recibir la imagen de contexto enviada por la camara
se ha incluido una funcion en el menu de configuracion -> Pruebas del sistema -> Pedir Snapshot de contexto de forma que el usuario pueda visualizar
la imagen actual que la camara esta enviando y pueda de esa forma confirmar el correcto funcionamiento de la conexión y de los equipos.

uibuilder/totem/src/index.css

@@ -60,7 +60,16 @@ h3 {
 }
 
 /* =============================== BOTONES =============================== */
-
+.boton{
+        padding: 10px;
+        font-size: 24px;
+        font-weight: bold;
+        border: none;
+        border-radius: 10px;
+        color: white;
+        cursor: pointer;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
 .btn {
     padding: 16px;
     font-size: 16px;
@@ -72,6 +81,14 @@ h3 {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
+.boton.med {
+     width: 100%;
+     margin-top: 8px;
+ }
+ .boton.blue,
+ .boton.azul {
+     background: #3498db;
+ }
 .btn.big {
     width: 100%;
     margin-top: 10px;
@@ -133,6 +150,10 @@ h3 {
     background: #DAB957;
     color: #444;
 }
+.btn.skyblue {
+    background: skyblue;
+    color: #444;
+}
 
 /* =============================== BOTONERAS / GRID =============================== */
 

uibuilder/totem/src/index.html

@@ -110,8 +110,9 @@
             <div class="grid-vertical">
                 <button class="btn yellow" data-action="semaforo">ENCENDER SEMAFORO</button>
                 <button class="btn aqua" data-action="barrera">ACTIVAR BARRERA</button>
-                <button class="btn orange" data-action="snapshot">PEDIR SNAPSHOT</button>
-                <button class="btn green" data-action="escuchar">ESCUCHAR CAMARA</button>
+                <button class="btn orange" data-action="snapshot">PEDIR SNAPSHOT DE MATRICULA</button>
+                <button class="btn green" data-action="escuchar">ESCUCHAR CAMARA MATRICULA</button>
+                <button class="btn skyblue" data-action="contexto">PEDIR SNAPSHOT DE CONTEXTO</button>
                 <button class="btn purple" data-action="sensor">PROBAR SENSOR</button>
                 <button class="btn teal" data-action="regresar">SALIR</button>
             </div>
@@ -157,6 +158,23 @@
         </div>
     </div>
 
+    <!-- -------------------------------------- PANTALLA DE LA CAMARA DE CONTEXTO -------------------------------------------------- -->
+    <div id="pantalla-contexto" class="pantalla">
+        <div class="container">
+            <div class="header">
+                <img src="/logo-trypton2.png" class="logo" alt="Logo">
+                <h2>CAMARA CONTEXTO</h2>
+            </div>
+            <div class="camara-row">
+                <!--<span>Camara: <strong id="camara_contexto">---</strong></span>-->
+                <button class="boton blue med" data-action="repetir" >↻ Recargar</button>
+            </div>
+            <div class="imagen"><img id="foto_contexto" src="" alt="Foto"></div>
+           
+            <div class="fecha" id="fecha_contexto">----</div>
+            <button class="btn teal big" data-action="salir-snapshot">SALIR</button>
+        </div>
+    </div>
     <!-- -------------------------------------- PANTALLA DE SNAPSHOT DE LA CAMARA -------------------------------------------------- -->
     <div id="pantalla-snapshot" class="pantalla">
         <div class="container">

uibuilder/totem/src/index.js

@@ -30,6 +30,15 @@ uibuilder.onChange('msg', msg => {
         
     }
 
+    if (msg.payload && msg.payload.pantalla === 'contexto') {
+         // Limpiar datos visibles
+        document.getElementById('camara_contexto').textContent = '---';
+        document.getElementById('fecha_contexto').textContent = '----';
+        // Mostrar imagen vacía
+        document.getElementById('foto_contexto').src = "";
+        
+    }
+
     if (msg.payload && msg.payload.pantalla === 'escuchar' && msg.buttons != true) {
         // Limpiar datos visibles
         document.getElementById('camara_escuchar').textContent = '---';
@@ -39,7 +48,14 @@ uibuilder.onChange('msg', msg => {
         // Mostrar imagen vacía
         document.getElementById('foto_escuchar').src = "";
     }
-    
+    // nuevo paara camara de contexto
+    if (msg.hasOwnProperty("picture_contexto")) {
+        if (msg.context_cam) {
+            document.getElementById('foto_contexto').src = msg.picture_contexto;
+            document.getElementById('fecha_contexto').textContent = msg.fecha_contexto || '';
+            document.getElementById('camara_contexto').textContent = "Contexto" || '---';
+        }
+    }
     if (msg.hasOwnProperty("picture")) {
         //uibuilder.send({ payload: msg.payload.Picture.Plate.PlateNumber, topic: msg.payload.Picture.SnapInfo.DeviceID });
         if (msg.snapshot_cam) {
@@ -57,7 +73,8 @@ uibuilder.onChange('msg', msg => {
             const total = msg.snapshot_indexmax || 0;
             const actual = (msg.snapshot_readindex || 0) + 1;
             document.getElementById('contador').textContent = `${actual} / ${total}`;
-        }   
+        }
+        
     }
 
     else if (msg.payload?.pantalla === 'tipos') {