Arduino RFID – 7 Segment LED Display


Getting started


Arduino UNO, RFID and 7 segment display

I have built an RFID reader that displays some info on a 7 segment LED display. With the Arduino this is quite simple and a lot of fun. RFIDs are electronic pieces that use radio frequency electromagnetic fields to transfer data. RFIDs can also be called RFID Tags, most of them will create have an ID. This can be used to identify them individually and perform specific tasks for each one of them. In this case the different tags will produce a different result on the display. Nevertheless, you can make an RFID engage with a computer or electronic in any way that you want.

You will need

  • RC522 RFID reader
  • 7 Segment LED Display
  • 7 X 240Ω resistors
  • Jump wires
  • Breadboard
  • Arduino Uno


To assemble everything together, I have provided an image to connect the wires and devices. You can also download the Fritzing file. Alternatively, here is an image of how everything has been connected.

Click to enlarge

Click to enlarge

Download the Fritz file here.

Download Fritz

What it does

The LED display can be able to display the information that is typed in the console. The RFID will just read what are the values of the ID and store the data in rfid.serNum[4] which in this case, I am using 102 and 46 ;. To find out the IDs’ of your tags, unhighlight the commented lines (line:372) to print the rfid.serNum[4]; on the console. You can add rfid.serNum[4],DEC; to find its decimal value or rfid.serNum[4],HEX to convert that on to hexadecimal and then use it to activate the if/else statements.


Once you have everything connected, run the Arduino code.


Hope you find this helpful!

Designing some Internet of Things – The Town Light

I have been experimenting lately with some Internet of Things (IoT) object. Some time ago, I attended a workshop at the MadLab at Manchester. Adrian McEwen presented his Bubblino, an Arduino bot that makes bubbles triggered by a Twitter message. He has written a book about designing IoT things. Based on all these examples I started experimenting myself. Working with some IoT myself, I started planning how user interfaces (UI) might affect how do we use the data that is streamed on the Web.

The Night Light Town

This is an experiment that reads the amount of light. The light data is sent to a server, which then is returned. Once the data is sent back, the Arduino reads the value and depending on the intensity, it turns on or off a LED.

To set up this you need:

  • Arduino
  • Arduino Ethernet/WiFi Shield
  • Photocell
  • 1k Ohm Resistor
  • 220 Ohm Resistor
  • A Breadboard

Here is the layout. You can use Fritzing to check more in detail how to set it up.


Fritz File

Alternatively you can download the Fritzing File:

Using Xively to Monitor Data

 Xively is a service that allows you to monitor data and then make other services or object react. In this case I use it to dump the light data to it and then get it to send it back to me. I followed the basic tutorial from the Xively website. Nevertheless, they provided the code for the WiFi Arduino Shield, so I had to make some basic modifications. This final script was based on the ones provided by Xively and Paul Bellamy.

Here is MY final code. (Make sure you include the libraries)

The Deity Collector

The Deity Collector

A Downloadable Tangible User Interface for Constructivist Museums

Now that I have started my PhD in Web Science, I wanted to talk about my MSc research project. I managed to produce a comparative study in between three tangible user interfaces (TUI). I was under the supervision of Dr. Enrico Costanza and Dr. Leif Isaksen. I learned a lot about Constructivism for museums and for educational theory. On the other hand I realised how much I still have to learn, or how little I actually know about Physical Computing and Human Computer Interaction (HCI). This was a very nice eye opener and motivating to carry on with my research pathway.

This post is more about where this is taking me, instead of the actual research method. If you would like to know more, I recommend you to go to my research blog .

My research poster

This is my poster from my MSc research project.


MSc Javier Pereda

I would like to thank PixEden for the characters kit from my poster. They produced a manga characters kit (Vector Based) completely free. I strongly recommend checking their work and their freebies! Here is the link for the characters:


Some nice events

I have been presenting the project in some conferences and academic events. I have been getting very good feedback.

This video is an interview from the DigiFest, where I presented my poster for the first time.


I also presented in the Digital Transformations Moot in London. This is a video where Nicole Beale and Dr. Gareth Beale were interviewed and presented some of the work that we are doing in the areas of Web Science and Digital Humanities at the University of Southampton.



Stop Fenton 2012 – The slacktivist campaign.

I have generated a set of graphics that emulate the Stop Kony 2012 campaign. This is based on an idea that I saw on a television show in which the popular video of Fenton the Dog is blended with this type of campaign. I explain my motivation behind this project and some new concepts of the new digital world  that we are living in.

Beyond the criticism of the Stop Kony campaign I am focusing on the ‘slacktivist’ element to make us realise how susceptible we are and how easy is to spread an idea through the Web.

