Diet Coke Office Button

My girlfriend and I sometimes both work from home. Sometimes she gets so parched and entrenched with work, she has to yell across our apartment asking if I can get her a diet coke. When I learned that even a former president had a diet coke button in the executive office, I decided to make my own diet coke button.

For her it will:

1. Host a public website where she can request a diet coke anywhere in the world!
2. Come with a wireless button that works over a mile away, even in the city, with no WiFi.

For me it will:

1. Play a catchy alarm
2. Turn on a LED
3. Display the type of request on a screen

Main parts:

1. sender radio chip, The board that triggers the diet coke alarm from the button. This is a radio board and is accepted in the USA, your country may need a different board because of frequency laws. May also need: antenna, short headers
2. metal push button, May also need: button connectors
3. lithium ion battery, Rechargeable lithium battery
4. website hosting chip, Board that handles the website. May also need: short headers, stacking headers, short male headers
5. receiver radio attachment, Receives radio. May also need: antenna
6. display screen
7. multicolored LEDs
8. speaker
9. custom PCB (not required)

other parts include:

cables, soldering tools, general stacking headers, female to male jumper wire(s), slide switch

raspberry pi (or any computer)

This is only required if you want your site on the world web. You could also run the site on your local host, which is totally fine. The user would just have to be connected to the same WiFi. I have an `always-on` raspberry pi 4 model b that helps make a secure site. I will go into more detail below.

adafruit

This project uses a lot from adafruit. Their feather collection can stack on top of each other, has awesome documentation, and even 3D STL files.

domain name

Lastly, only if you want to access this from anywhere in the world, you have to pay for a domain name. It's easy and cost 12 USD dollars per year. More below.

Button is simple and has one purpose, push the button and send an alert

Three parts needed: a radio board, a button, and a battery (if you want).

Solder the antenna and short female header pins to the sender radio chip. Adafruit has great tutorials on how to solder the antenna. (The picture may look different than your board, Adafruit added a metal casing and uses a wire instead of the spring antenna).

The metal push looks great but may have more terminals than you are use to. Use the button connectors by striping, soldering the ends, and adding dupont connectors. The button has a v+ and gnd- that go to the board's battery and gnd pins. If wired right, the LED is on. The signal pin goes to 13 pin on the board. One of the two remaining button terminals go to gnd. This leaves one terminal free. Before making it permanent, test various combinations, push the button, and Serial print results.

battery:

The battery plugs into the chip and charges when the circuit is plugged in! When the circuit is disconnected from a cable it will automatically switch to battery.

code notes:

Code is attached below. This button will have its own project folder. Use the Arduino IDE. The LoRa.h library may need to be installed using the library manager. This code will send a message when the button is pressed and (along with the receiver code below) filter messages not for you. Why filter? Other people are sending messages at the same frequency and you will intercept them. They will most likely be encrypted. Your messages are encrypted as well thanks to the board. This code follows the amazing tutorial from https://dronebotworkshop.com/lora/.

3D case:

Print this simple 3D case that could probably be improved upon... I use https://www.tinkercad.com/ for my builds. I also add these bottoms that help it stay in place and make it feel professional.

I do not have a 3D printer but I have a local library network that 3D prints for me. They usually only charge a few dollars. Look around for cheap options.

The receiver circuit will do a lot

1. it will host its own site
2. react to a user clicking HTML (website) buttons
3. receive radio signals
4. play an alarm
5. display request info

Below I will break it down into the website, radio, screen, and final code.

The three main boards (WiFi, radio, screen) will be stacked with the WiFi on bottom and the radio in the middle.

ESP32 chip

Get the website hosting chip, or ESP32 chip, which will connect to your WiFi and host the HTML. You can follow these steps until it works locally or continue to access your ESP32 board anywhere online.

First, solder tho. Solder the stacking headers. The other boards will stack on-top of each other and this WiFi ESP32 chip is the bottom most chip.

Aslo:

1. Create a new Arduino project, all receiver circuit code will live here
2. Create a folder named data, it has to be named data
3. Add your HTML page into the data folder

HTML

To upload the HTML we will use SPIFFS. SPIFFS is a protocol system to save data (HTML) onto the chips memory. The newest Arduino IDE does not support SPIFFS. I use the legacy Arduino 1.8.19 to upload SPIFFS but there maybe other ways that do not involve downloading the legacy IDE. In your Arduino 1.8.19 IDE go to the project, select the board and port, and click ESP32 Sketch data upload. Look at the pictures. It should take a few seconds and now your HTML is saved on your board. Close the legacy IDE.

The HTML code has a Javascript API called async function postINO(data) that takes the hardcoded arguments "0" for diet coke, "1" for general inquiry, and "2" to cancel all orders. This is a website, we could have 1000 buttons with 1000 commands if we wanted :)

Final code will be attached below in step 6.

Receiver LoRa radio

