UPDATE! I have finished a PCB for the RGB Pong Clock (or any other project using an RGB Matrix panel) and have sent it off for a quick run. It works with both the Core and the Photon and is designed to attach to the back of the panel. Once it is tested, I’ll be making it available to everyone. Here is a peek at the top of the board (sorry for the small size):
One of the projects I brought for Maker Faire in San Francisco is the RGBPongClock and I wanted to share the code with everyone. The project uses an Adafruit 16x32 RGB Matrix panel and presents a clock with multiple faces including Pong, Weather, Spectrum analyzer and more! The code and instructions are available here:
Cheers!
The goal of this tutorial is to build the RGBPongClock I demonstrated at the last Maker Faire. The clock used a hand soldered Adafruit perma protoboard and an older Particle Core.
As a start, we will build the clock using a breadboard, some jumper wires and the new Particle Photon. I hope to have a PCB designed by the end of the tutorial so a permanent version can be built. SO LET’S GET BUILDING!
Here is what you need before you start:
- 1 Photon
- 1 Medium or long breadboard (a medium one is used here)
- 1 [Adafruit Medium 16x32 RGB LED Matrix Panel][1]
- 1 5V, 2A switching power supply ([Adafruit has this one][2])
- A set of jumper wires
- 1 USB cable to power the Photon from a PC (also to communicate)
STEP 1 - INITIAL SETUP
For this build and to keep things simple, the LED matrix will be powered by its own supply while the Photon will be powered via USB (from a PC or power adapter). I suggest you follow Adafruit’s tutorial for connecting the power to the panel.
Place the Photon mid-board and connect a jumper (black if possible) from the Photon GND pin to one of the protoboard power rails. This will allow 4 ground connections to be made to the RGB panel.
The Complete Wiring
The ribbon cable supplied with the panel must be connected to the panel’s INPUT connector. For reference, the connector pin assignment is as follows:
The image is a top view of the connector, as it appears on the back of the panel.
You will note the connector on the right side of the board. This will represent the connector on the other end of the ribbon. We will be inserting the jumper wires directly into each hole of the connector.
I will pause here because of 2 reasons. First, I have to confirm the pins to be used on the Photon as they may change from the original Core assignment. Second, the RGBPongClock requires SparkIntervalTimer which is in the process of being ported to the Photon. More specifically, it has been ported but the firmware to support it has not been released yet. This pause give me a chance to do a little more planning (aka, learning fritz and making sure I get this tutorial right!) … stay tuned 
The Magic of Webhooks
The RGBPongClock makes use of a webhook to do all the work of fetching the 7-day weather forecast data. It also does all the parsing of the (lengthy) JSON data returned from the api.openweathermap.org website. The webhook looks like this:
"event": "weather_hook",
"url": "http://api.openweathermap.org/data/2.5/forecast/daily",
"requestType": "POST",
"headers": null,
"query": {
"q": "Ottawa,ON",
"mode": "json",
"units": "metric",
"cnt": 7
},
"responseTemplate": "{{#list}}{{temp.day}}{{#weather}}~{{id}}~{{/weather}}{{/list}}",
"json": null,
"auth": null,
"mydevices": true
}```
You will need to cut and paste the webhook text into a file named "weather.json"
**For the following step, you will need to install the Particle CLI tool following [these][3] instructions.**
Configure the webhook
-------
The RGBPongClock.ino file contains a #define HOOK_NAME that defines the "event name" of the webhook. The name defined after the hook-response/ part must also match the #define HOOK_PUB and the event defined in the webhook. In the example, the event is named weather_hook.
In order to get the weather for your area, you will need to change the "q" and "units" query parameters to match your city and temperature units. For Fahrenheit, me "units" parameter line can be removed entirely.
The JSON parsing template is defined by responseTemplate following the Mustache stateless query format.
DON'T FORGET to create the webhook using Particle CLI:
```particle webhook create weather.json```
[1]: http://www.adafruit.com/product/420
[2]: https://www.adafruit.com/products/276
[3]: http://docs.particle.io/photon/cli/
