Music Interacting Bottle Stand With Adjustable Lights

Some time ago, a friend of mine ordered a 16 Bit LED-ring to tinker around with, and while doing so he got the idea to place a bottle atop of it. When I saw it, I was fascinated by the look of the light illuminating the flask and remembered the awesome project "Mc Lighting" by the Hackaday user Tobias Blum:

https://hackaday.io/project/122568-mc-lighting

One aspect of his project had been to control WS2812 LEDs via a self-written web-interface without the use of any external service. Inspired by his approach on controlling a LED-ring, I decided to combine those two ideas and to bring them to the next level.
In my mind I had a bottle stand for up to three bottles, controllable via a local webpage, featuring several lightning modes including ones that interact with ambient music. In order to create a portable device, it is powered by a Li-Ion battery cell.

In this instructable I will go through the building process and teach you about its underlying function. Afterwards you should be able to build your own version and have an idea about how to add webcontrol to a project without using any external service.

Step 1: Building Options

When it comes to the electronics of this project, you can either use a NodeMCU-board, which is easy to use and quite cheap, or you can build your own board like me. There is no particular benefit in doing so, I just had an ESP8226-12E chip lying around and decided to use it so I could keep the NodeMCU board for fast prototyping. There is only one major difference: you need a 3.3V USB to Serial board to program the self-made controller board. Despite that it doesn't make a difference what type you choose, just keep it in mind when it comes to the required parts.

There is an option that makes quite the difference though: the music mode. If you decide to include it, the bottle stand can be used as a VU-meter and furthermore is able to change the LEDs colour whenever the music's bass reaches a given threshold. This requires some additional hardware though. You must build an amplifier that amplifies the output of a condenser microphone capsule and a lowpass filter for the bass frequencies. Although this might sounds difficult, it really isn't. It doesn't require any special parts and I strongly recommend including this circuit as it enhances the device quite a lot.

Step 2: Required Parts and Materials

The case:

Maybe the most difficult part of this project is the case. As I wanted to try something new, I decided to use MDF plates with a thickness of 18 mm and to paint them. Compared to other types of wood/materials, MDF has the benefit that its surface can be sanded especially smooth and therefore the paint on it can look extremely glossy. Additionally, you need some acrylic glass with a thickness of 4 mm as a cover of the LED rings.

The case has a length of 33 cm and a width of 9 cm, so I recommend a plate with the following dimensions:

MDF-plate 400 x 250 x 18 mm

The LED-ring covers have a diameter of around 70 mm, so your plate of acrylic glassshould at least have the following dimensions:

Acrylic-plate 250 x 100 x 4 mm

To paint it I got myself 125ml of white acrylic paint and 125ml of glossy clearcoat.Furthermore I recommend you to use a foam roller as this allows you to apply the paint more evenly. For the sanding part I used sheet of sandpaper with a grit of 180, one with 320 and one with 600.

Electronics:

For the electronics you need three 16 Bit WS2812 LED-rings. Just be careful as I found two types of 16 Bit LED-rings, you need the ones with the bigger diameter (around 70 mm), and therefore the bigger gap between the LEDs.

For the power supply you need a Li-Ion battery cell, a corresponding charger, and a switch. Additionally, you need a 3.3 V voltage regulator with low dropout voltage (LDO) and two capacitors to power the microcontroller. I explain why you need the LDO regulator at step 7.

If you decide to build the optional music amplifier and filter circuit, you need an Op-Amp and some passive components. And if you choose to create your own control unit, you need the ESP chip, a breakout board, some resistors, a button and some pins.

And I strongly recommend a piece of perfboard to solder everything on it.

LED-ring

3.7V Li-Ion cell (I salvaged one of the type TW18650 out of an unused battery pack)

Li-Ion Charger

Switch (Nothing special, I used an old one I salvaged from a broken set of speakers)

LDO voltage regulator (additionally the capacitors mentioned in datasheet: 2 x 1uF ceramic capacitor)

perfboard

Music circuit (optional):

According to schematic

Microcontroller:

NodeMCU

ESP8266 12E (adapter plate, button, resistors and pins according to schematic)

USB to Serial (required to program self-made controller board, if you already have one there is no need to get another one)

Step 3: Milling the Case

A friend of mine built himself a MP-CNC and was so kind to mill me the two MDF parts and the three acrylic rings. The wooden parts are the top and bottom of a pill-shaped box. Atop of the box, there are three places for the LED-rings and their acrylic covers. As these deepenings are designed to be only a fraction larger then the PCBs, they fit and sit in place without the need of glue or screws. Same goes for the acrylic covers. As they have a larger diameter than the LED-rings, they are placed on an edge above the LEDs (see picture).

Step 4: Complete the Case

You might have noticed that rightn now, there are several things missing at the milled case. Things like holes for the ring's cables, a hole for the USB socket and a pocket for the battery. Furthermore, if you choose to include the music circuit, a hole for the microphone is needed too. Additionally, I recommend you to drill holes beneath the LED-Rings so you can push them out of the case. I used a rotary grinding tool to add the above described holes.

