Imprimer une étape

Dans cet article, vous apprendrez :

• Comment imprimer toutes vos données une fois l’application terminée
• Comment concevoir une étape correctement formatée pour l’impression
• Comment prendre en charge l’impression de widgets personnalisés sur une étape

Alors que votre entreprise commence à automatiser les processus papier et à numériser les formulaires dans votre atelier, vous pouvez encore avoir besoin d’imprimer les résultats de différentes opérations afin de partager correctement les données.

Imprimer les étapes d’une application

Si vous souhaitez imprimer des données depuis une application Tulip en temps réel (ou les enregistrer dans un fichier PDF local), vous devez effectuer quatre opérations :

1. Configurer une étape (ou plusieurs étapes) pour qu'elle corresponde au format d'impression souhaité.
2. Concevez une étape qui paraîtra claire et compréhensible une fois imprimée.
3. Ajouter un bouton avec un déclencheur « Imprimer ».
4. Personnalisez les paramètres d'impression afin que l'étape occupe autant d'espace que possible sur la page.

Grâce à l'action « Imprimer les étapes », vous pouvez imprimer soit une seule étape, soit un groupe d'étapes entier en une seule fois. Chaque étape sera imprimée sur une page distincte.

Configurer la résolution des étapes

Pour commencer, de nombreux utilisateurs préfèrent créer un groupe d’étapes intitulé « Rapports » et y ajouter toutes les étapes qu’ils souhaitent imprimer en une seule fois.

Voici à quoi cela ressemble :

Il est ensuite important de configurer correctement les étapes de ce groupe afin qu’elles soient imprimées à la résolution souhaitée. Dans l’application, accédez à l’onglet Étape dans le volet contextuel et sélectionnez Résolution de l’étape.

Dans le volet latéral, sélectionnez la résolution souhaitée en fonction du format de papier souhaité.

Pour les fichiers PDF, le format « Letter » en portrait est souvent le plus adapté. En faisant correspondre le format du papier, vous vous assurez que l’affichage de l’application sera imprimé en pleine page.

Concevoir une étape

Vous utilisez peut-être une mise en page de base dans votre application, avec de nombreuses couleurs unies. Bien que cela fonctionne bien pour communiquer des informations à un opérateur, vous ne souhaitez probablement pas gaspiller de l'encre d'imprimante pour des étapes colorées.

Vous devrez donc supprimer tous les éléments de la mise en page de base des étapes du rapport et vous concentrer plutôt sur le texte.

Voici un exemple d’étape optimisée pour l’impression :

Cette étape comprend 7 données issues de l’application, ainsi que 5 résultats de test. Les boutons « Imprimer » et « Menu », situés en haut à gauche et en bas à droite, ont un fond blanc afin de ne pas nécessiter d’encre colorée.

Elle utilise les fonctionnalités suivantes de Tulip :

• Le widget « Grille » pour créer une mise en page visuelle simple
• Texte variable pour intégrer les valeurs de différentes variables dans l'étape
• Bouton avec coloris personnalisé

Ajout d’un bouton d’impression

Un bouton d’impression nécessite une action de déclenchement. Il est souvent associé à la fin de l’application, mais cela ne peut pas se faire dans le même déclencheur. Vous devez créer un bouton distinct pour déclencher la fin de l’application.

Voici donc un exemple de déclencheur permettant à un opérateur d’imprimer une étape et de passer à l’étape suivant le groupe d’étapes « Rapports », où il pourra terminer l’application :

• « Imprimer les étapes » « Rapports »
• « Aller à l'étape » « Suivante »

Vous pouvez également placer le bouton « Imprimer » sur une étape normale et l'utiliser pour imprimer tout un groupe d'étapes sans même les afficher à l'opérateur.

Cela ouvrira les options d’impression par défaut de l’ordinateur.

Personnaliser les paramètres d’impression

Boîte de dialogue d’impression

