.. note:: 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 i problemi post-vendita e le 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 [|link_sf_facebook|] e unisciti oggi stesso! 8. Costruire una Web APP con @Anvil ======================================== In questo progetto, scriveremo un'applicazione per comunicare bidirezionalmente tra il Raspberry Pi Pico W e i server di Anvil. La temperatura e l'umidità trasmesse dal Pico W verranno visualizzate in tempo reale su Anvil. Inoltre, potrai inserire messaggi in Anvil da visualizzare sul display LCD1602 I2C del Pico W. |anvil| **1. Componenti necessari** In questo progetto, abbiamo bisogno dei seguenti componenti. È sicuramente conveniente acquistare un kit completo, ecco il link: .. list-table:: :widths: 20 20 20 :header-rows: 1 * - Nome - ELEMENTI IN QUESTO KIT - LINK * - Kit Kepler - 450+ - |link_kepler_kit| Puoi anche acquistarli separatamente dai link qui sotto. .. list-table:: :widths: 5 20 5 20 :header-rows: 1 * - SN - COMPONENTE - QUANTITÀ - LINK * - 1 - :ref:`cpn_pico_w` - 1 - |link_picow_buy| * - 2 - Cavo Micro USB - 1 - * - 3 - :ref:`cpn_breadboard` - 1 - |link_breadboard_buy| * - 4 - :ref:`cpn_wire` - Diverse - |link_wires_buy| * - 5 - :ref:`cpn_i2c_lcd` - 1 - |link_i2clcd1602_buy| * - 6 - :ref:`cpn_dht11` - 1 - |link_dht22_buy| * - 7 - :ref:`cpn_lipo_charger` - 1 - * - 8 - Batteria 18650 - 1 - * - 9 - Supporto Batteria - 1 - **2. Costruisci il Circuito** .. warning:: Assicurati che il modulo caricabatterie Li-po sia collegato come mostrato nello schema. Altrimenti, un cortocircuito potrebbe danneggiare la batteria e il circuito. .. image:: img/wiring/8.anvil_bb.png :width: 800 **3. Crea un'App su Anvil** 1. Vai al |link_anvil| e clicca su **Start building**. .. image:: img/anvil-1.png 2. Accedi o registrati. .. image:: img/anvil-2.png 3. Crea una **New Blank App**. .. image:: img/anvil-3.png 4. Seleziona il **Tema Material Design**. .. image:: img/anvil-4.png 5. Ora sei nella pagina di modifica dell'app. .. image:: img/anvil-5.png 6. Dalla Toolbox, trascina uno strumento **Label** e posizionalo su **Drop title here**. .. image:: img/anvil-6.png 7. Puoi inserire il testo dell'etichetta nel campo **text** sotto il menu **Properties**. .. image:: img/anvil-7.png 8. Allo stesso modo, trascina una **TextBox** sulla destra. .. image:: img/anvil-17.png 9. Trascina un **button** all'estrema destra e puoi modificare il campo **text**. Questo pulsante verrà utilizzato per "inviare" un messaggio al Raspberry Pi Pico W. .. image:: img/anvil-14.png 10. Dopo aver fatto doppio clic sul pulsante **SHOW**, il modulo passerà dalla pagina Design alla pagina del Codice e evidenzierà il codice per il **button**. È necessario inserire il seguente codice, che serve per chiamare una funzione all'interno del server (in questo caso, Pico W). .. code-block:: python anvil.server.call_s("show_message",self.text_box_1.text) * ``show_message`` è la funzione che verrà definita quando Pico W sarà programmato. * ``self.text_box_1.text`` è il messaggio che inserisci nella casella di testo, che verrà inviato come argomento a ``show_message()``. .. image:: img/anvil-15.png 11. Torna alla pagina Design, trascina un'altra etichetta e posizionala sotto gli elementi precedenti. Questa etichetta mostrerà i dati del sensore DHT11 dal Pico W. .. image:: img/anvil-9.png 12. Nella **Toolbox**, clicca su **More Components** e trascina il **Timer** nel modulo. .. image:: img/anvil-12.png 13. Utilizzando le **Properties**, imposta il timer su un intervallo di 3 secondi. Questo tempo è utilizzato per aggiornare la schermata dei dati del sensore. .. image:: img/anvil-18.png 14. Fai doppio clic sullo strumento **Timer** per programmarlo. Utilizza la funzione ``anvil.server.call_s()`` per chiamare la funzione ``publish_data()`` dal server e ottenere il messaggio che deve essere visualizzato nell'app Anvil, assegnalo a ``self.label_2.text`` e il gioco è fatto. .. code-block:: python data=anvil.server.call_s("publish_data") self.label_2.text=data .. image:: img/anvil-16.png 15. A questo punto, la parte che deve essere programmata su Anvil è completata. Puoi vedere maggiori dettagli sull'utilizzo di Anvil su |link_anvil_docs|. **4. Configura Pico W** Per semplificare la connessione del Raspberry Pi Pico W ai servizi Anvil, Anvil utilizza un'immagine firmware personalizzata. Il firmware del Pico W è scritto in MicroPython e appare come un'unità USB con due file (boot.py e main.py). Il Pico W deve essere flashato con il firmware personalizzato e connesso al nostro Wi-Fi prima di iniziare a scrivere il codice. 1. Scarica il firmware personalizzato per Raspberry Pi Pico W |link_anvil_firmware|, si consiglia di scaricare la versione completa. .. image:: img/anvil-p-1.png 2. Tieni premuto il pulsante **BOOTSEL** sul Pico W, quindi collegalo al computer utilizzando un cavo micro USB. Rilascia BOOTSEL una volta che l'unità RPI-RP2 appare sul tuo computer. .. image:: img/anvil-p-2.png :width: 300 3. Trascina e rilascia il file ``.uf2`` che hai appena scaricato al suo interno e Pico W installerà il firmware a questo punto. Una volta completato, Pico W ricaricherà l'unità disco e vedrai i file ``main.py`` e ``boot.py``. .. note:: Prima di reinstallare il firmware, fai un backup di tutti i tuoi file importanti memorizzati su Pico W. .. image:: img/anvil-p-3.png 4. Seleziona "MicroPython(Raspberry Pi Pico).COMXX" come interprete nell'IDE Thonny. Dopo aver cliccato su **View** -> **Files**, vedrai l'unità locale e l'unità disco del Raspberry Pi Pico. .. image:: img/anvil-20.png 5. Fai doppio clic sullo script ``boot.py`` e inserisci il ``SSID`` e la ``PASSWORD`` del tuo WiFi. .. image:: img/anvil-21.png **5. Completa il Codice** #. Carica ``dht.py`` e ``lcd1602.py`` dal percorso ``kepler-kit-main/libs`` nel Raspberry Pi Pico W. .. image:: img/anvil-22.png #. Apri ``main.py`` e sostituisci il codice originale con il seguente codice. .. code-block:: python import anvil.pico import uasyncio as a from machine import Pin,I2C from lcd1602 import LCD lcd = LCD() from dht import DHT11 sensor = DHT11(Pin(16, Pin.OUT, Pin.PULL_DOWN)) UPLINK_KEY = "" @anvil.pico.callable(is_async=True) async def show_message(text): print(f"show anvil's input message: {text}") lcd.clear() lcd.message(text) return @anvil.pico.callable(is_async=True) async def publish_data(): sensor.measure() return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity) # Connect the Anvil Uplink. In MicroPython, this call will block forever. anvil.pico.connect(UPLINK_KEY) # There's lots more you can do with Anvil on your Pico W. # # See https://anvil.works/pico for more information #. Torna all'interfaccia Anvil e tocca l'opzione Uplink nelle impostazioni dell'App Browser. .. image:: img/anvil-p-6.png #. Clicca su **Enable the Anvil Server Uplink for this app** per ottenere la chiave uplink. .. image:: img/anvil-p-7.png #. Copiala e sostituisci ```` in ``main.py``, il che fa sì che il tuo Pico W possa connettersi all'app Anvil che hai creato. .. image:: img/anvil-p-8.png **6. Esegui il Progetto** 1. Clicca sul pulsante **Run current script** o premi F5 per eseguirlo. Dopo la connessione riuscita, vedrai il prompt di successo della connessione nella Shell. .. image:: img/anvil-19.png 2. Esegui Anvil, ora potrai vedere la temperatura e l'umidità visualizzate dall'app Anvil. Se clicchi sul pulsante **SHOW** dopo aver inserito un messaggio nella casella di testo, l'LCD1602 I2C visualizzerà il messaggio che hai inserito. .. note:: Se il carattere che hai inserito non viene visualizzato su LCD1602 I2C, puoi girare il potenziometro sul retro del modulo per aumentare il contrasto. .. image:: img/anvil-r-2.png **7. Pubblica l'APP** Se vuoi condividere la tua app con altri, puoi generare un link di condivisione seguendo il metodo seguente. 1. Torna alla pagina **Anvil** e clicca sull'opzione **publish app** nelle **impostazioni dell'App Browser**. .. image:: img/anvil-s-1.png 2. Nella scheda **Share via private link** vedrai un elenco di link. Chiunque può accedere alla tua app tramite questo link. .. image:: img/anvil-s-2.png 3. Accedi al link e la tua app è pronta per essere utilizzata direttamente. .. image:: img/anvil-s-3.png 4. Puoi anche condividere la tua app tramite il link pubblico, inserisci il tuo nome di dominio personalizzato e clicca su **Apply** in basso per renderlo effettivo. .. image:: img/anvil-s-4.png **Come funziona?** Ecco il framework di base di ``main.py``, che costituisce la base della comunicazione tra Pico W e l'APP Anvil. .. code-block:: python import anvil.pico import uasyncio as a UPLINK_KEY = "" # Connect the Anvil Uplink. In MicroPython, this call will block forever. anvil.pico.connect(UPLINK_KEY) # There's lots more you can do with Anvil on your Pico W. # # See https://anvil.works/pico for more information Configura dht11 e lcd1602. I dettagli sull'uso di questi due componenti possono essere trovati in :ref:`py_dht11` e :ref:`py_lcd`. .. code-block:: python :emphasize-lines: 5,6 from machine import Pin,I2C from lcd1602 import LCD lcd = LCD() from dht import DHT11 sensor = DHT11(Pin(16, Pin.OUT, Pin.PULL_DOWN)) Nel codice di Anvil, abbiamo chiamato due funzioni interne del server (Pico W). La prima è ``show_message()``, la cui funzione è far visualizzare all'LCD il messaggio digitato su Anvil. Il decoratore ``@anvil.pico.callable(is_async=True)`` rende questa funzione chiamabile da Anvil. .. code-block:: python @anvil.pico.callable(is_async=True) async def show_message(text): print(f"show anvil's input message: {text}") lcd.clear() lcd.message(text) return Successivamente c'è ``publish_data()``, che ha la funzione di ottenere il valore di dht11 e restituire la temperatura e l'umidità ad Anvil. Anche in questo caso, utilizza il decoratore ``@anvil.pico.callable(is_async=True)`` per renderlo chiamabile da Avil. .. code-block:: python @anvil.pico.callable(is_async=True) async def publish_data(): sensor.measure() return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity)