Débuter
S'équiper
Matériel recommandé

Vous voulez participer au financement du blog. C’est simple, suivez les liens commerciaux pour faire vos achats. Quelques pourcents qui font toute la différence. Merci à vous !

Kit raspberry pi 4 8GB
Kit Raspberry Pi 4 - 8GB
kit raspberry pi 4
Kit Raspberry Pi 4 - 4GB
raspberry pi 4 2019
Raspberry Pi 4 - 4GB
Cartes micro-SD SDHC v90
Kit Retrogaming Nespi
Kit Retrogaming

Découverte du langage Pug (Jade) pour développer des interfaces HTML avec VSCode ou Geany

jade pug html geany arm raspberry pi orange pi armbian esp8266
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

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.

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

INstaller extension VSCode htmlpugconverter

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

Convertisseur pug vers html et inverse

Je vous conseille de copier le code à convertir dans un nouveau fichier afin de toujours conserver le code original pour les évolutions futures.

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

Code Pug Code HTML après conversion
head
  meta(name=’viewport’)
  title htmlPugConvertor Demo
.container-fluid
  h1 A demo of the Pug language
<head>
  <metaname=”viewport”/>
  <title>htmlPugConvertor Demo</title>
</head>
<div class=”container-fluid”>
  <h1>A demo of the Pug language</h1>
</div>

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.

pug jade html versions nodejs npm raspberry orange pi armbian

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 .

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é. 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

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

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.

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

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.

A LIRE AUSSI :
HealthyPi, extension Raspberry Pi 3 pour télé-médecine de signes vitaux (ECG/Respiration, oxymètre de pouls, température)

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

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='https://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.

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 !

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

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 ?
[Total: 1 Moyenne: 4]
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous rencontrez un problème avec ce sujet ?

Peut-être que quelqu’un a déjà trouvé la solution, visitez le forum avant de poser votre question

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

Nous serions ravis de connaître votre avis

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Domotique et objets connectés à faire soi-même
Vous avez aimé ce tutoriel

Ne manquez plus les prochains projets

Recevez chaque semaine le récapitulatif des tutoriels et projets.

Vous pouvez vous désabonner à tout moment.