.. note:: Hallo und willkommen in der SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasten-Gemeinschaft auf Facebook! Tauchen Sie tiefer ein in die Welt von Raspberry Pi, Arduino und ESP32 mit anderen Enthusiasten. **Warum beitreten?** - **Expertenunterstützung**: Lösen Sie Nachverkaufsprobleme und technische Herausforderungen mit Hilfe unserer Gemeinschaft und unseres Teams. - **Lernen & Teilen**: Tauschen Sie Tipps und Anleitungen aus, um Ihre Fähigkeiten zu verbessern. - **Exklusive Vorschauen**: Erhalten Sie frühzeitigen Zugang zu neuen Produktankündigungen und exklusiven Einblicken. - **Spezialrabatte**: Genießen Sie exklusive Rabatte auf unsere neuesten Produkte. - **Festliche Aktionen und Gewinnspiele**: Nehmen Sie an Gewinnspielen und Feiertagsaktionen teil. 👉 Sind Sie bereit, mit uns zu erkunden und zu erschaffen? Klicken Sie auf [|link_sf_facebook|] und treten Sie heute bei! 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: .. list-table:: :widths: 20 20 20 :header-rows: 1 * - Bezeichnung - INHALT DES KITS - LINK * - Kepler Kit - 450+ - |link_kepler_kit| Sie können die Komponenten natürlich auch einzeln über die untenstehenden Links erwerben. .. list-table:: :widths: 5 20 5 20 :header-rows: 1 * - SN - KOMPONENTE - ANZAHL - LINK * - 1 - :ref:`cpn_pico_w` - 1 - |link_picow_buy| * - 2 - Micro-USB-Kabel - 1 - * - 3 - :ref:`cpn_breadboard` - 1 - |link_breadboard_buy| * - 4 - :ref:`cpn_wire` - Mehrere - |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 - 18650 Batterie - 1 - * - 9 - Batteriehalter - 1 - **2. Schaltung aufbauen** .. warning:: 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. .. image:: img/wiring/8.anvil_bb.png :width: 800 **3. Eine Anvil-App erstellen** 1. Besuchen Sie |link_anvil| und klicken Sie auf **Jetzt entwickeln**. .. image:: img/anvil-1.png 2. Melden Sie sich an oder registrieren Sie sich. .. image:: img/anvil-2.png 3. Erstellen Sie eine **Neue leere App**. .. image:: img/anvil-3.png 4. Wählen Sie das **Material Design Theme** aus. .. image:: img/anvil-4.png 5. Nun befinden Sie sich auf der App-Bearbeitungsseite. .. image:: img/anvil-5.png 6. Ziehen Sie ein **Label**-Werkzeug aus der Toolbox und platzieren Sie es auf **Titel hier ablegen**. .. image:: img/anvil-6.png 7. Den Label-Text können Sie im **Text**-Feld unter dem Menüpunkt **Eigenschaften** eingeben. .. image:: img/anvil-7.png 8. Ebenso ziehen Sie ein **Textfeld** nach rechts. .. image:: img/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. .. image:: img/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. .. code-block:: python 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. .. image:: img/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. .. image:: img/anvil-9.png 12. Klicken Sie in der **Toolbox** auf **Weitere Komponenten** und ziehen Sie den **Timer** in das Formular. .. image:: img/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. .. image:: img/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. .. code-block:: python data=anvil.server.call_s("publish_data") self.label_2.text=data .. image:: img/anvil-16.png 15. Damit ist der Anvil-Programmteil abgeschlossen. Weitere Details zur Verwendung von Anvil finden Sie unter |link_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 |link_anvil_firmware| herunter. Es wird empfohlen, die vollständige Version herunterzuladen. .. image:: img/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. .. image:: img/anvil-p-2.png :width: 300 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``. .. note:: Erstellen Sie vor dem erneuten Flashen der Firmware eine Sicherung aller wichtigen Dateien auf dem Pico W. .. image:: img/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. .. image:: img/anvil-20.png 5. Doppelklicken Sie auf das ``boot.py``-Skript und tragen Sie die ``SSID`` und das ``PASSWORT`` Ihres WLANs ein. .. image:: img/anvil-21.png **5. Code vervollständigen** #. Laden Sie ``dht.py`` und ``lcd1602.py`` aus dem Verzeichnis ``kepler-kit-main/libs`` auf den Raspberry Pi Pico W hoch. .. image:: img/anvil-22.png #. Öffnen Sie ``main.py`` und ersetzen Sie den vorhandenen Code durch den folgenden Code. .. 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 #. Kehren Sie zur Anvil-Oberfläche zurück und wählen Sie die Uplink-Option in den App-Browser-Einstellungen. .. image:: img/anvil-p-6.png #. Klicken Sie auf **Den Anvil Server Uplink für diese App aktivieren**, um den Uplink-Schlüssel zu erhalten. .. image:: img/anvil-p-7.png #. Kopieren Sie diesen und ersetzen Sie damit ```` in ``main.py``, damit Ihr Pico W sich mit der von Ihnen erstellten Anvil-App verbinden kann. .. image:: img/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. .. image:: img/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. .. note:: 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. .. image:: img/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**. .. image:: img/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. .. image:: img/anvil-s-2.png 3. Greifen Sie auf den Link zu und Ihre App ist direkt einsatzbereit. .. image:: img/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. .. image:: img/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. .. 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 Konfigurieren Sie dht11 und lcd1602. Details zur Verwendung dieser beiden Komponenten finden Sie unter :ref:`py_dht11` und :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)) 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. .. 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 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. .. code-block:: python @anvil.pico.callable(is_async=True) async def publish_data(): sensor.measure() return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity)