1- Objectifs
Découvrir l'environnement de programmation de l'ESP8266 en tant qu'objet connecté.
Le principe général de cette activité est de commander 2 leds sur une maquette à l'aide de son smartphone :
- la maquette contient donc une carte électronique constituée de l'ESP8266 qui est un microcontrôleur muni d'une carte wifi,
- l'éditeur python Thonny est utilisé en tant qu'éditeur de programme et de son téléversement dans l'ESP8266.
Le schéma suivant synthétise l'organisation :
2- Connexion de la carte ESP à la borne wifi de la salle
Lancer Thonny et copier/coller le programme suivant :
#-------appel des bibliothèques
try:
import usocket as socket
except:
import socket
from machine import Pin
from time import sleep
import network
import esp
esp.osdebug(None)
import gc
gc.collect()
#--------connexion wifi
ssid = '*****'
password = '*****'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
print('Attente connexion')
while station.isconnected() == False:
print('.', end = " ")
sleep(1)
print('Connexion réussie')
#affichage des paramètres de connexion de l'ESP
print ("ESP32 : Adresse IP, masque, passerelle et DNS", station.ifconfig())
def web_page():
html = """<html>
<head><meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
print('Content = %s' % str(request))
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
- Remplacer les paramètres de la borne wifi donnés par l'enseignant et lancer le programme.
a- Quelle est l'adresse de votre carte ESP8266 ? (sur le groupe de 4 adresses IP, c'est la première affichée dans la console)
- Ouvrir votre navigateur sur votre ordinateur et saisir dans la barre d'adresse, l'adresse IP de votre ESP.
b- Quelle est l'adresse IP de Viala ?
c- Changer le message qui apparait dans votre navigateur :
Bienvenue sur votre carte ESP8266
3- Brochage de l'ESP8266
L'alimentation par Vin est déjà réalisée en 5V. La carte ESP8266 possède un convertisseur à 3,3V.
Toutes les PIN sont en 3,3V impératif.
| ATTENTION : aucun changement de câblage sans avoir débranché le câble de programmation et le câble d'alimentation |
4- Piloter 2 leds via connexion Wifi - interface simplifiée
Les leds oranges led1 et led2 sont respectivement branchées sur les pin 13 et 15.
Copier/coller le programme suivant dans Thonny en paramétrant le wifi (lignes 17 et 18).
#-------appel des bibliothèques
try:
import usocket as socket
except:
import socket
from machine import Pin
from time import sleep
import network
import esp
esp.osdebug(None)
import gc
gc.collect()
#--------définition des ports de l'ESP
led1 = Pin(13, Pin.OUT)
led2 = Pin(15, Pin.OUT)
#--------connexion wifi
ssid = '***'
password = '***'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
print('Attente connexion')
while station.isconnected() == False:
print('.', end = " ")
sleep(1)
print('Connexion réussie')
#affichage des paramètres de connexion de l'ESP
print ("ESP32 : Adresse IP, masque, passerelle et DNS", station.ifconfig())
def web_page():
html = """<html>
<head><meta name="viewport" charset="utf-8"
content="width=device-width, initial-scale=1">
<title>ESP8266 Serveur Web</title>
<style>
p { font-size: 36px; }
</style>
</head>
<body>
<h1>Commande LED</h1>
<p><a href="/?led=on">Allumer LED</a></p>
<P><a href="/?led=off">Eteindre LED</a></p>
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Connecté avec le client %s' % str(addr))
#--Attente requête du client
request = conn.recv(1024)
requete= str(request)
conn.settimeout(None)
#--Analyse de la requete
if "GET /?led=on" in requete:
print("LED1 ON")
led1.value(1)
if "GET /?led=off" in requete:
print("LED1 OFF")
led1.value(0)
#--Envoie de la réponse au client
print("Envoi reponse du serveur : code HTML a afficher")
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection close\n\n')
conn.sendall(response)
conn.close()
- Dans le navigateur de votre ordinateur, tester le fonctionnement du programme afin d'allumer et d'éteindre la led1 :
- Où s'affichent les informations du print() de la ligne 60 ?
- À quoi sert l'instruction de la ligne 61 ?
- Modifier le programme pour permettre de commander la led1 et la led2 indifféremment.
5- Amélioration de l'interface
L'idée est d'utiliser les feuilles de style web, généralement enregistrées dans des fichiers CSS.
Première approche : 2 boutons pour 1 led
Remplacer dans votre programme précédent les instructions de style css :
<style>
html {
font-family: Helvetica;
margin: 0px auto;
text-align: center;}
h1 {
color: #0F3376;
padding: 2vh;}
p {font-size: 24px;
}
.button {
background-color: #4CAF50; /* Vert */
border: none;
border-radius: 6px; /* Angle arrondi */
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 30px; }
.buttonOff { background-color: #f44336; /* Rouge */ }
</style>
Remplacer aussi les instructions d'affichage des boutons :
<p><a href="/?led=on"><button class="button">Allumer LED</button></a></p>
<p><a href="/?led=off"><button class="button buttonOff">Eteindre LED</button></a></p>Tester alors votre programme.
Quel est l'inconvénient d'avoir 2 boutons pour commander 1 led ?
Deuxième approche : 1 seul bouton pour 1 led
L'idée est de changer la couleur du bouton afin d'indiquer l'état de la led.
En effet, pour un objet connecté, l'utilisateur n'a pas forcément la vue sur l'objet et ne sait donc pas s'il fonctionne ou pas.
Tester le programme suivant et modifier le, afin de commander les 2 leds indifféremment.
Attention : la page web propulsée est réalisée avec une fonction avec passage de paramètres !
#-------appel des bibliothèques
try:
import usocket as socket
except:
import socket
from machine import Pin
from time import sleep
import network
import esp
esp.osdebug(None)
import gc
gc.collect()
#--------définition des ports de l'ESP
led1 = Pin(13, Pin.OUT)
led2 = Pin(15, Pin.OUT)
led1Stat=0
#--------connexion wifi
ssid = '***'
password = '****'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
print('Attente connexion')
while station.isconnected() == False:
print('.', end = " ")
sleep(1)
print('Connexion réussie')
#affichage des paramètres de connexion de l'ESP
print ("ESP32 : Adresse IP, masque, passerelle et DNS", station.ifconfig())
def web_page(led1stat):
if led1stat:
btLed1="""<p><a href="/?led1=off"><button class="button">Eteindre LED</button></a></p>"""
else:
btLed1="""<p><a href="/?led1=on"><button class="button buttonOff">Allumer LED</button></a></p>"""
html = """<html>
<head><meta name="viewport" charset="utf-8"
content="width=device-width, initial-scale=1">
<title>ESP8266 Serveur Web</title>
<style>
html {
font-family: Helvetica;
display: inline-block;
margin: 0px auto;
text-align: center;}
body { margin-top: 50px;}
h1 {
color: #444444;
margin: 50px auto 30px;}
h3 {
color: #444444;
margin-bottom: 50px;}
.button {
background-color: #4CAF50; /* Vert */
border: none;
border-radius: 6px; /* Angle arrondi */
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 30px; }
.buttonOff { background-color: #f44336; /* Rouge */ }
p {
font-size: 14px;
color: #888;
margin-bottom: 10px;}
</style>
</head>
<body>
<h1>ESP8266 - objet connecté</h1>
<h3>Commande de 2 leds</h3>
"""+btLed1+"""
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Connecté avec le client %s' % str(addr))
#--Attente requête du client
request = conn.recv(1024)
requete= str(request)
conn.settimeout(None)
#--Analyse de la requete
if "GET /?led1=on" in requete:
print("LED1 ON")
led1.value(1)
led1Stat=1
if "GET /?led1=off" in requete:
print("LED1 OFF")
led1.value(0)
led1Stat=0
#--Envoie de la réponse au client
print("Envoi reponse du serveur : code HTML a afficher")
response = web_page(led1Stat)
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Lorsque toute l'activité sur la commande de deux leds est finie, vous déposez votre code ci-dessous