From 719f27d8632bf8a9e75c8cd4a37cf3f1c0fbe4e7 Mon Sep 17 00:00:00 2001 From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com> Date: Wed, 22 Jul 2026 21:38:56 -0500 Subject: [PATCH] =?UTF-8?q?fix:=20captura=20de=20trazos=20Topaz=20?= =?UTF-8?q?=E2=80=94=20canvas=20context=20+=20funciones=20correctas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Agregar al overlay de ambos archivos - SetTabletState(1, canvasCtx, 50) con contexto 2D (sin esto los trazos no se dibujan) - Guardar timer retornado y pasarlo a SetTabletState(0, tmr) al cerrar - NumberOfTabletPoints() en vez de GetSigTotalPoints() (función inexistente en v1.0.4) - GetSigImageB64(callback) async en vez de llamada síncrona sin valor de retorno Co-Authored-By: Claude Sonnet 4.6 --- form_cliente.php | 61 +++++++++++++++------------------- ver_formulario_enviado.php | 67 ++++++++++++++++++-------------------- 2 files changed, 58 insertions(+), 70 deletions(-) diff --git a/form_cliente.php b/form_cliente.php index 93777f3..b0a1c8c 100644 --- a/form_cliente.php +++ b/form_cliente.php @@ -329,8 +329,9 @@ if (preg_match('/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
- -
+ +
Firme en el pad biométrico
Trazos: 0
@@ -1271,16 +1272,7 @@ function iniciarCondiciones(esquema) { // ══════════════════════════════════════════════════════════════════════ const topaz = (() => { const SIGWEB_URL = '/assets/js/SigWebTablet.js'; - let _loaded = false, _ctx = null, _fid = null, _poll = null; - - function _call(fn, ...args) { - // SigWeb v1: global functions with ctx as last param - // SigWeb v2: methods on ctx object - if (_ctx && typeof _ctx[fn] === 'function') return _ctx[fn](...args); - const g = window[fn]; - if (typeof g === 'function') return _ctx ? g(...args, _ctx) : g(...args); - throw new Error('SigWeb: ' + fn + ' no encontrado'); - } + let _loaded = false, _fid = null, _poll = null, _tmr = null; function _loadScript() { if (_loaded) return Promise.resolve(true); @@ -1312,12 +1304,14 @@ const topaz = (() => { } _fid = fid; try { - _ctx = typeof SigWebTablet !== 'undefined' ? new SigWebTablet() : null; - _call('SetImageXSize', 500); - _call('SetImageYSize', 150); - _call('SetImagePenWidth', 3); - _call('SetTabletState', 1); - _call('ClearTablet'); + const canvas = document.getElementById('topaz-canvas'); + const canvasCtx = canvas.getContext('2d'); + canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + SetImageXSize(500); + SetImageYSize(150); + SetImagePenWidth(3); + ClearTablet(); + _tmr = SetTabletState(1, canvasCtx, 50); } catch(e) { alert('Error al activar el pad: ' + e.message); return; @@ -1329,7 +1323,7 @@ const topaz = (() => { _poll = setInterval(() => { try { - const pts = _call('GetSigTotalPoints'); + const pts = NumberOfTabletPoints(); $('topaz-pts').textContent = pts; const hasSig = pts > 0; $('topaz-btn-aceptar').disabled = !hasSig; @@ -1342,8 +1336,8 @@ const topaz = (() => { function _cerrarOverlay() { _stopPoll(); - try { if (_ctx) _call('SetTabletState', 0); } catch(e) {} - _ctx = null; _fid = null; + try { SetTabletState(0, _tmr); } catch(e) {} + _tmr = null; _fid = null; $('topaz-overlay').style.display = 'none'; } @@ -1357,18 +1351,13 @@ const topaz = (() => { } function aceptar() { - let b64; - try { b64 = _call('GetSigImageB64'); } catch(e) { - alert('Error al capturar la firma: ' + e.message); - _cerrarOverlay(); return; - } - if (!b64) { alert('No se capturó ninguna firma.'); return; } - - const img = new Image(); - img.onload = () => { - const fid = _fid; - _cerrarOverlay(); - + const fid = _fid; + _cerrarOverlay(); + try { + GetSigImageB64(function(b64) { + if (!b64) { alert('No se capturó ninguna firma.'); return; } + const img = new Image(); + img.onload = () => { if (fid === '__global') { const c = $('firma-canvas'); const cx = c.getContext('2d'); @@ -1391,8 +1380,10 @@ const topaz = (() => { const st = document.getElementById('fw-' + fid + '-status'); if (st) { st.textContent = '✅ Firmado (tableta)'; st.className = 'small text-success align-self-center fw-semibold'; } } - }; - img.src = 'data:image/png;base64,' + b64; + }; + img.src = 'data:image/png;base64,' + b64; + }); + } catch(e) { alert('Error al capturar la firma: ' + e.message); } } return { activar, cancelar, limpiarPad, aceptar }; diff --git a/ver_formulario_enviado.php b/ver_formulario_enviado.php index f1f2d7d..12f0be2 100644 --- a/ver_formulario_enviado.php +++ b/ver_formulario_enviado.php @@ -2510,8 +2510,9 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) {
- -
+ +
Firme en el pad biométrico
Trazos: 0
@@ -2536,15 +2537,7 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) { // ── Topaz SigWeb ──────────────────────────────────────────────────── const topaz = (() => { const SIGWEB_URL = '/assets/js/SigWebTablet.js'; - let _loaded = false, _ctx = null, _target = null, _poll = null; - // _target: { type: 'turnero'|'pro', canvas: CanvasElement, onAccept: fn } - - function _call(fn, ...args) { - if (_ctx && typeof _ctx[fn] === 'function') return _ctx[fn](...args); - const g = window[fn]; - if (typeof g === 'function') return _ctx ? g(...args, _ctx) : g(...args); - throw new Error('SigWeb: ' + fn + ' no encontrado'); - } + let _loaded = false, _target = null, _poll = null, _tmr = null; function _loadScript() { if (_loaded) return Promise.resolve(true); @@ -2594,12 +2587,14 @@ const topaz = (() => { } _target = target; try { - _ctx = typeof SigWebTablet !== 'undefined' ? new SigWebTablet() : null; - _call('SetImageXSize', 500); - _call('SetImageYSize', 150); - _call('SetImagePenWidth', 3); - _call('SetTabletState', 1); - _call('ClearTablet'); + const canvas = document.getElementById('topaz-canvas'); + const canvasCtx = canvas.getContext('2d'); + canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + SetImageXSize(500); + SetImageYSize(150); + SetImagePenWidth(3); + ClearTablet(); + _tmr = SetTabletState(1, canvasCtx, 50); } catch(e) { _toast('Error al activar el pad: ' + e.message); return; } @@ -2610,7 +2605,7 @@ const topaz = (() => { _poll = setInterval(() => { try { - const pts = _call('GetSigTotalPoints'); + const pts = NumberOfTabletPoints(); document.getElementById('topaz-pts').textContent = pts; document.getElementById('topaz-btn-aceptar').disabled = pts === 0; if (pts > 0) _setStatus('✅ Firma detectada — presione Aceptar', true); @@ -2622,8 +2617,8 @@ const topaz = (() => { function _cerrar() { _stopPoll(); - try { if (_ctx) _call('SetTabletState', 0); } catch(e) {} - _ctx = null; _target = null; + try { SetTabletState(0, _tmr); } catch(e) {} + _tmr = null; _target = null; document.getElementById('topaz-overlay').style.display = 'none'; } @@ -2637,23 +2632,25 @@ const topaz = (() => { } function aceptar() { - let b64; - try { b64 = _call('GetSigImageB64'); } catch(e) { - alert('Error al capturar la firma: ' + e.message); _cerrar(); return; - } - if (!b64) { _toast('No se capturó ninguna firma.'); return; } const target = _target; _cerrar(); - const img = new Image(); - img.onload = () => { - const c = target.canvas; - const ctx = c.getContext('2d'); - ctx.clearRect(0, 0, c.width, c.height); - ctx.drawImage(img, 0, 0, c.width, c.height); - c.classList.add('has-sig'); - if (typeof target.onAccept === 'function') target.onAccept(); - }; - img.src = 'data:image/png;base64,' + b64; + try { + GetSigImageB64(function(b64) { + if (!b64) { _toast('No se capturó ninguna firma.'); return; } + const img = new Image(); + img.onload = () => { + const c = target.canvas; + const ctx = c.getContext('2d'); + ctx.clearRect(0, 0, c.width, c.height); + ctx.drawImage(img, 0, 0, c.width, c.height); + c.classList.add('has-sig'); + if (typeof target.onAccept === 'function') target.onAccept(); + }; + img.src = 'data:image/png;base64,' + b64; + }); + } catch(e) { + _toast('Error al capturar la firma: ' + e.message); + } } return { activar, cancelar, limpiarPad, aceptar };