**Version 1.46** 20/05/2026

Se ha agregado un nodo de notificacion al inicio del proceso para permitir eliminar cualquier notificacion presente en caso de recibir un comando de poner el
semaforo en verde cuando el estado esta en rojo. Esto se hace en el nodo check JSON content
- 1/06/2026 Se cambio el tratamiento del QR / RFID en el nodo "tipo de lector" para evitar caracteres aleatorios no ASCII que en ocasiones envia el lector de QR

**Version 1.45** 17/05/2026
Se ha agregado codigo en el nodo "Envia Matricula" y en el nodo "Convert to B64" para en caso en que el flag "envia_mat_img" este en true enviar la matricula,
la imagen de la matricula y la imagen de contexto al supervisor en el momento que se obtengan, con la finalidad de que el supervisor a su vez la envie en
broadcasting para que los interesados puedan obtener en tiempo real estas informaciones y plasmarlas sobre una pantalla. Tal vez esta funcionalidad es mas para desarrollo
ya que esta informacion se envia al servidor via API una vez que el usuario es autenticado.
La trama que se envia al supervisor en el caso de la matricula es:
{payload: { device: "supervisor", accion: "lastplate", data: {numero_vial: 2, totem_id: "totem_2", matricula: "1234ABC", imagen: imgBase64}}}
en el caso de la imagen de contexto es:
{payload: { device: "supervisor", accion: "lastcontext", data: {numero_vial: 2, totem_id: "totem_2", imagen_contexto: imgBase64}}}
Ambas tramas se envian al momento de recibir las imagenes en el Totem.
Por su lado el Supervisor envia las siguientes tramas para matricula y para contexto:
{payload:{sender:"supervisor", device:"servidor", accion:"lastplate", data:{totem_id:"totem_2", numero_vial:2, matricula:"1234ABC", imagen:imgBase64}}}
{payload:{sender:"supervisor", device:"servidor", accion:"lastcontext", data:{totem_id:"totem_2", numero_vial:2, imagen_contexto:imgBase64}}}
El flag "envia_mat_img" es configurable a traves del menu de configuracion en el apartado Comunicacion.

Se agrego un nodo "estado semaforo" antes de accionar el semaforo fisicamente, la idea de este nodo es que envie el estado del semaforo via websocket cada
vez que este cambia de estado, de esta forma podemos mantener un estado tiempo real en cualquier sitio remoto con solo observar esta trama. El envio se hace
al supervisor que es quien sirve el websockety se hace solamente si se detecta un cambio de estado del semaforo. La trama es la siguiente:
{device:"supervisor", accion: "semaforo_status", status:{totem_id:flow.get("totem_id"), numero_vial:flow.get("numero_vial"), semaforo:semaforo}}
Cuando llegue al supervisor, este enviara una trama al servidor asi: (esta trama va en broadcasting osea que fisicamente llega a todos los clientes de websocket):
{payload:{sender:"supervisor", device:"servidor", accion:"update_semaforo", semaforo:{totem_id:totem, numero_vial:vial, semaforo:semaforo}}}

En el nodo "Analisis del Modo de Operacion" se agrego un chequeo al final del nodo para evitar que se haga un movimiento inicial cuando la bascula es del tipo salida
adicionalmente tambien se chequea para evitar que muestre ubicacion en caso que se presente un QR o tarjeta

bascula_autonoma_1_cred.json

@@ -1 +1,14 @@
-{}
+{
+    "e49672ad6c84b341": {
+        "user": "admin",
+        "password": "Trypton#2019"
+    },
+    "72071eee550615d7": {
+        "user": "admin",
+        "password": "Trypton#2019"
+    },
+    "ee22e8c1327a7b65": {
+        "user": "admin",
+        "password": "Trypton#2019"
+    }
+}

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 =============================== */
 
@@ -524,6 +545,59 @@ td[contenteditable="true"] {
         font-size: 12px;
     }
 }