The receiver radio attachment is different than the sending button radio. It's programmed to only receive and it does not have its own microprocessor. It's an add-on so you decide which pins are needed for the IRQ, CS, and RST pins. These are common pins for this type of radio(LoRa).

LoRa pins

Look at the open holes in the center of the board. You need to connect the open pins to the available options using small wires and solder. I use A to CS, B to IRQ, and F to RST. De-soldering can be a pain, so I recommend you follow this setup or do research so you don't end up using a pin you needed for something else. adafruit's tutorial for more info: https://learn.adafruit.com/radio-featherwing/assembly.

Solder the second and last antenna. Solder the stacking headers since the OLED screen will go on top.

screen

The display screen also has some buttons we can use.

Solder the short male headers as it is the last board to be stacked. Once soldered, snap it in place, and the rest is just code.

Looking at the final code attached in step 6, pressing A will stop the alarm playing. Pressing B or C will clear the screen.

To make the flashy diet coke screen I used a bit map. You can create a custom one here https://javl.github.io/image2cpp/

music

Solder two wires to the speaker and plug the v+ to the ESP32 board and gnd- to the board's gnd. Pin 13 will play the hogwarts theme for a general inquiry and star wars for a diet coke.

If you feel like you're running out of ground wires you're not alone. I added custom PCB files that will give you more grounds. But they take about two weeks to ship. No problem making this on a breadboard instead.

The three boards should stack with the ESP32 on bottom, LoRa radio in the middle, and the OLED screen on-top. Six total wires are needed, four wires for the two LED lights and two wires for the speakers.

Custom PCB

I like the feather collection so much I made my own custom PC boards that are compatible. Also, the 3D print I included uses this custom PC board.

I attached the fritzing file (free software for making PCBs). If you wanted to order PCBs, you need to download frizing software (donate if you can!), export to gerber files into a dedicated folder, zip that folder and use a website like https://www.pcbway.com/ to order the boards. They usually take about two weeks to arrive.

3D print

The 3D printed cases and PCBs are not necessary, this project would still work great on a breadboard. I added my 3D print below that should fit to the parts.

pins

LED lights plug into pins A0 and A1. The speaker plugs into digital 13. All need to be connected to ground.

final code here!

Remember, you need to follow the project folder layout in step 3. I was not able to attach the HTML file normally. Instead I attached as a txt file. It also only uploaded when I removed the beginning few lines of the HTML file ¯\_(ツ)_/¯. Make sure to change the extension back to .html and add the lines below to the beginning of the HTML file. See picture

<!DOCTYPE html>

<html lang="en">

<head>

<title>DietCokeServer</title>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<style>

Secure Website

You can stop here if you want. Anyone connected to the same WiFi router as the ESP32 chip should be able to ask for a coke. If you want the site to run on the big scary web, follow along. Use common sense.

cloudflare tunnel

I say big scary web because it is. You are potentially exposing local hardware beyond your firewall to the world wide web. This is not trivial and many people will try to attack a website just because they can. However, we are using a free service provided by cloudflare that will give us the protection we need. Look at their documetaion. They are creating a tunnel and hosting the site on their side. No intruder is going through your routers firewall if you use cloudflare.

My steps are almost exactly copied from this YouTube video. Watch it! https://www.youtube.com/watch?v=ey4u7OUAF3c&t=454s

steps:

1. create a domain name here: https://domains.squarespace.com/. It will cost 12 USD a year
2. use a computer inside your home WiFi. I will uses a raspberry pi
3. set up cloudfare account
4. add a site to your account, type the domain name you registered
5. scroll down until you see free option
6. find your cloudfare nameservers, go to squarespace, copy the names and add them to you custom name servers under DNS
7. wait for the squarespace to be switched, go back to cloudfare and click check name servers
8. in cloud fare click on sero trust, networks, and tunnels
9. click next, name you team, go to free plan
10. even though free, it does ask for card info. That is unfortunately typical with cloud services like Amazon, etc.
11. click purchase (even tho it is free)
12. go to tunnels and create tunnel, name tunnel
13. choose the environment for the computer that sits inside your WiFi. I am using a raspberry pi so I will choose Debain (the linux system in my pi) with architecture arm64-bit
14. paste and run the command to set up and build the tunnel in your computer
15. enter your subdomain, domain, set type as HTTP, and finally your ESP32's local IP with your port
16. It should be something like 10.0.0.5:8006
17. save the tunnel

then finally go to your subdomain.domainname.com

extra security

I added an extra level of security. To access my diet coke button site, you need to be on a registered email list where cloudfare will send a passcode. Restrict your sites access using tools with in cloudfare.

After all that, how cool is it you can safely access your ESP32 chip from anywhere in the world!?

You now have the ultimate diet coke button. A diet coke can accessed anywhere in the world via the website or from over a mile away with the wireless button. Whether you actually bring the diet coke on a silver platter is up to you.