Pug (Jade) : préparer des interfaces HTML sur Raspberry Pi avec Geany

Pug est un langage permettant de simplifier l’écriture des pages HTML (page officielle du projet). Les technologies Web sont à la mode actuellement. Hier cantonnées à la création de sites internet, on peut aujourd’hui utiliser les technologies issues du Web pour développer des projets sur ordinateur, mini-PC ARM mais aussi pour l’ESP8266. L’écriture des pages HTML n’est pas toujours très facile car il faut gérer les balises (et respecter l’arborescence au moment de la fermeture). Ca devient vite un vrai casse tête lorsqu’on doit modifier un page et encore plus si on doit le faire après plusieurs semaines ou plusieurs mois, surtout si vous n’êtes pas un professionnel du Web. Dans ce tutoriel, je vous propose donc de découvrir (assez rapidement) le language Pug. Vous trouverez également ce projet sur internet sous le nom de Jade. Jade a du changer de nom à cause d’un problème de droits (étonnant de pouvoir protéger le nom d’une pierre, enfin !!!). Tous les projets nécessitant une interface Web proposés sur Projets DIY seront écrits à l’aide de ce language.

Installation de Pug sur ARM (Raspberry Pi ou Orange Pi)

Pug est un plugin Nodejs. Il faudra donc l’installer sur votre machine avant d’aller plus loin. Il est donc possible de le faire fonctionner sur toutes les plateformes compatibles. Pour ce tutoriel, j’ai utilisé un Orange Pi+ 2e fonctionnant sous Armbian (Ubuntu 16.04 LTS) mais il s’installera sans difficulté sur Raspbian Pixel.

Pour vérifier si Nodejs et npm sont installés sur votre système, exécutez cette commande dans un Terminal.

pug jade html versions nodejs npm raspberry orange pi armbian

Pour installer Node.js, vous pouvez suivre ce tutoriel.

Attention. Inutile de désinstaller Node.js s’il est déjà présent sur votre distribution. D’autres programmes pourraient ne plus fonctionner.

Une fois Node.js et npm installés, il ne reste plus qu’à installer pug et l’outil en ligne de commande pug-cli qui servira à générer les fichiers HTML. Exécutez la commande npm suivante :

Préparation de l’environnement

Pug nécessite donc une compilation avant d’obtenir le fichier HTML. C’est la fonction de l’outil pug-cli qui se charge de convertir le fichier pug en HTML. On peut réaliser cette opération directement depuis le Terminal avec la commande pug. Pour connaître toutes les options de la commande, il suffit d’exécuter  pug --help .

pug liste commandes cli

Pour obtenir un fichier HTML en sortie, on doit donc passer l’option -O avec sous la forme d’un objet JSON le type de document souhaité {"doctype":"html"}  suivi du fichier source. Il faut bien respecter les doubles guillemets.

Plutôt que d’appeler à chaque fois la commande de compilation, on peut automatiser cette tâche. Il est possible d’utiliser un gestionnaire de taches tel que Grunt ou Gulp mais pour débuter ou de petits projets d’interface, c’est un peu trop compliqué. Ce que je vous propose ici, c’est d’utiliser les commandes de construction de Geany présenté dans cet article.

Si vous travaillez avec Sublime Text ou Textmate 2, il existe un plugin qui permet de faire la même chose (pour un prochain article).

Lancez Geany puis allez dans le menu Construire et ouvrez Définir les commandes de construction. Dans le premier champ, ajoutez une commande, pug par exemple. Dans le champ commande saisissez pug -O '{"doctype":"html"}' -P '%f' .

geany commande construction pug vers html

Plusieurs remarques importantes :

  • Le paramètre %f sera remplacé par le nom du fichier au moment de l’appel de la commande.
  • Il est important de mettre %f entre guillemets sinon la commande va planter si le nom du fichier contient un (ou des) espace.
  • Le fichier sera généré à coté du fichier source.
  • Il faut enregistrer le fichier avant de pouvoir exécuter la commande
  • Le fichier doit obligatoirement avoir l’extension pug

Pour appeler la commande, il suffit de faire F8 ou sélectionner le raccourci créé dans le menu Construire.

Découverte du langage Pug (Jade)

Pug a donc pour objectif de simplifier l’écriture des pages HTML, il le fait très bien et bien plus encore. Nous allons découvrir les rudiments de Pug dans cet article, si vous avez des problèmes plus pointus, vous devriez trouver tout ce qu’il vous faut sur le site du projet.

Un exemple pour débuter

Voici un petit exemple rapide pour commencer. On créé une div dans laquelle on place un titre (balise h1) et juste en dessous un liste (ul) composée de 2 puces (li). Fini la gestion des balises

Code PUG (Jade) Code HTML Résultat
div
h1 Demo PUG – Jade
p Texte
ul
li Puce 1
li Puce 2
<div>
<h1>Demo PUG – Jade
<p>Texte</p>
<ul>
<li>Puce 1 </li>
<li>Puce 2</li>
</ul>
</h1>
</div>
pug html exemple

Balises HTML, identifiants, classes et attributs

