Imprimir un paso

En este artículo aprenderás:

• Cómo imprimir todos tus datos al finalizar una aplicación
• Cómo diseñar un paso con el formato adecuado para su impresión
• Cómo incluir la impresión de widgets personalizados en un paso

A medida que su empresa comienza a automatizar los procesos en papel y a digitalizar los formularios en su planta de producción, es posible que siga necesitando imprimir los resultados de diferentes operaciones para compartir los datos correctamente.

Imprimir pasos de la aplicación

Si desea imprimir datos de una aplicación de Tulip en tiempo real (o guardarlos en un PDF local), hay cuatro pasos que debe seguir:

1. Configurar un paso (o varios pasos) para que se ajuste al tamaño de impresión deseado.
2. Diseña un paso que resulte claro y comprensible una vez impreso.
3. Añade un botón con un activador «Imprimir».
4. Personaliza los ajustes de impresión para que el tamaño del paso ocupe la mayor parte posible de la página.

Con la acción de activador «Imprimir pasos», puedes imprimir un solo paso o todo un grupo de pasos a la vez. Cada paso se imprimirá en una página independiente.

Configurar la resolución de los pasos

Para empezar, muchos usuarios prefieren crear un grupo de pasos llamado «Informes» y añadir a ese grupo todos los pasos que desean imprimir de una sola vez.

Queda así:

A continuación, es importante configurar adecuadamente los pasos de este grupo para que se impriman con la resolución deseada. En la aplicación, ve a la pestaña «Paso» en el panel contextual y selecciona «Resolución del paso».

En el panel lateral, selecciona la resolución deseada que se ajuste al tamaño de papel que desees.

En el caso de los archivos PDF, suele ser mejor utilizar el formato carta vertical. Al ajustar el tamaño al del papel, se garantiza que la vista de la aplicación se imprima a página completa.

Diseñar un paso

Es posible que estés utilizando un diseño base en tu aplicación con muchos colores sólidos. Aunque esto funciona bien para comunicar información a un operador, probablemente no quieras malgastar tinta de impresora en pasos coloridos.

En su lugar, te interesará eliminar todos los elementos del diseño base de los pasos del informe y centrarte en el texto.

A continuación se muestra un ejemplo de un paso optimizado para la impresión:

Este paso incluye 7 datos de la aplicación, así como 5 resultados de pruebas. Los botones «Imprimir» y «Menú», situados en la esquina superior izquierda y en la inferior derecha, tienen un fondo blanco, por lo que no requieren tinta de color.

Utiliza las siguientes funciones de Tulip:

• El widget «Cuadrícula » para crear un diseño visual sencillo
• Texto variable para insertar los valores de diferentes variables en el paso
• Botón con colores personalizados

Añadir un botón de impresión

Un botón de impresión requiere una acción de activador. A menudo se combina con la finalización de la aplicación, pero esto no puede ocurrir en el mismo activador. Debes crear un botón independiente para activar la finalización de la aplicación.

A continuación, se muestra un ejemplo de un desencadenador que permite al operador imprimir un paso y pasar al paso siguiente del grupo de pasos «Informes», donde podrá completar la aplicación:

• «Imprimir pasos» «Informes»
• «Ir al paso» «Siguiente»

También puedes colocar el botón «Imprimir» en un paso normal y utilizarlo para imprimir un grupo completo de pasos sin siquiera mostrárselos al operador.

Esto abrirá las opciones de impresión predeterminadas del ordenador.

Personalizar la configuración de impresión

Cuadro de diálogo de impresión

Los operadores utilizan el Tulip Player en pantallas de todos los tamaños. Por lo tanto, deberá realizar lo siguiente en cada ordenador que ejecute el Tulip Player y en el que sea necesario imprimir o guardar un paso:

1. Cambia el diseño de página para que se ajuste a la resolución de los pasos que se van a imprimir. Por ejemplo: «Carta» en vertical.
2. Guarda esta configuración localmente como un «ajuste preestablecido» para que los operadores puedan seleccionarla fácilmente en el futuro:

Para comprobar que la aplicación se imprimirá correctamente, debes utilizar la opción «Vista previa» del cuadro de diálogo de impresión para ver cómo quedará la aplicación antes de imprimir.

Rellenar campos en un PDF

También puede imprimir un PDF «relleno» incrustando el PDF en un paso y, a continuación, colocando widgets de texto variable sobre el PDF en los lugares adecuados. El paso se imprimirá tal y como se muestra en Tulip Player.

A continuación se explica cómo hacerlo:

1. Incrusta un PDF en un paso con el tamaño adecuado para la resolución correspondiente.
2. Añade widgets de texto variable sobre los campos correspondientes del PDF. Estos se rellenarán dinámicamente cuando se utilice la aplicación en el Player.
3. Si el PDF tiene varias páginas, añade un nuevo paso en Tulip para cada página del PDF y repite el procedimiento anterior.

Guarda los datos de la aplicación localmente en un PDF

El cuadro de diálogo de impresión es también la mejor forma de guardar los datos de la aplicación en un ordenador local en formato PDF. En lugar de pulsar «Imprimir» en el cuadro de diálogo del sistema, selecciona «Guardar como PDF» para guardar el paso y los datos en tiempo real en un archivo local.

Notas técnicas

Reglas sobre qué contenido de la aplicación no funcionará correctamente al imprimirlo.

