Note

Bonjour, bienvenue dans la communauté SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasts sur Facebook ! Plongez plus profondément dans l’univers du Raspberry Pi, de l’Arduino et de l’ESP32 avec d’autres passionnés.

Pourquoi rejoindre ?

  • Support d’experts : Résolvez les problèmes après-vente et les défis techniques avec l’aide de notre communauté et de notre équipe.

  • Apprenez et partagez : Échangez des astuces et des tutoriels pour améliorer vos compétences.

  • Aperçus exclusifs : Profitez d’un accès anticipé aux annonces de nouveaux produits et de prévisualisations exclusives.

  • Réductions spéciales : Bénéficiez de remises exclusives sur nos derniers produits.

  • Promotions et concours festifs : Participez à des concours et promotions durant les fêtes.

👉 Prêt à explorer et créer avec nous ? Cliquez sur [ici] et rejoignez-nous dès aujourd’hui !

7. Configurer un serveur Web

Dans cet article, vous apprendrez à transformer votre Pico W en un serveur web permettant de contrôler le circuit et de récupérer les données du capteur via un navigateur.

setup_web

1. Composants nécessaires

Dans ce projet, nous aurons besoin des composants suivants.

Il est très pratique d’acheter un kit complet, voici le lien :

Nom

ÉLÉMENTS DANS CE KIT

LIEN

Kit Kepler

450+

Kepler Ultimate Kit

Vous pouvez également les acheter séparément via les liens ci-dessous.

SN

COMPOSANT

QUANTITÉ

LIEN

1

Découvrir le Pico W

1

ACHETER

2

Câble Micro USB

1

3

Plaque d’essai (Breadboard)

1

ACHETER

4

Fils de connexion (Jumper Wires)

Plusieurs

ACHETER

5

Résistance

4(1-330Ω, 2-220Ω, 1-10KΩ)

ACHETER

6

LED RGB

1

ACHETER

7

Thermistance

1

ACHETER

8

Module de chargeur Li-po

1

9

Batterie 18650

1

10

Porte-batterie

1

2. Monter le circuit

Avertissement

Assurez-vous que votre module de charge Li-po est connecté comme indiqué sur le schéma. Sinon, un court-circuit pourrait endommager votre batterie et votre circuit.

../../_images/7.web_page_bb.png

3. Lancer le code

  1. Ouvrez le fichier 7_web_page.py situé dans le dossier kepler-kit-main/iot.

  2. Cliquez sur le bouton Exécuter le script actuel ou appuyez sur F5 pour le lancer. Après une connexion réussie, vous verrez l’IP de Pico W.

    ../../_images/7_web_server.png

    Note

    Avant de lancer le code, assurez-vous que les scripts do_connect.py et secrets.py sont présents sur votre Pico W. Si ce n’est pas le cas, veuillez vous référer à 1. Accès au Réseau pour les créer.

  3. Entrez l’adresse IP du Pico W dans votre navigateur pour accéder à la page web créée pour ce projet. Cliquez sur n’importe quel bouton pour changer la couleur des LED RGB et actualiser la température et l’humidité.

  4. Si vous souhaitez que ce script démarre automatiquement, vous pouvez le sauvegarder sur le Raspberry Pi Pico W en tant que main.py.

Comment ça marche ?

La page web à laquelle vous accédez est en réalité hébergée sur un serveur, et le socket sur ce serveur envoie la page web lorsqu’on la visite. Un socket permet à un serveur d’écouter un client souhaitant se connecter.

Dans ce projet, le Pico W est votre serveur, et votre ordinateur accède à la page web hébergée sur le Pico W via un navigateur.

Tout d’abord, nous créons un socket, qui nécessite une adresse IP et un port. La connexion réseau et la méthode pour obtenir l’IP sont expliquées dans 1. Accès au Réseau. Pour le port, nous utilisons le port 80. Après avoir configuré le socket, retournez-le et utilisez-le pour l’étape suivante.

socket library - Python Docs

import socket

def open_socket(ip):
    # Ouvrir un socket
    address = (ip, 80)
    connection = socket.socket()
    connection.bind(address)
    connection.listen(1)
    print(connection)
    return(connection)

Ensuite, configurez votre service web où le socket que vous avez créé sera utilisé. Le code suivant permet à votre Pico W de recevoir des requêtes d’accès provenant de votre navigateur.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        client.close()

Ensuite, vous avez besoin d’une page HTML à envoyer au visiteur. Cet exemple stocke une simple page HTML sous forme de caractères dans la variable html.

