Tutoriel sur le serveur Web Arduino (Partie 3 – Bien choisir son serveur d impression
Sommaire
Créer le serveur Web de base
Le serveur Web de base vous permettra de vous connecter à Arduino en utilisant votre navigateur préféré. Si la connexion réussit, le programme actuel sera affiché.
pression barométrique, température et humidité lues à partir du capteur BME280. Le navigateur s'actualise toutes les 5 secondes.
Si tout fonctionne bien, voici ce que vous devriez voir dans le navigateur Web lorsque vous vous connectez à Arduino.
Nous nous connectons à l'Arduino en utilisant l'adresse IP que vous avez attribuée dans l'esquisse. Ce serait le réseau privé de votre région. Vous ne pourrez pas accéder
l'Arduino à partir d'Internet. Pour autoriser l'accès à votre Arduino à partir d'Internet, vous devez activer la redirection de port sur votre routeur.
Nous utilisons la bibliothèque Arduino Ethernet pour communiquer avec le contrôleur Ethernet W5100. Il communique avec le contrôleur Ethernet via le bus SPI.
La carte SD qui se trouve sur la carte utilise également le même bus SPI, nous devons donc la désactiver pour qu’elle ne se heurte pas au contrôleur Ethernet. Plus tard
Dans ce tutoriel, nous allons utiliser la carte SD, nous allons donc modifier le code pour permettre l'accès à la carte SD.
Vous pouvez soit couper et coller le code ci-dessous, soit télécharger le fichier de croquis.
1 |
#comprendre Câble.h>// utilisé pour communiquer via le bus I2C // Créer un objet BME280_I2C // Ici nous avons configuré le serveur web. Nous devons fournir une adresse mac. vide installer() // désactive la carte SD en commutant la broche 4 sur haute vide boucle() { if (c == ' n' && currentLineIsBlank) ") ") // donne le temps au navigateur Web pour recevoir les données |
Comment ça marche
Pour que l’Arduino puisse communiquer avec le contrôleur Ethernet, il faut inclure 3 bibliothèques. La première bibliothèque est Wire.h, utilisée pour les communications I2C. Le second, SPI.h, doit permettre à l’interface SPI de
parler à la puce ethernet. Le troisième est Ethernet.h, qui sert d’interface au côté Ethernet de la puce du contrôleur.
Ensuite, nous incluons la bibliothèque BME280_I2C avant de déclarer un objet du BME280_I2C. Nous l'utilisons avec la bibliothèque Wire.h car cela fournit un support pour les communications I2C avec le BME280. Cette volonté
nous permettent d'obtenir la température et l'humidité de la pression barométrique.
La dernière étape consiste à créer le serveur qui écoute sur le port 80. Nous devons définir la Adresse Mac et adresse IP de l'interface ethernet.
Dans la fonction de configuration, nous devons désactiver la carte SD car elle utilise également SPI et nous ne voulons pas qu’elle se heurte au contrôleur Ethernet.
À la ligne 45, nous commençons la réponse Web envoyée au navigateur Web. 200 OK est un code de réponse HTTP et dans ce cas, 200, ce qui signifie que la demande est OK. À la ligne 46, nous disons au navigateur que le
Le type de contenu de la réponse est text / html.
Nous avons utilisé plusieurs codes HTML dans l'esquisse. Sur la ligne 57, vous pouvez voir. C'est le code html pour un espace. Nous utilisons cela pour placer un espace blanc entre la température et le code html en degrés celsius.
Le code suivant est ℃ qui est le code html de ℃.
le
est utilisé pour générer un saut de ligne (retour chariot) de manière à ce qu'il y ait une ligne entre chaque sortie.
Pour afficher la température en fahrenheit, nous devons changer la méthode getTemperature_C () de bme280_I2C en getTemperature_F (). Nous devrons également changer le code html & amp # 8451; à & amp # 8457; qui affichera ℉.
Pour plus de détails sur les codes html, allez à la ressources boîte à outils et consultez les tables de codes.
Sortie Web HTML
La page Web doit apparaître comme ci-dessus. Le code html est présenté ci-dessous. Vous pouvez visualiser le code html dans votre navigateur en cliquant avec le bouton droit de la souris sur la page Web et en sélectionnant
Afficher le code source de la page (Chrome, Firefox, Safari) ou Afficher le code source (Internet Explorer)
Et après
Dans la section suivante, nous allons améliorer l'apparence de la page Web à l'aide de CSS et l'implémenter à l'aide de la carte SD.
Commentaires
Laisser un commentaire