WebmaKey MaKey? – here is something to start from

Sunday, September 23rd, 2012 at 8:10 pm

MaKey MaKey is amazingly cool. It is a very simple Arduino based board with a USB cable and Alligator Clips to simulate keys pressed by touching a cable and closing the circuit by holding the other cable. This would be boring though, so you can connect the second clip to anything that can transmit a current – fruit, play-doh, graphite pen drawings, you name it. Check out the video to see the idea behind it and some examples.

More than a toy

On first glance this is cool, but seems like a toy for children to do their first steps with computing. And yes, it is magic for that as the Night Zoo teacher experiment shows. But there is more to this.

A great accessibility opportunity

I’ve almost given up on trying to get the accessibility web world excited about affordable and open solutions, but using a MaKey MaKey you could create switch interfaces for people who can not handle a keyboard on a shoestring and have fun at the same time as it can be customised in any way you want to. The beachball interface for Flabbyphysics is a great example of that.

There is a whole section on the MaKey MaKey forums dedicated to accessibility called Hackcess. In general it is a good idea to check the forums for inspiration as people build a lot of wonderfully crazy things with it.

WebmaKey?

The thing I was missing a bit on the site was the web component, as a lot of the demos used Flash or native code of sorts. As I thought it a good idea to mix MaKey MaKey with Webmaking I put together a very simple blueprint to use MaKey MaKey input in an HTML page called Testy Testy.

All it is are event handlers for the right keys showing and hiding different sections in the page. There is also a demo for moving a Foxkeh around with the cursor keys.

Here’s what the README explains:

As MaKey MaKey simulates various keystrokes and click events you can interact with the computer. Testy Testy is a simple start for doing something with this.
The HTML contains sections linked to the keys simulated by MaKey MaKey. When you activate one, the appropriate section is shown, when you release the key (or the cable) it gets hidden.
<section id="right" class="reactors">
  <p>Right</p>		
</section>
<section id="right" class="reactors"> <p>Right</p> </section>
So, if you want to for example connect your MaKey MaKey to a Banana and show a picture of a banana, all you need to do is alter the HTML:
<section id="right" class="reactors">
  <a href="http://www.flickr.com/photos/robin24/5129712590/" 
     title="Banana - Isolated by robin_24, on Flickr">
    <img 
      src="http://farm5.staticflickr.com/4059/5129712590_98642c5ebf_n.jpg"
      width="320" 
      height="213" 
      alt="Banana - Isolated">
  </a>		
</section>
<section id="right" class="reactors"> <a href="http://www.flickr.com/photos/robin24/5129712590/" title="Banana - Isolated by robin_24, on Flickr"> <img src="http://farm5.staticflickr.com/4059/5129712590_98642c5ebf_n.jpg" width="320" height="213" alt="Banana - Isolated"> </a> </section>

Hopefully this will get some people started to mix HTML learning and MaKey MaKey hacking.

Mozilla Festival

At this year’s Mozilla Festival we’ll have a MaKey MaKey session. and I am actually working on a hug/kiss/high-five camera booth using MaKey MaKey and WebRTC. Let’s see how that works out :)

In any case I can only recommend to get a kit yourself as it is incredibly fun to play with!

The discussion happens on Google+ (maybe).

Tags: accessibility, MaKey MaKey, switch access, webmaking