Have you ever accomplished something on your own that's really cool and you're super excited about, but there's no one right there to share it with? Individually, you can take in the moment mentally and appreciate the serenity or excitement, but we at Hologram wanted to find a way for you to be recognized.
One day we were sitting around recounting fantastic childhood game shows. We talked about how awesome Nickelodeon's Global Guts was and how contestants smash a button after climbing to the top of the Aggro Crag, and tons of confetti would explode out of the side of the mountain.
Well we can't give you a confetti explosion right now (honestly, if you really want us to do this, we will), but we can give you a little recognition for your accomplishment and also an awesome button to smash.
I present to you the Aggro Crag Button in Real Life and Leaderboard hack. This internet connected button and LCD screen lets you punch in your initials for them to be sent to a leaderboard sitting on a web app so you can be recognized by all your friends.
On to the hack...
Overview:
- The hardware: Dash development kit for cellular connectivity, big green button for a user to smash, LCD screen, 4-way buttons to enter your initial, Hologram SIM for cell service
- The embedded code: Arduino library to run the LCD screen, custom code to generate the LCD messages and send messages to the cloud
- The web app: Webhook from the Hologram cloud to a Rails server, a Rails server to display the leaderboard
The Dash v1.1 acts like Arduino in code, but uses an NXP Kinetis microcontroller based on an ARM M4 for your user code instead of an Atmel micro so there are definitely some hardware differences. The Dash is compatible with almost all Arduino library functions and even adds to the library with cellular-specific functions of its own such as this function which sends your data to the cloud:
SerialCloud.println();
And also these functions which allow for low power usage for battery-connected cellular devices:
Dash.snooze(milliseconds);
Dash.sleep();
Dash.deepSleep();
Dash.shutdown();
So to integrate this with the Osepp 16x2 LCD screen, all I had to do was fire up the Arduino IDE, pull in the standard Arduino library for the LCD screen, change my pin configurations, and it worked!
References for getting the Arduino IDE up and running with the Dash are here: https://hologram.io/docs/guides-tutorials/getting-started/getting-started-with-the-hologram-dash-in-under-10-minutes
Here's an example of changing from Arduino pins to Dash pins:
//Pull in the LCD's Arduino Library
#include <LiquidCrystal.h>
// select the pins used on the LCD panel
//LiquidCrystal lcd(8, 9, 4, 5, 6, 7); //original Arduino LCD library pins
LiquidCrystal lcd(D17, D18, D11, D12, D13, D14); //Dash pins
The other big difference when going from using an Arduino to a Dash is the hardware voltage. The Dash works at 3.3V and the Arduino works at 5V. Since this Osepp LCD screen is made to be Arduino-compatible and also work at 5V, it's important we use a level shifter to step the voltage from 3.3V to 5V when we use the Dash to drive the LCD screen.
The final major piece of hardware is the BIG GREEN BUTTON:
Since I wanted this to be a visceral experience (you just freaking accomplished climbing a mountain!) we couldn't have people just pressing any small switch. This button just had to be big and well...SMASHABLE. After searching "BIG BUTTON" on Google, Adafruit had this awesome piece of hardware in stock. There's no special consideration to using this button and I used a pull-up resistor and a standard Arduino analogRead() function to get it working on the Dash:
big_button_in = analogRead(A03);
Now that we understand the hardware, it's easiest to follow the wiring guides to hook everything up.
The LCD screen uses the same pins as the Arduino and the pinout can be found here: http://pighixxx.com/unov3pdf.pdf (warning, PDF!)
To wire the everything together, I connected:
- Dash | Level Shifter Left Side | Level Shifter Right Side | LCD
- D17 | A1 | B1 | D8
- D18 | A2 | B2 | D9
- D11 | A3 | B3 | D4
- D12 | A4 | B4 | D5
And then using another level shifter I connected:
- Dash | Level Shifter Left Side | Level Shifter Right Side | LCD
- D13 | A1 | B1 | D6
- D14 | A2 | B2 | D7
Additionally I needed to read the button configuration on the LCD:
- Dash | LCD
- A1 | A0
Be sure to provide 3.3V reference voltage to the VCCa side of the level shifter, a 5V reference voltage to the VCCb side of the level shifter, and provide a GND connection.
For the BIG GREEN BUTTON, I used a pull-up resistor (>1k) and read off the A03 pin on the Dash.
And here's where the Dash code can be found (uses the Arduino IDE): https://github.com/wolberine/aggrocragbutton
Step 2: Connect to the cloudThe best part about working on cellular products is the range and ubiquity of signal (as compared to Wifi). Hologram itself is an MVNO. This means if you pick up their SIM and almost any modem, you should have coverage in most populous areas of the US and well... the world! In total each SIM has access to 550 carrier networks.
Since we're working with cellular, the first thing we have to do to connect to the cloud is give the Dash service with the Hologram SIM. On Hologram's home page, there's a link to the registration page for the Dashboard where you can activate your SIM for service and also see any data devices on your account have sent.
They offer a couple of different plans: Pay-as-you-go (where you only pay for what you use) and Monthly (where you buy a set amount of data per month). For prototyping it's probably best to go with a Pay-as-you-go plan until you understand your data costs and then switch to Monthly to save on cost.
Once your SIM is activated via the Dashboard, your LCD and button wired to the Dash, and you've pulled in the LCD library, you should be able to run the code for this project to start sending your initials to the cloud. Read more information about activating Hologram SIMs here.
Here's what you should see as a user who hits the button:
Yes it's cool that we can now send your initials to a cloud database, but I think we definitely want to display these initials on some sort of public web page. (I'm not a web developer so please bear with me on the UI for this web app!)
To route our data from the Hologram cloud to another endpoint, we use the Hologram webhook feature, which POSTs any incoming data from a device to an endpoint. You can find routing features in Hologram's Dashboard under 'Routes'.
To route your data from the Hologram cloud, you need to associate with your device to the URL you'd like to route to. Also note at the end of my route, I used Rails' format for setting a value to a parameter: yoururl.com/yourobject?yourattribute=<<decdata>>
<<decdata>> is the shorthand form of "the data your Dash sent to the cloud".
Here are some changes you should make for your own device:
- Change Destination URL to your end point you want to POST to
- Change /newchampion? to the variable in your database you want to post to
- Add additional identifiers to the URL so no one else can post to your Leaderboard (official secure endpoint POSTing is still in the works at Hologram)
Here's a link to Hologram's docs on webhooks.
Step 3B: Receive POSTs from the Hologram cloud to your leaderboardTo spin up a server easily, I created a Ruby - Rails workspace using a free account at c9.io. I really like this service since it offers free tiers for prototyping and you don't have to tweak your configuration or set-up when moving to a new machine - the entire workspace (code editing, testing the server) is in the cloud!
Once you spin up your workspace, you can get a really simple server running by creating a scaffold Leaderboard initials:
rails generate scaffold Champion name:string
This command builds a simple controller, model, and view for the Champion object.
Now just rake the database:
rake db:migrate
We have to also change the app's router to receive POST requests from the Hologram cloud. You can find these rules config>routes.rb. Add this route to the file and save:
post '/newchampion', to: 'champions#create'
This line allows a POST request to the app's /newchampion route to create a new database object (NOTE: This is pretty unsecure and should at least have some light security in the form of a passphrase required to POST to the endpoint)
Since we had used a scaffold to generate the model, view, and controller for the Champion, everything else is done for us. Note: for those troubleshooting, you may want to delete the Rails security parameters from your controller to see if you can get your own endpoint up and running
def champion_params
##Consider deleting the line below this to troubleshoot
params.require(:champion).permit(:name)
end
And that's it!
Run your server and test out your device to see that you can send initials to the cloud for your own leaderboard! (Note: for public-facing sites you should safely hide the methods which can directly effect your database)
Here's the link to the rest of the Rails web app: https://preview.c9users.io/wolberine/aggrocrag/
The hacketh endeth here.
-Derrick
PS: Questions? Comments? Ideas on where this project needs to go next?! Hit us up on our website chat at hologram.io. Someone usually responds within minutes unless we're all sleeping.
Comments