Web interface: cleanup API and fix README

This commit is contained in:
SG 2023-09-18 18:01:42 +03:00
parent 559a35c697
commit df9146e89e
3 changed files with 18 additions and 37 deletions

View File

@ -1,6 +1,6 @@
# Black Magic Probe for ESP32-S2
# Black Magic Probe / DapLink for ESP32-S2
WiFi/USB capable version of the famous Black Magic Probe debugger.
WiFi/USB capable version of the famous BlackMagicProbe (or DapLink) debugger.
# Clone the Repository
@ -32,22 +32,26 @@ Run:
idf.py -p <port> flash
```
## Test with ESP-IDF
Connect to the dev board with:
```shell
idf.py -p <port> monitor
```
You should not see errors in the logs if the firmware is installed and running correctly.
## Web interface development
Web interface is located in `components/svelte-portal` and written in Svelte. To build it, you need to install Node.js and run `npm install` in `components/svelte-portal` directory. Then you can run `npm run dev` to start development server or `npm run build` to build production version.
Typical workflow is to fix the board's IP address in `components/svelte-portal/src/App.svelte` and then run `npm run dev`. After that, you can open `http://localhost:5000` in your browser and see changes in the web interface in real time with live reload.
Typical workflow is to fix the board's IP address in `components/svelte-portal/src/lib/Api.svelte` and then run `npm run dev`. After that, you can open `http://localhost:5000` in your browser and see changes in the web interface in real time with live reload.
If you want to change local ip or port, you need to run `export HOST={ip} PORT={port}` before `npm run dev`.
```shell
export HOST=127.0.0.1 PORT=3000
npm run dev
```
When you're done, you need to run `npm run build`, `idf.py build` and then `idf.py -p <port> flash`. You can then open `http://blackmagic.local` in your browser and see the changes in the web interface.
```shell
npm run build
idf.py build
idf.py -p <port> flash
```
## Schematic

View File

@ -2,32 +2,9 @@
let server = "";
if (development_mode) {
server = "http://172.30.1.206";
server = "http://172.30.1.83";
}
// export const api_dev_mode = development_mode;
// export const api_server = server;
// export async function api_post(api, data) {
// const res = await fetch(api_server + api, {
// method: "POST",
// body: JSON.stringify(data),
// });
// const json = await res.json();
// return json;
// }
// export async function api_get(api) {
// const res = await fetch(api_server + api, {
// method: "GET",
// });
// const json = await res.json();
// return json;
// }
export const api = {
server: server,
dev_mode: development_mode,

View File

@ -108,7 +108,7 @@
{/if}
</div>
<div class="config">
<Button value="?" on:click={config.popup.show} />
<Button value="#" on:click={config.popup.show} />
</div>
<Popup bind:this={config.popup}>
{#await api.get("/api/v1/uart/get_config", {})}