Capturar firma


([N1] fjvila) #1

Hola a todos:

Necesitaría poder capturar en una aplicación la firma de los clientes al retirar mercancía. La idea es que cuando llegue un cliente y le haga un albarán desde la aplicación, que el cliente pueda firmar en algún dispositivo y que automáticamente quede reflejada su firma en algún campo de dicho albarán.

¿Alguien se ha encontrado con la misma necesidad? ¿Podéis informarme de dispositivos y de como habéis realizado la implementación?

Un saludo


([N4] bitcodesoft) #2

Bueno tienes la “fácil”, y relativamente económica, mini Tablet con Android , presentas un formulario para la firma que contenga un objeto QML o Visor Html, y te guardas el resultado en un campo Objeto del albarán.

O utilizas las librerías que normalmente traen los pads capturadores de firmas, te da un control total sobre el pad, guardar las firmas, compararlas etc…


([N4] carlitos) #3

Vila
¿has conseguido hacer alguna cosa con esto?

gracias


([N4] Ramon Denuc) #4

Hola

Casualmente yo me estoy peleando con un tema igual, y es que un cliente que tengo quiere que los contratos de consentimientos se hagan a través de un pdf digital y este sea guardado en el programa.

Actualmente ya estoy con la creación de los PDF con los datos de los Pacientes, esto ya lo tengo prácticamente terminado, y estoy esperando que la empresa fabricante me pase el SDK para poder utilizarlo con Velneo.

La tablet es una Wacom modelo DTU-1031 y es una autentica pasada.

De inmediato que tenga resuelto el tema de la presentación del PDF en la tablet y que se pueda firmar digitalmente y este pdf final lo pueda guardar en Velneo, me comprometo a informar de como a ido.

Saludos,


([N1] jchacon) #5

Hola Francisco,

hace ya bastante tiempo desarrollamos algo para capturar la firma del cliente , lo que hicimos fue capturar la firma en un visor html y se guardaba la imagen en base64, no tengo a mano el desarrollo ahora pero nosotros lo basamos en un proyecto muy similar a este.

https://github.com/szimek/signature_pad

Espero que te sirva.

Un saludo


([N4] alfons.emecesoftware) #6

Hemos integrado Firma digitalizada en el vERP de Velneo utilizando la personalización JS y sin tocar el núcleo de vERP.
La primera imagen es cuando el usuario está firmando en el ‘pad’.
La segunda imagen es con la firma ya capturada y guardada en un registro extendido de la tabla de Albaranes de venta. Se captura también la fecha y hora de la firma.
La tercera imagen es la previsualización del Albarán de venta, con la firma incrustada en el informe, para imprimir.





([N4] carlitos) #7

Alfons,
¿que presonalizaciónd e javascript utilizas?

¡es una tablet o un ordenador?

gracias


([N4] alfons.emecesoftware) #8

La personalización JS que me refiero quiero decir al sistema de personalización integrado que lleva vERP (basado en JS dentro de Velneo). Con esa personalización hemos integrado un formulario (una pestaña) en el Albarán de Venta de vERP sin necesidad de tocar su núcleo. Ahora bien, para la realización de la firma y su captura hemos utilizado los recursos JS de “Signature Pad” que facilitó jchacon en el hilo de éste debate (al cual aprovechamos para agradecerle la info).

En el proyecto personalizado que hereda de vERP, para la firma, hemos integrado esos recursos JS que existen en el link de “Signature Pad”. Sobre esos recursos JS de “Signature Pad” decir que en su link hay opción (demo) de firmar y capturar una firma. Hemos probado esa demo en iPad (iOS), Nexus (Android) y escritorio PC (Windows) y en todos los casos ha funcionado al firmar encima de la pantalla y devolver la captura en URL base64.

Las imágenes que he puesto de ejemplo, ya integrado en el proyecto personalizado que hereda de vERP, corresponden a una prueba de captura de firma con vClient que hemos hecho sobre un ordenador (escritorio PC Windows).

Con vClient instalado en Nexus (Android) nos está dando un error en un manejador de evento JS Velneo (suponemos que por algo que habrá que adaptar para dicho SO, pero aún no lo sabemos pq en Windows no nos da ese error).

Todavía no hemos podido probarlo con un vClient instalado en una tableta con Windows, pero creemos que sí que debe funcionar sin problemas, pués en escritorio PC Windows nos ha funcionado perfectamente.

Conclusión : a falta de más pruebas (qua aún no hemos podido hacer), pensamos que para tableta Windows debe funcionar y que para tableta Android se necesitará algún ajuste en JS Velneo.

Saludos.


([N4] antonioosorio) #9

Hola alfons.emecesoftware

Quiero hacer que mi aplicación capture la firma y por lo que comentas “Signature Pad”, va bien.

Puedes se más explicito en como has resuelto el tema, por ejemplo, donde has colocado los ficheros, etc.

Un saludo y Gracias.


([N4] alfons.emecesoftware) #10

Buenas antonioosorio, hay 4 ficheros JS y un fichero CSS que tengo como archivos adjuntos en mi proyecto para que siempre estén guardados en la caché del cliente. Esos ficheros son los recursos de “Signature Pad” que comento.

Luego para hacer la firma y capturarla utilizo un formulario con un visor HTML, sobre el cual con JS de Velneo capturo y guardo la firma en formato URLbase64 y la guardo en una tabla de Velneo.

Si necesitas algo más en claro puedes llamarme al 977 70 45 00 y miraría de decírtelo con más de detalle.

Un saludo.


([N1] giovanni) #11

Muchas gracias por la solución.


([N1] ldroso) #12

Hola a todos,

Estoy intentado implementar la solución que habéis aportado, pero estoy más que pez en lo de javascript con velneo y los ficheros que tendría que haber en el equipo cliente.