On the third picture, you can see the "maintenance" and cable holes for the ring. As you maybe already noticed, I created two cable holes. This wasn't on purpose. This was at an early stage where I thought the angles of the rings would be unimportant, but they aren't. Mount all three of them with their cables to the same side. I ended up with mounting them towards the frontside.

Important: Always wear a dust mask when sawing, drilling or milling into MDF. Same goes for sanding it.

Step 5: Finishing the Case

Now the case gets painted. Before you do this, I recommend you watch or read a tutorial about this, as this proofed itself to be harder than I thought it was. This one covers everything you need to know about the topic.

First, thoroughly sand the outside of the MDF parts. I used the grit 160 paper for this. After that, many tutorials recommend sealing the surface, especially at the edges, with a special MDF primer. I skipped this part as the primer is quite expensive and, even though the result is not as good as it could have been, I would do so again.

Afterwards, you can start to paint the surface in your desired colour. I decided to paint mine in a clear white. Wait for the colour to dry, then sand it with fine sandpaper (I used the grit 320), dust it off and apply the next layer of colour. Repeat this process until you are pleased with opacity of the colouring. I applied four layers of colour.

After the final layer of colour, sand it with an even finer sandpaper than before (in my case the grit 600) and remove all the dust remaining on the surface. After that you can apply the first layer of the glossy clearcoat. As with the colour, apply as many layers as it needs to satisfy you. I used three for the top and the sides, and two for the bottom. You can see the result on one of the pictures. Though the surface could be smoother (more sanding and MDF primer), I am happy with the achieved gloss effect.

Step 6: Preparing the Rings

Parallel to the drying process of the first layer of colour you can sand the acrylic-glass rings. After that these rings diffuse the light emitted by the LED-Rings. Speaking of which, I experienced the PCBs of these rings to have some unwanted edges remaining from the production process, so you might need to deburr them. Otherwise they won't fit into the case.

Afterwards, some wires need to be soldered to the rings. I recommend you using flexible wire. I used stiff one and had the problem that they pushed the two parts of the case apart, which required ugly bending. Furthermore, stiff wire is more likely to break which results in a nasty solder process as you have to get the corresponding ring and the controller board out of the case.

Step 7: Power Supply

A single Li-Ion battery cell is used as a power source. It is charged via the charger circuit. This circuit features an over discharge and over current protection. To turn off the device a switch, that interrupts the positive output of the charger board, is built in.

As the maximum voltage of the battery cell is 4.2V, the ESP8266 can't be powered directly. The voltage is too high for the 3.3V microcontroller as it only survives voltages between 3.0V - 3.6V. A low dropout (LDO) voltage regulator is a voltage regulator that works even when the input voltage is close to the specified output voltage. So, a dropout voltage of 200 mV for a 3.3V LDO means, that it outputs 3.3V as long as the input voltage is above 3.5V. When it undershoots this value, the output voltage starts to decrease. As the ESP8266 works with voltages down to 3.0V, so it works until the input voltage of the LDO drops down to around 3.3V (the descent isn't linear). This allows us to power the controller via the battery cell until it is completely discharged.

Step 8: Microcontroller Board

If you use a NodeMCU-board this step is quite simple. Just connect the 3.3V output and the ground of the power supply to one of the boards 3V and G pins. Furthermore, I recommend soldering the board onto a piece of perfboard, as this makes it easier to connect everything.

In case you decided to build your own controller board, the first step is to solder the ESP chip to the adapter plate. After that, add all the components and connections as shown in the schematic. The two buttons are necessary to reset and flash the controller. You might notice on the following pictures that I only use one button. The reason for that is that I just found one lying around, so instead of the button for GPIO0, I use two pins and a jumper.

You can see my finished circuit at the next step.

Step 9: Music Circuit (optional)

As an input for the music a simple condenser microphone capsule is utilized. It is powered via a current limiting resistor connected to the 3.3V power rail. In a nutshell, the capsule works like a capacitor, so when soundwaves hit its diaphragm, its capacity, and analog to that its voltage, change. This voltage is so low that we can hardly measure it with the ESPs analog to digital converter (ADC). In order to change this, we amplify the signal with an Op-Amp. The amplified output voltage then gets filtered by a passive lowpass filter of the first order with a cut-off frequency of around 70Hz.

If you decide to use a NodeMCU-board, you can connect the output of the above described circuit to the A0 pin of the board. If you want to build your own controller board, you must add a voltage divider to the circuit. The reason for that is the ESPs onboard ADC which has a maximum input voltage of 1V. The NodeMCU has this voltage divider already built in, so in order for the code and the amplifier to function on both boards, the self-made one needs it too.

Step 10: Finish and Mount the Electronics

First, insert the LED-rings into the designated deepenings on the top of the case. After that, connect the power supply, the microcontroller, the rings and, if you built it, the amplifier circuit according to the schematic.

Warning: Before you do so, doublecheck if you turned off the power using the switch. I forgot doing so and fried a LDO regulator while soldering. After that, you are ready to mount the electronics inside the case.

