search

thelastoutpostworkshop / gpio_viewer

GPIOViewer Arduino Library to see live GPIO Pins on ESP32 boards
https://youtu.be/JJzRXcQrl3I
MIT License
1.07k stars 110 forks source link

Embed the gpioviewer in existing html #110

Closed ewoudwijma closed 7 months ago

ewoudwijma commented 7 months ago

Hi Charles,

I am working on a new tool called StarMod

A tool to create ESP32 applications easily. On top of that there is an App to drive LEDs but any app is possible. More info although WIP is here StarDocs This is the system tab:

image

See the Pins module which should show the board in the future (now just random balls ;-) )

It would be really great to show your viewer in that window (attributed of course). Is it possible to include your library and hook the viewer in existing html / javascript (instead of a separate url)

And it would be even greater if custom info could be showed per pin, like I show in the table now (pin allocations), so it shows like pin 2 is used for LEDs, pin 14,15,32 for microphone etc.

Greetings, Ewoud

thelastoutpostworkshop commented 7 months ago

Your tool is a very nice idea! That's not going to be easy to do, the gpioviewer library takes the ip attributed to the ESP32 to communicate the gpio status and the web application has to be on the same local network as the ESP32. So the url to the web application is important. I do not know if there is a way to embed a web application using a local ip address in another html...

I had a hard time having my vuejs web application running on a local ip address, normally it should be served with the url directly where it is hosted, in my case on github pages. I used an experimental feature of vuejs to be able to do it.

So the ESP32, where the gpio viewer library run, is serving a very simple html page that loads all the web applications assets from the github pages.

thelastoutpostworkshop commented 7 months ago

here is the html served by the esp32 where the gpio viewer library runs:

<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><base href ='https://thelastoutpostworkshop.github.io/microcontroller_devkit/gpio_viewer_1_5/'><link rel='icon' href='[favicon.ico](https://thelastoutpostworkshop.github.io/microcontroller_devkit/gpio_viewer_1_5/favicon.ico)'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>GPIOViewer</title><script type='module' crossorigin src='[GPIOViewerVue.js](https://thelastoutpostworkshop.github.io/microcontroller_devkit/gpio_viewer_1_5/GPIOViewerVue.js)'></script><link rel='stylesheet' crossorigin href='[assets/main.css](https://thelastoutpostworkshop.github.io/microcontroller_devkit/gpio_viewer_1_5/assets/main.css)'></head><body><div id='app'></div><script>window.gpio_settings = {ip:'192.168.1.55',port:'8080',freeSketchRam:'3.00 MB'};</script></body></html>

This is what could be embedded in your application

ewowi commented 7 months ago

Just a quick POC:

Added gpio-viewer to StarMod: https://github.com/ewowi/StarMod/commit/cfd428c2dfad1c6e809ed4b4d538231e12a817fd

https://github.com/thelastoutpostworkshop/gpio_viewer/assets/138451817/25ff4479-e0bd-48cb-acfa-2866a9560102

So not embedded in the Pins window yet but can be called from the Pins window and It is compiled in one bin.

without gpio-viewer RAM: [= ] 14.9% (used 48732 bytes from 327680 bytes) Flash: [======= ] 67.3% (used 1278333 bytes from 1900544 bytes) ~7300 loops/second

with gpio-viewer (about 20k of flash more) RAM: [== ] 15.1% (used 49572 bytes from 327680 bytes) Flash: [======= ] 68.3% (used 1298681 bytes from 1900544 bytes) ~6950 loops/second

So footprint is okay !

If you wanna try, here is a bin: https://github.com/ewowi/StarMod/actions/runs/8571551301/artifacts/1388696116

And here some instructions: https://ewowi.github.io/StarDocs/BasicsStarMod/GettingStarted/

Next step is to see if it can be done to have it embedded in the Pins window ...

thelastoutpostworkshop commented 7 months ago

Great!