/Tiara

Neopixel Tiara w/WiFi Control UI

Primary LanguageC++

Neopixel Tiara w/WiFi Control UI

This project was inspired by Becky Stern's NeoPixel Tiara, with some changes to the hardware. The control board is an ESP8266 D1 Mini combined with a Battery Shield. Software was written using the Arduino IDE.

The "gems" in the Tiara are from AliExpress; small "gem" & large "gem".

The software uses the FastLED library and borrows most of the animations from the Demo100 example project included with the library. I've added two of my own animations customized for the tiara, as well as some minor code to change the sequence of the leds in the animations instead of their actual physical order. This was then combined with the Captive Portal example from the ESP8266 Arduino library. The color picker code is using IRO.js Javascript code.

The board will appear as a WiFi access point in captive portal mode meaning that once connected, all DNS queries will resolve to the IP address of the control board. If your device does not show this page after connection, it can be accessed with the URL: http://172.217.0.1/42. The user interface consists of two web pages, the first and main page provides a list of the available animation patterns and the second is a color picker for setting all the led "gems" to a single color. The current pattern being animated will be displayed at the top of the page and will update automatically as the patterns cycle.

The default is to cycle through each of the animation patterns, allowing each one to run for approximately 10 seconds and then repeating. Once a pattern is selected it will run until another pattern is selected or until pattern cycling is re-enabled. Choosing the "Solid Color" option will open the color picker and any color from the color picker wheel can be selected. It is possible to drag a finger to select colors, but this can generate a large number of color change requests to the control board and will result in some delay before the color of the led "gems" catches up. It is best to tap rather than drag your finger on the display.

Pattern Selection Color Picker

I'm not a UX or HTML developer, so the user interface is not all that fancy (but I welcome any UX / HTML / CSS gurus out there to help improve it).