Lightweight HTML/CSS front-end for microcontroller projects

[DavesCodeMusings]

This is not MicroPython per se, but can be used to put a nice web-based control panel on your MicroPython projects. I've been using it to interact with a MicroPython API I built, so I thought I'd share it here if others are interested.

What is it?

If a picture's worth 1000 words, a demo has got to be worth at least ten times that, right? So here is the link where you can see it:

https://davescodemusings.github.io/spartan/

What you'll get is:

• JavaScript and CSS that lets you easily create accordion-style menu navigation in your web page.
• Menu items that are linked using URL hashes (e.g. the bit after the # in http://server/page.html#hash)
• Hashes that can be added to a route table to call a particular function whenever the link is followed.
• You supply the function to do whatever you want.

Ideally, you would create functions that call a back-end API to gather values you want to display.

For example, this bit of code creates a function to return the current brightness of a pulse-width modulated LED:

  <script type="module">
    import * as spartan from './spartan.js'

    spartan.route('brightness', async () => {
      let response = await fetch('/nightlight');
      let brightness = await response.text();
      document.getElementById('content').innerHTML = `Built-in LED brightness is currently: ${brightness}%`
    })
    
    spartan.run()

When this is in a file called index.html, visiting the URL http://server/index.html#brightness will execute the route function and the current brightness will be displayed in the element with an ID of content.

For example:

  <main id="content">
    <!-- dynamic content will end up here -->
  </main>

A more complete example can be found here: https://github.com/DavesCodeMusings/spartan/blob/main/docs/index.html

Advantages

• The whole thing only occupies about 10k of flash storage and works well with low power devices like ESP8266.
• It's mobile friendly and rearranges the layout based on screen orientation.
• Architecture allows you to separate the presentation from the back-end code and interact via API calls.
• The color scheme can be customized with CSS.
• Dark mode! (Follows operating system settings for applications.)

Potential Drawbacks

• It's JavaScript, because JavaScript's the language that runs in browsers. So perhaps some learning curve there.
• It's not as full featured as other web front-ends, because the goal is to be lightweight.
• If your browser is out of date and not very standards compliant, there may be some quirks.

Where to find out more...

If you made it this far and you're still interested, the project is called Spartan and can be found on GitHub at:

https://github.com/DavesCodeMusings/spartan

For the code used to supply the back-end API, I'm using my own MicroPython web framework called Thimble:

https://github.com/DavesCodeMusings/thimble

With the Thimble project, there's an example API to control the built-in LED on an D1-mini that can be used to supply the backend for experimenting with Spartan:

https://github.com/DavesCodeMusings/thimble/tree/main/examples/pwm-led-api