loading

This tutorial will discuss how to use Makey Makey and the Intel Edison to construct Hook, a union of the physical and digital worlds that allows for the interfacing between text and online multimedia. Hook allows users to simply tap elements on the physical page of a textbook in order to view them on a digital interface whether it's a tablet or a laptop. So, let's say you have a textbook and a tablet laying next to each other. In the textbook, it says "watch this video to better understand this concept." With Hook, just by tapping on the book you would be able to watch the video on the tablet. Hook would make it easier for users to view media on a digital interface just by a simple tap on the physical interface.

In order to complete this tutorial the following materials will be needed:

1 Book

1 Makey Makey kit (order here: http://shop.makeymakey.com/products/makey-makey-ki...

1 computer with Google Chrome and the Shortcut Manager extension

1 Intel Edison kit

4 Push Buttons

4 LEDs (any color)

Aluminum Foil

Step 1: Prepare the Book (Prototype 1)

In order to prep the text, glue a piece of the aluminum foil behind the section of the page which you would like to connect to the online multimedia.

Next, secure a wire end to the aluminum foil in order to create half of the circuit needed.

Finally, cut a piece of the paper, as shown in the image above, so that the aluminum foil can be seen through the page.

Step 2: Hooking Up the Makey Makey (Prototype 1)

Take the wire attached to the aluminum foil and book apparatus and insert the other end of the wire into one of the inserts on the Makey Makey board that signifies a keyboard letter.

Then insert another wire into the earth portion of the Makey makey to create the other half of the circuit.

In the image above the Makey Makey allows the aluminum foil/book page to serve as the W key on the keyboard

Step 3: Creating a Google Chrome Keyboard Shortcut (Prototype 1)

Using Shortcuts extension on Google Chrome (https://chrome.google.com/webstore/detail/shortcuts-for-google/baohinapilmkigilbbbcccncoljkdpnd?hl=en) create a shortcut that uses the keyboard key that you used to connect the aluminum foil to the Makey Makey and have the shortcut open the webpage which you would like to connect to the page in your book.Now

connect your Makey Makey to your computer and open a new Google Chrome tab.

Complete the circuit by touching the ground wire to the aluminum foil and voila! This will activate your shortcut, opening the webpage you chose in step 3.

Step 4: Putting It All Together (Prototype 1)

Now connect your Makey Makey to your computer and open a new Google Chrome tab.

Complete the circuit by touching the ground wire to the aluminum foil and voila! This will activate your shortcut, opening the webpage you chose in step 3. This can be seen functioning in the video in the introduction section.

Step 5: Configuring the Intel Edison (Prototype 2)

Configuration of the Intel Edison can be done by following the steps on one of the following websites:

(1) https://software.intel.com/en-us/iot/library/edison-getting-started

(2) https://learn.sparkfun.com/tutorials/edison-getting-started-guide

***Note: After configuring the Edison, all the remaining programming took place inside the Arduino Integrated Development Environment (IDE) (This device was using version 1.6.5)***

Before proceeding check under Tools ->Board: that you have selected the appropriate board for what you are using.

Also check that the COM port is set to be the Intel Edison Virtual COM

Step 6: Breadboarding (Prototype 2)

Use the push buttons, LEDS, and wires as seen in the image above.

Step 7: Writing the Code (Prototype 2)

In order to interface the text in your book with online resources a code which is modeled after the WiFiWebServer Arduino example, which is capable of hosting a webpage while also performing minor computations in the background, should be used.

However, the addition of the four input pins (2,4,6,8 on the breadboard in the image) that were used to determine the page display and for simplicity sake were not declared as variables, but it would be good practice to declare them as global variables.

Using the Intel Edison, it is important to not use the traditional http port of 80 because there is already prewritten code on port 80 that displays the Edison’s IP address. In this example, port 1000 was an arbitrary port that would likely not have any other traffic. Try to refrain from at least ports 22, 23, 443 as they are common ports that are used for other protocols.

Attached to this Instructable is a preliminary code which can be used and displays four webpages. Each webpage is connected to a different push button that symbolizes a page in “hooked” book.

Step 8:

Further improvements for this code involve changing the update method from polling to an interrupt system. By no longer polling and switching pages on interrupts the device would become much more efficient and possibly capable of more functionality.

Finally, the HTML will be improved to allow for more complex webpages that provide the book user with more Hook features.

<p>This is a really cool idea! I love the idea of making books more interactive. </p>
<p>Thank you! We're still early in the design process. Our next step would be to consolidate this concept as an attachment to books, so you could literally &quot;hook up&quot; the physical textbook with a digital interface. I think our biggest challenge is to find a way to detect which page the reader/user is on. We're thinking conductive ink might be the way forward!</p>

About This Instructable

144views

0favorites

License:

More by MadhurM1:Hook: Introduction 
Add instructable to: