8. Web-App mit @Anvil erstellen

In diesem Projekt ermöglichen wir eine bidirektionale Kommunikation zwischen dem Raspberry Pi Pico W und den Anvil-Servern. Die vom Pico W gesendeten Temperatur- und Feuchtigkeitsdaten werden in Echtzeit in Anvil angezeigt. Darüber hinaus können Sie Nachrichten in Anvil eingeben, die auf dem I2C LCD1602 des Pico W dargestellt werden.

anvil

1. Benötigte Komponenten

Für dieses Projekt benötigen wir folgende Bauteile.

Ein vollständiges Kit ist definitiv praktisch. Hier ist der entsprechende Link:

Bezeichnung

INHALT DES KITS

LINK

Kepler Kit

450+

Kepler Kit

Sie können die Komponenten natürlich auch einzeln über die untenstehenden Links erwerben.

SN

KOMPONENTE

ANZAHL

LINK

1

Raspberry Pi Pico W

1

BUY

2

Micro-USB-Kabel

1

3

Steckbrett

1

BUY

4

Jumperkabel

Mehrere

BUY

5

I2C LCD1602

1

BUY

6

DHT11 Temperatur- und Feuchtigkeitssensor

1

BUY

7

Li-Po-Lademodul

1

8

18650 Batterie

1

9

Batteriehalter

1

2. Schaltung aufbauen

Warnung

Achten Sie darauf, dass Ihr Li-Po-Lademodul gemäß dem Schaltplan angeschlossen ist. Andernfalls besteht die Gefahr eines Kurzschlusses, der Ihre Batterie und die Schaltung beschädigen könnte.

../_images/8.anvil_bb.png

3. Eine Anvil-App erstellen

  1. Besuchen Sie Anvil website und klicken Sie auf Jetzt entwickeln.

    ../_images/anvil-1.png

  2. Melden Sie sich an oder registrieren Sie sich.

    ../_images/anvil-2.png

  3. Erstellen Sie eine Neue leere App.

    ../_images/anvil-3.png

  4. Wählen Sie das Material Design Theme aus.

    ../_images/anvil-4.png

  5. Nun befinden Sie sich auf der App-Bearbeitungsseite.

    ../_images/anvil-5.png

  6. Ziehen Sie ein Label-Werkzeug aus der Toolbox und platzieren Sie es auf Titel hier ablegen.

    ../_images/anvil-6.png

  7. Den Label-Text können Sie im Text-Feld unter dem Menüpunkt Eigenschaften eingeben.

    ../_images/anvil-7.png

  8. Ebenso ziehen Sie ein Textfeld nach rechts.

    ../_images/anvil-17.png

  9. Ziehen Sie einen Button ganz nach rechts und passen Sie das Text-Feld an. Dieser Button wird zum „Senden“ einer Nachricht an den Raspberry Pi Pico W verwendet.

    ../_images/anvil-14.png

  10. Nach einem Doppelklick auf den SHOW-Button wechselt das Formular von der Design-Seite zur Code-Seite und hebt den Code für den Button hervor. Fügen Sie den folgenden Code ein, um eine Funktion auf dem Server (in diesem Fall Pico W) aufzurufen.

    anvil.server.call_s("show_message",self.text_box_1.text)

    • show_message ist die Funktion, die programmiert wird, wenn der Pico W programmiert wird.

    • self.text_box_1.text ist die Nachricht, die Sie im Textfeld eingeben und die an show_message() weitergeleitet wird.

    ../_images/anvil-15.png

  11. Wechseln Sie zurück zur Design-Seite, ziehen Sie ein weiteres Label und platzieren Sie es unter den vorherigen Elementen. Dieses Label wird die DHT11-Sensordaten vom Pico W anzeigen.

    ../_images/anvil-9.png

  12. Klicken Sie in der Toolbox auf Weitere Komponenten und ziehen Sie den Timer in das Formular.

    ../_images/anvil-12.png

  13. Setzen Sie den Timer im Menü Eigenschaften auf ein Intervall von 3 Sekunden. Diese Zeit wird verwendet, um den Bildschirm für unsere Sensordaten zu aktualisieren.

    ../_images/anvil-18.png

  14. Doppelklicken Sie auf das Timer-Werkzeug, um es zu programmieren. Verwenden Sie die Funktion anvil.server.call_s() um die Funktion publish_data() vom Server aufzurufen und die anzuzeigende Nachricht in der Anvil-App abzurufen. Weisen Sie diese der Variablen self.label_2.text zu und Sie sind fertig.

    data=anvil.server.call_s("publish_data")
self.label_2.text=data
    ../_images/anvil-16.png

  15. Damit ist der Anvil-Programmteil abgeschlossen. Weitere Details zur Verwendung von Anvil finden Sie unter Anvil Docs.

4. Pico W einrichten

Um die Verbindung des Raspberry Pi Pico W zu den Anvil-Diensten zu vereinfachen, verwendet Anvil ein spezielles Firmware-Image. Die Firmware des Pico W ist in MicroPython geschrieben und erscheint als USB-Laufwerk mit zwei Dateien (boot.py und main.py). Vor dem Schreiben des Codes muss der Pico W mit der angepassten Firmware geflasht und mit unserem WLAN verbunden werden.

  1. Laden Sie die spezielle Firmware für den Raspberry Pi Pico W firmware from Anvil herunter. Es wird empfohlen, die vollständige Version herunterzuladen.

    ../_images/anvil-p-1.png

  2. Halten Sie die BOOTSEL-Taste am Pico W gedrückt und schließen Sie das Gerät über ein Micro-USB-Kabel an Ihren Computer an. Lassen Sie die BOOTSEL-Taste los, sobald das Laufwerk RPI-RP2 auf Ihrem Computer erscheint.

    ../_images/anvil-p-2.png

  3. Ziehen Sie die gerade heruntergeladene .uf2-Datei hinein. Der Pico W wird nun die Firmware installieren. Sobald der Vorgang abgeschlossen ist, wird das Laufwerk neu geladen und Sie sehen die Dateien main.py und boot.py.

    Bemerkung

    Erstellen Sie vor dem erneuten Flashen der Firmware eine Sicherung aller wichtigen Dateien auf dem Pico W.

    ../_images/anvil-p-3.png

  4. Wählen Sie in der Thonny IDE „MicroPython(Raspberry Pi Pico).COMXX“ als Interpreter aus. Nachdem Sie auf Ansicht -> Dateien geklickt haben, sehen Sie das lokale Laufwerk und das Laufwerk des Raspberry Pi Pico.

    ../_images/anvil-20.png

  5. Doppelklicken Sie auf das boot.py-Skript und tragen Sie die SSID und das PASSWORT Ihres WLANs ein.

    ../_images/anvil-21.png

5. Code vervollständigen

  1. Laden Sie dht.py und lcd1602.py aus dem Verzeichnis kepler-kit-main/libs auf den Raspberry Pi Pico W hoch.

    ../_images/anvil-22.png

  2. Öffnen Sie main.py und ersetzen Sie den vorhandenen Code durch den folgenden Code.

    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 = "<uplink_key_goes_here>"

@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

  3. Kehren Sie zur Anvil-Oberfläche zurück und wählen Sie die Uplink-Option in den App-Browser-Einstellungen.

    ../_images/anvil-p-6.png

  4. Klicken Sie auf Den Anvil Server Uplink für diese App aktivieren, um den Uplink-Schlüssel zu erhalten.

    ../_images/anvil-p-7.png

  5. Kopieren Sie diesen und ersetzen Sie damit <uplink_key_goes_here> in main.py, damit Ihr Pico W sich mit der von Ihnen erstellten Anvil-App verbinden kann.

    ../_images/anvil-p-8.png

6. Das Projekt ausführen

  1. Klicken Sie auf die Schaltfläche Aktuelles Skript ausführen oder drücken Sie F5. Nach erfolgreicher Verbindung sehen Sie in der Shell eine Meldung, die den erfolgreichen Verbindungsaufbau bestätigt.

    ../_images/anvil-19.png

  2. Starten Sie Anvil. Nun können Sie die Temperatur und Luftfeuchtigkeit über die Anvil-App ablesen. Wenn Sie eine Nachricht in das Textfeld eingeben und dann auf die Schaltfläche ANZEIGEN klicken, wird die eingegebene Nachricht auf dem I2C LCD1602 angezeigt.

    Bemerkung

    Falls die eingegebenen Zeichen nicht auf dem I2C LCD1602 angezeigt werden, können Sie das Potentiometer auf der Rückseite des Moduls drehen, um den Kontrast zu erhöhen.

    ../_images/anvil-r-2.png

7. App veröffentlichen

Wenn Sie Ihre selbst erstellte App teilen möchten, können Sie einen Freigabelink wie folgt generieren.

  1. Kehren Sie zur Anvil-Seite zurück und klicken Sie auf die Option App veröffentlichen in den App-Browser-Einstellungen.

    ../_images/anvil-s-1.png

  2. Im Tab Über privaten Link teilen sehen Sie eine Liste von Links. Über diesen Link kann jeder auf Ihre App zugreifen.

    ../_images/anvil-s-2.png

  3. Greifen Sie auf den Link zu und Ihre App ist direkt einsatzbereit.

    ../_images/anvil-s-3.png

  4. Sie können Ihre App auch über einen öffentlichen Link teilen. Geben Sie dazu Ihren personalisierten Domainnamen ein und klicken Sie unten auf Anwenden, um die Änderung wirksam zu machen.

    ../_images/anvil-s-4.png

Wie funktioniert es?

Hier ist das Grundgerüst von main.py, welches die Basis für die Kommunikation zwischen Pico W und der Anvil-App bildet.

import anvil.pico
import uasyncio as a

UPLINK_KEY = "<uplink_key_goes_here>"


# 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

Konfigurieren Sie dht11 und lcd1602. Details zur Verwendung dieser beiden Komponenten finden Sie unter 6.2 Temperatur - Feuchtigkeit und 3.4 Flüssigkristallanzeige.

from machine import Pin,I2C

from lcd1602 import LCD
lcd = LCD()

from dht import DHT11
sensor = DHT11(Pin(16, Pin.OUT, Pin.PULL_DOWN))

Im Anvil-Code haben wir zwei interne Funktionen des Servers (Pico W) aufgerufen.

Die erste ist show_message(), deren Aufgabe es ist, die von Anvil eingegebene Nachricht auf dem LCD anzuzeigen. Der Dekorator @anvil.pico.callable(is_async=True) macht diese Funktion für Anvil aufrufbar.

@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

Als Nächstes kommt publish_data(), die dazu dient, den Wert des DHT11 zu ermitteln und die Temperatur und Luftfeuchtigkeit an Anvil zurückzugeben. Auch hier wird der Dekorator @anvil.pico.callable(is_async=True) verwendet, um die Funktion für Anvil aufrufbar zu machen.

@anvil.pico.callable(is_async=True)
async def publish_data():
    sensor.measure()
    return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity)