PARTIE 1 — INTRODUCTION : Pourquoi ce projet est magique ?

Objectif : Découvrir l’architecture globale (Arduino + MQTT + Web) et son utilité.

Ce que tu vas apprendre

Tu vas découvrir comment faire discuter ton Arduino avec une page web, comme si tu envoyais des SMS à tes LEDs ! On va utiliser RabbitMQ (un "standardiste" qui transmet les messages) pour que ton téléphone puisse :

• Allumer une LED à distance.
• Lire la valeur d’un potentiomètre en temps réel.

Pourquoi c’est utile (et amusant)

Imagine :

• Allumer la lumière de ta chambre depuis ton canapé, juste avec ton téléphone.
• Voir en direct le niveau d’humidité de tes plantes sur ton écran.
• Piloter un robot ou une station météo depuis l’autre bout de la maison.

Avec ce projet, tu poses les bases de la domotique sans te prendre la tête. Et le meilleur ? Tu peux tout adapter à tes idées !

Le plan du projet

Voici comment on va s’y prendre, étape par étape :

1⃣ Prépare ton matériel : LEDs, potentiomètre, et ton Arduino R4 WiFi (ton "chef d’orchestre").

2⃣ Installe RabbitMQ (le "standardiste") dans Docker, comme une appli sur ton ordi.

3⃣ Configure MAMP (un serveur web tout simple) pour afficher une jolie page de contrôle sur ton téléphone.

4⃣ Code l’Arduino pour qu’il écoute les ordres (ex : "Allume la LED 13 !") et renvoie des infos (ex : "Le potentiomètre est à 36%").

5⃣ Teste tout : tu cliques sur ton téléphone, et pouf ! La LED s’allume. Magique, non ?

À la fin, tu auras une interface web qui ressemble à un tableau de bord de vaisseau spatial… mais en version Arduino !

PARTIE 2 — PRÉPARE TON MATÉRIEL COMME UN PRO

Objectif : Vérifier et organiser les composants avant de commencer.

Liste de courses

Avant de commencer, vérifie :

• Tu as tous les composants : Sors-les de leur emballage et pose-les devant toi comme un chef étoilé prépare ses ingrédients.
• Ton Arduino est reconnu par ton PC :
  • Branche-le en USB et ouvre l’IDE Arduino.
  • Va dans Outils > Port et sélectionne le port COM correspondant (ex: COM3 ou /dev/ttyACM0).
  • Pas de port ? Suis ce tutoriel d’installation.
• Tu as 30 minutes devant toi sans interruption : Éteins les notifications, c’est l’heure de coder !

Astuces de pro

• Range tes composants dans des boîtes à compartiments (comme celles pour les vis) pour ne plus jamais perdre une résistance.
• Prends une photo de ton montage avant de débrancher : ça sauve des vies quand tu veux le refaire plus tard !

PARTIE 3 — LE SCHÉMA DE CÂBLAGE : TON PLAN DE BATAILLE

Objectif : Brancher correctement LEDs et potentiomètre sur l’Arduino.

Vue d'ensemble

On va brancher 2 LEDs et un potentiomètre à ton Arduino R4 WiFi, comme si tu connectais des enceintes à une chaîne hi-fi. L’ordre est important :

1. D’abord les LEDs (pour vérifier que le courant passe).
2. Puis le potentiomètre (pour lire des valeurs analogiques).

Tableau des connexions

Note :

• Les résistances (220Ω) sont obligatoires pour les LEDs : sans elles, le courant serait trop fort et grillerait la LED (comme un tuyau d’arrosage sous trop de pression).
• Le potentiomètre se branche comme un robinet : la broche du milieu est la sortie (comme le bec du robinet), et les deux autres sont l’entrée (5V) et la sortie (GND).

Les 3 erreurs à ne JAMAIS faire

1. Inverser les pattes de la LED → Risque : La LED ne s’allumera pas (comme une pile branchée à l’envers dans une lampe).
   • Astuce : La patte longue (+) va toujours vers la broche Arduino, la courte (-) vers la résistance et la masse.
2. Oublier la résistance pour les LEDs → Risque : La LED va griller en quelques secondes (comme une ampoule sans variateur de lumière).
   • Astuce : Une résistance de 220Ω est idéale pour les LEDs classiques (rouge, verte, jaune).
3. Brancher le potentiomètre à l’envers → Risque : La valeur lue sera toujours à 0 ou 1023 (comme un robinet qui ne laisse passer que de l’eau froide ou chaude).
   • Astuce : La broche du milieu (A0) doit toujours être connectée à la sortie du potentiomètre.

PARTIE 4 — MQTT & WEBSOCKET : LES SUPER-POUVOIRS DE LA COMMUNICATION

Objectif : Comprendre comment Arduino parle au web (broker, topics, messages).

L'analogie pour tout comprendre

Imagine ton Arduino comme un chef d’orchestre qui dirige une petite troupe de musiciens :

• Les LEDs sont des percussionnistes : elles ne savent faire que deux choses, jouer (allumées) ou se taire (éteintes).
• Le potentiomètre est un violoniste : il peut jouer toutes les notes entre 0 et 100% (comme un volume de musique).
• RabbitMQ est le chef d’orchestre adjoint : il transmet les ordres du public (ton téléphone) aux musiciens (Arduino) et vice versa.

Quand tu cliques sur un bouton dans ton navigateur :

1. Ton téléphone envoie un message "Allume la LED 13 !" à RabbitMQ.
2. RabbitMQ le transmet à l’Arduino.
3. L’Arduino exécute l’ordre et répond "C’est fait !".
4. RabbitMQ renvoie la confirmation à ton téléphone.

Comment ça marche techniquement

Étape 1 : Connexion au broker

• L’Arduino se connecte à RabbitMQ (le "standardiste") via WiFi, comme tu te connectes à ta box internet.

Étape 2 : Abonnement aux topics

• L’Arduino s’abonne à des "topics" (comme des chaînes de discussion) :
  • arduino/led13 pour recevoir les ordres de la LED 13.
  • arduino/pot pour envoyer la valeur du potentiomètre.

Étape 3 : Envoi/réception des messages

• Quand tu cliques sur un bouton dans ton navigateur, un message est envoyé au topic arduino/led13.
• L’Arduino reçoit le message, allume la LED, et envoie une confirmation au topic arduino/feedback.

À retenir

"MQTT, c’est comme des SMS pour objets connectés : léger, rapide, et sans fil."

Exemple concret : Une station météo qui envoie la température toutes les 5 minutes à ton téléphone.

PARTIE 5 — CODE PARTIE 1 : CONFIGURATION DE L'ARDUINO

Objectif : Configurer les broches, le WiFi et MQTT.

Ce que fait cette partie du code

Ici, on configure l’Arduino comme un chef d’orchestre qui se présente à son public :

• On déclare les broches (où brancher les LEDs et le potentiomètre).
• On initialise les variables (comme des post-it pour se souvenir de l’état des LEDs).
• On prépare la connexion WiFi et MQTT (pour que l’Arduino puisse discuter avec ton téléphone).

Code commenté ligne par ligne

// ---- Inclusion des bibliothèques ----
#include <WiFiS3.h>     // Pour gérer le WiFi de l'Arduino R4
#include <MQTT.h>       // Pour communiquer en MQTT (comme des SMS)
#include "secrets.h"    // Fichier externe qui contient tes identifiants WiFi (SSID + mot de passe)

// ---- Configuration IP fixe ----
// Comme une adresse postale pour ton Arduino sur le réseau
IPAddress localIP(192, 168, 1, 165);  // Adresse IP de l'Arduino (modifiable si conflit)
IPAddress gateway(192, 168, 1, 1);    // Adresse de ta box (généralement 192.168.1.1)
IPAddress subnet(255, 255, 255, 0);   // Masque de sous-réseau (ne change pas)
IPAddress dns(8, 8, 8, 8);            // DNS de Google (pour résoudre les noms de domaine)

// ---- Initialisation des clients ----
WiFiClient net;          // Client WiFi (comme un câble réseau virtuel)
MQTTClient client;       // Client MQTT (pour envoyer/recevoir des messages)

// ---- Déclaration des broches ----
const int ledPin13 = 13; // Broche pour la LED 13 (celle intégrée à l'Arduino R4)
const int ledPin12 = 12; // Broche pour la LED 12 (externe)
const int potPin = A0;   // Broche analogique pour le potentiomètre (A0 = entrée analogique)

// ---- Variables d'état ----
bool ledState13 = false; // État de la LED 13 (false = éteinte, true = allumée)
bool ledState12 = false; // État de la LED 12
unsigned long lastPublishTime = 0; // Dernier moment où on a envoyé des données
const long publishInterval = 1000; // Délai entre chaque envoi (1000 ms = 1 seconde)

// ---- Fonction pour se connecter au WiFi ----
void connectWiFi() {
  Serial.print("Connexion au WiFi..."); // Message dans le moniteur série

  // On configure l'IP fixe (comme une adresse postale fixe)
  WiFi.config(localIP, dns, gateway, subnet);

  // On se connecte avec les identifiants du fichier "secrets.h"
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  // Tant qu'on n'est pas connecté, on attend et on affiche des points
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(1000); // On attend 1 seconde avant de réessayer
  }

  Serial.println("\nConnecté au WiFi !"); // Message de confirmation
  Serial.print("Adresse IP : ");
  Serial.println(WiFi.localIP()); // Affiche l'IP de l'Arduino
}

// ---- Fonction pour se connecter à MQTT ----
void connectMQTT() {
  Serial.print("Connexion à MQTT...");

  // On se connecte au broker MQTT (RabbitMQ)
  client.begin("192.168.1.XX", net); // Remplace XX par l'IP de ton ordinateur
  client.onMessage(messageReceived); // Fonction appelée quand un message arrive

  // Tant qu'on n'est pas connecté, on attend
  while (!client.connect("arduinoClient", "user", "password")) { // Remplace user/password
    Serial.print(".");
    delay(1000);
  }

  Serial.println("\nConnecté au MQTT !");

  // On s'abonne aux topics pour recevoir les ordres
  client.subscribe("arduino/led13");
  client.subscribe("arduino/led12");
}

// ---- Fonction appelée quand un message MQTT arrive ----
void messageReceived(String &topic, String &payload) {
  Serial.print("Message reçu sur topic : ");
  Serial.println(topic);
  Serial.print("Contenu : ");
  Serial.println(payload);

  // Si le message est pour la LED 13
  if (topic == "arduino/led13") {
    if (payload == "on") {
      digitalWrite(ledPin13, HIGH); // Allume la LED
      ledState13 = true;
    } else if (payload == "off") {
      digitalWrite(ledPin13, LOW); // Éteint la LED
      ledState13 = false;
    }
  }

  // Si le message est pour la LED 12
  if (topic == "arduino/led12") {
    if (payload == "on") {
      digitalWrite(ledPin12, HIGH);
      ledState12 = true;
    } else if (payload == "off") {
      digitalWrite(ledPin12, LOW);
      ledState12 = false;
    }
  }
}

// ---- Configuration initiale (setup) ----
void setup() {
  Serial.begin(115200); // Initialise la communication série
  pinMode(ledPin13, OUTPUT); // Configure la broche 13 en sortie
  pinMode(ledPin12, OUTPUT); // Configure la broche 12 en sortie

  connectWiFi(); // Se connecte au WiFi
  connectMQTT(); // Se connecte à MQTT
}

// ---- Boucle principale (loop) ----
void loop() {
  client.loop(); // Garde la connexion MQTT active

  // Envoie les données toutes les X secondes
  if (millis() - lastPublishTime > publishInterval) {
    lastPublishTime = millis();

    // Lit la valeur du potentiomètre (0-1023)
    int potValue = analogRead(potPin);
    // Convertit en pourcentage (0-100%)
    int potPercentage = map(potValue, 0, 1023, 0, 100);

    // Envoie la valeur du potentiomètre au topic "arduino/pot"
    client.publish("arduino/pot", String(potPercentage));

    // Envoie l'état des LEDs
    client.publish("arduino/led13/state", ledState13 ? "on" : "off");
    client.publish("arduino/led12/state", ledState12 ? "on" : "off");
  }
}