Alguno podriais publicar un vin con el ejemplo?

Gracias a todos.


([N4] Fran CTI) #13

Hola alfons.

Creo que estoy a punto de conseguir que mi aplicación capture firmas utilizando SignaturePad siguiendo las recomendaciones de alfons.emecesoftware. Pero me he bloqueado en un punto.

SignaturePad es ejecutado por un VisorHTML incrustado en un Formulario de Velneo. Puedo hacer que SignaturePad convierta la rúbrica en una imagen base64 pero no encuentro la manera de hacer que el Formulario “se entere” de que el usuario ha confirmado ni de que reciba ese código base64 para guardarlo.

¿Cómo lo hago? Gracias por vuestra ayuda.


([N4] alfons.emecesoftware) #14

===========================================================================
En este post se adjuntan 4 archivos. En el siguiente post adjunto el resto.

Archivos que son los que añado en el proyecto como archivo adjunto para que los guarde siempre en la caché de Velneo :

  • 4 archivos JS
  • 1 archivo para el CSS del visor de firma ‘pad’.

En el fichero app.js está modificada la última función para que se pueda insertar en el visor HTML del formulario V7 el churro de la firma en base64, así como para que Velneo V7 se entere de que tiene que capturar y grabar la firma (conexión de evento Link clicked).

En V7 lo que tengo es lo siguiente :

  • Un formulario de Albaranes de Venta.

  • Dentro de ese formulario 2 visores HTML. Uno es para el proceso de firmar con el ‘pad’ de firma. El otro es para mostrar la firma ya capturada y grabada en la tabla (en un objeto texto). Por tanto ambos visores, en mi caso, tienen condiciones de visibilidad. El primer visor tiene la condición de que el albarán de venta exista y esté vacío el campo objeto texto (aún no se ha firmado). El segundo tiene la condición de visibilidad de que el campo objeto texto no esté vacío (significa que ya se ha firmado y grabado la firma en el albarán).

  • En el primer visor HTML el contenido lo tengo como Texto Html, con el siguiente HTML (esto pinta el ‘pad’ de firma en el visor HTML, con su CSS bonito y tal) :

"<!doctype html>
<html lang=‘es’>
<head>
<meta charset=‘utf-8’>
<title>Signature Pad</title>
<meta name=‘description’ content=‘Signature Pad - HTML5’>

<meta name=‘viewport’ content=‘width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no’>

<meta name=‘apple-mobile-web-app-capable’ content=‘yes’>
<meta name=‘apple-mobile-web-app-status-bar-style’ content=‘black’>

<link rel=‘stylesheet’ href=\cfile:///"+sysCacheClientPath+"signature-pad.css\c>

</head>
<body onselectstart=‘return false’>

<canvas></canvas>
C A P T U R A   D E   L A   F I R M A
<button class='button clear' data-action='clear'>Limpiar</button> <button class='button save' data-action='save'>Guardar</button>

<script>
function simulateClick(id) {
var evt = document.createEvent(‘MouseEvents’);
evt.initMouseEvent(‘click’, true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById(id);
cb.dispatchEvent(evt);
}
</script>

<script src=\cfile:///"+sysCacheClientPath+“signature_pad.js\c></script>
<script src=\cfile:///”+sysCacheClientPath+"app.js\c></script>

</body> </html>"
  • En el segundo visor HTML el contenido lo tengo como URL. Y en este caso en contenido tengo el campo objeto texto en el que se ha guardado el churro de la firma. Recuerda que el JS de la firma la devuelve como URL.

  • En el formulario también tengo dos manejadores de evento (que también te adjunto el código JS de cada uno de ellos en PDF) :

  • El manejador JS “POS_INI_JS” (se dispara en una conexión de evento Post_Inicializado del formulario)

  • El manejador JS “CLK” (se disparará en una conexión de evento Link clicked del primer visor HTML)

Y ya está, esto es todo.

El manejador JS “CLK” está montado de modo que al darle al botón de “Guardar” graba la URL de la firma obtenida en el campo objeto texto (en mi caso en una tabla extendida de albaranes de venta) y a continuación cierra el formulario principal del albarán de venta. Al volver a abrir el formulario del albarán de venta ya aparece el segundo visor HTML con la imagen de la firma digitalizada (URL capturada y guardada en la tabla extendida). Supongo que se podría mejorar para que al guardar la firma ya refresque y aparezca el segundo visor HTML con la firma capturada y dibujada.

Por último, en el informe (albarán a imprimir) con el vReport, el control que incrusta la firma es una imagen, URL del origen de datos, apuntando al campo objeto texto que contiene grabada la URL, y en formato de imagen le tengo puesto Codificado Base64.


([N4] alfons.emecesoftware) #15

=================================================================================
En este post se adjuntan 3 archivos. Que son el resto, relativo al anterior post.

Al parecer por razones de seguiridad no se permite adjuntar ficheros js, así que si te interesa disponer de ellos me indicas un email de contacto e intentaré adjuntarlos por esa vía.

CLK.pdf (32.3 KB)

POS_INI_JS.pdf (20.5 KB)


([N4] alfons.emecesoftware) #16

Nada, veo que hasta el código HTML que he intentado copiar/pegar no se copia bien del todo. No hagas caso del HTML insertado.

Creo que lo mejor será que si quieres me facilitas un email de contacto y te facilito la info y esos ficheros js/css que no se pueden adjuntar aquí en el foro.

Saludos.


([N1] llorch75) #17

Hola Alfons,

Y si haces un zip con todo?

Gracias


([N4] alfons.emecesoftware) #18

Pués también es verdad.
Adjunto va el zip.

infoFirma.rar (61.5 KB)


([N1] llorch75) #19

Muchas gracias.


([N1] aguinet1) #20

+1