Les opérateurs utilisent Tulip Player sur des écrans de toutes tailles. Vous devrez donc effectuer les opérations suivantes sur chaque ordinateur exécutant Tulip Player et nécessitant l’impression ou l’enregistrement d’une étape :

1. Modifier la mise en page pour qu’elle corresponde à la résolution des étapes à imprimer. Ex. : format Lettre, orientation portrait.
2. Enregistrez ces paramètres localement en tant que « préréglage » afin que les opérateurs puissent facilement les sélectionner à l'avenir :

Afin de vérifier que l'application s'imprimera correctement, utilisez l'option « Aperçu » de la boîte de dialogue d'impression pour voir à quoi ressemblera l'application avant de l'imprimer.

Remplir des champs dans un PDF

Vous pouvez également imprimer un PDF « rempli » en intégrant le PDF dans une étape, puis en plaçant des widgets de texte variable par-dessus le PDF aux emplacements appropriés. L’étape s’imprimera telle qu’elle s’affiche dans Tulip Player.

Voici comment procéder :

1. Intégrez un PDF dans une étape dont la taille correspond à la résolution appropriée.
2. Ajoutez des widgets de texte variable par-dessus les champs appropriés du PDF. Ceux-ci seront remplis dynamiquement lorsque l’application sera utilisée dans le Player.
3. Si le PDF comporte plusieurs pages, ajoutez une nouvelle étape dans Tulip pour chaque page du PDF et répétez la procédure ci-dessus.

Enregistrer les données de l’application localement au format PDF

La boîte de dialogue d’impression est également le meilleur moyen d’enregistrer les données de l’application sur un ordinateur local au format PDF. Au lieu de cliquer sur « Imprimer » dans la boîte de dialogue système, sélectionnez « Enregistrer au format PDF » pour enregistrer l’étape et les données en temps réel dans un fichier local.

Remarques techniques

Règles relatives aux contenus d’application qui ne s’affichent pas correctement à l’impression.

• Toute référence à « Étape actuelle » dans un widget de texte « Variable » ne fonctionnera que sur l’étape ouverte au moment où le bouton « Imprimer » est cliqué.
• Les déclencheurs « À l’entrée de l’étape » ne se déclenchent pas sur les étapes imprimées ; vous devez donc vous assurer que les données correctes ont déjà été ajoutées avant d’appuyer sur « Imprimer ».
• Widget « Attribut de la machine » : ceux-ci fonctionnent rarement correctement. Une meilleure approche pour un rapport visant à capturer la dernière sortie connue consiste à utiliser un déclencheur sur la sortie de la machine qui stocke la sortie dans une variable locale, laquelle est ensuite affichée via un widget personnalisé.
• Vidéos : pour les vidéos YouTube, l’image de bannière ne se charge pas.

Impression de widgets personnalisés

Lorsque vous imprimez une étape « Player », chaque widget personnalisé est inclus sous la forme d’un instantané statique de son contenu actuel. Lorsque vous capturez un instantané, les widgets s’impriment de manière fiable, même lorsque le navigateur ne peut pas imprimer directement leur cadre intégré.

Comportement des instantanés de widgets

• L’instantané reflète l’état du widget au moment où l’impression commence, y compris le texte, la mise en page, les couleurs, les valeurs des formulaires, les images et le contenu standard du canevas bidimensionnel qui s’affichent à l’écran.
• Si le même widget personnalisé est placé plusieurs fois dans une étape, chaque instance du widget imprime son propre instantané.
• L’instantané imprimé est statique: le code JavaScript du widget ne s’exécute pas à nouveau pendant l’impression. Toute modification dépendant d’un gestionnaire « beforeprint » ou d’un autre code JavaScript exécuté au moment de l’impression n’apparaîtra pas. Les modifications apportées au widget avant le début de l’impression sont conservées.
• Afin de préserver le caractère statique de la vue d’impression, l’instantané est nettoyé. Les scripts en ligne, les attributs de gestionnaires d’événements en ligne (tels que onclick, onerror et onload) et les URL javascript: sont supprimés. Cela n’affecte pas le texte ordinaire, la mise en page, le style, les images ou les valeurs des champs de formulaire.
• Les feuilles de style propres au widget sont capturées et réappliquées, ce qui permet de préserver sa mise en forme. Le CSS direct, y compris les règles @media print, affecte l’instantané imprimé ; utilisez donc le CSS pour toute modification de présentation que vous souhaitez voir apparaître à l’impression.