Stop Kony 2012

Youtube Stats Kony

Kony Youtube Stats

The last 6th of March of 2012, over 20 million views in less than 5 days. This has been the fastest spreading viral video of all times. The video covers in a simplistic way the problem in Uganda where children are being abducted by military guerrillas lead by Joseph Kony. Regardless of how naïve or accurate is the producer Jason Russell’s vision of how to solve the problem, it is the most successful case in which awareness is created toward a socio-political problem in Africa or even the world.


People are capable of engaging into these types of campaigns in which an effect of inclusion occurs with the audience. We feel that we are part of the campaign because we used 30 minutes of our life to watch the Make Kony Famous video, and even more if we share the video or use our social network profile(s) to post our virtual support towards the campaign. We are becoming ‘slacktivists’ a blend of activists with slacking attitudes in which we care but not enough to do something significant.

So, is this damaging real activism or is the virtual awareness actually promoting action toward solving these issues? As slacktivists we are very unlikely to search for the most appropriate solutions or information toward the topics. Most revolutions have started with the educated middle class that have the culture, knowledge and some means to start the change of ideology. This promotes a gap in between activists and slacktivists. The Kony case has had many replies that indicate that the problem is not within Uganda but in the Western capitalist governments that have made Kony’s case possible. Nevertheless this is not the objective of this post.

Invisible Children is the organisation behind the Kony campaign. They have generated a mediated campaign with many celebrities and solvency behind that allows that strategic “aggressive push” of advertising and media dissemination. They as many NGOs are businesses that are focused on making a profit. Invisible Children has spent less than 4% of their money in Africa. This just generates a different perspective for me and for many other people.

10 o’clock Live

Episode 05 – Season 02 of the Channel 4 show 10 o’clock Live, Charlie Brooker came up with a quick presentation about the Kony campaign. In this dialogue he (or his team) brought a campaign that instead of stopping Kony, we will campaign to stop Fenton; a dog from a viral video from Youtube. This motivated me to produce the graphics for the Stop Fenton 2012 awareness campaign.


For this I created a series of posters, banners and social network imagery to be used. All these under (CC) Creative Commons License. So, if you use them please reference me for credit.

Stop Fenton 2012

I have utilised the same typography used on the original campaign. the most important elements are the deer as a logo an the Fenton 2012 typographic elements. It contains the same effects of red background with faded print. This generates the rough effect instead of being a very ‘polished’ design. It still needed to keep the same characteristics as the original concept.

Fenton Trinkermedia

Stop Fenton 2012 by Trinker

The full images can be found in my Flickr Gallery

Profile PictureFacebook TimelineAllA4 - PosterFentonBannerOption 2
Option 1

Stop Fenton 2012, a set on Flickr.

Extra links if you are interested:


Reply from Uganda’s Prime Minister


Visualization of Estudios Epigramaticos

Preludios Epigramaticos