Note

Si vous souhaitez écrire votre propre html, vous pouvez obtenir de l’aide sur HTML.COM.

def webpage(value):
    html = f"""
            <!DOCTYPE html>
            <html>
            <body>
            <form action="./red">
            <input type="submit" value="red " />
            </form>
            <form action="./green">
            <input type="submit" value="green" />
            </form>
            <form action="./blue">
            <input type="submit" value="blue" />
            </form>
            <form action="./off">
            <input type="submit" value="off" />
            </form>
            <p>Temperature is {value} degrees Celsius</p>
            </body>
            </html>
            """
    return html

Envoyer la page html au visiteur.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        html=webpage(0)
        client.send(html)
        client.close()

La page peut être consultée via votre navigateur si vous combinez les parties ci-dessus. Pour voir le résultat, exécutez le code ci-dessous avec Thonny.

import machine
import socket

from secrets import *
from do_connect import *

def webpage(value):
    html = f"""
            <!DOCTYPE html>
            <html>
            <body>
            <form action="./red">
            <input type="submit" value="red " />
            </form>
            <form action="./green">
            <input type="submit" value="green" />
            </form>
            <form action="./blue">
            <input type="submit" value="blue" />
            </form>
            <form action="./off">
            <input type="submit" value="off" />
            </form>
            <p>Temperature is {value} degrees Celsius</p>
            </body>
            </html>
            """
    return html

def open_socket(ip):
    # Ouvrir un socket
    address = (ip, 80)
    connection = socket.socket()
    connection.bind(address)
    connection.listen(1)
    print(connection)
    return(connection)

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        html=webpage(0)
        client.send(html)
        client.close()

try:
    ip=do_connect()
    if ip is not None:
        connection=open_socket(ip)
        serve(connection)
except KeyboardInterrupt:
    machine.reset()

Lorsque vous exécutez le code ci-dessus, vous verrez qu’il affiche uniquement une page web, sans permettre de contrôler les LED RGB, ni de montrer les lectures des capteurs. Le service web doit être encore amélioré.

La première chose à savoir est ce que le serveur reçoit comme information lorsque le navigateur accède à la page web. Pour cela, modifiez légèrement serve() pour imprimer request.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        print(request)
        html=webpage(0)
        client.send(html)
        client.close()

Re-exécutez le script et la console imprimera le message suivant lorsque nous appuyons sur un bouton de la page web.

b'GET /red? HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /blue? HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.18.162\r\nConnection: keep-alive.......q=0.5\r\n\r\n'

C’est trop long pour être lu !!!

Mais tout ce dont nous avons vraiment besoin est le petit morceau d’information devant /red?, /blue?. Cela nous indique quel bouton a été pressé. Nous avons donc raffiné serve() pour extraire l’information de la touche.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass
        print(request)
        html=webpage(0)
        client.send(html)
        client.close()

Re-exécutez le programme et la console affichera le message suivant lorsque nous appuyons sur une touche de la page web.

/red?
/favicon.ico
/blue?
/favicon.ico
/off?
/favicon.ico

Ensuite, nous devons juste changer la couleur de la LED RGB en fonction de la valeur de request.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass

        print(request)

        if request == '/off?':
            red.low()
            green.low()
            blue.low()
        elif request == '/red?':
            red.high()
            green.low()
            blue.low()
        elif request == '/green?':
            red.low()
            green.high()
            blue.low()
        elif request == '/blue?':
            red.low()
            green.low()
            blue.high()

        html=webpage(0)
        client.send(html)
        client.close()

La dernière chose est d’afficher la valeur du thermistor sur la page web (voir 2.13 Thermomètre pour plus de détails sur l’utilisation du thermistor). Cette partie se fait en modifiant le texte sur la page html. Nous définissons les paramètres dans la fonction webpage(value) et il suffit de changer les paramètres pour modifier le nombre affiché sur la page web.

def serve(connection):
    while True:
        client = connection.accept()[0]
        request = client.recv(1024)
        request = str(request)
        try:
            request = request.split()[1]
        except IndexError:
            pass

        #print(request)

        if request == '/off?':
            red.low()
            green.low()
            blue.low()
        elif request == '/red?':
            red.high()
            green.low()
            blue.low()
        elif request == '/green?':
            red.low()
            green.high()
            blue.low()
        elif request == '/blue?':
            red.low()
            green.low()
            blue.high()

        value='%.2f'%temperature()
        html=webpage(value)
        client.send(html)
        client.close()