Le widget imprimé est rendu de manière isolée : tout comme à l’écran, il n’affecte pas la mise en forme du reste de la page imprimée et n’en hérite pas non plus. L’aperçu avant impression part également d’une base de style vierge ; par conséquent, si votre widget dépend de polices ou de couleurs spécifiques, définissez-les explicitement dans le CSS propre au widget plutôt que de vous fier à une valeur par défaut.

À quoi s’attendre

L’impression vise à reproduire au mieux ce que le widget affiche.

Pour obtenir un résultat aussi prévisible que possible :* Conservez le contenu essentiel à imprimer dans le document principal du widget* Utilisez du CSS direct pour la mise en forme à l’impression* Assurez-vous que les images et données importantes sont visibles avant le début de l’impression* Veillez à ce que les informations essentielles à imprimer ne dépendent pas de* JavaScript, de gestionnaires d’événements intégrés, de cadres vidéo ou WebGL, de pages Web imbriquées ou de styles importés en externe.

Limites

Le widget personnalisé imprimé n’est pas une capture parfaite, et le contenu dépendant de ressources externes ou d’un rendu spécifique au navigateur peut différer.

• Seul le contenu du document principal du widget est capturé: les widgets qui affichent leur interface utilisateur visible via des composants Web, des éléments personnalisés ou le shadow DOM (par exemple, Lit) ne sont pas capturés et s’imprimeront vides, même s’ils s’affichent correctement à l’écran. Les widgets créés à l’aide de bibliothèques courantes (par exemple Chart.js, D3 et jQuery) s’affichent dans le document principal et ne sont pas affectés. Les iframes imbriquées ne sont pas non plus capturées.
• Le CSS directement lisible, y compris les règles @media print, est conservé. Les feuilles de style externes et les règles CSS @import sont prises en charge dans la mesure du possible et peuvent ne pas se charger.
• L'instantané du widget est chargé par la page d'impression du Player et doit respecter sa politique de sécurité:
• Une ressource (par exemple une image, une police, un style, une image d’arrière-plan ou un fichier multimédia) qui se charge à l’intérieur du cadre propre au widget peut donc être bloquée lors de l’impression.
• L’authentification liée au cadre du widget, les règles relatives au contenu mixte, les URL à durée de vie limitée et les URL relatives peuvent également empêcher le chargement d’une ressource.
• Les ressources externes lentes peuvent être absentes: l’impression attend brièvement les ressources, mais cela ne garantit pas que toutes les ressources aient fini de se charger.
• Les canevas bidimensionnels s’impriment lorsque leurs pixels peuvent être capturés: les canevas inter-origines (« tainted ») peuvent être vides, et les canevas WebGL ne sont généralement pas capturés.
• L’image actuelle d’une vidéo n’est pas capturée: la vidéo, l’audio, les pages Web imbriquées, les animations, la sélection de texte, le focus, l’état de survol et la position de défilement ne sont pas garantis.
• Si un instantané actuel ne peut pas être capturé, le widget s’affiche en utilisant son code HTML et CSS initialement configuré au lieu de son état actuel.

Le tableau ci-dessous résume les différences courantes entre les widgets imprimés et leurs causes probables :

Pour en savoir plus

• Comment imprimer toutes les étapes d’une application

{{snippet.Avez-vous trouvé ce que vous cherchiez ?}}