88 lines
3.4 KiB
Markdown
88 lines
3.4 KiB
Markdown
# Web UI for wireless-esp32-tools
|
|
|
|
This is the web user interface for the [wireless-esp32-tools](https://github.com/kerms/wireless-esp32-tools) project.
|
|
|
|
The `wireless-esp32-tools` project provides CMSIS-DAP compatible wireless debugging tools for various ESP chips, turning them into powerful wireless debug probes.
|
|
|
|
## About This Web Interface
|
|
|
|
This web application provides a user-friendly dashboard to manage and interact with your `wireless-esp32-tools` device. It is built with Vue.js 3, Vite, and Element Plus, and is designed to be hosted directly on the ESP32.
|
|
|
|
From this interface, you can build a customized dashboard to monitor and interact with your target device.
|
|
|
|
### Key Features
|
|
|
|
* **Wi-Fi Configuration**: Easily configure Wi-Fi settings including station mode (STA) and access point mode (AP), with support for static/dynamic IP addressing and DNS settings.
|
|
* **Dynamic Widget Dashboard**: A fully flexible grid-based panel.
|
|
* **Real-time Data Visualization**: Includes a UART data viewer for monitoring serial communication from your target device.
|
|
* **Embedded-First Design**: Deploy in single .html file to reduce the number of http connection.
|
|
* **Designed to be usable on small screen**: Responsive layout that adapts to mobile devices and tablets, with touch-friendly controls and optimized UI elements for small displays.
|
|
|
|
## Screenshots
|
|
|
|
**Widget Panel**
|
|
|
|
|
|
**UART Data Viewer**
|
|
|
|
|
|
## Getting Started
|
|
|
|
### For End-Users
|
|
|
|
1. Connect your computer or mobile device to the Wi-Fi network hosted by the ESP32 running `wireless-esp32-tools`.
|
|
2. Open a web browser and navigate to the IP address of the ESP32 device (e.g., `http://dap.local` or `http://192.168.1.1`(when connected to the AP)).
|
|
|
|
### For Developers (of this Web UI)
|
|
|
|
Follow these steps to set up the project for local development or to build it for deployment.
|
|
|
|
#### Prerequisites
|
|
|
|
* [Node.js](https://nodejs.org/) (v16 or later)
|
|
* [npm](https://www.npmjs.com/)
|
|
|
|
#### Local Development
|
|
|
|
1. **Install dependencies:**
|
|
```sh
|
|
npm install
|
|
```
|
|
2. **Run the development server:**
|
|
```sh
|
|
npm run dev
|
|
```
|
|
This will start a local server, typically at `http://localhost:5173`.
|
|
|
|
3. **Run for mobile/remote debugging:**
|
|
To access the development server from other devices on the same network (like a mobile phone), use:
|
|
```sh
|
|
npm run devh
|
|
```
|
|
This will expose the server to your local network (e.g., `http://192.168.X.X:5173`).
|
|
|
|
#### Building for Production (Deploying to ESP32)
|
|
|
|
1. **Build the project:**
|
|
```sh
|
|
npm run build
|
|
```
|
|
This command compiles and bundles the application into the `dist/` directory, creating `index.html` and `ws.sharedworker.js`.
|
|
|
|
There is some bugs on Firefox or Vue3 when embbeding sharedWorker in single file mode. So at the time, the sharedWorker are build separately.
|
|
|
|
2. **Compress the output files:**
|
|
Navigate into the `dist/` directory and compress the build artifacts using gzip.
|
|
```sh
|
|
cd dist
|
|
gzip *
|
|
```
|
|
This will generate `index.html.gz` and `ws.sharedworker.js.gz`.
|
|
|
|
3. **Deploy to ESP32:**
|
|
Copy the compressed `.gz` files to the appropriate directory in your `wireless-esp32-tools` ESP-IDF project (e.g., `project_components/html/`) and flash the firmware to your device.
|
|
|
|
## License
|
|
|
|
Distributed under the MIT License. See `LICENCE.txt` for more information.
|