Instead of improving the duct-tape-made prototype-1, I started replacing a Digispark with ESP32 board to create some kind of Web-based controller. It's just because I'm interested in what can be achieved with Bluetooth Low Energy and Web Bluetooth.

Although I used the word "non-standard" in the title of this entry, connecting the ESP32 and (Chromium-based) browser was pretty straightforward, thanks to the well-made abstraction layers of the both "arduino-esp32/libraries/BLE" (which is based on the Bluedroid stack) and Web Bluetooth API.

I have not much to talk about as I have never seen any unstableness nor had to go deep into the stack or chromium/src.git. 
So here I'd like to  share references which are probably useful for someone interested in the similar setup. 

• ESP32
  • Cyber Kamen firmware source code
    • https://github.com/likeablob/cyber-kamen
    • It's a PlatformIO project. Internally it depends on; 
      • Chrono for simple task scheduling.
      • Adafruit_Neopixel and Adafruit_NeoMatrix for controlling the LED matrix
      • MsgPack for cross-platform data serialization.
        (Yeah, https://msgpack.org/ works well. BLE has 512 bytes limit on a single write/read.)
  • Arduino-esp32/libraries/BLE/examples
    • https://github.com/espressif/arduino-esp32/tree/master/libraries/BLE/examples
  • Tips and Tricks:
    • libraries/BLE is relatively fat (occupies > 900 KiB !). You may want to use `min_spiffs.csv` for the flash partitioning.
      • https://github.com/likeablob/cyber-kamen/blob/develop/firmware_esp32/platformio.ini#L25
      • NimBLE-Arduino could be a solution. Not tried yet though.
    • Since WS2812B is driven by 5V, a level shifter is required.
      • You can use this hack. https://hackaday.com/2017/01/20/cheating-at-5v-ws2812-control-to-use-a-3-3v-data-line/

• Web Bluetooth API
  • Cyber Kamen Webapp source code
    • https://github.com/likeablob/cyber-kamen-webapp
    • Nuxt.js (v2) , Typescript and Vuetify.js. Nuxt.js v3 looks very promising but no SPA support has arrived yet.
    • Use @types/web-bluetooth if you need auto-completion.
    • @msgpack/msgpack for browser-side data serialization.
    • @nuxtjs/pwa to make the app install-able on mobiles. (Web Bluetooth API is only available in Android Chrome though.)
  • Web Bluetooth Samples
    • https://googlechrome.github.io/samples/web-bluetooth/
    • Not sure why but the samples lacks an example for writing characteristic value. Use BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse()
      • https://github.com/likeablob/cyber-kamen-webapp/blob/be46be28b8bd058953ead64722d95d0538cea27c/store/ck-ble-device.ts#L142
  • Tips and Tricks;
    • Web Bluetooth requires a HTTPS origin. You may want to use hosting services like GitHub Pages, Netlify, Vercel or GitLab Pages.
    • On Linux (Bluez), Web Bluetooth uses hci0 interface. Also after changing service or characteristic UUIDs, you may want to clear cached information tied to the device MAC. 
      • https://stackoverflow.com/questions/43446918/bluez-showing-old-cached-data-on-dbus