Your son is trapped in The Upside Down and you're forced to communicate via Christmas lights. We've all been there. But did you know that the Upside Down has great cell reception? Using this simple device and a couple of websites you can talk with your son again using text messages!
Note that this tutorial has been updated to have TWO versions!
- One requires setting up a backend and keeping the costume/sign connected to WiFi, but allows you to send text messages directly to your sign! It's a couple more steps but people will think you have Eleven's powers! I using data tethering from my phone, but you can use the wifi at your house or anything else.
- The alternative standalone solution, CREATES a wireless network that anyone with a smartphone can join! When someone joins the WiFi, they're presented with a popup (just like hotels) that lets them start sending messages. If you'd like to use this method skip the "Building the Backend" section and proceed directly to Setting up the development board
The most difficult part of this project is setting up the board with your computer, everything else is as easy as Eggos. The code is supplied and the website setup is exhaustively documented. There's a lot of steps and you'll have to go back and forth between three websites, but it's surprisingly easy considering how complicated the project seems! If a bunch of pre-teens can take on the demogorgon and the Upside Dow, you can build this costume!
Still, if you have any issues feel free to leave a comment, I'm currently in the process of relocating but I'll be checking in pretty often and others might be able to help you out.
I've been answering a lot of questions in messaging, but please don't be shy about asking in comments! Most of the time someone else has the exact same question as you and you'd be helping them out by posting that here too! I may share your message (with your name removed) and repaste the message myself anyway because it was such a useful question!
Also, any input or feedback on the process would be appreciated, I hope to do a bunch more of these in the future.
Building the "backend"Sign up for our database backend Firebase here using your own Google/Gmail account or create a new one.
Create a new project.
Sign up for SMS backend Twilio here.
Verify your phone number and then verify you're human (demogorgon protection) in the next step.
Click Get Started on the popup and Get Started again on the page below.
Go through the steps to Get your first Twilio number and Choose this Number on a number you like.
You don't need to complete the next steps, but sending a message to the number you confirmed with is an easy way to start testing.
We can skip the steps and click the Octothorpe (# sign, number sign, pound sign.... sigh... or hashtag) on the left toolbar and click on our number in the list.
Under Messaging on this page is where we'll input information we get from our final service: Zapier.
Sign up for the glue service that connects Twilio and Firebase, Zapier here.
Click MAKE A ZAP! at the top.
Under Choose a Trigger App search for Webhooks by Zapier and select it.
NOTE: although Zapier supports Twilio directly, it does it by checking for new texts every 5 minutes BOOOO! Using webhooks we'll get our text messages in
realtime
YAYYY!
Select Catch Hook and Save + Continue.
Skip the next step by clicking Continue.
Copy the webhook URL by clicking Copy to clipboard.
Back in Twilio on the Messaging section we paste the URL under A Message Comes In and click Save.
NOTE: Twilio expects the response from this URL to be in a certain format, but Zapier responds in a different format. No problem though, you'll get a bunch of errors (and emails notifying you of the errors) but it will still work!
Send a text to your Twilio number so that Zapier receives something.
Back in Zapier click OK, I did this so it can load your text message.
After a second you should get Test Successful!
If you want you can click view your hook to see how Zapier receives the text message before you click Continue.
Next for Choose an Action App we'll configure Zapier for Firebase, start by searching for it and select it.
We'll pick Update/Set record by ID and Save + Continue.
We'll Connect a New Account and fill in the popup with information from back in Firebase.
Back in Firebase the first piece of information you'll get is found on the Database section, click it on the left.
The ID we need we can copy from the URL given:
We'll paste this back in the Zapier popup under Firebase Instance.
The next thing we need is back in Firebase under the Gear icon and Project settings.
Under Settings we'll click on the DATABASE tab and SHOW our secret and click the Copy Icon to copy it. We'll need this later for our Arduino section too, so save it or remember how to get back to it!
Back in the Zapier popup we'll paste this under Firebase Secret, skip the optional Test Path for Tokens, and click Yes, continue.
Back in Zapier we can double check with Test and click Save + Continue.
We can pick some arbitrary name to put under Path to Record and Fields, as long as it matches what we use later. I'll use "data" and "message" respectively.
We can click the Insert a Field icon (stacked lines) to the right of the next field to magically load the info from our text message! We'll be picking the Body
Finally, we can click Continue.
You can now click Create & Continue which will put the text message in Firebase!
We can double check this by going back to Firebase and again clicking Database on the left to view our data (you may need to expand the tree)!
Back in Zapier we're ready to click Finish.
We can give it a name, I picked Stranger Things Lights, and slide the switch to say YOUR ZAP IS ON!
Once you've turned it on you can send another text:
And it will update in Firebase!
That's it! Our backend is done!
Setting up the development boardThere's a couple of ways to get your development kit to talk to Firebase, I'll be using the most popular one, the Arduino IDE and the C programming language, but there are some very cool things your NodeMCU board supports and I encourage you to check them out!
First download the drivers to communicate with your Development board from Silicon Labs. Install them once they've downloaded.
Download the Arduino IDE for your operating system from here.
Plug in the Development board to your computer using a Micro USB cable (same charger as a Android, Kindle, and many other devices) and Launch the IDE.
Open Arduino Preferences (looks different on Windows).
And enter the URL below into Additional Boards Manager URLs and click OK:
http://arduino.esp8266.com/stable/package_esp8266com_index.json
In the menu, click on the Tools menu then the Board: drilldown
Then Board Manager...
Search or find esp, then select and click Install on the esp8266 option.
After the progress bar finishes and it is installed click Close
Back in the Tools > Boards menu, select the new NodeMCU 1.0 (ESP-12E Module).
Again in the Tools menu select the Port drilldown.
And the SLAB port (may look different on Windows).
To test things out you can load the simples ESP example from the menu File > Example > ESP8266 > Blink
On the window that pops up click the Right Arrow Icon at the top to upload the program to your board.
After it's finished uploading the built-in LED on your board should blink Red!
We'll need to install some additional libraries for our code, so download the FastLED library from here and if you're doing the backend version then download the Firebase Arduino library as well.
Back in the Arduino IDE from the menu we select Sketch > Include Library > Add .ZIP Library and select the FastLED-3.1.3.zip file you downloaded. Repeat the same steps with the firebase-arduino-master.zip if you're doing the backend version.
We can load our program in next, you should choose either the backend version or the standalone version, whether or not you setup a backend. We can either save or copy the appropriate file from the CODE section in this guide and then either open it or create a new file in the Arduino IDE by clicking File > New and replacing the content.
If you're doing the backend version then we'll need to change the following fields near the top to start off, nothing below the void setup()
line should ever need to be changed, but feel free to mess around once you have things working!
// WIFI settings
#define WIFI_SSID "<<WIFI NETWORK NAME>>"
#define WIFI_PASSWORD "<<WIFI PASSWORD>>"
// Firebase settings
#define FIREBASE_HOST "<<FIREBASE HOST>>.firebaseio.com"
#define FIREBASE_AUTH "<<FIREBASE SECRET>>"
#define FIREBASE_PATH "/data/message"
At the very least, replace the sections within the << and >> with your wireless network name (only 2.4GHz networks!), password, and firebase host/secret (same two things you used to configure Firebase in Zapier earlier).
We'll be using the Serial Monitor to double check everything's working, so click the magnifying glass icon at the top right of the window to open it.
Make sure the window that pops up is set to 9600 baud at the bottom right.
Back in the program window click the Right Arrow Icon again to compile and Upload the sketch (you may be asked to save the file).
For the backend version, once the program's complete it should start getting data from Firebase!
You can test by sending a new text message or editing the message in Firebase directly, but every time you update the message, some new text should flash by the screen.
For the standalone version, you can use a smartphone to search for and join the "STRANGER WIFI" network. When you try to connect a popup will appear with a text input, whatever message you type there will update the message and the serial monitor should update with log messages!
NOTE: The log messages have 4 columns, the first is the letter of the message it is currently on, then the LED number that is assigned to, the brightness to make that LED, and finally the number of elapsed milliseconds since it received the message. The information is there in case you need to debug that stuff, but you shouldn't need to! Firebase also gets random events that you can ignore, it will only trigger on events that update its content.
Setting up the stripFinally we're ready to connect the strip. I recommend you disconnect the USB cable from the computer until you're sure you've got everything right! There are only 3 pins on the development board that we care about, circled below in Red we have:
- Vin which will connect to the Red wire of your LEDs
- GND which will connect to the Black wire of your LEDs
- D4 which will connect to the Green wire of your LEDs
In the diagram below the Micro USB cable plugs into the BOTTOM of this diagram, so just double check with the names printed very finely on the board that you're connecting to Vin GND and D4.
For connecting the wires you can do a couple of different things. Soldering will be the most secure connection, but I'm using just jumper cables and it's working great. The development board also fits perfectly in a breadboard, and so do the wires from lights if you cut and strip them.
Make sure you're connecting using the right end of the LED lights string. If you're using the LEDs I linked to in materials, the correct end looks like the picture below.
I used a green female to female jumper to connect to the pin from the LEDs that leads to the green wire on the LEDs. My red and white wires were stripped enough that they fit perfectly in my jumper cables, but you can easily strip some additional rubber off if you need to.
Either way, I would put electrical tape around the connections to secure and isolate them (if they touched it would be bad!). Here's a couple of shots of my connection to the development board, which I plan on securing with some more electrical tape.
Once you've wired everything, I wouldn't recommend plugging back into the computer. It could damage the USB port if anything is incorrectly wired or shorted. If you're going to do it anyway, make sure that the development board never feels hot, and if something isn't working UNPLUG it before checking the connections.
Once you plug it back in, the lights should all turn on for a split second then turn off. If they stay on then unplug the USB and double check the wiring!
It should get the last message stored in Firebase and light up random lights. If you text the number or update Firebase some other random lights should turn on. We'll make sure the correct lights turn on when we've finished the rest of the costume!
The Rest of the CostumeThere's a lot of artistic license here.
- You could use a posterboard, some markers, and some tape.
- You could get a sign printed at your local Kinkos or Staples Print center that has a picture of the Stranger Things wall on it.
- You could get foam board from your local hardware store, and use thumb tacks and nails.
- You could glue paper onto cardboard to get the actual "wallpaper" effect.
Really the end goal is to get the wires strung up on something with some letters underneath to closely resemble the scene. But remember! You're a distraught mother who just lost her baby, you don't want things to look too perfect!
I'll describe the process I used for the costume, everything totaled under $20.
The first step to every adventure starts at the fabric store. I found a bunch of materials that came close but were too strong, it's hard to match styles to a show that takes place in 80s.
Originally I thought I would bleach them a little to fade them, but one of the designs looked perfect when seen from the reverse side!
Last year my costume was TOO strong. One late night Uber and party later it was in pieces. This year I decided flimsier would be better, so I just got some cardboard from Costco.
I practiced writing some stuff in marker to get an idea of what it would feel like, but I probably over-practiced, you don't really need to do this step if you can imagine how letters are gonna be placed. I used duct tape to attach the fabric at the bottom of the cardboard.
I used staples to secure the wires to the cardboard and started spreading it out.
I still don't know whether I'm going to make a head hole or try to do the whole "monster behind the wall" effect with it, but this is how it looked all setup:
To paint it I got this cheap sample of black from Home Depot for a couple of bucks, but I barely used ANY.
Before painting I made it stand up so that the paint would run down.
Remember, it doesn't need to look perfect, you're painting in a hurry because you're distraught!
While the paints drying you can update your code to line up to the numbers.
Updating the order of Alphabet to LED assignmentBack in your code you'll see the LED order that I used for my costume. All you have to do is count the LEDs (start from 0) and put the number LED next to each letter in the program.
// the LED number (start counting from 0) that we light up to show our message
const int LETTER_LEDS[NUM_LETTERS] = {
/*A*/ 7
,/*B*/ 8
,/*C*/ 9
,/*D*/ 10
,/*E*/ 11
,/*F*/ 12
,/*G*/ 13
,/*H*/ 14
,/*I*/ 32
,/*J*/ 31
,/*K*/ 30
,/*L*/ 29
,/*M*/ 28
,/*N*/ 26
,/*O*/ 25
,/*P*/ 24
,/*Q*/ 23
,/*R*/ 38
,/*S*/ 39
,/*T*/ 40
,/*U*/ 41
,/*V*/ 42
,/*W*/ 44
,/*X*/ 45
,/*Y*/ 46
,/*Z*/ 47
};
You'll notice that between some of my letters I skipped an LED, just be sure to skip the number in your count. Also, since the lights snake back and forth, the letter Q (LED 23) actually came before the letter I (LED 32) for me, depends on how you wire the LEDs. It's really simple to adjust this later if you miscount, just test using the alphabet or a pangram like "the quick brown fox jumps over the lazy dog".
Once you've adjusted all the numbers, re-upload your program and you're good to go! Congratulations!
Conclusion and DISCLAIMERThis tutorial skips some of the safety steps with electronics, but that doesn't mean you should ignore them, only that I don't feel qualified to say what is truly safe. The first sign something is wrong is if things feel HOT. You can feel the electronics board and the battery. Even after everything is working, you should check and make sure nothing feels hot, including the battery charger, as you wear the costume. None of the electricity here is powerful enough to shock you, but portable batteries (especially cheap batteries) can (but shouldn't) explode if they are shorted for long periods of time. You will feel them getting hot first though so be careful and be observant! Make sure this is a Stranger Things costume and not a Samsung Note 7 costume!
Any suggestions or adaptions for this project, let me know. It might be too late to buy new materials, but I can probably help you update the Arduino code to do other effects or work with different electronics.
Comments