May 26, 2008

How to create a (magnetic) tangible user interface.

One of the main components of my jive project was a tangible user interface, this was meant to be a RFID+TUI but I wasn’t able to create thin enough antennas to work in this manor. That is why there is a RFID Antenna on the middle stand.

The tangible user interface uses Phidgets magnet sensors to sensors when a ‘friend pass’ is placed onto the screen. This then triggers one of three actionscripit animations, the initial design and implementation is really simple, but this is just the beginning.

If you are an experienced AS3 coder and know anything about XMLsockets, I would be great full of a hand to get this prototype working to its full potential at the graduate shows. Also, if it could dynamically load photos from Flickr, or really get Tweets that would also be amazing!

Jump in to find out more…

jive using a 3 point tangible user interface.

Testing the Sensors Work.

tangiable user interface

tangible user interface - test rig 2tangible user interface - test rig 3tangible user interface - test rig with acylic

Using Phidget magnet sensors I first worked out if the magnetic I was using were strong enought to work through a laptop LCD. I was lucky that event 5 year old laptops only have a 8-11mm thickness. There are some points that are shielded, but so far there has been no problems with using rare earth magnets so close to the display. A quick good search found out that the magentic problems are mainly associated with Cathode ray monitors.

Embedding the magnetic sensors.

 Embedding the magnetic sensors for the tangiable user interface.

while testing the sensors.  Embedding the magnetic sensors and testing.

The next stage was to embed the sensors into the rear of the screen. I completely stripped down the Dell laptop that I was using, and taped the sensors in place to get the initial feel for the tangible user interface.

The Flash (AS3) Code

jive user interface example.

The last stage was to create an image on the screen that aligned the physical object to the location of the magnet sensors. This animation will now apear as if its a tangible user interface, move a object to explore, and the explore diagloge comes up.

Download the AS3 FLA – Source Code

Creative Commons License
This work is licenced under a Creative Commons Licence. Ben Arent also hold a UK patent pending [0808775.1] on some of this tech, so if your VC and want to get in on the action get in touch!

The ‘Friend Pass’.

a friend pass with an avatar, and two magnets.

The friend pass had to be modified to work on the screen. The resulting friend pass had to have two magnets one to trigger the sensor, and a larger one to stick the avatar to the screen. This is mainly because the weight of the acrylic. Early prototypes used steel, but the final device had to have another magnet placed 30mm about the sensor to hold the pass in place.

You should now have a tangilbe user interface!

This is just the begging of what could be possible, it would be great to see manufactures build sensors directly into screens. If you are a AS3 coder, or think you could even create this in Blend, please get in touch. It would be great to link this up to some live services.

I’m also looking for someone who can help me with an XML socket, which is meant to read the RFID reader.


  1. this is great ben. i *am* inspired by you…definatly!! xx

    Comment by chante — June 6, 2008 @ 11:41 pm

  2. This is a very interesting product. I had a couple questions:

    About the power of the RFID signal. I wonder if the new RFID company, Mojix, ( would be of any help. There new system reportedly has blown away previous distance limitations.

    2) I do wonder about the life-span of the concept. I agree that the integration of RFID and flat screens can have amazing possibilities (interaction with the all-in-one “personal identity card” that the western world seems on the road to adopt), but this particular application seems geared towards older or less technically savvy folks who need a interaction metaphor they are more familiar with. Some might argue that the less technical demographic (grandmothers) that need this is going to be in steady decline as each tech-savvy generation is born. Thus the value of this system might be short lived. How would you respond to such a statement?

    Comment by John Donohoe — June 11, 2008 @ 10:43 am

  3. Thanks for the comments on my blog. RFID has been an interesting technology to work with, I worked with a logistics reader and there are some great readers, but are pretty difficult for a ‘designer’ to get working straight out of the box. I think there is a lot to be explored and when software such as Expression Blend becoming more usable, I think we shall see some great developments with this sort of stuff. I shall have a look into Mojix

    In regards to your second statement. I believe that by making a product more accessible helps everyone. I have had great user feedback from a really young age group. At a recent show I had a couple of parents who had to drag away young children.
    Another area of discussion to your statement is that even if a 60 year old ‘technophobes’ die out, there is still a good 20 to 40 years of live left in them. And this is a VERY long time in the world of the ‘Gadget’.
    One of the most important part of my designs being designing the whole ‘net’ experience from connecting to a ISP to hardware and finally how the interface and website works. I believe that by designing the complete experience will help create better and more accessible products.

    Comment by benarent — June 12, 2008 @ 9:43 am

  4. [...] Para el que le interese como está hecha esa interfaz en su blog lo explica casi todo… [...]

    Pingback by DailyCosas 2.0 » Blog Archive » Otras redes sociales: para mayores, para adictos al sexo, para mac’eros… — June 24, 2008 @ 6:20 am

  5. [...] I would recommend the book, but you can get a lot from the web. You can download the first chapter, and gesture stencils from the website.  Ow. And don’t forget you can download the source to build your own magnetic user interface. [...]

    Pingback by » jive - Featured in Designing Gestural User Interfaces. — January 9, 2009 @ 5:28 pm

  6. What’s up, I read your blogs daily. Your humoristic style is witty, keep up
    the good work!

    My weblog:AndrewsAutomation

    Comment by AndrewsAutomation — July 7, 2014 @ 3:19 am

  7. Awesome post.

    Here is my page – Garage Buildings

    Comment by Garage Buildings — August 22, 2014 @ 3:50 pm

Leave a comment

RSS feed for comments on this post. TrackBack URI