{"id":50543,"date":"2019-09-12T12:28:56","date_gmt":"2019-09-12T12:28:56","guid":{"rendered":"http:\/\/www.bitcodesoft.com\/?post_type=dt_portfolio&#038;p=50543"},"modified":"2026-02-28T13:17:34","modified_gmt":"2026-02-28T13:17:34","slug":"qmlsign","status":"publish","type":"dt_portfolio","link":"https:\/\/www.bitcodesoft.com\/index.php\/project\/qmlsign\/","title":{"rendered":"QMLsign watermark"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row type=\u00bbvc_default\u00bb equal_height=\u00bbyes\u00bb][vc_column offset=\u00bbvc_col-lg-offset-0 vc_col-lg-12 vc_col-md-offset-0 vc_col-md-12 vc_col-sm-offset-0&#8243; css=\u00bb.vc_custom_1475522525062{padding-bottom: 30px !important;}\u00bb][vc_column_text]<iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/GdMZ2VUSJq4?rel=0&amp;showinfo=0\" width=\"960\" height=\"540\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][\/vc_column][vc_column offset=\u00bbvc_col-lg-offset-1 vc_col-lg-10 vc_col-md-offset-1 vc_col-md-10 vc_col-sm-offset-0&#8243; css=\u00bb.vc_custom_1475583427639{padding-bottom: 20px !important;}\u00bb]<div id=\"ultimate-heading-791469e3575be47cf\" class=\"uvc-heading ult-adjust-bottom-margin ultimate-heading-791469e3575be47cf uvc-4407 \" data-hspacer=\"no_spacer\"  data-halign=\"left\" style=\"text-align:left\"><div class=\"uvc-heading-spacer no_spacer\" style=\"top\"><\/div><div class=\"uvc-main-heading ult-responsive\"  data-ultimate-target='.uvc-heading.ultimate-heading-791469e3575be47cf h2'  data-responsive-json-new='{\"font-size\":\"desktop:22px;\",\"line-height\":\"desktop:32px;\"}' ><h2 style=\"font-weight:bold;margin-bottom:30px;\">Captura de firmas plataformas m\u00f3viles<\/h2><\/div><\/div>[vc_row_inner][vc_column_inner width=\u00bb2\/3&#8243; css=\u00bb.vc_custom_1475353712646{padding-bottom: 30px !important;}\u00bb][vc_column_text]Componente QML que permite incorporar a tus aplicaciones m\u00f3viles en Velneo la captura de firmas e insertar una marca de agua en el fondo o al frente de la firma.<\/p>\n<p>Se puede cambiar el grosor del trazo, color y fondo de la captura, aunque lo m\u00e1s habitual sea negro sobre fondo blanco puedes cambiar el aspecto de tu captura, adem\u00e1s detecta la velocidad y presi\u00f3n de esta forma el trazo se asemeja a una firma manuscrita.<\/p>\n<p>F\u00e1cil de implementar heredas o copias los componentes en tu caja, creas el objeto si lo deseas asignas par\u00e1metros para color, grosor del trazo y listo.<\/p>\n<p>Admite auto guardado, por lo tanto una vez que firmas\u00a0 el gr\u00e1fico de la firma se guarda de forma autom\u00e1tica, podemos insertar una marca de agua que sea texto o imagen, pudiendo indicar la posici\u00f3n de la misma, centro, esquinas superior o inferior, derecha o izquierda, tambi\u00e9n podemos indicar la transparencia de la imagen que utilizamos para la marca de agua.<\/p>\n<h5>\u00bfC\u00f3mo funciona?<\/h5>\n<p>Solo tienes que heredar el componente en tu aplicaci\u00f3n o copiar las carpetas correspondientes, no utiliza tablas ni variables de ning\u00fan tipo, el proceso guarda las capturas en variables locales del objeto creado, ejemplo:<\/p>\n<div class=\"shortcode-code\">\n<p>Crear manejador de objeto ( signpad, Formulario QML SIGNPAD@SignPad )<br \/>\nDisparar objeto ( signpad, No aplicable, )<br \/>\nLibre<br \/>\nGet variable local de objeto ( signpad, DATA, DATA )<br \/>\nModificar campo ( BASE64, DATA )<br \/>\nImportar dibujo ( FIRMA, sysCacheClientPath +&quot;canvas.png&quot;, )<\/p><\/div>[\/vc_column_text]<div class=\"smile_icon_list_wrap ult_info_list_container ult-adjust-bottom-margin  \"><ul class=\"smile_icon_list left square with_bg\"><li class=\"icon_list_item\" style=\" font-size:72px;\"><div class=\"icon_list_icon\" data-animation=\"\" data-animation-delay=\"03\" style=\"font-size:24px;border-width:1px;border-style:none;background:#ffffff;color:#333333;border-color:#333333;\"><i class=\"Defaults-sliders\" ><\/i><\/div><div class=\"icon_description\" id=\"Info-list-wrap-9351\" style=\"font-size:24px;\"><h3 class=\"ult-responsive info-list-heading\"  data-ultimate-target='#Info-list-wrap-9351 h3'  data-responsive-json-new='{\"font-size\":\"desktop:16px;\",\"line-height\":\"desktop:24px;\"}'  style=\"\">Par\u00e1metros admitidos<\/h3><div class=\"icon_description_text ult-responsive\"  data-ultimate-target='#Info-list-wrap-9351 .icon_description_text'  data-responsive-json-new='{\"font-size\":\"desktop:13px;\",\"line-height\":\"desktop:18px;\"}'  style=\"\"><p><strong>CAPTURETYPE<\/strong> (tipo de captura)<br \/>\n1= captura solo base64<br \/>\n2= solo archivo, se guarda en sysCacheClientPath + canvas.jpg<br \/>\n3= base64 y archivo<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, CAPTURETYPE, 2 )<\/p>\n<p><strong>SHOWCANCELBUTTON<\/strong> (Muestra el bot\u00f3n cancelar en el formulario dela firma )<br \/>\n0= oculto<br \/>\n1= visible<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, SHOWCANCELBUTTON, 0 )<\/p>\n<p><strong>SHOWSAVEBUTTON<\/strong> ( muestra el bot\u00f3n guardar en el formulario de la firma )<br \/>\n0= oculto<br \/>\n1= visible<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, SHOWSAVEBUTTON, 1 )<\/p>\n<p><strong>TITLE<\/strong> ( t\u00edtulo descriptivo captura de la firma )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, TITLE, \u00abFirma en el recuadro de arriba\u00bb )<\/p>\n<p><strong>AUTOSAVE<\/strong> ( guarda de forma desatendida la captura de la firma, el bot\u00f3n save no es necesario )<br \/>\n0= autoguardado deshabilitado<br \/>\n1= autoguardado habilitado<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, AUTOSAVE, 1 )<\/p>\n<p><strong>AWAIT<\/strong> ( tiempo en milisegundos para el autoguardado (1000) se guarda cada segundo )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, AWAIT, 1000 )<\/p>\n<p><strong>CLEAR<\/strong> (\/ limpiar despu\u00e9s de guardar )<br \/>\n0= no se limpia<br \/>\n1= se limpia tablero firma<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, CLEAR, 1 )<\/p>\n<p><strong>SHOWBORDER<\/strong> ( mostrar borde decorativo )<br \/>\n0= oculto<br \/>\n1= visible<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, SHOWBORDER, 1 )<\/p>\n<p><strong>SHOWLINE<\/strong> ( mostrar linea decorativa en la parte de abajo )<br \/>\n0= oculta<br \/>\n1=visible<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, SHOWLINE, 1 )<\/p>\n<p><strong>BORDERCOLOR<\/strong> ( color del borde, debe ser en hexadecimal CSS , #fff )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, BORDERCOLOR, \u00abgrey\u00bb )<\/p>\n<p><strong>BACKGROUNDCOLOR<\/strong> ( color del FONDO, debe ser en hexadecimal CSS , #fff )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, BACKGROUNDCOLOR, \u00ab#fff\u00bb )<\/p>\n<p><strong>PENCOLOR<\/strong> ( color del lapiz, debe ser en hexadecimal CSS , #000 )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, PENCOLOR, \u00ab#000\u00bb )<\/p>\n<p>Caracter\u00edsticas del trazado<br \/>\n<strong>MINWIDTH<\/strong> (largo m\u00ednimo del trazo)<br \/>\n<strong>MAXWIDTH<\/strong>( largo m\u00e1ximo del trazo)<br \/>\n<strong>DOTSIZE<\/strong> (grosor del punto(trazo)<br \/>\n<strong>VELOCITYFILTER<\/strong> (velocidad para cambio entre m\u00ednimo y m\u00e1ximo)<br \/>\nEjemplo:<br \/>\nInterfaz: Set variable local de vista de datos ( SIGNPAD, MINWIDTH, 0.5 )<br \/>\nInterfaz: Set variable local de vista de datos ( SIGNPAD, MAXWIDTH, 2.5 )<br \/>\nInterfaz: Set variable local de vista de datos ( SIGNPAD, DOTSIZE, 3\/2 )<br \/>\nInterfaz: Set variable local de vista de datos ( SIGNPAD, VELOCITYFILTER, 0.7 )<\/p>\n<p>Marca de agua, puede ser un texto una imagen o ambos<\/p>\n<p><strong>WATERMARKIMG<\/strong> (imagen, se debe anteponer file:\/\/\/ )<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, WATERMARKIMG, \u00abfile:\/\/\/\u00bb+ sysCacheClientPath + \u00abLOGO.png\u00bb )<\/p>\n<p><strong>WATERMARKTEXT<\/strong> (texto marca de agua)<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, WATERMARKTEXT, \u00abwww.bitcodesoft.com\u00bb )<\/p>\n<p><strong>POSITION<\/strong> (posici\u00f3n de la marca de agua)<br \/>\ntop-left = esquina izquierda superior<br \/>\ntop-right = esquina derecha superior<br \/>\nbottom-left= esquina izquierda inferior<br \/>\nbottom-right = esquina derecha inferior<br \/>\ncenter = centrado<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, POSITION, \u00abbottom-right\u00bb )<\/p>\n<p><strong>WATERMARKORDER<\/strong> ( Orden Z )<br \/>\nfront = \u00faltima capa, por encima de todo<br \/>\nbackward = la primera capa, por debajo de todo<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, WATERMARKORDER, \u00abfront\u00bb )<\/p>\n<p><strong>WATERMARKALPHA<\/strong> (transparencia)<br \/>\nValor entre 0 y 1, siendo 1 sin transparencia<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, WATERMARKALPHA, 0.40 )<\/p>\n<p><strong>FONTSIZE<\/strong> (tama\u00f1o fuente)<br \/>\nEjemplo: Interfaz: Set variable local de vista de datos ( SIGNPAD, FONTSIZE, 18 )<\/p>\n<\/div><\/div><div class=\"icon_list_connector\"  style=\"border-right-width: 1px;border-right-style: dashed;border-color: #333333;\"><\/div><\/li><\/ul><\/div><div class=\" ubtn-ctn-center \"><a class=\"ubtn-link ult-adjust-bottom-margin ubtn-center ubtn-normal \" href=\"https:\/\/www.bitcodesoft.com\/index.php\/checkout\/?add-to-cart=51480\" ><button type=\"button\" id=\"ubtn-4121\"  class=\"ubtn ult-adjust-bottom-margin ult-responsive ubtn-normal ubtn-no-hover-bg  none  ubtn-center   tooltip-69e3575be49e0\"  data-hover=\"\" data-border-color=\"#2396ff\" data-bg=\"#2979ff\" data-hover-bg=\"\" data-border-hover=\"#2979ff\" data-shadow-hover=\"\" data-shadow-click=\"none\" data-shadow=\"\" data-shd-shadow=\"\"  data-ultimate-target='#ubtn-4121'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"font-weight:normal;border-radius:3px;border-width:1px;border-color:#2396ff;border-style:solid;background: #2979ff;color: #ffffff;\"><span class=\"ubtn-hover\" style=\"background-color:\"><\/span><span class=\"ubtn-data ubtn-text \" >COMPRAR AHORA<\/span><\/button><\/a><\/div>[\/vc_column_inner][vc_column_inner width=\u00bb1\/3&#8243; css=\u00bb.vc_custom_1475353719840{padding-bottom: 30px !important;}\u00bb][vc_column_text css=\u00bb.vc_custom_1494677679224{border-left-width: 3px !important;padding-left: 20px !important;border-left-color: rgba(170,170,170,0.3) !important;border-left-style: solid !important;}\u00bb]<span class=\"color-secondary\">Categor\u00eda:\u00a0<\/span><b>QML<\/b><\/p>\n<p>Plataforma:\u00a0<strong>Multiplataforma, Velneo 7<\/strong>[\/vc_column_text]<div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-8736\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-8736 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Sin objeto HTML, QML 2<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-9698\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-9698 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Colores configurables<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-4037\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-4037 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Color de fondo configurable<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-2883\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-2883 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Compatible con m\u00f3viles soportados<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-9092\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-9092 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Autoguardado<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-1176\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-1176 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">Marca de agua (opcional)<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component --><div class=\"aio-icon-component    style_1\"><div id=\"Info-box-wrap-8093\" class=\"aio-icon-box default-icon\" style=\"\"  ><div class=\"aio-icon-default\"><div class=\"ult-just-icon-wrapper  \"><div class=\"align-icon\" style=\"text-align:center;\">\n<div class=\"aio-icon none \"  style=\"color:rgba(170,170,170,0.15);font-size:18px;display:inline-block;\">\n\t<i class=\"Defaults-circle\"><\/i>\n<\/div><\/div><\/div><\/div><div class=\"aio-icon-header\" ><h3 class=\"aio-icon-title ult-responsive\"  data-ultimate-target='#Info-box-wrap-8093 .aio-icon-title'  data-responsive-json-new='{\"font-size\":\"\",\"line-height\":\"\"}'  style=\"\">C\u00f3digo abierto<\/h3><\/div> <!-- header --><\/div> <!-- aio-icon-box --><\/div> <!-- aio-icon-component -->[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Captura de firmas plataformas m\u00f3viles Componente QML que permite incorporar a tus aplicaciones m\u00f3viles en Velneo la captura de firmas.<\/p>\n","protected":false},"author":1,"featured_media":52251,"comment_status":"closed","ping_status":"closed","template":"","dt_portfolio_category":[133],"dt_portfolio_tags":[],"class_list":["post-50543","dt_portfolio","type-dt_portfolio","status-publish","has-post-thumbnail","hentry","dt_portfolio_category-qml-velneo","dt_portfolio_category-133","description-off"],"_links":{"self":[{"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio\/50543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio"}],"about":[{"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/types\/dt_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/comments?post=50543"}],"version-history":[{"count":10,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio\/50543\/revisions"}],"predecessor-version":[{"id":51519,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio\/50543\/revisions\/51519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/media\/52251"}],"wp:attachment":[{"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/media?parent=50543"}],"wp:term":[{"taxonomy":"dt_portfolio_category","embeddable":true,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio_category?post=50543"},{"taxonomy":"dt_portfolio_tags","embeddable":true,"href":"https:\/\/www.bitcodesoft.com\/index.php\/wp-json\/wp\/v2\/dt_portfolio_tags?post=50543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}