Pug (ancien Jade) 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.

Sommaire

0.1 Installer l’extension htmlPugConvertor sur VSCode (Visual Studio Code)

1 A demo of the Pug language
- 1.1 Installer Pug sur ARM (Raspberry Pi ou Orange Pi)
  - 1.1.1 Configurer l’environnement et l’éditeur de code Geany
- 1.2 Découverte du langage Pug (ancien Jade)
  - 1.2.1 Un exemple pour débuter
2 Demo PUG – Jade
3 Demo Webserver ESP8266 + Bootstrap
- - 3.0.1 Mini station météo
  - 3.0.2 GPIO

Installer l’extension htmlPugConvertor sur VSCode (Visual Studio Code)

VSCode est un éditeur de code gratuit développé apr Microsoft disponible sur Windows, macOS et Linux.

Ouvrez le gestionnaire d’extension et cherchez l’extension htmlPugConvertor développée par waynehong. Cette extension est basée sur les convertisseurs html2pug et pug.

Lancer l’installation

L’extension permet

pug2html de convertir le code Pug en HTML
html2pug de convertir le code HTML en code Pug !

La conversion du Pug ou HTML se fait en sélectionnant au préalable le code puis en convoquant la palette de VSCode (CMD + Shift + P) puis pug

Voici un exemple de conversion réalisée avec l’extension htmlPugConvertor

Code Pug

Code HTML après conversion

title htmlPugConvertor Demo h1 A demo of the Pug language

htmlPugConvertor Demo

A demo of the Pug language

Installer Pug sur ARM (Raspberry Pi ou Orange Pi)

Raspberry Pi OS (nouveau nom de Raspbian) est livré avec l’éditeur de code Geany qui permet d’appeler des commandes externes à l’aide d’une touche de fonction.

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 vérifier si Nodejs et npm sont installés sur votre système, exécutez cette commande dans un Terminal.

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

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 :

sudo npm install -g pug pug-cli

Configurer l’environnement et l’éditeur de code Geany

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 .

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é. Il est beaucoup plus facile d’utiliser les commandes de construction de Geany présentées dans cet article qui peuvent être convoquées via les touches de fonction.

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

Lancez Geany puis ouvrez 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’ .

Valider

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 (ancien 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

Demo PUG – Jade

Texte

Puce 1
Puce 2

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

Texte

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

Texte

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”)

Texte

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

p#p1.class1.class2.class3 Texte

Texte

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”);

});

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

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

