It's been a while since I last posted - I've had a lot of work to do with uni, but now I can continue writing this project up, and I hope you enjoy reading some more on it and hopefully learning.

 

Last time I wrote about soldering together the hardware to create an NFC based bracelet which will glow based on a phone pattern.

Today I'm going to write about creating the code on an android device which will change the bracelet's pattern. I'll be using Android Studio, which you can download and set up here: link.

 

Step 1

The first step is to design the user interface. Start by creating a new activity:

Screen Shot 2015-06-12 at 13.33.06.png

Create new: Creating a new activity

Screen Shot 2015-06-12 at 13.32.23.png

 

Activity settings: Input your activity settings

Then go to the your_activty_layout.xml which should be stored in res/layouts.

Flip to the designer tab and remove the text view. Add a new grid layout.

Screen Shot 2015-06-12 at 13.39.50.png

Here your results should vary from mine depending on how many LEDs you intend to connect. For me, I put in 6, so the top row includes 4 buttons, and the third row includes a further two.Screen Shot 2015-06-12 at 13.40.39.png

In the second and fourth rows respectively, I put text inputs. Buttons will allow us to input a colour, whilst text inputs will allow us to dictate how many seconds to turn the LED on for.

Finally, I added a button at the bottom which will pull all of the inputs together into an NFC string.

Screen Shot 2015-06-12 at 13.42.32.png

 

Step 2

Next up let's create a colour picker activity. This is a popup type that isn't included in Android as standard, so here is some code I borrowed from another tutorial off of Google (track down the link):

Code:

Code to put in your main activity:

Now let's connect the buttons to the colour picker. Go back to your layout's xml file, and on each button, change the onClick handler to be the getColor method.

Screen Shot 2015-06-12 at 13.47.08.png

Step 3

Finally, let's create the handler for the Generate button. Put in this handler:

this basically goes through each button and text input, pulls the colour hex code from the button and pairs it with the text input. It then puts it all together into a string, and temporarily logs it so we know what's happened.

 

Step 4

Finally we need to put in code to send the string of data to NFC, and fill in all the gaps from the handler method we created above. Here's another gist to fill that in. Put this inside your activity outside of any handler methods:

 

We also need to modify the OnCreate method so that it sets up some things. To properly handle the colour pickers we put in earlier, we should also change the activity to extend the colour picker listener interface:

 

To make sure our app has the permission to use a phone's NFC antenna, we also need to change AndroidManifest.xml. Replace it with the following code:

 

You can test all this has worked now by putting the bracelet's antenna against the back of your phone and generating the signal. Note that if there has not been an NFC component detected, it will show an error:

Charlotte_Shot_PhoneApp.JPGCharlotte_Shot_PhoneApp_TagDetected.JPGCharlotte_Shot_PhoneApp_NFCOk.JPG

 

Then go to the Play store and download the M24SR64 demo app, open it and put the tag against your phone again. It should pop up with the string of hex input and text inputs you sent to the tag!

Next time we'll pull all of this together with code on the bracelet itself. Here is the Github repo containing the full activity. If you have any suggestions to make it better, I'd love a pull request!