• Cualquier referencia al «Paso actual» en un widget de texto «Variable» solo funcionará en el paso que esté abierto cuando se pulse el botón «Imprimir ».
• Los disparadores «Al entrar en el paso » no se activan en ningún paso impreso, por lo que debes asegurarte de que los datos correctos ya estén añadidos antes de pulsar «Imprimir».
• Widget de atributos de la máquina: rara vez funcionarán correctamente. Una mejor forma de proceder para un informe que desee capturar la última salida conocida es disponer de un disparador en la salida de la máquina que almacene la salida en una variable local, que luego se muestre a través de un widget personalizado.
• Vídeos: En el caso de los vídeos de YouTube, la imagen de cabecera no se cargará.

Imprimir widgets personalizados

Al imprimir un paso «Reproductor», cada widget personalizado se incluye como una instantánea estática de su contenido actual. Al capturar una instantánea, los widgets se imprimen correctamente incluso cuando el navegador no puede imprimir directamente su marco incrustado.

Comportamiento de la instantánea del widget

• La instantánea refleja el estado del widget en el momento en que comienza la impresión, incluyendo el texto, el diseño, los colores, los valores de los formularios, las imágenes y el contenido estándar del lienzo bidimensional que aparece en pantalla.
• Si se coloca el mismo widget personalizado más de una vez en un paso, cada ubicación del widget imprime su propia instantánea.
• La instantánea impresa es estática: el JavaScript del widget no se ejecuta de nuevo durante la impresión. No aparecerá ningún cambio que dependa de un controlador «beforeprint» u otro código JavaScript de impresión. Se conservan los cambios realizados en el widget antes de que comience la impresión.
• Para mantener la vista de impresión estática, se depura la instantánea. Se eliminan los scripts en línea, los atributos de controladores de eventos en línea (como onclick, onerror y onload) y las URL javascript:. Esto no afecta al texto normal, al diseño, al estilo, a las imágenes ni a los valores de los formularios.
• Las hojas de estilo propias del widget se capturan y se vuelven a aplicar, por lo que se conserva su estilo. El CSS directo, incluidas las reglas @media print, afecta a la instantánea impresa, por lo que debes utilizar CSS para cualquier cambio de presentación que desees que aparezca en la impresión.

El widget impreso se representa de forma aislada: al igual que en pantalla, no afecta al estilo del resto de la página impresa ni hereda el estilo de esta. La vista de impresión también parte de una base de estilo limpia, por lo que, si tu widget depende de fuentes o colores específicos, configúralos explícitamente en el propio CSS del widget en lugar de dar por hecho que se utilizará el valor predeterminado.

Qué puedes esperar

La impresión tiene como objetivo reproducir lo que muestra el widget lo mejor posible.

Para obtener un resultado más predecible:* Mantén el contenido impreso esencial en el documento principal del widget* Utiliza CSS directo para el estilo de impresión* Asegúrate de que las imágenes y los datos importantes estén visibles antes de que comience la impresión* Asegúrate de que la información impresa esencial no dependa de elementos generados en el momento de la impresión, como* JavaScript, controladores de eventos en línea, fotogramas de vídeo o WebGL, páginas web anidadas o estilos importados externamente.

Limitaciones

El widget personalizado impreso no es una captura perfecta, y el contenido que dependa de recursos externos o de una representación específica del navegador puede diferir.

• Solo se captura el contenido del documento principal del widget: los widgets que representan su interfaz de usuario visible a través de componentes web, elementos personalizados o shadow DOM (por ejemplo, Lit) no se capturan y se imprimirán en blanco, aunque aparezcan correctamente en pantalla. Los widgets creados con las bibliotecas habituales (por ejemplo, Chart.js, D3 y jQuery) se representan en el documento principal y no se ven afectados. Los iframes anidados tampoco se capturan.
• Se conserva el CSS directamente legible, incluidas las reglas @media print. Las hojas de estilo externas y las reglas @import de CSS se cargan según disponibilidad y es posible que no se carguen.
• La instantánea del widget la carga la página de impresión del reproductor y debe cumplir con su política de seguridad:
• Por lo tanto, un recurso (por ejemplo, una imagen, una fuente, un estilo, una imagen de fondo o un archivo multimedia) que se cargue dentro del propio marco del widget puede bloquearse al imprimirlo.
• La autenticación vinculada al marco del widget, las reglas de contenido mixto, las URL con caducidad y las URL relativas también pueden impedir que se cargue un recurso.
• Es posible que falten recursos externos lentos: la impresión espera brevemente a que se carguen los activos, pero no garantiza que todos los recursos hayan terminado de cargarse.
• Los lienzos bidimensionales se imprimen cuando se pueden capturar sus píxeles: los lienzos de origen cruzado (contaminados) pueden aparecer en blanco, y los lienzos WebGL, por lo general, no se capturan.
• No se captura el fotograma actual de un vídeo: no se garantiza que aparezcan el vídeo, el audio, las páginas web anidadas, las animaciones, la selección de texto, el foco, el estado de desplazamiento del cursor ni la posición de desplazamiento.
• Si no se puede capturar una instantánea actual, el widget se imprime utilizando su HTML y CSS configurados inicialmente en lugar de su estado actual.

La tabla siguiente resume las diferencias habituales en los widgets impresos y sus posibles causas:

Más información

• Cómo imprimir todos los pasos de una aplicación

{{snippet.¿Has encontrado lo que buscabas?}}