Introduction: Internet Connected Story Book (Featuring Particle Photon)
In 2014, Natalie Freed created an ocean-themed notebook that could receive real-time data to illustrate the position of the tides. Inspired by this work, and the ground-breaking contributions of Jie Qi and NEXMAP, I was catapulted into an exploration of circuitry and coding that led to my quest to create an internet connected story book. By merging traditional bookbinding techniques with electronics, I set out to transform an ordinary book into a smart object that can respond to real-time web data to help tell a story (see video above for details).
Although I ultimately figured out how to use data, such as a weather report or a light sensor reading, to trigger functions in my book, I ended up taking a different approach to increase the interactivity between my book and the reader. Instead of relying upon a report of new snow in my town to trigger an LED "blizzard" in my book (which worked well to a point), I ended up adding QR codes to my pages to give readers control over when the animations in my book would be triggered.
Step 1: Internet Connected Story Book With Paper Circuit Illustrations
In this Instructable, I'll be taking you through a series of steps that you might use to add circuitry to your own hand-bound book, while providing practical tips for adding web interactivity to a paper circuit using a web request and a QR code. Then, once you understand the basics of how Particle functions work, you can customize your code and circuitry to tell your own story, as well as experimenting with other types of triggers, including real-time data. You might also consider adding individually addressable NeoPixels or a buzzer to your pages!
My target audience is artists and makers who already have experience with Coptic binding, paper circuitry, and programming with Arduino. I apologize in advance if I don't elaborate enough on these aspects of my project, in the interest of space and time.
Step 2: Gather Your Tools & Supplies
Electronics Tools & Supplies:
Personal Computer
Soldering Iron & Lead-free solder
Particle Photon Starter Kit (for prototyping)
Micro USB Cable (included in Particle Photon Starter Kit)
Breadboard (included in Particle Photon Starter Kit)
Photon without Headers (to embed inside book)
Lithium Ion Polymer Rechargeable Battery 3.7V (500 mAh)
LilyPad Simple Power (to recharge your battery)
Circuit Stickers (I used a variety of colors)
Copper Tape with Conductive Adhesive (a bit flimsy, but works well with Circuit Stickers)
Conductive Fabric Tape (for hinges)
Copper Wire 26 Gauge (available in craft stores) or any type of thin, flexible wire
Jumper wires and alligator clips (for prototyping)
Multimeter (to prevent shorts)
Velcro Dots (to secure battery)
Clear Nail Polish (to insulate circuit)
Bookbinding Tools & Supplies
Pen Knife & Self-healing Mat
Binder’s Board (1 piece for front cover and 4 pieces for back cover)
Acid Free Paper for Signatures
Waxed Linen Thread
Acid Free Glue
Decorative Paper for Covers
Dremel or Hand Drill
Clamps
Step 3: Set Up Your Particle Account & Experiment With Photon
If you haven't already done so, create an account in Particle Build and follow the Getting Started Guide to connect your Photon to the Internet.
Once you have your bearings, scroll down below the blue "Create New App" button and select the program titled "Web-Connected LED."
For demo purposes, we'll be using this sample program (which will allow you to control LEDs on two different pins of your Photon) to add interactivity to your book. I am working under the assumption that you know how to use a breadboard for prototyping. The sample code will trigger LEDs on pins D0 and D7 (the onboard LED), using a Particle function with the unimaginative name "led".
Flash the program to your Photon, by clicking on the the lightning symbol in the top left corner of Particle Build. If you have more than one Photon connected to the web, you'll need to be sure to select the device you want to upload to.
Step 4: Locate Device ID and Particle Access Token
Since the code relies upon a Particle function to be called through an Application Program Interface (API), which in turn will send a signal to your Photon to control pins D0 and D7, we'll be using a free web-based service called If Then Than That to add interactivity to your Photon.
Before moving on to the next step, locate your Particle Access Token and device ID. Keep them in a safe place.
Step 5: Sign Up for IFTTT & the Maker Channel
If Then Than That (IFTTT) is an amazing tool for getting started with the Internet of Things. We're going to be using IFTTT's Maker Channel to create a web hook that will send a signal to your Photon.
If you don't already have an IFTTT account, create one.
After logging in to IFTTT, use the IFTTT search bar to search for the Maker Channel. Connect the Maker Channel to your account.
Step 6: Create "Led_On" Applet in IFTTT
Next, you'll be creating a new applet in IFTTT, which will require you to identify a trigger and an action. To create a new applet, click the pull down symbol next to your login name and select New Applet.
To create the trigger, click on the blue plus sign next to the word "this." When prompted to choose a service, enter "Maker."
- Under Choose trigger, click Receive a Web Request.
- Under Complete trigger fields, type in "led_on" (without quotation marks) as your first event name. Click Create Trigger.
To create the action, click on the blue plus sign next to the word "that." When prompted to choose a service, enter "Maker."
- Under Choose an action, select Make a Web Request.
- Under Complete action fields, fill in the following information to create your web request.
For the URL, substitute your Photon device ID and Particle Access Token where prompted. Ensure there are no extra spaces in the URL.
URL: https://api.particle.io/v1/devices/yourdeviceID/Led?/access_token=youraccesstoken
Method: POST
Content Type: application/x-www-form-urlencode
Body: POST_BODY:params=on
Step 7: Create "Led_Off" Applet in IFTTT
Next, you'll be creating a second new applet in IFTTT, which will require you to identify a trigger and an action as you did before.
To create the trigger, click on the blue plus sign next to the word "this." When prompted to choose a service under "this," enter "Maker."
- Under Choose trigger, click Receive a Web Request.
- Under Complete trigger fields, type in "led_off" (without quotation marks) as your second event name. Click Create Trigger.
To create the action, click on the blue plus sign next to the word "that." When prompted to choose a service, enter "Maker." When prompted to choose an action under "that," select Make a Web Request.
- Under Complete action fields, fill in the following information to create your web request, once again substituting your Photon device ID and your Particle Access Token.
URL: https://api.particle.io/v1/devices/yourdeviceID/Led?/access_token=youraccesstoken
Method: POST
Content Type: application/x-www-form-urlencode
Body: POST_BODY:params=off
Step 8: Create Trigger URLs
This next step will require you to locate your personal settings for your Maker Channel, by clicking on the gear marked "Settings" in the top right corner of your screen.
Locate your unique Maker Channel key within the URL you find in your settings.
Next, you'll be creating two new trigger URLs, or web requests, using your Maker Channel ID to trigger each of the applets you created earlier ("led_on" and "led_off").
Substitute your own maker key below, removing the space in front of it.
Trigger URLs:
https://maker.ifttt.com/trigger/led_on/with/key/ yourmakerkey
https://maker.ifttt.com/trigger/led_off/with/key/ yourmakerkey
Test each trigger by pasting the URLs into a browser. If they work, the LEDs on pins D0 and D7 should turn on and off when called.
Step 9: Create QR Codes
Now that you've created your "led_on" and "led_off" applets on IFTTT, it's time to transform the triggers into QR codes.
Once you've verified that they work, you may copy and paste each trigger URL into a QR code generator, such as Google's QR Code Maker. If all goes well, scanning the QR codes should trigger the "led_on" and "led_off" functions.
SAFETY TIP: Using QR codes in this way is probably safe if you keep control of your book, but you probably don't want to publish the QR codes widely, to keep your Maker Account credentials secure.
Step 10: Prep Your Covers
Tip: If you have access to a laser cutter, use the attached file to cut out indentations for your electrical components. I've included files to accommodate a 500 mAh lithium ion polymer battery. Since making my first book, I've revised this file, moving the Photon down and widening the gap where the battery wires sit.
If you do not have access to a laser cutter, trace the LilyPad Simple Power, battery, and headerless Photon onto a piece of binder's board. Cut the shapes out with a pen-knife and repeat the process until you have three pieces of board prepped to embed the electronics.
Glue the three pieces of binder's board on top of a fourth piece (without cut-outs) to create your back cover. Place it under weights for 24 hours. Set aside a fifth piece of binder's board (without cut-outs) to use as your front cover.
Glue decorative paper to each cover and place them under weights for 24 hours.
Drill holes for your binding, leaving space to lay your copper leads.
Step 11: Plan Your Circuit & Embed Electronics
Creating your circuit will be done in two parts. The first part entails prepping the back cover. The second part entails the completion of each circuit on the signatures, after you've sewn them in.
Wrap craft wire around the positive and negative pads of the Lily Simple Power, to make it easier to solder to the copper tape.
Determine which pins on your Photon your completed circuit will be using. Wrap wire around the pads for these pins.
Lay down your copper tape leads, spanning the indentations for the battery. Add additional ground leads as needed to complete the circuits you'll be creating on the book's pages.
Solder the Lily Simple Power and the wire-wrapped Photon to the leads. Check your connections using the continuity mode on your multimeter.
Safety Warning: Lithium ion polymer batteries require special care and attention. They should not be used or charged without attendance. To avoid the risk of fire when using one of these batteries, it is vital that your circuit not contain loose wiring or short circuits!
Step 12: Add Fabric Hinges, Sew Signatures, & Insulate Spine
TIP: This next part was a little tricky. It would have been easier if I'd done a better job of separating my copper leads and left the paper backing on the last inch of the copper tape as it approached the left edge of the spine.
To make conductive hinges that attach to the copper tape and wrap around each signature, I cut narrow strips of conductive fabric tape.
At the edge of the spine, I gently lifted up each copper lead by about an inch and then laid them back down on top of the sticky side of the conductive fabric tape strips. I then applied another piece of conductive fabric tape on top, like a fabric-copper sandwich, extending it to the edge of the spine. I carefully soldered the connections by allowing the flux to flow from the copper into the conductive fabric tape. I left the paper backing on the last inch or so of the conductive fabric tape, to keep it from getting tangled while I sewed in the signatures.
I began sewing the signatures to the back cover, wrapping the conductive fabric around the front of each signature as I went. This required me plan each circuit in advance, so that I'd know which leads wrapped around each signature. As I wrapped the conductive fabric around each signature, I added small pieces of copper tape under the conductive fabric to make it easier to complete the circuits with copper tape. Once the book was sewn together, I insulated the conductive fabric visible on the spine with clear nail polish.
Step 13: Complete the Circuits & Artwork
TIP: I labeled the corresponding Photon pins on each signature (including ground) as I went, to help me stay organized when writing and modifying my code.
The circuit depicted above features eleven Circuit Stickers that have been been soldered to copper tape leads. To light up your circuit, you can use the sample code you uploaded earlier (triggered via URL or QR code), or modify the code to your taste.
I added some alternating blinking and random delays to my code to create a blizzard effect.
If you've found any part of this Instructable useful, or if you end up creating your own wifi-connected story book, I'd love to hear about it!
