Andy Green's Libwebsockets Can Parse and Render HTML5, CSS on an ESP32 or Other Microcontroller

from hackster.io

Developer Andy Green has added some impressive functionality to his libwebsockets lightweight networking library: the ability to parse and render HTML5 and Cascading Style Sheets (CSS) on relatively low-resource microcontrollers, including the Espressif ESP32.

"Lws is able to parse and render a subset of CSS + HTML5 on very constrained devices such as ESP32, which have a total of 200kB heap available after boot at best," Green explains. There are some technology advances in lws that allow much greater capability that has previously been possible on those platforms."

"The goal is that all system display content is expressed in HTML/CSS by user code, which may also be dynamically generated, with CSS responsive layout simplifying managing the same UI over different display dimensions."

To prove the concept, Green has shown off a color ePaper display connected to an ESP32 microcontroller: A large background image of a cat is covered by an additional image plus rich-text rendered using HTML5 and CSS, all parsed and rendered on-device — doing away with the traditional need for a more powerful host device to turn dynamic content into a static image for display.

"There are restrictions," Green warns. "Most generic HTML on the internet are too complex or want more assets from different hosts than tiny devices can connect to — but they are quite far beyond what you would expect from a 200kB heap limit. It is very possible to mix remote and local HTTP content over H2 including large JPEG and PNG images and express all UI in HTML/CSS."

Green admits that, while the project is "working end-to-end," it's not yet complete — and that it should be considered a pre-alpha feature. Those interested in helping to develop the feature further, meanwhile, can find more details and the source code on the libwebsockets website.