+
+/* =============================== PANTALLA SENSOR AÑADIDO POR DAVID=============================== */
+
+.sensor-info-block {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+    padding: 10px 14px;
+    background: #f4f6f8;
+    border-radius: 8px;
+}
+
+.sensor-label {
+    font-size: 14px;
+    font-weight: bold;
+    color: #555;
+}
+
+.sensor-valor {
+    font-size: 28px;
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+.sensor-valor-min {
+    font-size: 22px;
+    font-weight: bold;
+    color: #e67e22;
+}
+
+.sensor-barra-wrap {
+    padding: 0 4px;
+
+}
+
+.sensor-barra-bg {
+    position: relative;
+    height: 46px;
+    background: #dce3ea;
+    border-radius: 10px;
+    overflow: visible;
+    max-height: 20px;
+}
+
+.sensor-barra-fill {
+    height: 100%;
+    width: 0%;
+    border-radius: 10px;
+    background: #3498db;
+    transition: width 0.5s ease, background-color 0.3s;
+}
+
 /*-------------------------------------------------- IMAGEN INICIAL DEL SNAPSHOT ---------------------------------------------------------------------*/
 /*
 #foto {

uibuilder/totem/src/index.html

@@ -110,8 +110,10 @@
             <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>
         </div>
@@ -156,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">
@@ -220,6 +239,35 @@
             <button class="btn teal big" data-action="salir-escuchar">SALIR</button>
         </div>
     </div>
+    <!-- -------------------------------------- PANTALLA PRUEBA DEL SENSOR AÑADIDO POR DAVID--------------------------------------------------- -->
+    <div id="pantalla-sensor" class="pantalla">
+        <div class="container">
+            <div class="header">
+                <img src="/logo-trypton2.png" class="logo" alt="Logo">
+                <h2>Trypton Software</h2>
+            </div>
+            <h3 class="titulo">PRUEBA DEL SENSOR</h3>
+            <hr>
+
+            <div class="sensor-info-block">
+                <span class="sensor-label">Distancia mínima configurada</span>
+                <span class="sensor-valor-min" id="sensor-dmin">--- mm</span>
+            </div>
+
+            <div class="sensor-info-block">
+                <span class="sensor-label">Distancia detectada</span>
+                <span class="sensor-valor" id="sensor-dist">--- mm</span>
+            </div>
+
+            <div class="sensor-barra-wrap">
+                <div class="sensor-barra-bg">
+                    <div class="sensor-barra-fill" id="sensor-fill"></div>
+                </div>
+            </div>
+
+            <button class="btn teal big" data-action="salir-sensor">SALIR</button>
+        </div>
+    </div>
 
 <!-- ------------------------------- PANTALLA DE TABLA DINAMICA PARA MOSTRAR PARAMETROS DE CONFIGURACION------------------------------------------------->
     <div id="pantalla-tabla-general" class="pantalla">
@@ -266,7 +314,10 @@
             
         </div>
         <div class="botonera-vertical">
-            <button class="btn green" id="btn-volver-tipos">REGRESAR</button>
+            <button class="btn blue" id="btn-lista-parametros" onclick="seleccionarTipo(10)">LISTA DE PARAMETROS</button>
+        </div>
+        <div class="botonera-vertical">
+            <button class="btn green" style="margin-top:20px" id="btn-volver-tipos">REGRESAR</button>
         </div>
         <div id="tipo-configuracion" style="margin-top:20px; display:none;">
             <h3 id="titulo-tipo"></h3>
@@ -278,6 +329,11 @@
                 <button class="btn rojo" id="btn-cancelar-tipo">Cancelar</button>
             </div>
         </div>
+        <div id="tipo-lista" style="margin-top:20px; display:none;">
+            <h3 id="titulo-tipo-lista"></h3>
+            <div id="lista"></div>
+        </div>
+
     </div>
 </div>
 

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) {
@@ -58,6 +74,7 @@ uibuilder.onChange('msg', msg => {
             const actual = (msg.snapshot_readindex || 0) + 1;
             document.getElementById('contador').textContent = `${actual} / ${total}`;
         }
+        
     }
 
     else if (msg.payload?.pantalla === 'tipos') {
@@ -138,6 +155,25 @@ uibuilder.onChange('msg', msg => {
     if (msg.hasOwnProperty("iplan")) document.getElementById('iplan').textContent = msg.iplan;
     if (msg.hasOwnProperty("ipsupervisor")) document.getElementById('ipsupervisor').textContent = msg.ipsupervisor;
     
+    // ======== Sensor de distancia añadido por david========
+    if (msg.hasOwnProperty("distance")) {
+        const dist = msg.distance;
+        const dmin = msg.distance_min;
+        const maxRange = 4000;
+
+        document.getElementById('sensor-dist').textContent =
+            (dist !== null && dist !== undefined) ? dist + ' mm' : '--- mm';
+
+        if (dmin !== null && dmin !== undefined) {
+            document.getElementById('sensor-dmin').textContent = dmin + ' mm';
+        }
+
+        if (dist !== null && dist !== undefined) {
+            const fillPct = Math.min((dist / maxRange) * 100, 100);
+            const fill = document.getElementById('sensor-fill');
+            fill.style.width = fillPct + '%';
+        }
+    }
 });
 
 //****************************************************************************************************************************************************** */
@@ -174,6 +210,7 @@ document.getElementById('btn-volver-tipos').addEventListener('click', () => {
     uibuilder.send({ payload: { seccion: "volver_tipos" } });
 });
 
+
 let tipoActual = null;
 let tiposDatos = {}; // aquí se guarda la configuración temporal
 
@@ -270,19 +307,37 @@ function mostrarBarreraCerrada() {
 
 //************************* FUNCIONES DE TIPOS DE CONFIGURACION *****************************/
 function seleccionarTipo(n) {
+    volverATipos();
     tipoActual = n;
-    document.getElementById('titulo-tipo').textContent = `TIPO ${n}`;
-    document.getElementById('tipo-configuracion').style.display = 'block';
 
-    const contenedor = document.getElementById('parametros');
-    contenedor.innerHTML = '';
+    if (tipoActual == 10) {
+        document.getElementById('titulo-tipo-lista').textContent = 'LISTA DE PARAMETROS';
+        document.getElementById('tipo-lista').style.display = 'block';
+        const contenedor = document.getElementById('lista');
+        contenedor.innerHTML = '';
+        const datos = tiposDatos[n] || [];  // ya es un array
+
+        datos.forEach(d => {
+            const row = crearFilalista(d.parametro, d.valor);
+            contenedor.appendChild(row);
+        });
+    }
+    else{
+        document.getElementById('titulo-tipo').textContent = `TIPO ${n}`;
+        document.getElementById('tipo-configuracion').style.display = 'block';
+        const contenedor = document.getElementById('parametros');
+        contenedor.innerHTML = '';
+
+        const datos = tiposDatos[n] || [];  // ya es un array
+
+        datos.forEach(d => {
+            const row = crearFilaParametro(d.parametro, d.valor);
+            contenedor.appendChild(row);
+        });
+    }
+
     
-    const datos = tiposDatos[n] || [];  // ya es un array
     
-    datos.forEach(d => {
-        const row = crearFilaParametro(d.parametro, d.valor);
-        contenedor.appendChild(row);
-    });
 }
 
 function agregarParametro() {
@@ -292,6 +347,23 @@ function agregarParametro() {
     const row = crearFilaParametro('', '');
     contenedor.appendChild(row);
 }
+function crearFilalista(parametro, valor) {
+    const divlist = document.createElement('divlist');
+    divlist.className = 'parametro-row';
+
+    // Input para el nombre del parámetro
+    const inputParam = document.createElement('input');
+    inputParam.placeholder = 'Parámetro';
+    inputParam.value = parametro;
+
+    const inputValue = document.createElement('input');
+    inputValue.placeholder = 'Valor';
+    inputValue.value = valor;
+    divlist.appendChild(inputParam);
+    divlist.appendChild(inputValue);
+    return divlist;
+}
+
 function crearFilaParametro(parametro, valor) {
     const div = document.createElement('div');
     div.className = 'parametro-row';
@@ -407,6 +479,7 @@ function guardarTipo() {
 
 function volverATipos() {
     document.getElementById('tipo-configuracion').style.display = 'none';
+    document.getElementById('tipo-lista').style.display = 'none';
     tipoActual = null;
 }