Nota

Ciao, benvenuto nella Community di appassionati di SunFounder Raspberry Pi, Arduino e ESP32 su Facebook! Approfondisci le tue conoscenze su Raspberry Pi, Arduino e ESP32 insieme ad altri appassionati.

Perché unirti?

  • Supporto Esperto: Risolvi problemi post-vendita e sfide tecniche con l’aiuto della nostra community e del nostro team.

  • Impara e Condividi: Scambia consigli e tutorial per migliorare le tue competenze.

  • Anteprime Esclusive: Ottieni accesso anticipato agli annunci di nuovi prodotti e alle anteprime.

  • Sconti Speciali: Approfitta di sconti esclusivi sui nostri prodotti più recenti.

  • Promozioni Festive e Giveaway: Partecipa a promozioni festive e concorsi a premi.

👉 Sei pronto a esplorare e creare con noi? Clicca su [Qui] e unisciti oggi stesso!

7. Configurazione di un Web Server

In questo articolo, imparerai come trasformare Pico W in un web server che ti permette di operare il circuito e ottenere letture dai sensori attraverso un browser.

setup_web

1. Componenti necessari

In questo progetto, abbiamo bisogno dei seguenti componenti.

È sicuramente conveniente acquistare un kit completo, ecco il link:

Nome

ELEMENTI IN QUESTO KIT

LINK

Kit Kepler

450+

Kepler Ultimate Kit

Puoi anche acquistarli separatamente dai link qui sotto.

SN

COMPONENTE

QUANTITÀ

LINK

1

Introduzione al Pico W

1

ACQUISTA

2

Cavo Micro USB

1

3

Breadboard

1

ACQUISTA

4

Cavi Jumper

Diverse

ACQUISTA

5

Resistenza

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

ACQUISTA

6

LED RGB

1

ACQUISTA

7

Termistore

1

ACQUISTA

8

Modulo Caricatore Li-po

1

9

Batteria 18650

1

10

Supporto Batteria

1

2. Costruisci il Circuito

Avvertimento

Assicurati che il modulo caricabatterie Li-po sia collegato come mostrato nello schema. Altrimenti, un cortocircuito potrebbe danneggiare la batteria e il circuito.

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

3. Esegui il Codice

  1. Apri il file 7_web_page.py nel percorso kepler-kit-main/iot.

  2. Clicca sul pulsante Esegui script corrente o premi F5 per eseguirlo. Dopo una connessione riuscita, vedrai l’IP del Pico W.

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

    Nota

    Prima di eseguire il codice, assicurati di avere gli script do_connect.py e secrets.py nel tuo Pico W, in caso contrario fai riferimento a 1. Accesso alla Rete per crearli.

  3. Inserisci l’indirizzo IP del Pico W nel tuo browser per accedere alla pagina web creata per questo progetto. Clicca su qualsiasi pulsante per cambiare il colore dei LED RGB e aggiornare la temperatura e l’umidità.

  4. Se desideri che questo script si avvii automaticamente, puoi salvarlo nel Raspberry Pi Pico W come main.py.

Come funziona?

La pagina web che stai visitando è effettivamente ospitata su un server, e il socket sul server invierà la pagina web quando la visitiamo. Un socket è il modo in cui un server può ascoltare un client che vuole connettersi ad esso.

In questo progetto, Pico W è il tuo server, e il tuo computer sta accedendo alla pagina web ospitata su Pico W tramite un browser.

Per prima cosa creiamo un socket, che richiede un indirizzo IP e port. La connessione di rete e il modo per ottenere l’IP sono descritti in 1. Accesso alla Rete. Per la porta, usiamo la 80. Dopo aver configurato il socket, lo restituiamo e lo utilizziamo per il passo successivo.

socket library - Python Docs

import socket

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

Successivamente, configura il tuo servizio web dove il socket che hai configurato in precedenza sarà utilizzato. Il seguente codice permetterà al tuo Pico W di ricevere richieste di accesso dal tuo browser.

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

Successivamente, hai bisogno di una pagina html da inviare al visitatore. Questo esempio memorizza una semplice pagina html sotto forma di caratteri nella variabile html.

Nota

Se vuoi essere in grado di scrivere il tuo html, puoi ottenere aiuto su 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

Invia la pagina html al visitatore.

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

La pagina può essere accessibile tramite il tuo browser se combini le parti sopra. Se vuoi vedere l’effetto, esegui il codice qui sotto con 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):
    # Open a 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()

Quando esegui il codice sopra, vedrai che visualizza solo una pagina web, non ti permette di controllare i LED RGB, né mostra le letture dei sensori. Il servizio web ha bisogno di ulteriori perfezionamenti.

La prima cosa che dobbiamo sapere è quali informazioni il server riceve quando il browser accede alla pagina web. Pertanto, modifica leggermente serve() per stampare 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()

Riesegui lo script e la Shell stamperà il seguente messaggio quando premiamo un tasto sulla pagina 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'

Sono troppo lunghi da leggere!!!

Ma tutto ciò di cui abbiamo davvero bisogno è il piccolo pezzo di informazione davanti a /red?, /blue?. Ci dice quale pulsante è stato premuto. Quindi abbiamo perfezionato serve() un po” per estrarre le informazioni sul tasto premuto.

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()

Riesegui il programma e la Shell stamperà il seguente messaggio quando premiamo un tasto sulla pagina web.

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

Poi, dobbiamo solo cambiare il colore del LED RGB in base al valore di 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()

L’ultima cosa è visualizzare il valore del termistore sulla pagina web (vedi 2.13 Termometro per i dettagli sull’uso del termistore). Questa parte è in realtà realizzata modificando il testo sull’html. Impostiamo i parametri nella funzione webpage(value) e cambiamo semplicemente i parametri in ingresso per modificare il numero visualizzato sulla pagina 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()