Exercice rapide

Mission : Modifie la variable publishInterval à la ligne 25 et passe de 1000 à 5000.

• Valeur initiale : 1000 ms (1 seconde).
• Valeur modifiée : 5000 ms (5 secondes).

Résultat attendu :

• Les données du potentiomètre seront envoyées toutes les 5 secondes au lieu de 1 seconde.
• Pourquoi ? Pour réduire la fréquence d’envoi et économiser de la bande passante.

PARTIE 6 — CODE PARTIE 2 : INTERFACE WEB EN HTML/JS

Objectif : Créer une page web pour contrôler l’Arduino.

Ce que fait cette partie du code

Ici, on crée une interface web qui envoie des ordres à l’Arduino via MQTT :

• Des boutons pour allumer/éteindre les LEDs.
• Une jauge pour afficher la valeur du potentiomètre en temps réel.
• Une connexion MQTT pour communiquer avec l’Arduino.

Code commenté ligne par ligne

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contrôle Arduino depuis ton téléphone</title>
    <style>
        /* ---- Styles CSS ---- */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            border-radius: 8px;
        }
        .button.off {
            background-color: #f44336;
        }
        #potValue {
            font-size: 24px;
            margin: 20px;
        }
        #connectionStatus {
            padding: 10px;
            border-radius: 5px;
            margin: 10px;
        }
        .connected {
            background-color: #4CAF50;
            color: white;
        }
        .disconnected {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Contrôle ton Arduino depuis ton téléphone</h1>

    <!-- Boutons pour les LEDs -->
    <button id="toggleButton13" class="button">Allumer LED 13</button>
    <button id="toggleButton12" class="button">Allumer LED 12</button>

    <!-- Jauge pour le potentiomètre -->
    <div id="potValue">Potentiomètre : 0%</div>
    <progress id="potProgress" value="0" max="100" style="width: 80%; height: 30px;"></progress>

    <!-- Statut de la connexion -->
    <div id="connectionStatus" class="disconnected">Déconnecté</div>

    <!-- Bibliothèque MQTT -->
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <script>
        // ---- Configuration MQTT ----
        const mqttConfig = {
            host: '192.168.1.XX', // Remplace XX par l'IP de ton ordinateur
            port: 1983, // Port WebSocket de RabbitMQ
            username: 'user', // Remplace par ton username MQTT
            password: 'password' // Remplace par ton password MQTT
        };

        // ---- Connexion au broker MQTT ----
        const client = mqtt.connect(`ws://${mqttConfig.host}:${mqttConfig.port}`, {
            username: mqttConfig.username,
            password: mqttConfig.password
        });

        // ---- Éléments du DOM ----
        const toggleButton13 = document.getElementById('toggleButton13');
        const toggleButton12 = document.getElementById('toggleButton12');
        const potValue = document.getElementById('potValue');
        const potProgress = document.getElementById('potProgress');
        const connectionStatus = document.getElementById('connectionStatus');

        // ---- Mise à jour du statut de connexion ----
        function updateConnectionStatus(status, message) {
            connectionStatus.textContent = message;
            connectionStatus.className = status;
        }

        // ---- Connexion MQTT ----
        client.on('connect', () => {
            updateConnectionStatus('connected', 'Connecté au broker MQTT !');
            console.log('Connecté au broker MQTT');

            // On s'abonne aux topics pour recevoir les mises à jour
            client.subscribe('arduino/pot');
            client.subscribe('arduino/led13/state');
            client.subscribe('arduino/led12/state');
        });

        // ---- Réception des messages MQTT ----
        client.on('message', (topic, message) => {
            console.log(`Message reçu sur ${topic}: ${message}`);

            // Met à jour la jauge du potentiomètre
            if (topic === 'arduino/pot') {
                const value = parseInt(message.toString());
                potValue.textContent = `Potentiomètre : ${value}%`;
                potProgress.value = value;
            }

            // Met à jour l'état des LEDs
            if (topic === 'arduino/led13/state') {
                toggleButton13.textContent = message.toString() === 'on' ? 'Éteindre LED 13' : 'Allumer LED 13';
                toggleButton13.className = message.toString() === 'on' ? 'button off' : 'button';
            }

            if (topic === 'arduino/led12/state') {
                toggleButton12.textContent = message.toString() === 'on' ? 'Éteindre LED 12' : 'Allumer LED 12';
                toggleButton12.className = message.toString() === 'on' ? 'button off' : 'button';
            }
        });

        // ---- Envoi d'une commande MQTT ----
        function toggleLed(ledNumber) {
            if (client.connected) {
                const topic = `arduino/led${ledNumber}`;
                const currentState = document.getElementById(`toggleButton${ledNumber}`).textContent;
                const newState = currentState.includes('Allumer') ? 'on' : 'off';

                client.publish(topic, newState);
                console.log(`Commande envoyée : ${topic} ${newState}`);
            } else {
                updateConnectionStatus('disconnected', 'Impossible d\'envoyer la commande: non connecté');
            }
        }

        // ---- Événements des boutons ----
        toggleButton13.addEventListener('click', () => toggleLed(13));
        toggleButton12.addEventListener('click', () => toggleLed(12));
    </script>
</body>
</html>

Exercice rapide

Mission : Change le délai de rafraîchissement de la jauge en modifiant la fréquence d’envoi des données dans le code Arduino (Partie 5).

• Valeur initiale : 1000 ms (1 seconde).
• Valeur modifiée : 200 ms (0,2 seconde).

Résultat attendu :

• La jauge du potentiomètre se mettra à jour 5 fois plus vite.
• Pourquoi ça marche ? Parce que l’Arduino envoie les données plus fréquemment, donc l’interface web les reçoit plus souvent.

PARTIE 7 — TEST : VÉRIFIE QUE TOUT FONCTIONNE

Objectif : Tester le projet et valider son fonctionnement.

Mise sous tension

1. Branche ton Arduino au port USB de ton ordinateur.
   • Vérifie : La LED orange "ON" doit s’allumer sur l’Arduino.
2. Ouvre l’IDE Arduino et sélectionne le bon port COM.
3. Téléverse le code (Partie 5) sur l’Arduino.
   • Vérifie : La LED intégrée (broche 13) doit clignoter rapidement pendant le téléversement, puis s’éteindre.
4. Ouvre le moniteur série (Outils > Moniteur série, vitesse 115200 bauds).
   • Vérifie : Tu dois voir les messages "Connecté au WiFi !" et "Connecté au MQTT !".
5. Ouvre le fichier HTML (Partie 6) dans ton navigateur.
   • Vérifie : La page doit afficher "Connecté au broker MQTT !".

Comportement attendu

Ce que tu dois voir :

1. Sur l’interface web :
   • Les boutons "Allumer LED 13" et "Allumer LED 12" doivent être actifs.
   • La jauge du potentiomètre doit bouger quand tu tournes le bouton.
2. Sur l’Arduino :
   • La LED 13 doit s’allumer quand tu cliques sur le bouton correspondant.
   • La LED 12 doit réagir de la même façon.
3. Dans le moniteur série :
   • Des messages comme "Led13 on", "Led12 off", et "pot XX" doivent défiler toutes les secondes.

Timing :

• Les messages MQTT doivent s’afficher toutes les secondes (ou selon ton publishInterval).
• Les LEDs doivent s’allumer/éteindre instantanément quand tu cliques sur les boutons.

Ça marche ?

Bravo ! Tu viens de :

• Faire communiquer ton Arduino avec une page web comme un pro.
• Créer une interface de contrôle à distance pour tes LEDs et ton potentiomètre.
• Poser les bases de la domotique (tu peux maintenant contrôler n’importe quel composant depuis ton téléphone !).

Partage ta victoire ! :

• Prends une photo de ton montage et poste-la sur notre groupe Facebook avec le hashtag #PlaisirArduino.
• Enregistre une courte vidéo de l’interface web en action et envoie-la à un ami pour lui montrer ta création !

Ça ne marche pas ?

Pas de panique, c’est normal ! Direction la Partie 8 — Dépannage pour trouver la solution.

PARTIE 8 — DÉPANNAGE : LES SOLUTIONS À TES PROBLÈMES

Objectif : Résoudre les problèmes courants.

Problème 1 : Les LEDs ne s’allument pas

Symptôme : Les LEDs restent éteintes même quand tu cliques sur les boutons.

Cause probable :

• Câblage incorrect (inversion des pattes de la LED ou oubli de la résistance).
• Broches mal déclarées dans le code Arduino.

Solution :

1. Vérifie que la patte longue de la LED est branchée sur la broche Arduino (13 ou 12) et la patte courte sur la masse (GND) via une résistance.
2. Vérifie que les broches sont bien déclarées dans le code :const int ledPin13 = 13; const int ledPin12 = 12;
3. Teste les LEDs manuellement en branchant directement la patte longue sur le 5V (avec résistance).

Comment vérifier :

• Ouvre le moniteur série et cherche les messages "Led13 on" ou "Led12 on". Si tu les vois mais que les LEDs ne s’allument pas, c’est un problème de câblage.

Problème 2 : La jauge du potentiomètre ne bouge pas

Symptôme : La jauge reste à 0% même quand tu tournes le potentiomètre.

Cause probable :

• Câblage incorrect du potentiomètre (broche du milieu non connectée à A0).
• Code Arduino mal configuré pour lire la valeur analogique.

Solution :

1. Vérifie que la broche du milieu du potentiomètre est branchée sur A0.
2. Vérifie que les autres broches sont branchées sur 5V et GND.
3. Dans le code Arduino, vérifie que la broche est bien déclarée :const int potPin = A0;
4. Teste le potentiomètre manuellement en affichant sa valeur dans le moniteur série :Serial.println(analogRead(A0));

Comment vérifier :

• Tourne le potentiomètre et observe le moniteur série. Si la valeur change, c’est un problème avec l’interface web (vérifie la connexion MQTT).

Problème 3 : L’interface web affiche "Déconnecté"

Symptôme : La page web affiche "Déconnecté" et les boutons ne fonctionnent pas.

Cause probable :

• RabbitMQ n’est pas lancé ou l’IP est incorrecte.
• Le port WebSocket (1883) est bloqué par un pare-feu.

Solution :

1. Vérifie que RabbitMQ est lancé dans Docker :
   • Ouvre Docker Desktop et vérifie que le conteneur rabbitmq est en cours d’exécution.
   • Si ce n’est pas le cas, lance-le avec : docker run --name rabbitmqWeb -p 5672:5672 -p 15672:15672 -p 15675:15675 -p 1883:1883 rabbitmq:3.13-management
2. Vérifie que l’IP du broker MQTT est correcte dans le code HTML :host: '192.168.1.XX', // Remplace XX par l'IP de ton ordinateur
3. Vérifie que le port 1883 est ouvert :
   • Sur Windows : Ouvre le pare-feu et autorise le port 1883.
   • Sur Mac/Linux : Vérifie avec netstat -tuln | grep 1883.

Comment vérifier :

• Ouvre MQTT Explorer et essaie de te connecter au broker avec les mêmes identifiants que dans le code HTML. Si ça ne marche pas, c’est un problème de broker.

Toujours bloqué ?

Pas de panique ! Voici ce que tu peux faire :

1. Relis les étapes : Vérifie que tu n’as pas sauté une étape du câblage ou du code.
2. Cherche des indices : Les messages dans le moniteur série sont tes meilleurs amis.
3. Demande de l’aide :
   • Poste une photo de ton montage et une capture d’écran du moniteur série dans notre groupe Facebook.
   • Décris précisément ce qui ne marche pas (ex : "La LED 13 s’allume mais ne s’éteint pas quand je clique").
   • On est là pour t’aider !

PARTIE 9 — RÉSUMÉ : CE QU’ON A FAIT ENSEMBLE

Objectif : Faire le bilan des compétences acquises.

Ce qu’on a accompli

On a construit un système malin où ton Arduino discute avec ton téléphone comme deux potes qui s’envoient des messages. Voici ce qu’on a fait :

1⃣ On a branché les composants : deux LEDs et un potentiomètre sur l’Arduino, comme des musiciens prêts à jouer.

2⃣ On a installé RabbitMQ (le "standardiste") dans Docker pour qu’il transmette les ordres entre ton téléphone et l’Arduino.

3⃣ On a configuré MAMP pour afficher une page web sur ton téléphone, avec des boutons pour contrôler les LEDs et une jauge pour le potentiomètre.

4⃣ On a codé l’Arduino pour qu’il :

• Se connecte au WiFi (comme quand tu te connectes à ta box).
• Écoute les messages MQTT (les "SMS" du projet).
• Allume/éteint les LEDs ou renvoie la valeur du potentiomètre. 5⃣ On a testé et débogué : on a vérifié que tout fonctionnait et corrigé les erreurs.

Ce que tu peux faire maintenant

Avec ce projet, tu as toutes les clés pour créer tes propres systèmes connectés :

• Une station météo : Ajoute un capteur de température et affiche les données sur ton téléphone.
• Un système d’arrosage automatique : Utilise un relais pour contrôler une pompe à eau.
• Un robot télécommandé : Ajoute des moteurs et contrôle-les depuis ton navigateur.

Le plus beau ? Tu peux tout adapter à tes idées !

PARTIE 10 — ALLER PLUS LOIN : ET MAINTENANT ?

Objectif : Donner des idées pour aller plus loin.

3 projets pour continuer

1. Station météo connectée
   • Ajoute un capteur DHT11 pour mesurer la température et l’humidité.
   • Affiche les données sur ton interface web avec des graphiques.
   • Matériel : DHT11 (5€), câbles.
2. Système d’arrosage automatique
   • Utilise un relais pour contrôler une pompe à eau.
   • Programme l’arrosage en fonction de l’humidité du sol (capteur FC-28).
   • Matériel : Relais (3€), pompe à eau (10€), capteur FC-28 (5€).
3. Robot télécommandé
   • Ajoute des moteurs et un module L298N pour les contrôler.
   • Contrôle le robot depuis ton téléphone avec des boutons directionnels.
   • Matériel : 2 moteurs DC (10€), module L298N (5€), châssis (15€).

Ressources pour aller plus loin

• Tutoriels :
  • Créer une station météo avec Arduino
  • Contrôler un robot avec MQTT
• Communauté :
  • Rejoins notre groupe Facebook pour poser tes questions.
  • Participe à nos live YouTube pour des projets en direct.
• Outils :
  • MQTT Explorer : Pour visualiser les messages MQTT.
  • PlatformIO : Un IDE plus puissant que l’IDE Arduino.

Ton prochain défi

Mission : Ajoute une troisième LED à ton projet et contrôle-la depuis ton interface web.

• Indice : Il suffit de dupliquer le code pour la LED 13 ou 12 et de modifier les broches.

Partage ton résultat avec le hashtag #PlaisirArduino – on a hâte de voir tes créations !

5. VOCABULAIRE CLÉS

6. POINTS D'ATTENTION PÉDAGOGIQUE

• Pour les débutants :
  • Insiste sur l’importance de vérifier le câblage avant de coder.
  • Explique que les résistances sont obligatoires pour les LEDs (risque de griller le composant).
  • Montre comment utiliser le moniteur série pour déboguer.
• Pour les intermédiaires :
  • Encourage à modifier le code pour comprendre comment ça marche.
  • Propose des exercices rapides (ex : changer la fréquence d’envoi des données).
  • Montre comment adapter le projet (ajouter des capteurs, des moteurs, etc.).
• Pour tous :
  • Rassure : Les erreurs sont normales, même les pros en font !
  • Encourage : Partage tes résultats et pose des questions.
  • Inspire : Montre des exemples de projets réalisés par la communauté.

Félicitations ! Tu as maintenant toutes les clés pour créer des projets Arduino connectés. À toi de jouer !

Cet article Cours Complet : Arduino + MQTT + Web – Contrôle tes LEDs depuis ton téléphone 🚀 est apparu en premier sur PlaisirArduino.

1. Objectif pédagogique

À la fin de ce cours, vous saurez :

• Comprendre le rôle et les limites de l’EEPROM interne d’un Arduino.
• Lire et écrire des données persistantes avec EEPROM.read() et EEPROM.write().
• Optimiser les écritures avec EEPROM.update().
• Sauvegarder et relire des variables complètes avec EEPROM.put() et EEPROM.get().
• Créer un projet simple qui conserve ses paramètres après extinction.

Précaution à prendre

En quelque minutes les cellules EEPROM peuvent se détérioré et altéré votre carte.

2. Présentation de L'EEPROM

Qu’est‑ce que l’EEPROM ?
L’EEPROM (Electrically Erasable Programmable Read-Only Memory) est une mémoire non volatile : elle garde les données même sans alimentation.

Caractéristiques :

• Capacité limitée : ex. 1024 octets sur un Arduino Uno.
• Accès octet par octet ou via des variables complètes.
• Durée de vie ~100 000 écritures par cellule (éviter les écritures inutiles).

Applications : sauvegarde de paramètres, compteurs, scores, restauration d’état après redémarrage.

3. Matériel nécessaire

• Arduino Uno (ou Nano, Mega…)
• Câble USB
• (Optionnel) Bouton poussoir + résistance 10 kΩ
• (Optionnel) LED + résistance 220 Ω

Schéma minimaliste : pour les premiers exemples, aucun câblage n’est requis.

4. Explication du fonctionnement

L’EEPROM est organisée en cases numérotées (adresses). Chaque case stocke un octet (0–255). Imaginez un meuble avec 1024 tiroirs : chaque tiroir peut contenir un petit papier avec un nombre. Quand vous éteignez l’Arduino, les papiers restent en place.

5. Premier code minimaliste

Exemple simple : écrire puis lire un octet à l’adresse 0.

#include <EEPROM.h>

void setup() {
  Serial.begin(9600);

  // Écrire 42 à l'adresse 0
  EEPROM.write(0, 42);

  // Lire la valeur stockée à l'adresse 0
  byte valeur = EEPROM.read(0);

  Serial.print("Valeur lue : ");
  Serial.println(valeur);
}

void loop() {
  // Vide
}

Ce que fait ce code : écrit le nombre 42 à l'adresse 0, puis le relit et l'affiche sur le moniteur série.

6. Décryptage du code

• #include <EEPROM.h> : active la bibliothèque EEPROM.
• EEPROM.write(adresse, valeur) : écrit un octet.
• EEPROM.read(adresse) : lit un octet.
• Les adresses vont de 0 à EEPROM.length()-1.
• Erreur fréquente : écrire trop souvent (surtout dans loop()) use la mémoire.

7. Expérimentation guidée

Propositions faciles :

• Changer la valeur écrite (ex. EEPROM.write(0, 100)).
• Utiliser une autre adresse (ex. adresse 10).
• Écrire plusieurs valeurs et les relire.

8. Fonctions avancées

En complément de read() et write(), Arduino fournit :

EEPROM.update(adresse, valeur)

Écrit seulement si la valeur est différente de celle déjà stockée — utile pour économiser les cycles d'écriture.

#include <EEPROM.h>

void setup() {
  Serial.begin(9600);
  EEPROM.update(0, 42); // Écrit seulement si nécessaire
  Serial.println("Valeur mise à jour !");
}

void loop() {}

EEPROM.put(adresse, variable)

Permet d'enregistrer une variable complète (int, float, struct...) en une seule instruction.

#include <EEPROM.h>

struct Donnees {
  int compteur;
  float temperature;
};

Donnees info;

void setup() {
  Serial.begin(9600);
  info.compteur = 123;
  info.temperature = 24.5;
  EEPROM.put(0, info);
  Serial.println("Données sauvegardées !");
}

void loop() {}

EEPROM.get(adresse, variable)

Lit directement une variable complète depuis l'EEPROM (complément de put).

#include <EEPROM.h>

struct Donnees {
  int compteur;
  float temperature;
};

Donnees info;

void setup() {
  Serial.begin(9600);
  EEPROM.get(0, info);
  Serial.print("Compteur : ");
  Serial.println(info.compteur);
  Serial.print("Température : ");
  Serial.println(info.temperature);
}

void loop() {}

Astuce : put() et get() gèrent automatiquement la taille en octets — attention à la place restante dans l'EEPROM.

9. Vérification avant écriture dans l’EEPROM

Avant d’enregistrer une donnée en mémoire EEPROM, il est essentiel de vérifier que sa valeur a réellement changé. En effet, si la donnée est identique à celle déjà stockée, une réécriture inutile détériorera prématurément la cellule mémoire, qui ne supporte qu’un nombre limité de cycles d’écriture. Pour protéger la durée de vie de l’EEPROM, il faut donc ajouter systématiquement une étape de vérification avant d’écrire.

Voici un exemple fiable et simple, utilisable pour tout type de donnée basique (comme un octet) :

#include <EEPROM.h>

int adresse = 0;         // Adresse mémoire EEPROM
byte nouvelleValeur = 42; // Valeur à écrire

void setup() {
  Serial.begin(9600);

  // Lire la valeur actuelle dans l’EEPROM
  byte ancienneValeur = EEPROM.read(adresse);

  // Vérifier si la valeur a changé avant d’écrire
  if (ancienneValeur != nouvelleValeur) {
    EEPROM.write(adresse, nouvelleValeur);
    Serial.println("Valeur mise à jour dans l’EEPROM.");
  } else {
    Serial.println("Valeur identique, écriture évitée pour préserver l’EEPROM.");
  }
}

void loop() {
  // Rien ici
}

Cette méthode simple protège efficacement l’EEPROM contre les écritures redondantes et prolonge sa durée de vie.

Exemple fiable de vérification avant écriture avec EEPROM.get() et EEPROM.put()

Pour éviter d’écrire inutilement dans l’EEPROM une structure Donnees, on peut comparer la donnée à écrire avec celle déjà stockée, puis n’écrire que si elles diffèrent.

#include <EEPROM.h>

struct Donnees {
  int compteur;
  float temperature;
};

Donnees infoNew;  // Nouvelle donnée à sauvegarder
Donnees infoOld;  // Donnée lue depuis EEPROM

void setup() {
  Serial.begin(9600);
  delay(1000); // Attente pour le moniteur série

  // Initialisation des nouvelles données
  infoNew.compteur = 123;
  infoNew.temperature = 24.5;

  // Lire la donnée existante dans EEPROM à l'adresse 0
  EEPROM.get(0, infoOld);

  // Comparer byte à byte pour vérifier si les données ont changé
  if (memcmp(&infoNew, &infoOld, sizeof(Donnees)) != 0) {
    EEPROM.put(0, infoNew);
    Serial.println("Données mises à jour dans l’EEPROM.");
  } else {
    Serial.println("Données identiques, écriture évitée.");
  }
}

void loop() {
  // Rien ici
}

10. Résumé

• Lecture/écriture d'octets : read() / write().
• Éviter les écritures inutiles : update().
• Stocker/charger des variables complètes : put() / get().
• Penser à la taille disponible et à l'usure des cellules.

Ressources complémentaires

• Documentation officielle : arduino.cc — EEPROM
• Bibliothèque EEPROM.h incluse par défaut
• Conseil pratique : limiter les écritures inutiles pour préserver la mémoire

Cet article La persistance des données EEPROM est apparu en premier sur PlaisirArduino.

Caractéristiques du ruban à LED adressage

Type: WS2812B

Alimentation: 18 mA/LED 5V ne supporte pas les surtensions, une alimentation stable est recommandée.

La bibliothèque de gestion des LEDs que j'ai utilisée est "Adafruit_NeoPixel.h".

Le projet est relativement simple à mettre en oeuvre sur un petit nombre de LEDs. J'ai pris comme point de départ l'exemple "simple" que j'ai retravaillé.

La bibliothèque Adafruit NeoPixel pour Arduino est conçue pour faciliter la gestion des LED RGB individuelles ou des bandes de LED RGB, telles que les populaires LED WS2812 ou WS2812B. Voici quelques-unes des fonctions natives de cette bibliothèque :

1. Adafruit_NeoPixel pixels(nombre de pixels, branche de sortie, neoPixelType type)

• Initialise la bibliothèque en spécifiant le nombre total de pixels, le numéro de broche à laquelle les pixels sont connectés et le type de pixels (par exemple, NEO_GRB ou NEO_RGB).

1. begin()

• Initialise la communication avec les pixels. Cette fonction doit être appelée une fois dans le programme, généralement dans la fonction setup().

1. show()

• Envoie les données de couleur aux pixels. Vous devez appeler cette fonction après avoir modifié les couleurs des pixels pour les rendre effectives.

1. setPixelColor(numéro de la LED adressable, couleur rouge de 0 à 255, couleur vert de 0 à 255, <strong><code>couleur bleu de 0 à 255)

• Définit la couleur d'un pixel spécifique en spécifiant les valeurs des composants rouge, vert et bleu (RVB). Les valeurs des composants RVB vont de 0 à 255.

1. setPixelColor(uint16_t n, uint32_t color)

• Version alternative de setPixelColor où vous spécifiez directement la couleur sous forme d'un entier 32 bits, où les 8 premiers bits représentent le rouge, les 8 suivants le vert et les 8 derniers le bleu.

1. setBrightness(intensité de 0 à 255)

• Ajuste la luminosité de tous les pixels. La valeur de luminosité varie de 0 (éteint) à 255 (pleine luminosité).

1. Color(uint8_t red, uint8_t green, uint8_t blue)

• Fonction utilitaire qui renvoie une couleur sous forme d'entier 32 bits à partir des composants RVB spécifiés.

1. ColorHSV(uint16_t hue, uint8_t saturation, uint8_t value)

• Fonction utilitaire qui renvoie une couleur sous forme d'entier 32 bits à partir des composants HSV (teinte, saturation, valeur) spécifiés.

1. getPixelColor(uint16_t n)

• Récupère la couleur d'un pixel spécifique sous forme d'entier 32 bits.

1. clear()
   • Éteint tous les pixels en les mettant à la couleur noire (0, 0, 0).

Ces fonctions de base devraient vous aider à démarrer avec la gestion des LEDs à l'aide de la bibliothèque Adafruit NeoPixel dans vos projets Arduino. N'oubliez pas de consulter la documentation officielle pour des détails plus approfondis sur chaque fonction : https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library.

Merci pour votre intérêt, vous pouvez revoir toutes les vidéos sur la chaine Youtube plaisirarduino

Cet article Ruban à l’LED adressable est apparu en premier sur PlaisirArduino.

Avant propos - Clavier d'écran tactile.

L’intérêt principale d'un écran tactile est de retourner, par un visuel graphique, des données système sur son état actuel de marche, arrêt, température, vitesse, niveau, débit et bien d'autres.
Mais également, d'offrir aussi la possibilité à l'utilisateur lambda d'agir sur le système en appuyant sur un bouton, en faisan un slide curseur ou bien de saisir puis charger des valeurs de données.

Sur un écran tactile il existe, à première vue, plusieurs façons d'agir ou transmettre des données à un système.
Mais ce qui nous intéresse ici c'est la saisie puis le chargement de données.
Nous allons donc concevoir un petit formulaire doté d'un clavier d'écran tactile alphanumérique capable de saisir des données pour ensuite les charger à l'endroit de notre choix.

Nous ne nous attarderons pas sur comment crée un projet, le mettre en forme et les divers manipulations des composants , variables et événement tactiles au cours du tutoriel étant donné que nous l'avons fait au tutoriel "NEXTION editor ".
Par ailleurs pour ceux qui n’aurait pas chargé l'éditeur vous le trouverez via le lien ci-dessous.
https://nextion.itead.cc/resources/download/nextion-editor/https:

Le projet du clavier d'écran tactile.

Dans un premier temps nous affichons une page d'accueil nommée "Données" qui présente deux données. L'une de type "numérique" et l'autre de type "texte".
Puis dans le second temps nous affichons une seconde page nommée "Clavier" qui permettra la saisie et le chargement des données.

Pour commencer créons la première page avec les deux composants utiles à nos données avec un bouton nommée "SAISI" permettant de passer au formulaire de saisi.

Ensuite créons la seconde page qui vas contenir notre formulaire de saisi avec le clavier d'écran tactile NEXTION.
Mais tout d'abord attardons nous aux fonctionnalités attendus lors d'une saisi de données.

Les fonctionnalités souhaité d'une saisi.

Premièrement, la possibilité de visionner la valeur en cours de saisi.
Deuxièmement, de saisir une donnée ce qui implique l'emploie d'un Clavier alphanumérique.
Troisièmement, la possibilité d'effacer tour à tour la dernière saisi ou les saisis complète.
Quatrièmement, avoir la possibilité de sélectionner la saisi souhaité à charger.

Les composants utiles à la saisi tactile.

Pour visualiser les données à saisir plaçons deux composants d'affichages. L'un de texte et l'autre numérique.
Ajoutons également deux boutons nommée "<= Eff" pour effacer la saisi en cours.
En plus de cela ajoutons aussi deux boutons radio pour valider au choix le chargement des données renseignées.
Et pour finir un bouton "OK" qui charge le ou les données et passe à l'action suivante de retour à la page d'accueil.

Pour saisir des données il nous faut donc un clavier alphanumérique. Ce dernier on vas le créer à l'aide de composants boutons.

Les composants utiles au clavier d'écran tactile.

La mise en forme du clavier d'écran tactile.

Premièrement dimensionnons à notre convenance un boutons standard puis ensuite par un copié collé dupliquons le.

Deuxièmement, grâce aux paramètres de positionnements "X" et "Y" du volet "Attribute" alignons les boutons entres eux.

Pour cela, en fonction la largeur "A" du bouton standard et de l'écart "B" souhaité nous obtenons le pas "C" de positions sur l'axe "X".
Donc en ajoutant l'écart total mesuré nous obtenons le positionnement de chaque bouton sur l'axe "X".
Suivant l'exemple ci dessous le prochain bouton (1) se positionnera à 78. Et ainsi de suite pour les autres. (0+78 = 78 +78 = 156 + 78 =234 + ...)

Nous obtenons ainsi une ligne de boutons parfaitement aligné que nous pouvons a son tour copier et coller plus bas pour la réalisation de chaque ligne de notre clavier alphabétique.

Pour l'alignement en hauteur de nos ligne de boutons répétons l'opération précédente mais sur l'axe "Y" avec une ligne de boutons.
Nous faisons ensuite l'identification des boutons suivant leurs fonctions.
Pour finir plaçons les boutons "Espace" et "clear".

Notre clavier d'écran tactile de saisis est graphiquement prête et nous pouvons à présent passer à la programmation de la saisi.

Gestion de la saisi.

Avant toute choses il faut penser à la grandeur numérique ou alphabétique des données utiles à saisir dans notre systèmes.
"t0" est configuré pour n'accepter que 10 caractères. "n0" ne peut pas dépasser -2147483648 à 2147483647 bits par conséquent de ne pas dépasser la valeur de 999 999 999.
Il faut donc conditionner le composant de lettres sur dix (10) lettres et le composant de nombre sur neuf (9) chiffres.

Saisis des caractères alphabétiques.

En toute logique les chaines de caractères saisis se succèdent ce qui reviens donc à faire de la concaténation.
Pour la programmation nous utilisons la Variables système numériques "sys1", de nature globale, temporaires et fourni par l'éditeur. Elles n’ont pas besoin d’être déclaré et peuvent être lus ou écrits de n’importe quelle page. Entiers signés 32 bits.

Nous conditionnons donc l'exécutions de la saisi alphabétique avec cette variable "sys1".
voyez l'exemple ci dessous avec la lettre "a".

Finalement il ne reste plus qu'a copier puis ajuster ce programme pour les autres boutons alphabétiques.
Une fois cela fait passons à la saisi des chiffres avec le clavier d'écran tactile

Saisi des caractères numériques.

Pour la saisi des caractères numériques ou chiffres c'est différent.
Effectivement si on exécute le même principe de programmation que pour les lettres.
Le compilateur vas plutôt additionner les chiffres et notre saisi ne sera pas fidèle.

Nous partons donc du principe que chaque saisi de chiffres correspond tour à tour à une unité, dizaine, centaine, millier et ainsi de suite. Ce qui reviens à multiplier par dix la valeur de saisis actuelle pour l'additionner la prochaine saisi.

Pour la programmation nous utilisons la Variables système numériques "sys0".
Voyez cela dans l'exemple ci dessous avec le chiffre un (1).

Bravos, à ce stade vous êtes en mesure de saisir des valeurs de données numériques et alphabétiques.
Mais qu'en est il en cas d'erreur ?

Effacement d'une saisi alphabétique.

Tout comme pour ajouter une lettre, pour en effacer une, il suffis de la retirer en faisant une soustraction par "-1" à la valeur actuel.

Effacement d'une saisi numérique.

Ensuite pour les chiffres nous exploitons le fait que la zone de saisi numérique n'admet pas les nombre décimale. Par conséquent en faisant une division par 10 de la valeur actuelle elle vas retirer la dernier saisi .

Effacer toutes les saisis.

Maintenant pour effacer toutes les saisis nous utilisons bien-sur le boutons "Clear".
Sa programmation consiste donc à initialiser à zéro (0) toutes les donnée des variables utiles aux traitement de la saisi.

A cette étape de notre projet, nous pouvons corriger nos saisis à volonté. Voyons donc la possibilité de les sélectionner pour valider leurs chargement vers le système.

Sélection d'une zone de saisis.

Pour sélectionner la donnée que l'on souhaite charger nous avons intégrons deux boutons radio. Paramétrés à zéro (0) depuis le volet "Attribue" sur en "val" = 0 .

Ils nous permettent de sélection la ou les données souhaitées dans notre système.
Chaque bouton radio est affecté à une zone de saisi. La validation de nos saisis est donc conditionné par l'état zéro, faux ou un, vrais du bouton radio.

La saisis de nos données faites, nous pouvons finalement les valider. C'est la fin de notre saisis.

Fin de saisi.

Comme vous le comprenez déjà c'est Lors d'un appuie sur le boutons "OK" que l'on charge la ou les valeurs saisi vers les composants de la page d'accueil pour ensuite l'afficher.
Mais n’oublions pas aussi d'initialiser les variables, systèmes "sys0" et "sys1", de traitement de la saisi.
Voyez l'exemple ci dessous.

Nous y voila la saisis est terminé. Nous sommes capable de saisir des données grâce à un clavier d'écran tactile NEXTION alphanumérique.

Mais nous souhaitons aller plus loin.
Maintenant que l'aspect fonctionnel du clavier d'écran tactile NEXTION est en place. Nous lui avons apporté une mise en style plus agréable au visuel.

Mise en style de écran tactile NEXTION.

En vous aidant du tutoriel "Écran tactile NEXTION" et d'un logiciel de dessin, voyez l'aperçus de ce qu'il vous est possible de réaliser.

Votre imagination est sans limites ! Avec des images graphiques ou photos vous pouvez réaliser bien plus que cela !
Pour notre projet exemple nous utilisons des composants NEXTION en exploitation de saisi. Mais finalement, comme par exemple, le but est d'envoyer la donnée saisi vers une carte ARDUINO qui pilote une système.

BRAVOS!

Vous connaissez les bases pour réaliser une interface de saisi de données.
Téléchargez le programme et amusez vous à l'intégrer à vos projets et à en améliorer ces fonctionnalités.

Merci de votre lecture et à bientôt !

PLAISIR ARDUINO.fr

Cet article Clavier d’écran tactile NEXTION. est apparu en premier sur PlaisirArduino.

Le but de ce tutoriel est de vous aiguiller étape après étapes dans l'utilisation de l'éditeur NEXTION et de ses composants pour la mise en forme de pages d'écran tactile.

Le matériel.

Écran tactile NEXTION et son alimentation 5V.
Avoir une carte micro SD formaté en FAT32.
Télécharger et installer l'éditeur logiciel NEXION sur votre PC.

L'éditeur NEXTION.

Ouvrons l'éditeur NEXTION. ( En anglais)
Au centre de l'éditeur se trouve deux volets. "Recent projects" pour les récent projets et "About" qui nous informe sur la version utilisé et donne la possibilité de faire une mise à jour (latest version).
Commençons par observer son aspect. En plus de la barres de menus et de la barre d'outils fonctionnels l'éditeur est composé de sept (7) volets de travail détaillés dans le tableau qui suit.
A ce stade les volets de travail ne sont pas actifs car il nous faut crée un projet.

Créer un projet avec l'éditeur NEXTION.

Pour commencer créons un nouveau projet.
Dans la barres des menu "file" (= Fichier) puis "new" (= Nouveau).
L'utilitaire d'enregistrement s'ouvre puis à l'emplacement de notre choix créons un fichier repérable "NEXTION projet".
Nommons le "Tuto NEXTION Éditeur" -ou différemment si vous le souhaitez-, enregistrons et l'éditeur nous aiguille ensuite vers l'étape de configurations en ouvrant la fenêtre "Setting".

Configurations de l'éditeur NEXTION.

L'éditeur à besoins de connaitre le profil de votre écran tactile pour s'y adapter. Nous comprendrons cela plus tard lors de la mise en forme de nos pages.

Recherchons et sélectionnons notre modèle d'écran suivant sa catégorie "BASIC", "ENHANCED" ou "INTELLIGENT" .
Dans notre cas pour le modèle NX8048K070 la catégorie est "ENHANCED".
N'appuyons pas encore sur OK!.

Sélectionnons d'abord l'orientation de l'écran souhaité en fonction de l'exploitation de notre projet. Dans "Display" (= Affichage) à gauche de la fenêtre de configuration.

Divers choix d'orientations sont proposés Horizontale à 0° ou 180° ou verticale à 0° ou 180°. Pour notre exemple nous faisons le choix
Horizontale à 0° puis validons sur "OK".
Note : l'orientation à 180° est équivalent à un retournement de l'écran.

Nous retournons systématiquement vers l'éditeur, les volets de travail sont à présent actifs et l'on a au centre l'onglet d'aperçu de notre écran.

Nous sommes prêt à la réalisation de notre écran tactile NEXTION.

La police d'affichage.

Premièrement choisissons et configurons une police d'affichage utilisé à l'écran.

Dans "Tools" (= Outils) puis "Font generator" (=générateur de police) la fenêtre "Font generator" s'ouvre.
Puis choisissons une taille et un style de police via la liste "Height" et celle qui se situe dans la zone d'aperçu "Preview Aréa".
Le caractère "X" donne un aperçu de sa taille et sa forme par rapport à l'écran.
Pour démarrer notre exemple nous choisirons "56" et "Source code pro"

Finalement, saisissons le nom de notre police personnel "Source code pro_56" et validons sur "Generate font" générer une police.
Enfin enregistrons celle ci dans le même fichier que notre projet "NEXTION projets" dans un fichier nommé "NEXTION polices".
Puis comme demandé par la pop-up qui suit ajoutons la police générée à notre projet en cliquant sur "OK".
Nous retrouvons nos polices personnalisé dans le volet "Font" situé sous le volet "Picture".

Avant de passer à la réalisation de notre page d'accueil nous devons avant tout nous intéresser à la résolution de nos écrans et des images qui vont alimenter notre projet d'interface graphique.

Images et résolutions.

Un projet d'affichage graphique sur un écran tactile implique un travail d'apparence sur images.
l’aspect le plus important du traitement des images est basé sur la résolutions.

Pour ces raisons il nous faut souligner l'importance de leurs dimensionnement car elles risqueraient de ne pas être afficher de manière optimale donc prenons garde à faire une adéquation entre la résolution écran et celle de l'image.
Étant donnée que les caractéristiques des écrans tactiles ne sont pas modifiables nous dimensionnons les images en fonction de la résolution indiqué par la référence de notre écran.

Prenons le cas de notre écran NX8048 K070. Le chiffre 8048 indique une résolution de 800 pixels de largeur par 480 pixels de hauteur. (80/48)
Les images ne doivent donc pas dépasser les dimensions de résolution de l'écran que nous exploitons.
Mais pour faire plus simple il suffis de regarder dans la barres d'informations système (écran) au bas de l'éditeur .

Mais en réalité nos images n'aurons jamais une résolution identique aux écrans tactiles. Par conséquent à chaque fois que l'on souhaite ajouter une image il nous faudra la dimensionner.

Dimensionner l'image de votre choix.

Pour la suite du projet nous vous proposons et invitons à suivre cette méthode -Parmi d'autre- pour dimensionner l'image de votre choix.
Ouvrez là sous "PAINT".
Passez en mode "sélection".
Faites un clic droit sur celle ci.
Sélectionnez "Redimensionner".

Choisissez le mode "Pixel".
Décochez "conserver les proportions".
Entrez vos valeurs de résolutions horizontale et verticale.
Validez par "OK".
Si besoins ajustez la planche "paint" (blanc) à votre image.
L'image et à présent dimensionné pour un affichage en fond d'écran.
Pour d'autres dimensionnements plus petit qui vous seront utiles faite la même.
Faites tout de même attention à la qualité de l'image.

Afin de ne pas perdre l'image originale faite "enregistrer sous" puis renommez la nouvelle image avec un nom qui lui est propre et pour une exploitation via l'éditeur créez un fichier repérable "image NEXTION" dans le ficher "NEXTION projet" .

Après cela, l'image sélectionné est prête à être ajouter au projet.

Cela vu, nous pouvons passer à la création de notre projet.

Débuter un projet NEXTION.

Lors de la création du projet "Etape NEXTION" l'éditeur à d'office inséré une page vierge, nommé "page0", que l'on trouve dans le volet "Page".
De toute évidence ce volet représente la structure de classement des pages de notre projet.

Par simplicité de repérages à notre projet, renommons la page "accueil" en faisant un double clic dessus. Attention toutefois à ne pas dépasser les quatorze (14) caractères maximum.

Nous sommes prêt pour la mise en forme d'une page d'accueil.

Crée une page d’accueil à l'écran tactile.

En premier lieu, Plaçons y un fond d'écran.
Cliquons sur notre page d'aperçu qui s'encadre en bleu et complète alors les volets "Event" et "Attribute".
Concentrons nous plus précisément sur le volet "Attribute".
Observons le tableau qui s'y trouve car en fonction des objets sélectionnés il contient les paramètres et données utiles à modifier pour l'aspect et les caractéristiques des composants que nous verrons plus tard.
Comme illustré ci dessous, notre page "accueil" fait partie de ces composants.

Trouvez en fin de tutoriel un tableau qui décrit les différentes fonctions de chaque paramètres que l'on peut y trouver en fonction des composants.

Suivant les paramètres choisis nous pouvons crée un fond d'écran de couleur uni ou insérer une image.

Pour donner plus d’intérêt à notre exemple nous choisissons d'insérer une image en modifiant le paramètre "sta" en mode "image".

Cette action active le paramètre "pic" qui doit obligatoirement être complété par un double clic à son emplacement.

La fenêtre de sélection d'images s'ouvre mais à ce stade du projet elle est vide.
Il faut donc préalablement ajouter une image.

Ajouter une image

Utilisons le volet "Picture" (= Image).
La zone blanche sous la barre d'outils affichera de toute évidence les images contenus dans nôtre projets.

Cliquons sur plus "+" (Add) qui aura pour effet d'ouvrir l'utilitaire d’accès aux fichiers image de notre bibliothèque PC.
Allons dans notre fichier repéré "image NEXTION", puis sélectionnons l'image notre choix et validons.

Après cela une pop-up nous indique que l'ajout au projet est un succès et nous invite à valider par "OK".
Notre image fait donc partie du projet et apparait dans le volet "Picture".
A noter que chaque images aura un indice de 0 à X pour l'identifier en paramètre de composants.

La zone blanche sous la barre d'outils affichera de toute évidence les images contenus dans nôtre projets.
Cliquons sur plus "+" (Add) qui aura pour effet d'ouvrir l'utilitaire d’accès aux fichiers image de notre bibliothèque PC.
Allons dans notre fichier repéré "image NEXTION", puis sélectionnons l'image notre choix et validons.
Après cela une pop-up nous indique que l'ajout au projet est un succès et nous invite à valider par "OK".

Notre image fait donc partie du projet et apparait dans le volet "Picture".

A noter que chaque images aura un indice de 0 à X pour l'identifier en paramètre de composants.

Le fond d'écran.

Revenons au volet "Attribute" et faisons un double clic au paramètre "pic". La fenêtre de sélection est à présent fourni de notre image.
Sélectionnons là et validons sur "OK".

Bravo !! L'image s'affiche à l'aperçu !!
A ce stade nous sauvegardons notre travail en cliquant sur "Save" dans la barres d'outils.
Nous avons ainsi une page d’accueil stylisé et prête à recevoir nos textes d'informations ou d'instructions utilisateurs.

L'exercice suivant consiste à afficher des textes d'instructions ou des informations utiles aux utilisateurs.

Affichage de textes.

L'ajout d'un texte ce fait via le volet "Toolbox".
Nous y trouverons tout les composants utiles à la réalisation de nos commandes, retours d'actions systèmes et autres que nous verrons plus tard.

Cliquons donc sur le composant "Text".
Le texte s'installe sous forme d'un rectangle bleu, en haut à gauche, dans l'aperçu d'écran.
Remarquons l'indication "t0" qui est en faite sa variable d'exploitation programme.

Il faut retenir que chaque composants installés à l'écran sera affecté d'une variable que nous pouvons renommer dans le volet "Attribute".

Déplaçons le rectangle en le faisant glisser à l'endroit de notre choix puis redimensionnons le en tirant sur ses bords pour y voir l'affichage "Newtxt" inscrit par défaut.

Les paramètres de mise en formes et de propriétés sont accessibles dans le volet "Attribute".

Modifions le texte "newtxt" par "Bienvenu" au paramètre "txt".

En ce qui concerne la longueur du texte prenons garde à adapter le paramètre "txt_maxl" au nombre de caractères maximum à afficher.
On peut aussi modifier le nom de variable du composant texte au paramètre "objname" mais comme nous n'avons pas de raison de le modifier nous en resterons là.

Rappelons que vous trouvez en fin de tutoriel un tableau qui décrit les différentes fonctions de chaque paramètres que l'on peut y trouver en fonction des composants.

Nous avons à présent une page d'accueil digne de ce nom qui porte une instruction de "Bienvenu".

Il faut reconnaitre que cela est un peu léger comme instruction utilisateur.

Donc pour la suite de notre projet nous affichons une instruction utilisateur sous forme de texte défilant de droite à gauche.

Texte défilant.

Prenons le composant "Scrolling text" dans la "toolbox.

Modifions le contenu et la forme de notre nouveau composants. Centrons le sur l'image.

Par contre comment modifier la police du texte si elle est trop grande ?
Ce n'est pas possible car nous ne disposons que d'un seul type de police dans le volet "Fonts". Il faut crée une police de plus.

Comme déjà vu précédemment créons puis ajoutons une nouvelle police.
Il faudra en crée autant que nécessaire dans l'évolution du projet.
Par conséquent ajoutons une police de taille "24" et renseignons le paramètre "font" du texte défilant avec la valeur d'index de la nouvelle police dans le volet "Fonts".

Il est possible de modifier la vitesse, le pas et le sens de défilement par "tim" "dis" et "dir".

Affichons le texte "Touchez l'écran". Comme ont pouvait s'y attendre il ne défile pas. 

De plus il faut reconnaitre que le fond blanc de la zone de texte par dessus notre belle image n'est pas très esthétique.

Alors dans le but de rendre le fond de la zone de texte transparent nous changeons le paramètre "sta" en mode "crop image" ce qui implique de renseigner le paramètre "picc" par l'indice de l'image de fond d'écran dans notre cas zéro "0".

En fonction de l'image de fond nous aurons besoins d'adapter la couleur de police au paramètre "pco".

Nous avons là une page d'accueil qui a plus de classe !!!

Toujours définir une zone tactile d'activation car un appuie sur un composants non programmée n'aura aucun effet à moins de les programmées aussi pour cela. Constatons cela sur les composants texte "Bienvenu" et "Touchez l’écran".

Mais pour un premier aperçu dynamique du rendu graphique sans charger le programme dans l'écran tactile, l'éditeur est équipé d'un débogueur qui fait office de simulateur.

Le débogage. (Debug)

Utilisons "Debug" dans la barre d'outil, afin de tester nos configurations de mise en page et le rendu graphique de façon dynamique.

Cette outils est dédié au débogage qui entrainera donc une compilation et un enregistrement du projet avec un retour d'informations au volet "Output". Le débogueur ne s'ouvre pas si une erreur est présente et un message rouge apparait alors dans le volet "Output".

Dans le cas contraire le simulateur d'affichage s'ouvre et nous pouvons alors tester et constater les résultats.

Bravos !! A ce stade, vous franchissez, à présent, l'étape de mise en forme des afficheur NEXTION.

Alors maintenant que l'on maitrise la mise en forme des pages et des textes fermons le simulateur pour revenir à l'éditeur NEXTION et passons à présent à une chose essentiel à l'exploitation d'un écran tactile. Les événements tactiles.

Crée un événement tactile en page.

Premièrement l'événement tactile que l'on vas créer consiste à passer à une page suivante en touchant l'écran. Ce qui, par conséquent, demande d'ajouter une page via le volet "page".
La mise en forme de cette dernière se ferra donc en répétant les actions précédentes.

Nommons la "SecondeEtape", ajoutons une image en fond d'écran et revenons ensuite à la page précédente.
Les événements sont générés dans le volet "Event" via les principaux onglets qui sont:

• "Touch Press Event". Événement lors d'un appui sur un composant.
• "Touch Release Event(0)" Événement lors d'un appui puis relâchement sur un composant ou l'écran.
• "Preinitialize Event(0)" Événement avant l'affichage d'une page. Utile pour initialiser des composants ou variables.
• "Postinitialize Event(0)" Événement après l'affichage d'une page.
• "Page Exite Event(0" Événement à la fermeture de la page.

Pour plus de détaille référez vous à ce lien Le guide de l’éditeur Nextion

Dans la zone de saisi de l'onglet "Touch Press Event(0)" écrivons l'instruction ci dessous.

Testons premièrement l'exactitude de notre programmation d'événements en utilisant "Compile" sous la barre des menus.
Une compilation exécute l'enregistrement fichier de votre projet et de ce fait, renvoie ses résultats de compilations dans le volet "Output" et en cas d'erreurs le message s'affiche en rouge.
Deuxièmement, si tout est "ok" faisons un test par le "Débug".

Ça fonctionne bravo! Encore une étape de passé! Ainsi, vous touchez du doigt la programmation de votre projet. -Si l'on peux dire !!-

Mais retenons que chaque composants d'une page peut générer des événements en programmant dans leurs volet "EVENT".

Restons sur la seconde page !
La prochaine étape consistera donc à revenir à la page précédente en appuyant sur un bouton.

Le bouton.

Une fois de plus servons nous dans la "Tollbox" pour le composant bouton.

De la même façon que les objets déjà utilisés il est paramétrable en formes et styles.
Affichons "RETOUR" dessus (txt).

Rappelons une dernière fois que vous trouvez en fin de tutoriel un tableau qui décrit les différentes fonctions de chaque paramètres que l'on peut y trouver, en fonction des composants.

Ensuite dans l'onglet "Touch Press Event" du bouton écrivons l'instruction

En outre lors de la saisi une aide contextuelle nous assiste en proposant des raccourcis par mots clés.

Puis clôturons par une compilation et si tout est "Ok" faisons un essais "Debug".

Encore bravos, une seconde étape est une fois de plus de franchis !!
Ensuite abordons les bases des événements tactiles par bouton il est temps pour la prochaine étape d'utiliser la programmation des commandes à boutons pour renseigner une valeur en affichage.

Afficher des données.

La prochaine étape consistera, lors de l'appuie sur un bouton, à afficher deux type de données, l'une texte et l'autre numérique.

En bref, pour cela, ajoutons les composant "text" (=Nombre) et "Number" (=Nombre) qui permet d'afficher des valeurs numérique et entière.

Nommons le boutons "Charge ".

Une fois les composants en forme et placés, sélectionnons le bouton "charge" puis programmons le.

Écrivons les instructions ci-dessous.

Rappelons une dernière fois de prendre garde à la grandeur maximales que peut accepter chaque composants. Voire le paramètre "txt_maxl".

Finalement compilons et testons notre programme.
Un appuie sur le boutons "Charge" et s'affichent les données "12" et "Nombre" dans les composants.

Encore bravos !!!
Mais avant l'étape suivante revenons sur les instructions précédentes.

Déclarations des variables sous l'éditeur NEXTION.

N'oublions pas que dans tout programmes informatiques les déclaration sont primordiale.
Donc voici dessous le format de déclaration de variable.
Variable.type.
Cependant, dans la programmation NEXTION, il faut réitérer cette façon de faire appel à une variable.
Comme le montre l'exemple ci dessous.

Prenons le cas de notre exemple, "n0" et "t1" correspondent respectivement aux variables des composants numérique et texte.
Puis suivis du point "." dit, par traduction, séparateur de période.
Pour conclure "val" et txt" correspondent respectivement aux type des variables numérique et texte.
Il faut savoir que la programmation ne supporte pas les espaces.
t0. val = "texte" ne fonctionne pas.(t0.val="texte" correcte)

Nous sommes donc capable de charger des données vers un composant texte ou numérique.
Mais nous pouvons tout aussi bien le faire vers une variable.

Les variables NEXTION.

Considérons les composants à l'écran comme des entrées ou des sorties mais de type tactiles et graphiques.
Par conséquent pour traiter des données internes à l'affichage il faut utiliser des variables.

Pour crée une variable une fois de plus nous devons faire appel à un composant qui porte le juste nom de "Variable".
En revanche contrairement aux autres composant il n'est pas installé dans l'aperçu mais dans le bandeau qui s'ouvre juste en dessous.

Par défaut elle aura le nom de "va0" mais comme tout les autres composants sont nom peut être modifié dans le volet ATTRIBUTE.

Pour affecter une valeur à une variable respectons le format vu précédemment, en se rappelant de ne pas mettre d'espace.
va0.val=154

Faisons l'exercice de charger une valeur dans la variable "va0" lors d'un appuie sur le bouton "charge". Ensuite additionnons à la variable "va0" la valeur du composant "n0". Et finalement affichons le résultat sur un autre composant numérique "n1".
Écrivons les instructions suivantes à la suite du programme.

Une fois cela fait, faisons une compilation et un test.

Bravos, c'est finalement la dernière étape de l'exploration des divers fonctionnalités de l'éditeur NEXTION. En définitive nous sommes capable de manipuler des pages, leurs composants, leurs variables internes et générer des événements tactiles.

Mais vous trépignez surement d'impatience à l'idée de voire le résultat de notre travail à l'écran tactile NEXTION et de tester votre programme !!

Or patience, car avant cela il nous faut charger le programme dans l'écran tactile.

Chargement du projet de l'éditeur NEXTION vers l'écran tactile.

Néanmoins, au préalable, préparons les branchements d'alimentation de l'écran, mais sans le connecter à l'Arduino.

Pour ce faire, il vas donc nous falloir une carte micro "SD" formaté en "FAT32".

Puis ouvrir le dossier de construction "Open build folder" dans le menu "file" et rechercher le fichier projet "Etape NEXTION.tft".
Ensuite faire copie et le coller à l'emplacement de la carte "SD".

Par contre prenons garde à ce que le fichier soit le seul de type "tft". Par conséquent, dédions Idéalement, une carte vierge juste pour cela.
Ensuite une fois le projet dans la carte SD insérons là à l'écran tactile.

A présent alimentons l'écran.

En premier lieu, à l'allumage, il entre en phase d'initialisation et détecte la présence d'une carte "SD" puis charge les données contenus dans la carte vers sa mémoire interne. Par la suite affiche le message "Check Data 100% / Update Successed" qui indique sont initialisation complète et terminé avec succès.
Maintenant désactivons puis réactivons l'alimentation de l'écran Afin qu'il se configure suivant les nouvelles données et exécute notre projet.
L'écran est ainsi prêt à être exploiter et n'attends plus que vos actions tactiles pour exécuter vos instructions.

En fin de compte, c'est une belle avancé dans l'exploration des écrans tactiles NEXTION qui vous permettra la constructions de vos projets sur ce type de supports HMI.

Tableau des 42 attribues de composants.

Quant à vous, Téléchargez l'exemple "Tuto NEXTION Éditeur" dans la rubrique "Download" et amusez vous avec les bases de ce tutoriel pour créer vos projet et découvrir les autres composants !!
Rejoignez nous aussi sur le projet "Clavier NEXTION" et élargissez vos compétences pour optimiser vos projets.

Encore une fois, merci de votre lecture.

PlaisirArduino.fr

FIN

Cet article NEXTION EDITOR l’éditeur pour écran tactile. est apparu en premier sur PlaisirArduino.

Le broker qu’est-ce que c’est ?

Pour faire interagir la platine arduino et le web nous utilisons un broker. Son rôle est de distribuer les messages aux ensembles des objets IOT connectés. 

Lorsque l’objet IOT a souscrit à un topic, il va recevoir tous les messages de celui - ci. Quand il publie un message tous les objets abonnés à son topic le reçoivent.

Exemple:  

Pour interagir avec les différents objets, le broker utilise le protocole MQTT. Vous n’avez pas besoin de rentrer dans la technique pour utiliser celui-ci. 

Il existe plusieurs brokers, en principe nous pouvons avoir besoin d’un broker local ou accessible par internet. 

J’ai testé le broker Mosquitto en local sur une platine rasberryPi qui remplie efficacement son rôle.

Pour ne pas vous faire acheter du matériel supplémentaire, j’ai choisi le brocker shiftr.io sur internet car il est facile à installer et la documentation remplie les exigences du projet que je souhaite réaliser. 

Etape 1: Mise en place du Broker

• Créer un compte sur shiftr.io 
• Créer le broker 
• Modifier le token avec pour paramètre l’identifiant et le mot de passe.

Ces démarches sont rapides, pour ceux qui auraient des difficultés, je vous renvoie sur la vidéo Web et arduino ci-dessus.

Etape 2: Test avec la platine Arduino

Dans un premier temps, je vous invite à installer la librairie MQTT de Joel Gaehwiller

Ensuite lancer l’exemple 

- Fichier/EXEMPLE / MQTT / ArduinoEthernetShield

- Modifier les paramètres de connexion au broker dans la fonction Connect ligne 23 avec votre identifiant et votre mot de passe du token

- Téléverser le programme et vérifier que le broker reçoit l’information

« World »  sous le topic « Hello ».

A partir de là, la platine arduino et le broker sont opérationnels.

Etape 3: Le Web 

Dans la documentation de shiftr.io vous y touverez le code source de base pour interagir avec le broker et le navigateur. 

•  Créer un dossier dans lequel vous allez y mettre trois fichiers: index.html, script.js et style.css
• Prenez le code de la documentation sous exemple browser et faites un copier/coller dans les différents fichiers.
• Tester l’envoi du message lorsque vous appuyez sur le bouton

ARDUINO ET WEB

Présentation 

Il s'agit d’allumer des diodes aux travers du navigateur, recevoir le retour d’un potentiomètre et d’agir avec un bouton poussoir sur la platine arduino.

Le broker étant opérationnel, nous n’agirons plus sur celui-ci.

Index.html

L’objectif est d’afficher deux boutons pour commander des diodes et un retour potentiomètre.

Style.css

Le fichier style.css permet de donner des paramètres d’affichage de la page index.html

Script.js

Script permet de modifier et d'actualiser la page index.html, son langage est le javascript.  

Le javascript a la particularité de modifier la page Web, même après son téléchargement celui-ci est interprété par le navigateur.  

Le premier élément, c’est la connexion au broker ligne 4, il faut renseigner ses identifiants de token

Le second élément: lignes 10 et 11 permettent de souscrire aux différents Topic. 

Le troisième élément: lignes 15 à 69 modifient le contenu des balises ou leurs styles en fonction des  messages reçus .

Exemple 

document.getElementById('led7').innerHTML = ‘ON';

Modifie le contenue de la balise qui porte l’identifiant « led7 » dans la page index.html par « ON ».

 document.getElementById("led7").style.backgroundColor="green";

Modifie le style backgroundColor de la balise qui porte l’identifiant « led7 » dans la page index.html.

Le dernier élément: ligne 71 à ligne 76 permettent de publier des messages au broker au click de bouton. 

Lorsque le bouton est appuyé le message est traité par la fonction de traitement des messages : lignes 15 à 69.

Code source arduino

Le programme est fourni gratuitement en téléchargement https://plaisirarduino.fr/telechargement  

Déclaration des variables pour les entrées / sorties de la commande des diodes et des différentes temporisations.

• Connexion avec les identifiants et mot de passe du token
• Souscription aux Topic

La fonction messageReceived traite toutes les interactions des messages reçus par le broker, elle a pour rôle de commander l’état des différentes diodes.

Dans cet exemple, lorsque la platine reçoit le message 9$Led7, elle met la diode 7 à HIGH

Le setup initialise les entrées / sorties et les différents paramètres nécessaires

La première partie de la fonction Loop renvoie toutes les 5 secondes les paramètres des diodes et ceux du potentiomètre en publiant leurs valeurs.

La seconde partie de loop renvoie les valeurs du potentiomètre, seulement quand celui-ci change de valeur.

Et enfin le traitement du bouton poussoir publie la commande de la diode 7 lorsque celui-ci est appuyé. 

Cet article WEB ET ARDUINO est apparu en premier sur PlaisirArduino.

Il est vrai que l'exploitation d'un afficheur LCD 8bit est gourmand en brochages.
Ainsi le but de ce projet est de récupérer deux entrées supplémentaires, en supprimant les boutons PLUS (+) et MOINS (-), en les remplaçant par un POTENTIOMÈTRE.

Le matériel

• Carte Arduino UNO.
• Un afficheur LCD. 16X2.
• Deux (2) LED -Rouge -Vert.
• Trois (3) résistances de charge de 220 ohm.(pour les boutons hors pull_up).
• 1 bouton poussoir.
• Un potentiomètre de 10k ohm pour l'écran LCD.
• Un potentiomètre de 10k ohm pour l'évolution dans le MENU.

LE SCHÉMA DES BRANCHEMENTS.

Étude de projet.

Toutefois grâce aux précédents projets Menu_Thermostat et  Menu_LCD_commande_LED nous avons vu comment piloter un projet à l'aide d'un MENU et d'un clavier à boutons.

En effet,  vous avez sûrement constaté que l'exploitation d'un afficheur LCD (8 ou 4 bits) utilise déjà 6 entrées au minimum.
De surcroît pour naviguer dans le menu il nous faut trois (3) boutons minimum pour l'exploitation du menu PLUS, MOINS et ENTRÉE.
En somme cela nous fait un total de neuf (9) entrées exploitées rien que pour notre interface.
Ce qui par conséquent mise à part les broches zéro (0) et un (1) ne laisse plus qu'une broche d' entrée/sortie exploitable.
Suivant le schéma des projets précédents; la broche treize (13).

Évolution du menu par potentiomètre.

Il faut donc repenser la sélection des fenêtres et la saisie des paramètres dans le menu. Nous utiliserons donc la valeur de retour d'un potentiomètre  pour incrémenter les fenêtres et la valeur de saisie.

Pour commencer  nous faisons l'acquisition du potentiomètre en divisant par cent sa valeur pour obtenir stabilité en butée du potentiomètre et une valeur de 0 à 10.

Ensuite pour la sélection des fenêtres, nous ajustons la mesure traité avec le nombre des repères de fenêtres par une mise en butée de un (1) à six(6).
Enfin pour la saisie nous ajustons la mesure traité par une mise en butée de un (1) à neuf(9) pour la valeur de chaque chiffre de saisie.

Étant donné que la sélection et la saisie n'utilisent pas les mêmes valeurs, il va donc falloir deux variables distinctes pour chacune de ces deux étapes.

La sélection des fenêtres.

Tout d'abord, la sélection des fenêtres s’effectuera suivant le principe du projet Menu_LCD_commande_LED et sur l'incrémentation de la variable de "selection".

La saisie des données de paramètres.

La saisie des valeurs de paramètres s’effectue comme pour le projet cité ci-dessus avec l'incrémentation de la variable "incremente".

Toutefois par la suppression du bouton MOINS "-" il n'est plus possible de sortir du mode de saisi sans avoir validé une valeur.
Afin de ne pas valider une saisi erroné ou non souhaité nous créons une fenêtre pour confirmer la saisi.

Ce qui change dans la structure.

l’aspect le plus important de cet exemple est que la structure du menu restent sensiblement les mêmes que les projets précédents.
Néanmoins nous avons ajouté une fenêtre de retour sur laquelle un appui sur le bouton ENTRÉE permet un retour à la fenêtre de lecture.

Finalement la principale chose qui change est dans le fait que le menu conserve l'état de sélection actuel en fonction de la position du potentiomètre.
Malgré cela, au bout du compte, nous y gagnons deux entrées supplémentaires !

FIN.

En définitif,  vous avez là un outil d’exploitation compatible avec des projets exploitant un écran LCD.
Vous pouvez à présent créer votre propre menu et opérer une saisie de données à transmettre à votre système. Explorez et amusez-vous à l’adapter à vos projets.

En téléchargeant le sketch « MENU_LCD_SAISI_POTAR » vous découvrirez sans difficultés sa construction ainsi que ses différentes fonctions. Ces fonctions ne contiennent aucune particularité que nous n’ayons pas abordé jusque là, voici donc pourquoi nous ne les détaillerons pas.

MERCI.

Plaisir Arduino.fr

Cet article MENU LCD PAR POTENTIOMÈTRE est apparu en premier sur PlaisirArduino.

• De piloter et faire varier l'intensité lumineuse de trois LED en envoyant des données depuis le moniteur série.
• Connaître d'autres méthodes d'exploitation du moniteur série.
• Avoir la possibilité d'ajuster des variables en temps réel dans son projet sans téléverser.

Avant tout, nous allons avoir besoin de:

• Trois diodes électroluminescentes (rouge)
• Trois résistances de 220 ohms.

Nous brancherons nos diodes aux broches PWM repérées  "~" et prévues pour l’exploitation du signal en MLI.

Notre schéma de branchements.

Comment piloter nos équipements ?

En premier lieu, il nous faut sélectionner la LED que l'on souhaite piloter. Dans notre cas la led1, led2 ou led3.
Puis, il lui appliquer une valeur de pilotage allant de 0 à 255.

Par conséquent, cela nous fait deux étapes. C'est-à-dire la sélection et le pilotage.

Afin de réaliser ces deux étapes, plus précisément, nous utilisons des méthodes de la classe Serial. 

De sorte que la sélection des LED soit claire et simple, nous utiliserons des mots clés propre à chacune d'elles. Soit led1, led2 et led3.
Le pilotage étant, lui, sur une base numérique.

De toute évidence, nous avons deux types de données à traiter.
Une première de type alphabétiques String et la suivante de type numériques int "Integer" ou byte "byte".
Par conséquent, cela nous fait deux étapes d'acquisition. La première pour le mot clé et la seconde pour la valeur de pilotage.

Le programme.

Tout d’abord, le moniteur affiche un message d'ouverture et d'informations puis les diodes s'allument en test.  Les déclarations et configurations sont donc faites.

Tout est prêt pour commencer la programmation.

Premièrement:  L'acquisition des données séries.

Commençons par la première donnée utile qui est un mot clé envoyé depuis le moniteur.

Tout d'abord, avec la méthode Serial.available(); nous savons recevoir des données  pour les lire.-
Mais contrairement au tutoriel "Moniteur série", pour les mots clés, nous utilisons la méthode Serial.readString(); afin de lire le buffer sans avoir à recomposer les données de type String.

Deuxièmement:  Le traitement des données séries reçu.

le mot clé.
Ensuite il va falloir reconnaître le mot clé envoyé depuis le moniteur série par rapport aux mots clés prédéfinis dans un tableau de type String.

De la même manière que pour deux variables, il vous suffira, dans une condition d'exécution if(), de réaliser une comparaison de la donnée série par rapport aux mots clés du tableau.

En outre, de la condition exécution l'utilisation d'une boucle for() est utile pour scruter le tableau et comparer la donnée reçue.

Puis une  fois la condition d'exécution vrai, on valide la donnée  et on stoppe la boucle de scan par un break.

Les données de pilotage.

Finalement, nous utilisons la donnée de pilotage  afin de sécuriser les systèmes.
Dans une condition d'exécution, nous contrôlons la donnée reçue pour interdire l'envoi d'une valeur de pilotage, aberrante.

Aussi pour les données de pilotages de type int, nous utilisons la méthode Serial.parseInt(); qui permet de réaliser la lecture des données séries numériques et de les convertir en type int.

Troisièmement: L'exécution du programme.

En ce qui concerne l'exécution programme. Comme nous l'avons vu plus haut -Comment piloter nos équipements ?- il y a deux étapes à réaliser. Afin d'exécuter nos deux modes d'acquisition, nous utilisons switch() et une variable de transition "etape" permettant le passage d'une étape à l'autre.

Quatrièmement: Le paramétrage du moniteur.

Comme vu lors du tutoriel "Moniteur série", il ne faut pas oublier que, les données sont traitées sur la présence ou l'absence de saut de ligne et des retours chariot.
N'oublions donc pas de paramétrer le moniteur en mode « Pas de fin de ligne » .
Nous pouvons à présent tester le programme et envoyer des valeurs.

Grâce à ce programme en exemple, il vous est possible de modifier est de piloter en temps réel sans avoir à continuellement téléverser.
Ainsi, vous interagissez directement avec le système de votre projet. Cela est très utile pour des phases de tests et d'ajustements de projet. Amusez vous à l'intégrer à vos projets.

Vous découvrirez au fur et à mesure de votre progression qu'il existe d'autres méthodes pratiques pour exploiter le moniteur série.

Pour conclure, téléchargez le programme "Moniteur_serie_pilote" amusez vous à l'intégrer à vos projets. Encore une fois, merci de votre lecture.

Plaisir Arduino.

Cet article Comment piloter depuis le moniteur Aduino ? est apparu en premier sur PlaisirArduino.

Principe de fonctionnement

Ce cours a pour objectif d'appréhender le module RFID. Le téléchargement du code source vous permettra de mettre en application la modification de chaque block.

Le module RFID détecte des badges ou des cartes magnétiques à moins de 10 cm. Le passage d’un composant magnétique permet de lire l’identifiant de l'UID de la carte, ainsi que les données enregistrées.

Par principe, chaque carte RFID dispose de son propre UID.

De plus, les cartes ou tags répondent à une fréquence. Les tags, les plus répandus, sont à une fréquence de 13,56Mhz.

Le contenu est divisé en plusieurs secteurs, subdivisé en block et encore en données.

Certaines cartes disposent du block 0 verrouillé, c’est-à-dire non modifiable. Celui-ci contient essentiellement l’identifiant unique "UID". 

Sur le marché, vous pouvez avoir des cartes dont le cluster UID est modifiable. Dans le cadre de ce tutoriel, j’utilise des cartes dont l’UID est modifiable à 13,56Mhz et d’une capacité mémoire de 1 Ko.

Schéma du module RFID RC522

Le montage du module RFID se compose de 7 fils :

• RST/Reset   RST       —>   Pin 9 Arduino
• SPI SS      SDA(SS)  —>    Pin 10 Arduino
• SPI MOSI    MOSI      —>  Pin 11 Arduino
• SPI MISO    MISO     —>    Pin 12 Arduino
• SPI SCK     SCK      —>    Pin 13 Arduino
• GND 
• VCC 3,3V !Attention pas 5V

Lire le contenu d’un module RFID

Maintenant que nous avons vu à quoi ressemble le contenu d’un tag RFID,  passons à la pratique.

Premièrement, ajoutons la librairie MFRC522 

A ce stade, les exemples de la librairie MFRC52  permettent de lire et d’écrire (attention !!! le fait d’approcher votre carte du module en écriture modifie les informations contenues dans le tag et la rend inutilisable) . 

Voyons le résultat de l’exemple « dump info » qui est sans danger.

Exemple dump info:

Cet exemple nous donne toutes les informations de notre carte RFID . On y trouve la capacité mémoire, l’UID, les secteurs, les adresses et les données.

Vous constaterez que les données sont sous formes hexadécimales, c’est un langage  machine qui nous est incompréhensible au premier abord.

Ecrire du contenu dans le module RFID

Pour écrire une information dans le tag, il est nécessaire de définir trois choses : le secteur , l’adresse , et les données.  La modification des données se font par ligne de 16 octets.  

Nous pourrions mettre n’importe quelles données hexadécimales. En ce qui me concerne, j’ai fait le choix de faire correspondre les données, au traditionnel tableau ascii. En effet , ce langage se montre  particulièrement utile pour l’exploitation des informations par la suite.

Lançons l’exemple ReadAndWrite (Attention!! Modification du tag).

L’exécution de ce sketch a pour effet de modifier le secteur 1, le block 4 et les 16 octets hexadécimales. 

En relisant le contenu, les données à cet emplacement, vous avez 0x01, 0x02, 0x03, 0x04,0x05, 0x06, 0x07, 0x08, 0x08, 0x09, 0xff, 0x0b,0x0c, 0x0d, 0x0e, 0x0f

Retour d'expérience

Suite aux deux "programmes exemples" que je vous ai présenté, vous êtes capable de lire et d'écrire sur une carte RFID.

Dans mon expérience de l'utilisation de la carte RFID, j'ai rendu inutilisable une paire de cartes en voulant tester les différents exemples de la librairie.

Ce que j'ai constaté:

• Ne pas modifier le dernier block d'un secteur. Exemple: secteur 1 block 7, secteur 2 block 11 etc...
• Ne pas tester n'importe quel code sans le comprendre .

Cet article RFID avec Arduino est apparu en premier sur PlaisirArduino.

Le but de ce projet est de réaliser un thermostat et de donner quelques notions de gestion de ce type de projet.

LE THERMOSTAT.

Un thermostat est principalement utilisé pour surveiller un environnement thermique ambiant et pour piloter un système de chauffe.

Il se compose principalement d'une sonde de température, d'une sortie de pilotage,d'un clavier de boutons et d'un afficheur.

LE MATÉRIEL.

Un potentiomètre qui simulera la variation de température.
Une LED de couleur verte branchée en sortie qui simulera l'activation de notre système.
Une autre LED de couleur rouge branchée en sortie qui simulera l'activation d'un défaut système.

Ci-dessous la liste du matériel utilisé:

• Une carte Arduino.
• Un afficheur LCD . 16X2.
• Deux (2) LED Rouge et Vert.
• Trois (3) résistances de charge de 220 ohm.
• Trois (3) boutons poussoirs.
• Deux (2) potentiomètres de 10k ohm.

LE SCHÉMA.

NOTRE CAHIER DES CHARGES.

Avoir un menu capable de :

1. Afficher la température actuelle.
2. Indiquer la tendance de la température sur un temps défini.
3. Enregistrer les températures minimum et maximum.
4. Signaler les alarmes de dépassement seuil MINI et MAXI et les remettre à zéro.
5. Modifier les valeurs de paramètres de seuils.
6. Piloter des sorties en fonction du traitement signal.
7. Retourner l'état du système.

ÉTUDE DU PROJET THERMOSTAT.

1 -La température.

Dans un premier temps pour connaître la température ambiante d'un milieu, il nous faut faire l’acquisition d'un signal analogique de la sonde de température.

2 - La tendance.

L'indication de tendance d’évènements fonctionne suivant le principe d'enregistrement cadencé sur un temps défini. Une comparaison dans le temps de la valeur N-1 est faite avec la valeur actuelle. En fonction de l'écart négatif, positif ou nul, on affichera un symbole à  l'écran LCD à l’occurrence une flèche allant vers le bas , le haut ou double pour une valeur stable.

L'affichage de la tendance de la température ambiante permet une surveillance active de notre application. C'est un petit plus à notre thermostat.

3 - Le MINI/MAXI enregistré.

Nous souhaitons également avoir une surveillance des évènements du système. Pour cela, nous intégrons l'enregistrement des mesures de températures maximum et minimum.
L'initialisation des ces valeurs doit également être possible par une commande à l'afficheur LCD.

4 - Les alarmes et leurs signalements.

Les alarmes seront activées lors du franchissement des seuils MINI et MAXI définis en fonction de l'application par l'utilisateur.

Un thermostat dédié à la surveillance d'une application a pour but de signaler et ou de piloter un système pour réaliser une action palliative lors de dysfonctionnements.
Dans notre cas, les alarmes seront signalées par l'allumage de la LED rouge mais également par l'activation d'un pointeur à la fenêtre des mesures MINI et MAXI des températures.

De toute évidence, une alarme qui signale un dysfonctionnement doit par conséquent être maintenue.
L'alarme sera donc acquittée seulement par l'action de l'utilisateur.

5 - La modification des seuils de températures.

Comme cités ci-dessus, nous avons déjà deux seuils connus: le MAXI et le MINI.

En plus des seuils MINI et MAXI, notre système doit être activé et désactivé à des températures définies en fonction de l'application et par l'utilisateur.
D’ailleurs, la température définie pour la mise à l’arrêt d'un système de chauffage est ce que l'on appelle la consigne.

Tout d'abord,  le point de consigne:
C'est un seuil auquel un système doit maintenir une application à un état ou une grandeur physique de fonctionnement. Dans notre cas, c'est une température mais cela peut être un débit, une pression, une position ou une vitesse.

Pour notre projet, nous l’appellerons seuil d' "ARRÊT".

En suite, le seuil de "MARCHE":
A l'inverse du point de consigne, nous avons le seuil MARCHE qui va définir la mise en service du système.

Ils doivent être ajustés et adaptés à volonté suivant la configuration et la demande d'exploitation des projets.
Par conséquent, il va nous falloir la possibilité de modifier ces seuils via l'afficheur L.C.D.

Attention! Les seuils de températures ne doivent pas être croisés.

C'est-à-dire que le seuil d ’ARRÊT doit toujours être supérieur au seuil de MARCHE.

Ce qui implique également que le seuil MAXI doit toujours être supérieur au point de consigne. Mais aussi que le seuil MINI doit toujours être inférieur au seuil de MARCHE et inversement.

Donc, il va nous falloir contrôler les valeurs lors de la saisie pour que ces conditions soient respectées.

6 - Les sorties.

L' activation des sorties est le résultat  du traitement du signal en fonction des seuils définis par le projet.
Dans notre cas, nous avons deux sorties. L'une pour le pilotage du système matérialisé par une LED verte et l'autre pour le signalement d'alarmes par une LED rouge.

Conformément à notre projet, le pilotage de la sortie se fera en mode tout ou rien.

7 - Le retour d'état.

Étant donné que  l'activation des sorties définit l'état de fonctionnement du système, nous en profitons donc pour retourner cet état MARCHE ou ARRÊT par l'affichage d'un message STOP ou RUN à l'afficheur L.C.D. Sont également affichés les états d'alarmes.

Nous avons à présent réuni  toutes les particularités de notre projet pour passer à l'étape de programmation du menu.

Le menu du thermostat.

Plus concrètement, nous allons maintenant étudier le menu qui nous permettra de visualiser la température ambiante ainsi que sa tendance et qui nous permettra de saisir les valeurs de seuils.

Suivant le cahier des charges, notre menu est composé d'une fenêtre de LECTURE pour la visualisation de la température , l'état du système et sa tendance.

Somme toute, le projet est simple. Mais la complexité réside dans la conception du MENU.

Premièrement, il faut penser la structure de notre menu. (Sur une feuille de papier !!)
Voyez ci-dessous la structure qui va nous servir à la construction du programme MENU.

Ci-dessous la structure du menu.

PARAMÉTRAGE ET VISUALISATION DE DONNÉES.

Un appui sur ENTRÉE affiche les fenêtres de SÉLECTIONS de PARAMÈTRES à faire défiler par un appui sur le bouton PLUS(+).
Un second appui sur ENTRÉE permet la SAISIE d'une valeur au paramètre sélectionné.
Ensuite, à la fin du processus de saisie,  un appui sur ENTRÉE valide la saisie et retourne le menu à la fenêtre de LECTURE.

De plus, s'ajoutent deux fenêtres supplémentaires aux paramètres .
Une fenêtre pour la visualisation des températures MINI et MAXI mesurées et la suivante de de remise à zéro des alarmes et des mesures MINI / MAXI.

En outre, un appui sur le bouton MOINS (-) permet un retour à la fenêtre de LECTURE depuis les positions de SÉLECTION.

D'autre part, un retour systématique à la fenêtre de lecture sera effectué si aucune action au clavier n'est détectée pendant un certain temps.

SIGNALISATIONS LCD.

Lors d'une alarme, celle-ci sera signalée par l'allumage de la LED rouge mais également via l'affichage LCD.
Un pointeur d'alarme sous forme d'une flèche sera visible à la fenêtre des enregistrements de températures mini et maxi.

La fenêtre RAZ est prévue pour l’acquittement des alarmes mais aussi pour initialiser les valeurs mini/maxi enregistrées. Ce qui notamment effacera aussi le pointeur d'alarme.

LE PROGRAMME.

Dans le cas d'un MENU L.C.D., chaque action sur un bouton sélectionne un CAS particulier d'affichage.
Notre programme se basera donc essentiellement sur l'application de switch().

LE CLAVIER.

Tout d'abord, le clavier sera géré par une fonction nommée "boutons()" qui retournera les états d'activation de chaque bouton.

L'AFFICHAGE DES FENÊTRES.

Pour commencer, il est  à noter qu'un affichage à répétition de boucle sur un afficheur LCD n'est pas conseillé, surtout si l'on effectue un rafraîchissement d'écran. ("clear()")
Par conséquent, nous avons fait en sorte que l'affichage ne s'active qu'une seule fois.
Pour cela, nous "verrouillons" les fenêtres en effectuant un conditionnement d’exécution des cas par les appuis de boutons.
Une variable nommée "fenêtre" servira de "verrou" mais également de repère pour la sélection de chaque CAS de FENÊTRES.

Aussi, nous faisons le choix d'utiliser une table de données, de type "String", contenant les noms de paramètres afin d'activer un affichage  standard via une fonction. Ce qui permet d'éviter la répétition des lignes de codes similaires.

LA SAISIE DE VALEUR AUX PARAMÈTRES.

Comme nous l'avons évoqué dans l'étude de projet, nous effectuons la mise en butée de la saisie (+/-1) en fonction des valeurs voisines respectives à chaque paramètre.

En revanche, lors d'une saisie, contrairement à l'affichage standard qui n'est activé qu'une seule fois;  une actualisation constante de la valeur est nécessaire.

LES DONNÉES PROGRAMMES.

Afin de manipuler plus facilement les données et leurs affichages respectifs,  nous utilisons deux tableaux.
Ces tableaux contiennent  les valeurs de paramètres de chaque seuil et leurs noms respectifs. Ces données sont organisées en fonction de leur position d'affichage.
C'est-à-dire que la donnée du tableau des valeurs de seuils correspond à la donnée du tableau du nom du seuil.

Par exemple l'index 2 du tableau "nom_parametres[2]" qui contient "MARCHE" correspond à la valeur d'index 2 au tableau "parametres[2]" qui contient 25.(par défaut ).

L'index 0 du tableau "parametres[0]" est utilisé pour le chargement de la valeur signal.

PRÉSENTATION DU MENU THERMOSTAT.

En définitif,  vous avez là un outil d’exploitation compatible avec des projets exploitant un signal analogique avec un écran LCD.
Vous pouvez à présent créer votre propre menu et opérer une saisie de données à transmettre à votre système. Explorez et amusez-vous à l’adapter à vos projets.

En téléchargeant le sketch « MENU_THERMOSTAT_LCD » vous découvrirez sans difficultés sa construction ainsi que ses différentes fonctions. Ces fonctions ne contiennent aucune particularité que nous n’ayons pas abordé jusque là, voici donc pourquoi nous ne les détaillerons pas.

MERCI.

Plaisir Arduino.fr

Cet article Thermostat créé avec un LCD et Arduino. est apparu en premier sur PlaisirArduino.