HTML Features For ESP32 Sawppy Rover

I am now running the Node.js static web server node-static in a Docker container, with the help of nodemon I have set up my own infrastructure rapidly iterate HTML/CSS/JavaScript development. I expect this will be very useful during development, much faster than reflashing an ESP32 on every update. Making the interface in HTML lets rover drivers use the touchscreen phone they’re probably carrying around anyway, but I also wanted the option of using older out-of-date phones which meant I can’t use the latest and greatest browser APIs. For my target example I chose Internet Explorer built in to Windows Phone 8 (WP8 IE from now on) mainly because I have a Nokia Lumia 920 just sitting here. It is in great physical condition, so I kept it long after its retirement as I was reluctant to toss it as electronic waste.

To give this old phone a new job as rover driver I need to know what subset of modern web standards are functional in the browser built into a Nokia Lumia 920. To ensure I’m not inadvertently locking myself into proprietary features, I won’t use any Microsoft reference material. Only stuff I find on non-proprietary sites like w3schools, backed up by information from sites like caniuse. I will also verify on an Android phone and iOS tablet as I go.

Drawing on screen

For SGVHAK rover software I used the HTML Canvas drawing API directly, and I thought I would investigate tools that might make that easier. There aren’t very many options, as HTML graphics frameworks have mostly moved on to WebGL. On a lark I checked WebGL support on WP8 IE, and was mildly surprised to see the answer was yes. Well, sort of. The test pages says the browser reports WebGL as an incomplete ‘experimental’ feature, which sounds about right for the browser’s vintage.

Lacking much knowledge in the area, I picked PixiJS as a representative 2D HTML graphics framework that renders to WebGL and automatically falls back to HTML Canvas as needed. This particular framework seems to subscribe to the “move fast and break things” philosophy, as my attempt to follow a learning tutorial quickly aborted due to a breaking change in how textures are loaded. But that doesn’t matter, because PixiJS won’t run on my Nokia Lumia 920 with the error “Requires ES6 Support” so that is out.

Verdict: WebGL was a fun distraction, but I only really need to draw a rectangle and a circle. HTML <Canvas> will be fine.

Receiving User Input

For SGVHAK rover software I had two parallel code paths listening to input events. One path listens to mouse events, another listens to touch inputs, and they work together to call into a shared set of pointer event handlers. Looking at this code in hindsight, I can’t remember why I didn’t subscribe to HTML’s own pointer events that performs this input unification in a standardized way. My requirements for Sawppy control isn’t esoteric, pointer down/up/move and capture are all fairly standard things and they seem to work in WP8 IE.

Verdict: The new project will switch to Pointer Events until I discover (or rediscover?) why I would need to subscribe to mouse and touch events separately.

Communicating with Server

For SGVHAK rover software, my control software submitted user input in the most standard HTML technique I knew for sending data to server: the HTTP POST. Designed for submitting form data on a web page, it was a really inefficient way to submit a user’s control input multiple times a second. When I described my amateurish approach to people with knowledge of actual web programming, their faces usually turn to open horror.

But the good thing with honesty about being an amateur and open to learning is that I received advice to investigate something called WebSocket. Thankfully, just like WebGL above, someone has set up a page to check if a browser supports WebSocket. I was happy to discover that it was supported in WP8 IE. A quick check on Espressif documentation confirmed there is some level of WebSocket support, good enough for me to go explore the possibility.

Verdict: Stop using HTTP POST and switch to WebSocket.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s