– var x = 5; ul – for (var i=1; i

Comment convertir du code 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.

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.

Un exemple concret

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.

Voici le code Pug équivalent

html(charset='UTF-8')
  head
    meta(http-equiv='refresh', content='60', name='viewport')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
    link(href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css', rel='stylesheet')
    title ESP8266 Demo - www.projetsdiy.fr
  body
    .container-fluid
      .row
        .col-md-12
          h1 Demo Webserver ESP8266 + Bootstrap
          h3 Mini station météo
          ul.nav.nav-pills
            li.active
              a(href='#')
                span.badge.pull-right 24.20
                |  Température
            li
              a(href='#')
                span.badge.pull-right 38.00
                |  Humidité
            li
              a(href='#')
                span.badge.pull-right 971.68
                |  Pression atmosphérique
          table.table
            thead
              tr
                th Capteur
                th Mesure
                th Valeur
                th Valeur précédente
            tbody
              tr
                td DHT22
                td Température
                td 24.20°C
                td -
              tr.active
                td DHT22
                td Humidité
                td 38.00%
                td -
              tr
                td BMP180
                td Pression atmosphérique
                td 971.68mbar
                td -
          h3 GPIO
          .row
            .col-md-4
              h4.text-left
                | D5 
                span.badge OFF
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-success.btn-lg(type='button submit', name='D5', value='1') ON
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-danger.btn-lg(type='button submit', name='D5', value='0') OFF
            .col-md-4
              h4.text-left
                | D6 
                span.badge OFF
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-success.btn-lg(type='button submit', name='D6', value='1') ON
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-danger.btn-lg(type='button submit', name='D6', value='0') OFF
            .col-md-4
              h4.text-left
                | D7 
                span.badge OFF
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-success.btn-lg(type='button submit', name='D7', value='1') ON
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-danger.btn-lg(type='button submit', name='D7', value='0') OFF
            .col-md-4
              h4.text-left
                | D8 
                span.badge OFF
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-success.btn-lg(type='button submit', name='D8', value='1') ON
            .col-md-4
              form(action='/', method='POST')
                button.btn.btn-danger.btn-lg(type='button submit', name='D8', value='0') OFF
          .row
            .col-md-4
              form#selecttheme(method='POST', name='selecttheme')
                input#choixtheme.span(name='theme', type='hidden')
                .btn-group
                  button.btn.btn-default Theme : superhero
                  button.btn.btn-default.dropdown-toggle(data-toggle='dropdown')
                    span.caret
                  ul.dropdown-menu
                    li(onclick='$("#choixtheme").val("bootstrap"); $("#selecttheme").submit()')
                      a(href='#') Boostrap
                    li(onclick='$("#choixtheme").val("cerulean"); $("#selecttheme").submit()')
                      a(href='#') Cerulean
                    li(onclick='$("#choixtheme").val("cosmo"); $("#selecttheme").submit()')
                      a(href='#') Cosmo
                    li(onclick='$("#choixtheme").val("cyborg"); $("#selecttheme").submit()')
                      a(href='#') Cyborg
                    li(onclick='$("#choixtheme").val("darkly"); $("#selecttheme").submit()')
                      a(href='#') Darkly
                    li(onclick='$("#choixtheme").val("flatly"); $("#selecttheme").submit()')
                      a(href='#') Flatly
                    li(onclick='$("#choixtheme").val("journal"); $("#selecttheme").submit()')
                      a(href='#') Journal
                    li(onclick='$("#choixtheme").val("lumen"); $("#selecttheme").submit()')
                      a(href='#') Lumen
                    li(onclick='$("#choixtheme").val("paper"); $("#selecttheme").submit()')
                      a(href='#') Paper
                    li(onclick='$("#choixtheme").val("readable"); $("#selecttheme").submit()')
                      a(href='#') Readable
                    li(onclick='$("#choixtheme").val("sandstone"); $("#selecttheme").submit()')
                      a(href='#') Sandstone
                    li(onclick='$("#choixtheme").val("simplex"); $("#selecttheme").submit()')
                      a(href='#') Simplex
                    li(onclick='$("#choixtheme").val("slate"); $("#selecttheme").submit()')
                      a(href='#') Slate
                    li(onclick='$("#choixtheme").val("spacelab"); $("#selecttheme").submit()')
                      a(href='#') Spacelab
                    li(onclick='$("#choixtheme").val("superhero"); $("#selecttheme").submit()')
                      a(href='#') Superhero
                    li(onclick='$("#choixtheme").val("united"); $("#selecttheme").submit()')
                      a(href='#') United
                    li(onclick='$("#choixtheme").val("yeti"); $("#selecttheme").submit()')
                      a(href='#') Yeti
            .col-md-8
              p
                a(href='http://www.projetsdiy.fr') Version francaise : www.projetsdiy.fr
              p
                a(href='http://www.diyprojects.io') English version : www.diyprojects.io

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

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 !



  
    
    
    
    
    ESP8266 Demo - www.projetsdiy.fr

`Demo Webserver ESP8266 + Bootstrap`

`Mini station météo`

Capteur	Mesure	Valeur	Valeur précédente
DHT22	Température	24.20°C	–
DHT22	Humidité	38.00%	–
BMP180	Pression atmosphérique	971.68mbar	–

`GPIO`

`D5 OFF`

ON OFF

`D6 OFF`

ON OFF

`D7 OFF`

ON OFF

`D8 OFF`

ON OFF Theme : superhero

Version francaise : www.projetsdiy.fr

English version : www.diyprojects.io

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.

Avez-vous aimé cet article ?

MaMaquette

Découverte du langage Pug (Jade) pour développer des interfaces HTML avec VSCode ou Geany • Domotique et objets connectés à faire soi-même

Installer l’extension htmlPugConvertor sur VSCode (Visual Studio Code)

A demo of the Pug language

Installer Pug sur ARM (Raspberry Pi ou Orange Pi)

Configurer l’environnement et l’éditeur de code Geany

Découverte du langage Pug (ancien Jade)

Un exemple pour débuter

Demo PUG – Jade

Balises HTML, identifiants, classes et attributs

Du code (script) Javascript, jquery…

Comment convertir du code HTML vers PUG ou PUG vers HTML en ligne

Un exemple concret

`Demo Webserver ESP8266 + Bootstrap`

`Mini station météo`

`GPIO`

`D5 OFF`

`D6 OFF`

`D7 OFF`

`D8 OFF`

Ceci peut aussi vous intéresser...

Découverte du langage Pug (Jade) pour développer des interfaces HTML avec VSCode ou Geany • Domotique et objets connectés à faire soi-même

Installer l’extension htmlPugConvertor sur VSCode (Visual Studio Code)

A demo of the Pug language

Installer Pug sur ARM (Raspberry Pi ou Orange Pi)

Configurer l’environnement et l’éditeur de code Geany

Découverte du langage Pug (ancien Jade)

Un exemple pour débuter

Demo PUG – Jade

Balises HTML, identifiants, classes et attributs

Du code (script) Javascript, jquery…

Comment convertir du code HTML vers PUG ou PUG vers HTML en ligne

Un exemple concret

Demo Webserver ESP8266 + Bootstrap

Mini station météo

GPIO

D5 OFF

D6 OFF

D7 OFF

D8 OFF

`Demo Webserver ESP8266 + Bootstrap`

`Mini station météo`

`GPIO`

`D5 OFF`

`D6 OFF`

`D7 OFF`

`D8 OFF`