Updated image formatting in esp32.md

pull/301/head
human-bee 4 months ago
parent 644b7218c1
commit 822346c838

@ -0,0 +1,84 @@
---
title: "ESP32"
description: "How to setup the ESP32"
---
To set up the ESP32 for use with 01, follow this guide to install the firmware:
1. Download [Arduino IDE](https://www.arduino.cc/en/software).
2. Get the firmware by copying the contents of [client.ino](https://github.com/OpenInterpreter/01/blob/main/software/source/clients/esp32/src/client/client.ino) from the 01 repository.
<div style="display: flex; justify-content: center;">
<img src="assets/copy-client.png" alt="Copy client.ino contents" width="60%" />
</div>
3. Open Arduino IDE and paste the client.ino contents.
<div style="display: flex; justify-content: center;">
<img src="assets/paste-client.png" alt="Paste client.ino contents" width="60%" />
<img src="assets/pasted-client.png" alt="Pasted client.ino contents" width="60%" />
</div>
4. Go to Tools -> Board -> Boards Manager, search "esp32", then install the boards by Arduino and Espressif.
<div style="display: flex; justify-content: center;">
<img src="assets/boards-manager.png" alt="Install ESP32 boards" width="60%" />
</div>
5. Go to Tools -> Manage Libraries, then install the following:
- M5Atom by M5Stack ([Reference](https://www.arduino.cc/reference/en/libraries/m5atom/))
<div style="display: flex; justify-content: center;">
<img src="assets/M5-atom-library.png" alt="Install M5Atom library" width="60%" />
<img src="assets/m5-atom-install-all.png" alt="Install all M5Atom dependencies" width="60%" />
</div>
- WebSockets by Markus Sattler ([Reference](https://www.arduino.cc/reference/en/libraries/websockets/))
<div style="display: flex; justify-content: center;">
<img src="assets/WebSockets by Markus Sattler.png" alt="Install WebSockets library" width="60%" />
</div>
- AsyncTCP by dvarrel ([Reference](https://github.com/dvarrel/AsyncTCP))
<div style="display: flex; justify-content: center;">
<img src="assets/AsyncTCP by dvarrel.png" alt="Install AsyncTCP library" width="60%" />
</div>
- ESPAsyncWebServer by lacamera ([Reference](https://github.com/lacamera/ESPAsyncWebServer))
<div style="display: flex; justify-content: center;">
<img src="assets/ESPAsyncWebServer by lacamera.png" alt="Install ESPAsyncWebServer library" width="60%" />
<img src="assets/ESPAsyncWebServer-install-all.png" alt="Install all ESPAsyncWebServer dependencies" width="60%" />
</div>
6. To flash the .ino to the board, connect the board to the USB port.
<div style="display: flex; justify-content: center;">
<img src="assets/connect-usb.jpeg" alt="Connect USB" width="60%" />
</div>
7. Select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that).
<div style="display: flex; justify-content: center;">
<img src="assets/Select Board and Port.png" alt="Select Board and Port" width="60%" />
</div>
8. Click on upload to flash the board.
<div style="display: flex; justify-content: center;">
<img src="assets/Upload.png" alt="Upload firmware" width="60%" />
</div>
---
Watch this video from Thomas for a step-by-step guide on flashing the ESP32 and connecting the 01.
[![ESP32 Flashing Tutorial](https://img.youtube.com/vi/Y76zed8nEE8/0.jpg)](https://www.youtube.com/watch?v=Y76zed8nEE8 "ESP32 Flashing Tutorial")

@ -6,118 +6,19 @@ description: "How to setup the ESP32"
To set up the ESP32 for use with 01, follow this guide to install the firmware:
1. Download [Arduino IDE](https://www.arduino.cc/en/software).
2. Get the firmware by copying the contents of [client.ino](https://github.com/OpenInterpreter/01/blob/main/software/source/clients/esp32/src/client/client.ino) from the 01 repository.
<Image
src="assets/copy-client.png"
alt="Copy client.ino contents"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
3. Open Arduino IDE and paste the client.ino contents.
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Image
src="assets/paste-client.png"
alt="Paste client.ino contents"
width="45%"
style={{ marginRight: '10px' }}
/>
<Image
src="assets/pasted-client.png"
alt="Pasted client.ino contents"
width="45%"
style={{ marginLeft: '10px' }}
/>
</div>
4. Go to Tools -> Board -> Boards Manager, search "esp32", then install the boards by Arduino and Espressif.
<Image
src="assets/boards-manager.png"
alt="Install ESP32 boards"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
5. Go to Tools -> Manage Libraries, then install the following:
- M5Atom by M5Stack ([Reference](https://www.arduino.cc/reference/en/libraries/m5atom/))
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Image
src="assets/M5-atom-library.png"
alt="Install M5Atom library"
width="45%"
style={{ marginRight: '10px' }}
/>
<Image
src="assets/m5-atom-install-all.png"
alt="Install all M5Atom dependencies"
width="45%"
style={{ marginLeft: '10px' }}
/>
</div>
- WebSockets by Markus Sattler ([Reference](https://www.arduino.cc/reference/en/libraries/websockets/))
<Image
src="assets/WebSockets by Markus Sattler.png"
alt="Install WebSockets library"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
- AsyncTCP by dvarrel ([Reference](https://github.com/dvarrel/AsyncTCP))
<Image
src="assets/AsyncTCP by dvarrel.png"
alt="Install AsyncTCP library"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
- ESPAsyncWebServer by lacamera ([Reference](https://github.com/lacamera/ESPAsyncWebServer))
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Image
src="assets/ESPAsyncWebServer by lacamera.png"
alt="Install ESPAsyncWebServer library"
width="45%"
style={{ marginRight: '10px' }}
/>
<Image
src="assets/ESPAsyncWebServer-install-all.png"
alt="Install all ESPAsyncWebServer dependencies"
width="45%"
style={{ marginLeft: '10px' }}
/>
</div>
6. To flash the .ino to the board, connect the board to the USB port.
<Image
src="assets/connect-usb.jpeg"
alt="Connect USB"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
7. Select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that).
<Image
src="assets/Select Board and Port.png"
alt="Select Board and Port"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
- M5Atom by M5Stack [Reference](https://www.arduino.cc/reference/en/libraries/m5atom/)
- WebSockets by Markus Sattler [Reference](https://www.arduino.cc/reference/en/libraries/websockets/)
- AsyncTCP by dvarrel [Reference](https://github.com/dvarrel/AsyncTCP)
- ESPAsyncWebServer by lacamera [Reference](https://github.com/lacamera/ESPAsyncWebServer)
8. Click on upload to flash the board.
6. To flash the .ino to the board, connect the board to the USB port, select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that). Click on upload to flash the board.
<Image
src="assets/Upload.png"
alt="Upload firmware"
width="60%"
style={{ display: 'block', margin: '0 auto' }}
/>
Watch this video from Thomas for a step-by-step guide on flashing the ESP32 and connecting the 01.
<iframe
width="560"
@ -126,4 +27,4 @@ To set up the ESP32 for use with 01, follow this guide to install the firmware:
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
></iframe>
Loading…
Cancel
Save