I started by attaching the battery cell to the case with some hot glue. After that I positioned the charger circuit and checked whether I could plug in an USB cable or not. As I didn't trust hot glue to withstand the force of pushing in the cable multiple times, I carefully hammered thin nails through the charger's solder pads for the input voltage. After the charger I glued the microphone capsule in place.

Afterwards I used some bent wire pins to fix the microcontroller. This method allows me to take the controller out of the case for repairs whenever I need to without the need of cutting through hot glue and ruining the MDF.

Now, I used some cable ties and bent wire pins to mount the wires. The last thing to do, is to insert the acrylic cover rings. Be careful while doing so, so you don't damage the paint as this is a pretty tight fit. You might even have reduce to the inner and/or outer diameter of the acrylic rings as the MDF board absorbed some paint and so the deepenings got a bit smaller.

Step 11: Flashing the Microcontroller

After finishing the hardware build, all that remains is flashing the software. I used the Arduino IDE for that. But before you can program the controller, you need to add some libraries and select the right board.

Libraries

You can either use the IDEs Library Manager (Sketch -> Include Libraries -> Mange Libraries) to add them, or you download and move them to your IDEs library folder. I recommend the manager as it is more convenient, and you can find all needed libraries there.

DNSServer by Kristijan Novoselic (necessary for WiFiManager)

WiFiManager by tzapu and tablatronix (opens an AP where you can enter your local WiFi'ss credentials)

WebSockets by Markus Sattler (necessary for the communication between user device and bottlestand)

Adafruit NeoPixel by Adafruit (necessary for controlling the LED-rings)

Board

No matter what type of controller board you chose to use, under Tools -> Board select NodeMCU 1.0 (ESP-12E Module). Make sure that the flash size is set to 4M (1M SPIFFS) and the upload speed to 115200.

Flashing

To flash the NodeMCU-board simply connect it to your computer, select the correct port and upload the program.
Flashing the self-made controller board is a little bit more complicated. Connect your USB to Serial converter to the three pins of the board. Connect GND and GND, RX and TX, and TX and RX. To enter the flash mode of the controller, restart it with the RST-button and while doing so keep the GPIO0-button pushed. After that make sure your converter board is set to 3.3V. Complete the process by uploading the program.

Important: Turn on your device before flashing.

Step 12: Upload the Webpage

The files needed for the webpage are stored on the microcontrollers flash memory. Before the first use, you manually have to upload them. To do so, power the device (maybe you have to charge it first). The LEDs should shine red (due to my camera this looks like orange on the picture), which means the bottle stand isn't connected to a network. After a short time, a WiFi access point named "bottleStandAP" should open. The default password is "12345678", you can change it in the ino file. Connect your smartphone/tablet/laptop to it. A notification should pop up and forward you to a webpage. If nothing like this happens, simply open your browser and type in 192.168.4.1. On this page, click on Configure WiFi and enter your networks credentials. After that, the access point should close and the LEDs change their colour to a light blue. This means the device has successfully connected to your network.

Now you have to determine the devices IP address. To do so, you can connect it to your computer, open the Serial Monitor of the Arduino IDE (baud rate is 115200) and restart the device. Alternatively you can open the webpage of your WiFi-router. After you know the device's IP, open your browser and type in xxx.xxx.xxx.xxx/upload (where the xs stand for the bottlestands IP). Extract the files from the .rar and upload all of them. After that just type in the IP of your device and the control page should open. And by that, you finished building your own bottlestand. Congratulations!

Step 13: The Webpage

The webpage allows you to control your bottle stand. When you open the main page, you can see three blue circles in the top mid. These allow you to select which ring's settings you want to change. The colour wheel changes the selected rings colour when you click on it. The field below shows you the colour you selected. By pushing the random button, the selected rings are set to random colour mode. This means that the colour changes whenever a cycle of the breath mode is over.

On the second page you can select the different modes. Fixed colour and fixed brightness do exactly what their name implies. The breath mode creates a "breath" effect, meaning the rings brightness increases over a custom time to its maximum, then decreases to its minimum. The cycle mode lights only one LED for a given time, then lights the next, then the next and so on. The music threshold mode changes the colour whenever the microphone detects a signal higher then a custom set threshold. Not only music can trigger this, clapping, for example, can too. In the VU meter mode the number of LEDs that light depends on the volume of the music's bass.

Note: You can use the rulers without activating the corresponding modes. For example: If you use the cycle mode and change the brightness via the ruler of fixed brightness, the rings will stay in the cycle mode but change their brightness accordingly to what you set.

Step 14: How Does All of This Work?

The functional principle is quite easy to grasp. Whenever you open the webpage, the ESP8266 sends the web files to your device. Then, when you change something on the page, a special character, mostly followed by an integer value, is send to the microcontroller via a websocket connection. The controller then processes this data and changes the lights accordingly.

The web part is written in html, css and javascript. To make this task easier, I made us of the Materialize CSS framework and jQuery. If you want to change the look of the website, have a look at the documentation of the framework. Alternatively, you can simply write your own page and upload it. You just must establish the websocket connection and send the same data.