Welcome! We will be constructing a little project I like to call "The Blinkerdoo." The Blinkerdoo is a fun project that introduces the Spark Core microcontroller and Spark Core Internet Button and teaches beginner to intermediate Arduino syntax and coding skills. The Blinkerdoo is, in short, a reaction light game (think single person pong) that uses the on board lights on the Spark Core button. As the buttons on the back of the Spark button are pressed, the interval between each light gets smaller and smaller making the light move faster with every cycle. If the player misses a beat, the whole thing starts over. As a bonus, it connects to an open source weather API that provides up to date weather data from openweathermap.org. When button 3 on the SparkButton is pressed, the high temperature, low temperature, and condition of the day for the city you hard coded into the core reads out on the LCD screen while the lights on the internet button turn on and change color in accordance with the temperature for the day.
To start, this project needs a Spark Core microcontroller, the Sparkbutton, a 3.3V LCD screen (I used this one from SparkFun), a 220 ohm resistor, 12 female to male jumper wires, 4 male to male jumper wires, and a potentiometer. The circuit is surprisingly simple and will be discussed shortly, but first, the real bulk of the project, coding the SparkCore.
If you have not already, follow the directions on the SparkCore website and claim your SparkCore. While you can use the phone app, for this project I suggest using the command line to claim the core and set up the wifi (http://docs.spark.io/cli/). If it is not already on the computer you're using to code the core, you will need to download node.js and use the command line.
Once the Spark Core is claimed and set to the wifi you're using, you're ready to code. For this project you will use the SparkCore IDE at www.spark.io/build. We will be using the JSON, openweathermap, HTML, Liquidcrystal, and SparkButton libraries for this project. HTML, Liquidcrystal, and the SparkButton are already included in the IDE by going to the side bar and clicking on libraries (as shown). The others however are available on github and you will need to manually copy and paste the parts of the libraries into the IDE, the largest of which is the JSON library you will need which is here (https://github.com/bblanchon/ArduinoJson/tree/master/JsonParser) . It's a bit of a chore, but you'll need to go to each link with a ".h" and ".cpp" extension and copy and paste the contents into the spark core IDE by clicking the plus sign as shown in the image. Do this for every file, and your diligence will be rewarded.
After the JSON library is all copied go to this link and copy and paste the openweathermap library using the same methods as the JSON library. Fortunately, this library has only one ".h" and one ".cpp" file. When the libraries are set, you can download, copy, and paste, the blinkerdoo.io file into the spark IDE and sign up on openweathermap.org to get an access code for free and place it into your code along with the city and state you want the weather in. Take special note that the openweathermap.h and .cpp files that are copied will not have the same httpClient library name in the import/include command so you will need to change it to #include "HttpClient/HttpClient.h" to match. Verify the code by clicking the check mark in the left bar, troubleshoot any coding issues you may have, and continue to the next step, construction.
The construction of this project is relatively simple. On the LCD screen the pinout is as follows (with pin side facing up, numbers go from left to right)
1 - GND: connect to an outside pin of potentiometer
2 - 3.3V*: (it is important to connect to 3.3 V* instead of the regular 3.3 V for tolerance sake) other outside pin of potentiometer.
3 - V0: middle pin of potentiometer, this controls contrast of screen
4 - RS: D0 on SparkCore
5 - R/W: GND
6 - Enable: D5 on SparkCore
7 through 10 - not connected
11 - DB4 : D6 on SparkCore
12 - DB5 : D7 on SparkCore
13 - DB6 : A0 on SparkCore
14 - DB7 : A1 on SparkCore
15 - LED + : 220 ohm resistor, this powers backlight of LCD
16 - LED - : GND
The 220 ohm resistor is connected to Vcc and according pins on potentiometer are connected to both ground and Vcc.
Use Female to Male jumpers to directly connect the LCD screen to the Spark Core by plugging them into the back of the SparkButton. It's important to note at this point, that like any other shield, the SparkButton uses several pins to control its features. D1 through D4 are connected to the four on board buttons and A2 through A5 are connected to the on board accelerometer. This is why we need to use A0 and A1 as digital pins for the LCD because there just isn't any more room on the proper digital side. This doesn't cause any problem though because the "Analog Pins" on the SparkCore are actually Digital PWM pins (as well as the D0 and D1 pins.) When everything is properly connected, flash the code to the core using the lightning bolt icon in the Spark Core IDE. As an added bonus, if you have access to a laser cutter and some acrylic, attached are some .ai files for a front and back panel. It's easiest to place the panels on the core/button and LCD screen and then wire accordingly.
At this moment, and if everything is connected properly, you should have a fully functional Blinkerdoo! Turn it on and you should see the word "Blinkerdoo" on the LCD screen. Press the right button (2) and a light should skip across the botton half of the LED ring on the SparkButton. If the left button (4) is pressed just as the LED from button 2 hits it, you should send a different colored light back to the right side. If the bottom button (3) is pressed then the weather API is called and you should see a read out on the LCD screen of the Low, High, and condition of the day, and all the LEDs on the SparkButton should turn on with accordance to the High Temperature for the day. You can easily expand on this project by changing LED colors, adding a counter to chart how may complete cycles the light makes, editing the code to show current temperatures, etc. We hope you enjoyed this fun little project for the Spark Core and don't forget to check back for future projects, events, or if you're in our area, cruise by the shop and scope the place out for yourself, thanks!