Das ESP Web Tool in NextJS mit Ihrem PlatformIO-Projekt verwenden

Falls Sie mit dem OSSM nicht vertraut sind, es ist ein Open-Source-PlatformIO-Projekt, das für den ESP32-Mikrocontroller entwickelt wurde – schauen Sie es sich hier an. Da es sich um ein Gemeinschaftsprojekt handelt, arbeiten Entwickler, Ingenieure und Heimwerker aus allen Bereichen mit unserer Arbeit. Daher ist es unerlässlich, so viele Zugangsbarrieren wie möglich zu beseitigen. Für diejenigen, die tagsüber keine Entwickler sind, ist die größte Zugangsbarriere das Flashen ihres OSSM-Geräts. Hier erfahren Sie, wie wir dieses Problem in 45 Minuten mit dem ESP Web Tool, NextJS und unserem PlatformIO-Projekt gelöst haben.

1. Erstellen Sie Ihr Binary

In Ihrem PlatformIO-Projekt für ESP32 müssen Sie Ihr Projekt für ESP32 erstellen. Ich gehe davon aus, dass Sie bereits ein funktionierendes ESP32-Projekt haben, aber als Referenz finden Sie hier eine abgespeckte Version unserer platformio.ini-Datei:

[platformio]
default_envs = development

[env:development]
upload_speed = 921600
extends = common
platform = espressif32
board = esp32dev
framework = arduino
    

pio run

2. Fügen Sie ESP Web Tools zu Ihrem NextJS-Projekt hinzu

Für diesen Leitfaden gehen wir davon aus, dass Sie ein NextJS-Projekt mit dem App-Router verwenden. Weitere Details zur Einrichtung finden Sie hier: https://nextjs.org/docs/app

Zuerst müssen wir das ESP Web Tools-Paket installieren. Führen Sie den folgenden Befehl in Ihrem NextJS-Projekt aus:

yarn add esp-web-tools

Zum Zeitpunkt des Verfassens dieses Artikels erfordert ESP Web Tools auch eine sehr spezifische Version des Styling-Pakets. Wenn Sie Yarn verwenden, stellen Sie sicher, dass diese Version installiert ist, indem Sie Folgendes zu Ihrer package.json hinzufügen:

{
  "resolutions": {
    "@material/web": "1.2.0"
  }
}

3. Erstellen Sie eine clientseitige NextJS-Komponente

Esp Web Tools muss auf dem Client ausgeführt werden, daher erstellen wir eine clientseitige Komponente für dieses Tool:

'use client';
import 'esp-web-tools';
import { useSearchParams } from 'next/navigation';

const ESPInstallButton = () => {

  return (
    <div className="mx-auto my-2 max-w-screen-2xl px-4">
      {
        <div
                dangerouslySetInnerHTML={{
                __html: `<esp-web-install-button manifest="/esp/manifest.json"/>`
          }}
        />
      }
    </div>
  );
};

export default ESPInstallButton;

Fügen Sie diese Komponente dann wie folgt zu Ihren serverseitigen Seiten hinzu:

import React, { Suspense } from 'react';
import ESPInstallButton from 'ESPInstallButton';

export default async function Page() {
  return (
    <div>
      <Suspense>
        <ESPInstallButton/>
      </Suspense>
    </div>
  );
}

Wenn Sie jetzt zu dieser Seite navigieren, sollten Sie die ESP Web Tools-Schaltfläche sehen. Ein Klick auf diese Schaltfläche öffnet die ESP Web Tools-Oberfläche. Da wir die Datei manifest.json jedoch nicht angegeben haben, sollte dies nicht funktionieren.

4. Erstellen Sie eine manifest.json-Datei

Jetzt müssen wir eine manifest.json-Datei im öffentlichen/esp-Verzeichnis Ihres NextJS-Projekts erstellen. Diese Datei sollte folgendermaßen aussehen:

{
  "name": "OSSM",
  "builds": [
    {
      "chipFamily": "ESP32",
      "improv": false,
      "parts": [
        {
          "path": "/esp/bootloader_dio_40m.bin",
          "offset": 4096
        },
        {
          "path": "/esp/partitions.bin",
          "offset": 32768
        },
        {
          "path": "/esp/boot_app0.bin",
          "offset": 57344
        },
        {
          "path": "/esp/firmware.bin",
          "offset": 65536
        }
      ]
    }
  ]
}

Wie Sie sehen können, verweist diese Datei auf bestimmte Binärdateien, die ebenfalls im öffentlichen/esp-Verzeichnis Ihres NextJS-Projekts enthalten sein müssen. Sie können zwei dieser Dateien (firmware.bin und partitions.bin) aus dem .pio/build/development-Verzeichnis Ihres PlatformIO-Projekts kopieren.

Die anderen beiden müssen Sie jedoch von uns beziehen. Hier sind einige direkte Links zu allen von uns verwendeten Dateien:

• bootloader_dio_40m.bin
• boot_app0.bin
• partitions.bin
• firmware.bin

5. Testen Sie es aus!

Wenn Sie jetzt zu der Seite mit der ESPInstallButton-Komponente navigieren, sollten Sie die ESP Web Tools-Schaltfläche sehen. Klicken Sie auf diese Schaltfläche, um die ESP Web Tools-Oberfläche zu öffnen. Sie sollten das OSSM-Projekt in der Dropdown-Liste sehen. Wählen Sie dieses Projekt aus und klicken Sie auf die Schaltfläche "Installieren". Dadurch wird Ihr ESP32-Gerät mit der OSSM-Firmware geflasht. Versprechen Sie uns einfach, dass Sie, wenn Sie ein cooles DIY-Sexspielzeug herstellen, es im Kinky Makers Discord vorführen werden.