So I’ve got the ping1d altimeter connected to my Arduino Leonardo (almost same as UNO, but with more memory). I can read data from altimeter just fine on the Arduino IDE Serial Monitor.
I’ve got a lot of different “webserver” templates I’ve used over the years, showing different sensor values in a browser. All these sensors have more or less be either tailored to the Arduino system, or theyre just analog or digital sensors, which are easy to read and display in HTML.
But this altimeter ping1d is different for me. I was hoping maybe one of you had tried to play around with reading (softwareserial?) and “printing” it in HTML (embedded webserver on the Arduino).
It’s a first for me, so guess it’s gonna take a real long time to figure out.
Got any tips/tricks you want to share?
I don’t have any useful code to paste at this moment, just playing around at the moment.
My recommendation is to split the work between Arduino code and browser code. Essentially serve a static HTML page with JavaScript from the root of your web server and then use JavaScript code to periodically fetch the current readings and do whatever display logic you want - whether it be a table or waterfall drawn on an HTML canvas, etc. The current readings would be served by a function that handles HTTP requests to the other endpoint.
For example:
[Browser] User navigates to the web app
[Arduino] Handles HTTP request to / (or /index.html) and returns the static HTML and JavaScript
[Browser] JavaScript code sets a timer to update the state at a chosen interval with something like window.setInterval(updateSensorState, 1000);
[Browser] Timer elapses and your updateSensorState JavaScript function is called
[Browser] updateSensorState makes an HTTP request to /state
[Arduino] Handles HTTP request to /state and returns a JSON encoded dictionary of the current sensor values/state
[Browser] Your updateSensorState function does something with the sensor data from the JSON dictionary - updates HTML, draws on canvas, etc.
In your Arduino loop you’d handle reading the Ping1D sensor state and storing it in a global structure so the handler for the /state requests could JSON encode it and send the JSON in the HTTP response.
Additionally, the Leonardo has another hardware UART (RX on pin 0 and TX on 1) that is aliased in the core as Serial1 so there’s no need to use the SoftwareSerial.
Another recommendation would be to use something a bit more flexible than one of the older 8-bit Arduinos - maybe a new Cortex-M0+ or ESP32 Arduino core. I’m not sure what kind of performance you’ll get from the Leonardo when running an HTTP server.
Here’s a concrete example of what I meant with the split approach - ping1d-esp32-demo.ino · GitHub. The values will be updated in the web UI every second.
I just happened to have a WESP32 next to me, which supports WIRED Ethernet (+Wi-Fi 4). Ethernet is the way to go for our project, but I barely got any experience with the WESP32 device compared to the Arduino. So I decided to give it a go, but I’m a total programming noob compared to the code you provided and kind of gave up getting it to work with Ethernet. It seems the community behind the WESP32 is sparce.
I probably “just” need to hack your example to work with Ethernet instead of Wi-Fi. The Arduino Leonardo runs simple webservers just fine, so maybe I’ll return to that instead of trying to learn/figure out the WESP32 on my own.
Anyway, thanks a lot for your time. I’ll keep searching!
I’ll clean up the example, add a readme, and change it to serve the HTML from SPIFFS since that’s the “right” way to do it, but adds a little complexity when using the Arduino IDE. Happy to contribute it to the repo once it’s in a better state.
That example should work on a WESP32 with a little modification to swap SoftAP for Ethernet. Looking at the docs page for WESP32 they switched Ethernet PHY chips from revision 7 onwards. Can you share which board revision you have? I’ll incorporate the Ethernet functionality into the revised example before I submit a PR.