Toutes les balises HTML sont supportées (une liste complète). Pour ajouter un identifiant (paramètre id), il suffit de faire suivre la balise par #idelement, par exemple p#p1 ce qui donnera

p#p1 <p id=”p1″>Texte</p>

Pour ajouter une classe (un style CSS par exemple qui permet de définir la couleur et la taille d’un texte), on ferra par .nomdelaclasse, ce qui donnera

p#p1.uneclasse <p class=”uneclasse” id=”p1″>Texte</p>

On peut aussi passer tout ça dans des parenthèses. Si le fichier HTML obtenu n’est pas conforme à vos attentes, c’est ce qu’il faut faire. Par contre, on perd un peu de l’intérêt de Pug.

p(id=”p1″ class=”uneclasse”)

ou

p.uneclasse(id=”p1″)

ou

p#p1(class=”uneclasse”)

 <p class=”uneclasse” id=”p1″>Texte</p>

De la même façon, on peut empiler l’id et plusieurs classes

p#p1.class1.class2.class3 Texte <p class=”class1 class2 class3″ id=”p1″>Texte</p>

Le principe reste le même quelque soit l’attribut que l’on souhaite passer.

Du code (script) Javascript, jquery…

Pug gère également très bien l’inclusion de code Javascript (ou jQuery). Pour cela, il suffit d’ajouter la balise script().  comme ceci

script().
// zone de code
$(‘#p1’).click(function(){
console.log(“click”);
});
<script>
// zone de code
$(‘#p1’).click(function(){
console.log(“click”);
});
</script>

Mais on peut aussi écrire du javascript directement dans le code HTML.

Remarque. Il faut bien “coller” le signe = à la balise li pour récupérer la valeur de la variable i dans le libellé.

– var x = 5;
ul
– for (var i=1; i<=x; i++) {
li= i + “. Hello”
– }
<ul>
<li>1. Hello</li>
<li>2. Hello</li>
<li>3. Hello</li>
<li>4. Hello</li>
<li>5. Hello</li>
</ul>

De même, vous pouvez remplir une liste (ou une liste de choix) à partir du contenu d’une variable.

– var liste_gpio = [“GPIO1”, “GPIO2”, “GPIO3”];
div
h1 Liste GPIO
for gpio in liste_gpio
div.card
h3= gpio
<div>
<h1>Liste GPIO
<div class=”card”>
<h2>GPIO1</h2>
</div>
<div class=”card”>
<h2>GPIO2</h2>
</div>
<div class=”card”>
<h2>GPIO3</h2>
</div>
</h1>
</div>

Mettre en commentaire

On peut mettre un bloc entier en commentaire. Attention Pug respecte la hiérarchie et va mettre en commentaire tout le code du niveau inférieur. Comme vous pouvez le constater, le code PUG n’est pas converti en code HTML.

//ul
li Puce 1
li Puce 2
<!–ul
li Puce 1
li Puce 2
–>

Conversion HTML vers PUG ou PUG vers HTML en ligne

Si vous avez une page HTML à reprendre, vous pouvez utiliser un convertisseur. Il en existe plusieurs sur internet. Le plus connu est http://html2jade.org/ fonctionne très bien. On peut choisir le type d’indentation ainsi que la largeur de celle-ci.

jade pug to html converter

Idem dans l’autre sens, Beautify Converter propose un convertisseur en ligne PUG vers HTML. Vous pouvez saisir directement du code ou le charger depuis une URL ou un fichier. Comme vous pouvez le constater, ça ne pose aucun problème de faire appel à des ressources depuis un CDN. Ici, j’ai chargé le framework Bootstrap.

jade to html converter beautify

Exemple sur un cas réel

Pour terminer cet article, je vous propose de voir ce que ça donne sur un cas concret. Dans le tutoriel précédent, nous avons vu comment créer une interface Web pour nos projets ESP8266, nous allons utiliser ce code comme base pour construire un projet ESP8266 à partir de fichiers HTML, CSS et Javascript directement embarquée dans la zone mémoire SPIFFS de l’ESP8266.

Pour mémoire, voici à quoi ressemble l’interface actuelle. Elle est entièrement générée depuis le code Arduino sous la forme d’une chaine de caractère publiée ensuite par le serveur web de l’ESP8266.

demo webserver esp8266 theme bootstrapCDN superhero

Voici le code Pug équivalent

Collez ce code dans un nouveau document sur Geany et enregistrez le. Appuyez ensuite sur F8 pour générer le fichier HTML.

pug compilation html geany

Voici le code HTML compilé. Vous pouvez l’ouvrir dans un navigateur. Toutes les ressources étant récupérées depuis internet, vous obtiendrez le même rendu que sur l’image ci-dessus mais aucune interaction n’est encore possible !

Alors, vous que préférez vous ? Dans le prochain tutoriel, nous verrons comment utiliser ce code pour créer une interface Web et interagir avec le code Arduino.

Inscrivez-vous à la newsletter hebdomadaire

Aucun spam et aucun autre usage ne sera fait de votre email. Vous pouvez vous désinscrire à tout moment.