The “Preludios Epigramaticos” were written in 1981 by the Cuban composer Leo Brouwer (1939- ), in what he called the “New Romanticism” phase. Inspired on poems by Miguel Hernandez, these small works employ minimalistic gestures, unusual time signatures, greek modes and recurrent intervals like 2nds, 4ths and 7ths in a rather somber atmosphere (except for a more cheery Preludio #4, which is reminiscent of popular Cuban music). They also appear to renounce to an established key or tonality, maintaining a center with independent melodic lines related to themselves through a musical idea.  Each one of them bears a fragment of a poem as subtitle.
The “Preludio Epigramatico # 1” employs all throughout the piece a rhythmic pedal (known as “Yambo”), made up by an interval of a minor 3rd (Si-Re, or B-D). It’s divided in 3 sections, A-B-A1 , and utilizes different greek modes/scales. Some interesting note groupings can be heard in the ascendant scale runs (5, 10 and the longest, 13 notes per beat). The score doesn’t have any time signature, but instead indicates a steady pulse of 1 crotchet = 60, reminiscent of a heart beat.


TrinkerMedia AR

TrinkerMedia Augmented Reality applications.

Through the development of the interfaces, trying to present anthropological behaviours and the emotions embedded to a wrestling mask design, I encountered that the technology was capable of transporting these sensations.  We usually see the wrestlers from outside their mask, but we have never seen how do they see us from behind the mask or how will it feel to be behind that mask.

Through augmented reality the potential of virtual elements can be expanded an fully teleported to the audiences location, it can embed intrinsic design elements into any object and allow that object to be fully visualised.

The primary objective was to generate a better understanding of the characteristics and behaviours of the wrestlers in the arena and their embedded qualities attached to their personas. Through these following examples, several outputs have been discovered along with several diverse technologies.

Augmented Reality

Augmented reality is a process in which a blending of several dimensions meet.  The digital and the physical objects meet together to generate a new augmented dimension.  Usually the any technology can be used to position an object on a plane and make it interact in several ways.

Total Immersion

Total Immersion is a company with presence in France, Germany, United Kingdom, Hong-Kong, Japan and in the USA.  They have developed several series of applications that allows the user to develop the most outstanding augmented reality objects.

The main issue with augmented reality is that most of the applications require a marquer for the augmented content to be displayed, Total Immersion provides robust 2D and 3D tracking, which means there is no need for a marker.  Avoiding to use a marker, can increase your creativity possibilities.  Check them out, since I believe they are the best in the field.

Alternate Options

As part of my personal research, I could not afford going to Paris and buy the applications from Total Immersion, so I decided to start working with what the community had to offer.  This forced me to work with the technologies that I currently had access to.  So I developed the applications in Flash based technology.  With the use of Papervision 3D, I managed to mount the content and I started using AIR for distribution.  Mainly the blend of ActionScript, Papervision and Spark can allow you to create these type of applications.


Get in the Ring

This augmented reality interface  will be able to position wrestlers in a wrestling ring (scale) and view, rotate and interact with them.

This video presents the process I went through to position the object along with the markers.

The second step was to be able to embed colour to the shapes. The use of Collada objects allows to place them with texturing on the Papervision 3D plane.  This experiments I attempted to see what happens if I move the object from the ground.  In this case the character in colour is on at the same height of where the ropes are going to be.  The other one is at ∆0.

AR Mask

The second experiment for augmented reality is to position a mask that can be able to be modified from the physical mask.  This has to start with a marker.

The process of using natural interfaces into the Augmented Reality interface are amazing, at this stage I am in the process of positioning the elements correctly at the time they become animated on the plane.

These experiments are still under development.  I am currently working on my audio virtual museum, which has made this project to be left out a little bit.  But more updates are coming out soon!

Audio Visualization

Audio visualisation.

Flash and ActionScript 3.0

Lately I have been learning how to visualise data using ActionScript.  One of the most amazing things you can do is visualise audio.

You can be able to take any input to flash and let it analyse it, then you can decide what to do with that data.

Example 01 – Draw a line.

This example is using the microphone, so make sure you have one connected and make sure you allow Flash to connect to your microphone.

Example 02 – Circles

This example is just pulling a normal mp3 document form the web.  (   Flash is analysing the amplitude of the audio with the is transformed to a numerical value with will act as a radius for the circles.  Each circle is directly linked to a range of MHz, which then reacts to the amplitude as a radius.

Example 02a – Circles on a mask

This is exactly the same application of the previous exercise, but in this case I just placed a video feed as a background, just to have something more dynamic.  The circles now have a mask property, which makes the video visible only when the amplitude reacts to increase the radius of the mask circel

Here are other examples.

Press Color Separation

Understanding colour for press.

Color separation process

The process of color separation starts by separating the original artwork into red, green, and blue components (for example by a digital scanner). Before digital imaging was developed, the traditional method of doing this was to photograph the image three times, using a filter for each color. However this is achieved, the desired result is three grayscale images, which represent the red, green, and blue (RGB) components of the original image:

The next step is to invert each of these separations. When a negative image of the red component is produced, the resulting image represents the cyan component of the image. Likewise, negatives are produced of the green and blue components to produce magenta and yellow separations, respectively. This is done because cyan, magenta, and yellow are subtractive primaries which each represent two of the three additive primaries (RGB) after one additive primary has been subtracted from white light.

Cyan, magenta, and yellow are the three basic colors used for color reproduction. When these three colors are variously used in printing the result should be a reasonable reproduction of the original, but in practice this is not the case. Due to limitations in the inks, the darker colors are dirty and muddied. To resolve this, a black separation is also created, which improves the shadow and contrast of the image. Numerous techniques exist to derive this black separation from the original image; these include grey component replacementunder color removal, and under color addition. This printing technique is referred to as CMYK (the “K” being short for “key.” In this case, the key color is black).

Today’s digital printing methods do not have the restriction of a single color space that traditional CMYK processes do. Many presses can print from files that were ripped with images using either RGB or CMYK modes. The color reproduction abilities of a particular color space can vary; the process of obtaining accurate colors within a color model is called color matching.

– from Wikipedia

The interface

I have developed a small interactive interface that will be able to help understand this process.

Try to match the images to create the CMYK composite.

--> Click to launch the Trinker//CMYKinterface <--

101.a Defining an Interface // Exercise

101.a The Exercise.

Building a basic website.

Through this exercise we will be building a basic website.  At this stage we will not be covering any scripts or codes for it, all we need to do is understand how these interfaces work and perhaps start planning and defining our design methodology and process.

The Mind Map

The first thing that we have to do is to define what are we going to present, this could be our main subjects or areas for our website.

What I recommend to do is to create a mind map of all the possible linkage in between our subjects or areas.  For this you can use a simple piece of paper.

As you can see we have 4 main topics or areas.

  • Home
  • Portfolio
  • Clients
  • Videos
  • As external links we will be using Flickr and Apple.

I have also defined the linkage in between our areas.  If you look closer into the arrows, we can see that Home is capable of connecting to Portfolio, Clients, Videos, Flickr and Apple.  Portfolio can connect to all the areas except Flickr and Apple.  We have to be very careful when we design the mind map to be as close and accurate as our main website or at least closest to what we have planned for our interface.  Make sure that you won’t leave anything out!

After defining our main areas, the next step in our methodology will be to assign file names to each of our areas.

If you remember from the previous post, we have to create .html or .xhtml documents. The easiest or more logical (for me at least) thing to do is to name our pages with the same or closer name of what we have already defined.  This is also very important to integrate into the mind map, since it will be our reference for all our linkeage.

Here is where we start using our first rule: Our first page has to have the filename of index.html so the browser can identify the first starting page for the website.  If you call it home.html, the browser will not find the appropriate document to render the information.

The second rule and recommendation for naming your areas or pages will be not to use capital letters, special characters or spaces.  The main problem with using special characters or capital letters is that later on it will be more complex to remember which name started with capital letters and which ones don’t.

The problem of using spaces will be that if you are working on a Mac computer and you use a space, when you translate that name with a space into a windows machine, that space will be transformed into a different character because of the way the Windows systems read the file formats, which means your file will have a different name in Windows and your browser will not be able to find it.

The next image shows the names I assigned to the areas of my mind map above.

As you can se above:

  • Home = index.html
  • Portfolio = port.html
  • Clients = clients.html
  • Videos = video.html

Making our first website

Now that we know the pages that we require, we can start creating them using Dreamweaver.

Before actually starting to create the pages we need to define the website.  This process means that we will map all our files towards a folder, hard drive or location in the computer, so when we place it on a server or any other location, all the files will be linked properly and we will not be having any missing links.

Define a website on DW welcome screen

When you launch Dreamweaver you will get the welcome screen.  In there you can find the Dreamweaver Site shortcut.

If your Welcome screen does not open, you can define the site from the files palette. Window-Files (shift+cmd+F).

Manage Sites will allow you to visualise the different projects that you are currently undertaking on your local or network folders, and you can be able to preview them as green folders with the name of your managed site.  Make sure you don’t just start storing files on any location on your machine.

If you start to work on a different computer, you will also have to manage your website in relationship to those files again.

When you click on Dreamweaver Site / Manage Sites, you will be able to see the new Site Setup Window.  I am working with with Dreamweaver CS5.

Go to Site tab and where it says Site Name, go ahead and type: Exercise01.

Now go to the finder and create a folder on your computer and call it Exercise01 and then use that path on the Local Site Folder, you can use the folder icon on the Site Setup Window.  The Servers, Version Control and Advanced Settings we are going to leave them alone.

Lets start making the pages!

We will go to File-New, we will create a New Html with no layout.

Make sure you are on the Design view, by clicking on Design on the top left corner of you Dreamweaver interface.. At any moment you can change your view to Code, Split (Code/Design) or Design only.

Go ahead and type some content on that page which will become our Home, and lets save it as index.html.  We will repeat the process of creating the rest of the files by going to File-New; and create new Html with no layout and create your Portfolio, Clients and Videos pages.

If you want to visualise what you just wrote on a browser, you just have to click on the Preview/Review in browser button located on your tools palette.

Placing content

To start placing content like images or buttons on our website, what we have to do is open our Insert Palette and make sure that palette is on the Common tab.  From there we can be able to insert different types of media.

Basic Linkeage

There are three basic ways how we will be creating hyperlinks on our website.

By typing the name of the file on the property inspector, by pointing to the file or by browsing to the file.  This process can be also reproduced with images like jpg, png, or gifs.

Here is a video showing the way to create the hyperlinks.

Placing images

The most commonly used image formats for web are jpg, gif and png. Jpg have the widest colour range and is the most recommended one for pictures.  Gif is a very old format that allows us to create some animation with it, it can also contain transparency, the only issue is its compression which is not great.  Png is quite a not so old format that most browsers support now and can offer us an excellent compression, transparency but with no animation, This is perhaps the one you want to use for your logos and vector images.

The next video will show you how to place any kind of image into your website and centre it.