{"id":9483,"date":"2022-12-06T10:49:50","date_gmt":"2022-12-06T09:49:50","guid":{"rendered":"https:\/\/fablab21.fr\/?page_id=3549"},"modified":"2022-12-06T10:49:50","modified_gmt":"2022-12-06T09:49:50","slug":"controler-un-ruban-led-iot-arduino","status":"publish","type":"page","link":"https:\/\/www.association-ore.fr\/fr\/tutos\/tutos-arduino\/controler-un-ruban-led-iot-arduino\/","title":{"rendered":"Contr\u00f4ler un ruban LED – IOT"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Contr\u00f4ler un ruban LED - IOT<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduction<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ce tuto est la suite de celui-ci : https:\/\/fablab21.fr\/tutos\/controler-un-ruban-led-arduino\/<\/a><\/p>

Nous aurons besoin de conna\u00eetre les bases d’Arduino IOT, celles-ci sont expliqu\u00e9es ici : https:\/\/fablab21.fr\/tutos\/les-bases-arduino-iot\/<\/a><\/p>

Pour commencer, nous allons ajouter notre esp8266 \u00e0 la liste des “devices” et le connecter au r\u00e9seau wifi<\/p>

Ensuite nous allons cr\u00e9er un “thing”, que nous associerons \u00e0 notre “device”.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Configuration IOT<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Variables<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Nous aurons besoin de trois variables pour notre “thing”\u00a0 :<\/p>

  • color de type “CloudColor”, pour la couleur choisie<\/li>
  • numLed de type “int”, pour le num\u00e9ro de la LED<\/li>
  • allButton de type “bool”, pour la position du bouton<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Dashboard<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Nous allons cr\u00e9er trois widgets :<\/p>

    • un “Push Button” li\u00e9 \u00e0 allButton<\/li>
    • un “Slider” li\u00e9 \u00e0 numLed, et allant de 1 \u00e0 10 (le num\u00e9ro des LEDs)<\/li>
    • un\u00a0 “Color” li\u00e9 \u00e0 color<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      Code Arduino<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Importons maintenant le code que nous avons fait dans le tuto pr\u00e9c\u00e9dent.<\/p>

      Commen\u00e7ons par les fonctions qui ne subiront aucun changements :<\/p>

      • refresh<\/li>
      • lightUpAll<\/li>
      • onAllButtonChange<\/li>
      • onNumLedChange<\/li><\/ul>

        La structure des fonctions onAllButtonChange et onNumLedChange ont d\u00e9j\u00e0 \u00e9t\u00e9 cr\u00e9es lorsque nous avons ajout\u00e9s un bouton et un curseur au dashboard, il faudra donc seulement importer le contenu des<\/strong> fonctions.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Passons maintenant \u00e0 la fonction lightUp, sa structure reste identique mais son contenu va quelque peu diff\u00e9rer. Plut\u00f4t que d’allumer la LED avec la couleur indiqu\u00e9 au d\u00e9but le code, nous allons r\u00e9cup\u00e9rer la couleur choisie sur la palette. Pour cela nous allons utiliser la quantit\u00e9 de rouge, vert et bleu (RGB) de la couleur. Cependant, la palette utilise un autre syst\u00e8me de couleur (HSB), alors nous allons commencer par convertir la couleur en RGB :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Puis nous allons mettre la couleur correspondant \u00e0 ces valeurs dans le tableau \u00e0 l’aide de la fonction setRGB :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Maintenant occupons-nous du contenu de la fonction onColorChange, nous voulons actualiser les LEDs lorsque la couleur change, alors utilisons simplement la fonction refresh que nous avons d\u00e9j\u00e0 cr\u00e9\u00e9e :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Dans le code du tuto pr\u00e9c\u00e9dent la fonction loop contenait le code pour d\u00e9tecter un changement d’\u00e9tat du bouton ou du potentiom\u00e8tre, hors sur l’IOT ceci est fais automatiquement, nous pouvons donc effacer le contenu de loop (sauf “ArduinoCloud.update();”)\u00a0 :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Dans la fonction setup, on ajoutera l’initialisation de la bande de LEDs :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Enfin nous n’aurons plus besoin de la constante du num\u00e9ro de la broche du bouton, celui-ci \u00e9tant maintenant virtuel.<\/p>

        Egalement, nous n’aurons plus besoin des variables numLed et allButton, celles-ci ayant \u00e9t\u00e9 cr\u00e9\u00e9es dans l’IOT (et sont cod\u00e9es dans “thingProperties.h”).<\/p>

        Attention : Arduino IOT n’utilise pas le GPIO mais directement le num\u00e9ro de la broche, ici on utilisera donc 5 pour la broche 5 et non plus 14.<\/strong><\/p>

        Le d\u00e9but du code ressemble donc \u00e0 ceci :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Et le code complet :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        Contr\u00f4ler un ruban LED – IOT Introduction Ce tuto est la suite de celui-ci : https:\/\/fablab21.fr\/tutos\/controler-un-ruban-led-arduino\/ Nous aurons besoin de conna\u00eetre les bases d’Arduino IOT, celles-ci sont expliqu\u00e9es ici : https:\/\/fablab21.fr\/tutos\/les-bases-arduino-iot\/ Pour commencer, nous allons ajouter notre esp8266 \u00e0 la liste des “devices” et le connecter au r\u00e9seau wifi Ensuite nous allons cr\u00e9er un “thing”,…<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6311,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9483","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/pages\/9483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/comments?post=9483"}],"version-history":[{"count":0,"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/pages\/9483\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/pages\/6311"}],"wp:attachment":[{"href":"https:\/\/www.association-ore.fr\/fr\/wp-json\/wp\/v2\/media?parent=9483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}