Personnaliser l’export HTML du plan d’adressage

Depuis la version 2.9 il est possible d’exporter sous un document (xsl, html, etc…) votre plan d’adressage. Je me souviens encore de l’époque où je faisais une photo ou capture de l’écran… Bref, c’est maintenant terminé avec cette nouvelle fonction. Nous allons voir comment exporter et surtout comment personnaliser l’export pour qu’il s’accorde avec les couleurs de votre association, entreprise, etc…

L’export HTML actuel

L’export se fait depuis la fenêtre de patch :

SETUP > Patch & Fixture Shedule
ou SETUP > Patch Only

Une fois sur l’écran de patch, vous pouvez cliquer sur le bouton Export Layer

Si un support amovible est branché, le logiciel demandera de choisir l’endroit où enregistrer.

Puis, vous aurez le choix entre plusieurs formats d’enregistrement.

• Only XML : exporte au format XML, cette méthode permet par exemple d’injecter les données dans un autre logiciel ou un transformateur XSL pour avoir la mise en forme de son choix.
• CSV : Un fichier texte où les données sont séparées par des caractéres. Ce format à l’avantage d’être éditable avec les tableurs (Excel, Open Office, etc…).
• HTML : Une page WEB que l’on peut ouvrir avec un navigateur. On peut par exemple la charger sur un serveur WEB pour l’exposer au monde entier.

C’est ce dernier que nous allons voir… Une idée du rendu :

Comment la console réalise l’export ?

Techniquement il s’agit du XSL (eXtensible Stylesheet Language) qui doit en principe bien parler à un ingénieur ou développeur informatique mais beaucoup moins à un pupitreur. Je pense qu’une courte explication s’impose :

Lors de l’export la console va construire un flux XML en mémoire (qui sera écrit directement dans votre fichier si vous selectionnez “Only Xml”). Une fois ce flux en mémoire elle va déléguer le traitement à un parseur XSL qui va se charger de transformer l’XML en un document (csv, html, pdf, etc…). Une fois le document généré, la console l’écrit sur votre disque de destination (USB, disque dur, etc…).

Créer son propre fichier XSL

Si vous avez bien intégré le dernier paragraphe, vous savez maintenant qu’il nous manque le fichier de transformation XSL. Vous pouvez le retrouver dans ce repertoire : C:\ProgramData\MA Lighting Technologies\grandma\gma2_V_2.9\styles

A la racine on retrouve nos fichiers XSL et dans le repertoire includes les ressources (images, css, mise en forme, etc…).

Pour le cas d’école nous allons simplement remplacer le logo présent dans l’export HTML par un autre. Nous allons copier le fichier fixture+layer+layers@[email protected] en fixture+layer+layers@[email protected] (libre à vous de mettre le nom de votre choix après le dernier @, prendre soin de conserver l’extension .xsl.

Nous allons mettre notre logo dans le repertoire includes : litiom_logo.png.

Si vous avez une certaine aisance en HTML/CSS n’hésitez pas à customiser la feuille de style CSS (pensez à la copier avant pour ne pas écraser celle de GrandMA).

Nous allons maintenant ouvrir notre fichier XSL : fixture+layer+layers@[email protected] avec un éditeur texte classique (Notepad++ par exemple). Vous avez maintenant du code XSL/HTML que vous pouvez personnaliser, nous allons juste changer le logo. A la ligne n°20, nous avons : <img id="imgLogo" src="styles/include/ma_lighting_logo.png" alt="MA Lighting" />

Nous allons remplacer cette ligne par celle-ci : <img id="imgLogo" src="styles/include/litiom_logo.png" alt="LITIOM" />

Lancer un nouvel export

On retourne maintenant sur GrandMA2 pour lancer un nouvel export. On remarque la présence dans la liste de notre nouveau fichier.

On constate notre nouvelle mise en forme en ouvrant le .html dans le repertoire : C:\ProgramData\MA Lighting Technologies\grandma\gma2_V_2.9\fixture_layers

Pour aller plus loin…

Il est evidement possible de customiser l’export CSV. Vous pouvez aussi imaginer déposer votre fichier .html avec votre mise en forme sur serveur WEB pour le partager avec les personnes qui seront en charge d’adresser vos machines.

Quelques liens utiles :

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

http://www.commentcamarche.net/contents/1337-mise-en-page-de-xml-avec-xsl