usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: captura de trazos Topaz — canvas context + funciones correctas

Browse Source 
- Agregar <canvas id="topaz-canvas"> 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 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-22 21:38:56 -05:00
co-authored by Claude Sonnet 4.6
parent 78b01033c5
commit 719f27d863
2 changed files with 58 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
form_cliente.php
+26 -35
View File
@@ -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}$/
</div>
<div class="topaz-modal-body">
<div class="topaz-pad-area" id="topaz-pad-area">
<i class="fas fa-signature fa-2x" style="color:#adb5bd" id="topaz-pad-icon"></i>
<div id="topaz-status-msg" style="font-size:.9rem;color:#64748b;font-weight:600">
<canvas id="topaz-canvas" width="500" height="150"
style="border:1px solid #e2e8f0;border-radius:6px;background:#fff;max-width:100%;display:block;margin:0 auto"></canvas>
<div id="topaz-status-msg" style="font-size:.9rem;color:#64748b;font-weight:600;margin-top:8px">
Firme en el pad biométrico
</div>
<div class="topaz-pts-badge">Trazos: <span id="topaz-pts">0</span></div>
@@ -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 };
ver_formulario_enviado.php
+32 -35
View File
@@ -2510,8 +2510,9 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) {
</div>
<div class="topaz-modal-body">
<div class="topaz-pad-area" id="topaz-pad-area">
<i class="fas fa-signature fa-2x" style="color:#adb5bd" id="topaz-pad-icon"></i>
<div id="topaz-status-msg" style="font-size:.9rem;color:#64748b;font-weight:600">
<canvas id="topaz-canvas" width="500" height="150"
style="border:1px solid #e2e8f0;border-radius:6px;background:#fff;max-width:100%;display:block;margin:0 auto"></canvas>
<div id="topaz-status-msg" style="font-size:.9rem;color:#64748b;font-weight:600;margin-top:8px">
Firme en el pad biométrico
</div>
<div class="topaz-pts-badge">Trazos: <span id="topaz-pts">0</span></div>
@@ -2536,15 +2537,7 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) {
// ── Topaz SigWeb ────────────────────────────────────────────────────
const topaz = (() => {
const SIGWEB_URL = '<?= rtrim(defined('APP_URL') ? APP_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 };