{{indexmenu_n>1}}
====== Type DR =====
\\
El type="DR" (DRaw) es para poder dibujar en pantalla con el dedo, ideal para un campo de tipo FIRMA. Esta es la nueva forma de realizar las firmas en la plataforma XOne, mucho más personalizable que la firma antigua a pantalla completa que se hacía con un type="IMG" combinado con el atributo readonly="false".\\
\\
Para permitir al usuario la opción de firmar desde las propias APPs se declara una propiedad tipo DR de la siguiente forma y se le añaden a esta los atributos necesarios para complementar la funcionalidad:
\\
<WRAP center blue box 90%>
<code javascript>
<prop name="DIBUJO" type="DR" img="xone.png" stroke-width="##FLD_MAP_TAMANO_TRAZO_DESPLEGABLE##" stroke-color="##FLD_MAP_COLOR_TRAZO##" bgcolor="##FLD_MAP_COLOR_FONDO##" apply-format-to-file="true" width="90%" height="90%" zoom-enable="true" max-zoom="3"/>
</code>
</WRAP>

\\

{{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-dr-draw:screenshot_20231103-135544.png?400|}}

\\

**Atributos:**\\

^  Atributo  ^Descripción ^
| **stroke-color="#333333"** | Para indicar el color de la línea que vamos a dibujar. |
| **stroke-width="4"** | Para indicar el tamaño en puntos de la línea que vamos a dibujar. |
| **apply-format-to-file="true"** | Para indicar que la imagen final incluya los estilos de formato que le hemos aplicado. Si éste parámetro se pone a false, el archivo final no tendrá colores y se aplicará el trazo en negro y fondo blanco. |
| **bgcolor="#FFFFFF"** | Color de fondo del control. |
| **img="fondo.jpg"** | Imagen que queremos poner de fondo. |
\\
Para implementar funcionalidades a este tipo de propiedad asociamos botones o iconos conllamadas a funciones:
\\
**Ejemplo de código**:\\
\\
<code javascript>
<prop name="FIRMACLIENTE" type="DR" stroke-width="4" visible="1" stroke-color="#333333" img="FondoFirm.jpg" apply-format-to-file="true" bgcolor="#ffffff" width="95%" height="30%" forecolor="#339999" file-maxwidth="800" file-maxheight="600" newline="true" />

<delfirma show-wait-dialog="false">
	<action name="runscript">
		<script language="VBScript">
			ui.clearDrawing "FIRMACLIENTE" 'Para limpiar el campo del dibujo de la firma en pantalla
			this("FIRMACLIENTE")="" 'Para vaciar el campo que contiene el fichero
		</script>
	</action>
</delfirma>
ui.saveDrawing("FIRMACLIENTE") 'Con este método guardamos el fichero con la firma.
</code>
\\
\\
<code javascript>
function getFileManager() {
    if (!fileManager) {
        fileManager = new FileManager();
    }
    return fileManager;
}

function fileExists(sPath) {
    let fileManager = getFileManager();
    return fileManager.fileExists(sPath) === 0;
}

function toGrayscale() {
    let imageDrawing = new ImageDrawing();
	let sPath = self.MAP_FOTO;
	if (!fileExists(sPath)) {
	    throw "Haga la foto primero";
	}
	let info = imageDrawing.getImageInfo(sPath);
	let nWidth = info.getWidth();
	let nHeight = info.getHeight();
	let sPathResized = "photo_resized.jpg";
	imageDrawing.create(nWidth, nHeight);
	imageDrawing.setBackground(sPath);
	imageDrawing.setGrayscale();
	imageDrawing.save(sPathResized);
	self.MAP_FOTO = sPathResized;
	ui.refresh("MAP_FOTO");
}

function doSave() {
    ui.saveDrawing('MAP_FIRMA', 'firma.png');
}

function doClear() {
    ui.clearDrawing('MAP_FIRMA');
}

function doOpen() {
    ui.openFile('firma.png');
}


</code>