Intro: Create a Huge, Flashing, Website Launch Button
At hybris, we just launched our new cloud commerce APIs at yaas.io. The hybris labs team supported the public go-live with a cool launch button. It's an arcade-style big dome push button, has an integrated LED so you can let it blink, too, and once pressed it switches over a launch website into "live" mode.
This instructable will mainly describe the hardware, electronics and microcontroller aspects of this launch button. We will also give you a sample "go live" template for Cloudfoundry, a PAAS solution that will allow you to launch a website in a few minutes. This template is written in the popular node.js programming language so you can easily recreate the server part.
So let's start with the fun - let's check what you need and order parts!
Step 1: Order the Parts, 3D Print a Bottom Case
Here's the list of hardware components that you need to source. If you don't want to order these parts where we bought them, due to high shipping cost for example, I am pretty sure that you easily find these components locally.
- Arcade button with LED - it has a built-in resistor that you will want to switch to a less resistive one, so the LED lights up way better when used with the 5V Particle Photon.
- Particle Photon - it's our Micrcocontroller/Wifi combo of choice. Besides using it to control the button and LED, we also use the Particle Cloud Webhooks to send requests to our go-live website
- A low value resistor, e.g. 47Ohm - you find these for cheap on eBay - slightly higer/lower values will also work. The default resistor that the button led ships with is made for 12v - you may want to swap that resistor.
- A 10k resistor to drive the button pin high/low.
- A right, white LED - again you find these everywhere, try eBay for example. You can try to use the LED that is part of the button, but chances are that when you desolder the old resistor you break the LED. It's a good idea to have a few spare ones.
- A 3D printed housing. We created one with 123D from Autodesk. The design we created does fit the arcade button when you remove the outer ring. If you do not have an own 3D printer, consider a service like 3D Hubs where you can find local printing services and pickup the print once it is done for a small fee.
- A LIPO-battery to power the Photon, e.g. this one would work. You could of course for prototyping just use a USB power cable, or you could drill a hole into the 3D case and power it via the USB cable all together.
If you have all the parts together or at least the Particle Photon and a button at hand, let's procede to the programming of the Photon...
Step 2: Setup the Particle Photon
If you have not yet done so, create an account at particle.io and work through the getting started tutorial there. At the end of this short, maybe 10min process, you will have a connected Particle Photon and the web build environment should be ready for some fresh firmware code that you can push to the device.
It is now time to launch the web IDE, paste code from particle_firmware.c into the web editor and flash the Particle Photon. The firmware is quite simple, it sets up the button input pin and the LED output pin. The loop() function is iterated over and over again and will check if the button was pressed, then light up twice and start to check for a new button press. Each time, it will send out a launch event via Spark.publish("launch") to the Particle cloud. At this point we would not know where to send the webhooks to (webhooks are web requests sent in response to these events). So we leave that webhook step for later on.
Don't forget to select the right Particle Photon and hit the flash button to save the firmware to the device!
At this point, we now wire the arcade button to the Particle Photon pins.
Step 3: Wire the Particle Photon to the Button and Button LED
Now, let's solder and connect some wires, the fun part. For the wires, I used some female jumper cables, cut them in half and soldered one end to the button parts. You need to make these connections:
- D0 on Particle Photon, the Button Input Pin, is connected to the button pins as shown in the picture
- The button pin that signals the high/low state is connected to GND of the Particle. As the LED wiring requires GND, too (here GND is on the left pin for the button pic) the resistor is connected to that GND pin and we can save one cable therefore.
- The GND pin of the LED is connected to GND on the Particle Photon
- D1 is connected to the power pin of the button LED, here the pin on the right.
- 3V3 is connected to the second button PIN, e.g. the top pin when the button is seen from the front. When the button is pressed, power is flowing from the top button pin to the signal pin at the very top of the button, thereby resulting in a HIGH signal.
If you are a bit unsure about the proper button wiring (there are different ways to wire a button, too), have a look at this image from the Arduino website. It shows the wiring of a typically LOW button, that goes HIGH when pressed, just like in our case.
One optional step, that is a bit tricky, is to take apart the button LED and swap the LED/resistor combination. By default, the LED within the button is wired to a resistor suitable for 12V. As we do only have 3V3 volts, turning the D1 LED PIN on/off is almost invisible. So try turning the switch of the button slightly, until it is released from the button. Then remove the top part, that contains the LED. Carefully take off the LED by straightening the LED pins, you will then see that one leg has a resistor directly soldered to it. Carefully desolder the resistor and replace it with the lower value resistor, e.g. the 47Ohm resistor. Put it all together again.
At this point, we're ready to go into the software part!
Step 4: Create a Server-side Web App to Receive Webhooks
For the software part, you will need to sign up for a hosting service. Part of this tutorial is also a template web app, that you can easily install via the CloudFoundry PAAS (Platform as a Service Solution). At this point, hybris not yet offering hosting on its own, so one place where you can get free initial hosting is Pivotal, e.g. go to run.pivotal.io, sign-up and install the CLI tools.
Now, with the cf tools (cloudfoundry tools) installed and your account configured, you can download the template project, unzip and modify it and push it to the cloud. Note: you will need to change the configuration in manifest.yaml, which defines the subdomain on cfapps.io - e.g. if you write "- name launch" your subdomain will be launch.cfapps.io - but that name is likely taken already.
Type "cf push" in the main directory - you should see a lot of output on the console, but it will finally tell you that the app got deployed.
A few more notes:
- the single page that this web app serves, is in views/index.ejs - you can change the two <div> elements 'live' and 'notlive' accordingly
- to test the web app using the two test scripts (they start with test*), you need to install node.js first. Get it here. Then change the file options.js and change the testHost to the hostname where you deployed your app.
- With testPutTimestamp.js you can simulate a go live - the page swaps to the live mode
- With testDeleteTimestamp.js you can revert back to non-live mode.
- Attention: there is absolutely no security part of this quick tutorial!!!
Now that we have a website up and running, that is able to switch between two modes - live and not live - we need to wire the push button to the go live event.
Step 5: A Add a Particle Webhook to Integrate the Button With Your Web API
The wiring between the button, which sends events to the Particle cloud, and our web application, is done via a webhook. Download the webhook.json file and modify the URL key. It needs to reflect your web application hostname:
In the console, type 'particle create webhook webhook.json'. It will install the webhook and from now on send a PUT request whenever the 'launch' event is received by the Particle cloud.
AND THAT'S IT - now simply power the Photon, let it connect for a while, then launch the launch website in a browser and press the button. It should switch over to live mode and start couting the seconds we're live! To revert to non-live mode, for testing, make sure you call the testDeleteTimestamp.js script!
Enjoy the tutorial and check out our blog at labs.hybris.com!