Software apps and online services

Particle.io

Hand tools and fabrication machines

Laser cutter (generic)

Soldering iron (generic)

Story

Background

"So you made a clock huh?" - Yes, I made a clock, a cool one though.

When I was little, my mom held back on teaching me how to read a regular analog clock so she could send me to bed earlier when she saw I was tired. Smart move. Unfortunately, analog clocks have since never been a great joy in my life, so I set out to look for something different. I've been used to using digital clocks, but they got boring too after a while. That's around the time I saw a word clock for the first time. "That makes so much sense" is one of the first things I thought, and the seed was planted.

Fast forward to Maker Faire 2015, where I had the pleasure of meeting the Particle team and several of the Elites, I noticed one of the latter was building a word clock as well. That's what gave me the final motivation to build one myself. Luckily I saw him struggling with soldering well over a 100 Neopixels for over a day, and I decided mine would have to be simpler. One of the other Elites had made an interesting project with an RGB matrix, which sparked the idea that those two might make a great combo.

The original V1 motivation by @wgbartley

Fast forward a bit more, and I started contemplating about how to best build my own version. I knew I wanted it to be something 'different', and a bit more 'advanced' than those 5-minute-accurate versions. There's nothing wrong with those, but I wanted more. Having always been a fan of Star Wars I thought it'd be fun to somehow combine those. Unknown to me at the time was that this contest was coming up, which was a welcome incentive to actually start doing something, rather than just dreaming about it.

Lettering design

So, a word clock apparently needed words. I know, who would've thought, right? Hopeful as I was, I thought some smart person had probably figured out an algorithm to figure out the patterns. I found exactly one program, run in some Java machine that could do some basic layouts. First problem was the fact that I couldn't for the life of me get it running. Second problem was that it was relatively 'basic'. It could only do horizontal words, and only specific sets. Either was a no-go since I wanted vertical words as well as double sets.

After abandoning all hope of finding an existing layout (that's what you get for wanting custom things), I figured I might as well pull out trusty old excel and start puzzling. After about three days of frustrations, I managed to cram in as many Star Wars references as I could while maintaining the word clock functionality. Lovely.

That's how you iterate a word clock design

Now, in this layout I opted for a 'double system', so that you could display the time in the most common ways. The first being "It's MM minutes past/to HH", and the second one being "It's HH (o) MM". "Why would you want that?", I hear you say, well, because I could. No particular reason other than me thinking it was a good idea.

The reason it was so difficult to design this was because I wanted not only horizontal words, but vertical ones as well. With horizontal ones only, I would've probably had 2 rows left over. Unfortunately, things become quite a bit more complicated when they need to line up for the several words I wanted hidden in there. That also means that if you take those word out, there's quite a bit of space left for alternatives, such as weather conditions.

Case design

For the case I had several ideas. I thought of making it a BB-8 with a rotating head. It'd be in 2D, and the head would be able to rotate around the body. Alternatively, I though of making a Death Star with a laser beam out of fiber, like this guy did. Finally I figured edge-lit acrylic might look really neat as well. Seeing as the construction of a movable BB-8 was outside the reach of my capabilities, and there was no good way to combine the fiber with the matrix, I opted to go for the edge-lit acrylic.

The casing itself I wasn't too sure about, and hadn't really put too much thought into it either. The day before I could use the laser cutter at the FabLab at my school, I put together a simple box design. I got some 4mm plywood, and cut my casing out of it.

All design work has been done in both AutoDesk and Adobe Illustrator. I had used neither of these tools before, so it was mainly drawing lines by hand. It's a good way to get to know the software, so I'd recommend it regardless.

Building the casing

It was decided that the front plate would be clear acrylic lasered with a Death Star pattern that was to be edge-lit with a bunch of neopixels. The casing would be 4mm ply. To defuse the light, slightly opaque acrylic would be sandwiched between the front plate and the letters. So, that's what I did. I went to the FabLab, and lasered everything. Much to my surprise everything fit from the first go-around.

Pros:

- Clear acrylic looked REALLY NICE when lit.

- Opaque acrylic gave a holographic appearance with a single LED.

- Plywood was cheap.

Cons:

- Opaque acrylic diffused too much, made it hard to read.

- Ply didn't look as nice unpainted.

- Ply didn't look nice at all painted due to the wood; looked like smudges.

- No idea how to attach the front plate.

- My matrix kept falling backwards due to lack of support.

1 / 6 • They're so tiny and cute :)

Solution:

Build a new casing, using 3mm black acrylic. It's shiny, and looks really really nice. It has that "professional product" look to it. It didn't come cheap since I needed it desperately and couldn't find it anywhere else. Worth it in the end. Looks much more professional and finished, and with a bit of electrical tape was very easy to neatly attach to the front plate. I also added internal supports for the matrix, so that stays in place very well now. Putting it together can only happen in one way, and that's pretty self-explanatory. Looks so much better now:

1 / 2 • That feeling.

The electronics

Although it might look like a complicated project it was actually very easy to do. The matrix made life a whole lot easier by now having to solder all those LEDs manually. So worth it. Hooking up the Photon to the Matrix was a breeze since @Peekay123 had so kindly provided me with one of this RGB Matrix shields. You plug the Photon in the shield, and the shield in the matrix, and that's it. Soldering the components to the board was all that was needed (which are about 20 pins).

The prototype area on the shield came to good use for hooking up the Neopixel for lighting the acrylic. At first I planned on putting a strip around the whole thing, but a single LED was bright enough that that wasn't necessary anymore. So, with another three wires, the neopixel was hooked up, still very easy to do.

Photon on shield, on matrix, in Case.

Sound

I figured it'd be cool if the clock could play sounds of some sort so it could be used for notifications, or just for fun. To that end I bought some cheapish music module from Ebay. Unfortunately I couldn't get the thing working and had to abandon the idea. In that same time, there was a post on the Particle community about a "cheap MP3 shield", which seemed interesting. I thought I could always add it after the contest, so I ordered two.

Much to my surprise, they arrived after 6(!) days from China - Netherlands. Totally unexpected, I had made no preparations to include it anymore. Still wanting to try it, I set it up on a breadboard with another Photon, and used the power of The Force (Internet) to connect the two. Using Particle publish and subscribe made this surprisingly easy to do. This is unfortunately not yet encased due to an exam messing up my time, but will be in the future. For now, it can be hooked up to pretty much any headphone jack. I've used two small speakers to test it, and it works wonderfully.

DFMini MP3 hooked up to off-the-shelve speakers.

Power

Powering the clock was/is a challenge. The Matrix can draw up to 4A when fully lit, and the photon about 300mA. One single neopixel can also draw 60mA. All those combined made it tough to power. The shield included a barrel jack and a 4 pin or screw terminal to connect to. Unfortunately I didn't have a beefy enough 5V supply laying around, so I decided to cheap-skate a little bit. (The following is how I did it for now, this will be fixed in the future and is by no means permanent, nor should it be!) I soldered an old USB cable to the shield and hooked that up to an iPad charger. Now, those only provide 2.1A, so are clearly not enough when you go all-out. Luckily, most of the time most of the pixels are off. You only need a couple to display the time, so you end up with a lower requirement. Admittedly, it's not good to design your system based on those assumptions, so I'd wholeheartedly recommend you get a decent power supply.

Software

Hardware can't do a thing without software, and that's where the 'magic' happens. Like I mentioned before, I wanted something 'more' than just a 'normal' word clock. I wanted something cool. I ended up putting different modes on it which you can use. Let's go through them briefly.

- Word clock: This is the word clock as you know it. It tells time and does so in one of two syntaxes. You've got "It's MM minutes past/to HH" and "It's HH (o) MM" to choose from. You can change the colors of the text as you please, and it should be fairly straightforward to extend this to full rainbow colors, for those interested.

- Matrix animation: This is the 'digital rain' from the matrix movies. What better medium to play it on than a matrix with letters. Match made in heaven (or code, actually...) For this part I used code from Carbon Frog who also design word clocks. I'm no lawyer, but I understood the code was free to use according to the license. I had to edit very minor parts to make it line up with the code I already had in place, and account for the difference in size. Other than that, it wasn't too hard. All credits to them for that code, I merely merged that. (I don't wish to infringe on anything, they've got nice code, and I was glad I could use it. Check them out, they make nice things!)

- Digital display: Use the matrix as a matrix and display the time in a digital fashion. Use the individual letters as pixels to make up digital letters. Easy to read from further away due to the increased size. Ideal for those mornings where your eyes are still stuck to your face.

- Snake: this might not be Star Wars related, but it's still really cool. As the name suggests, you can play Snake. Controls are currently through a web browser, but could just as easily be capacitive touch, movement sensors, accelerometers, and all kinds of crazy stuff. There are some Star Wars elements in it though, check the videos at the bottom for those.

1 / 4 • Word clock mode

Besides those modes, there are also the 'hidden' words that can be activated on demand. I won't spoil them, but can say there are 6 things to find in there, for those interested in searching. Linking this up with the sounds makes for a very neat effect. You see the clock display its gimmick, and hear speaker somewhere else accompany it. If that isn't IoT Force power, then I don't know what it ;).

Alternatively, this could also be used in a more useful fashion. IFTTT for example allows you to connect a huge amount of online services to it. Making LEDs blink, playing sounds, showing messages, and things like that are all very easy to do thanks to services like this. Tagged in a photo on facebook, blink blue. Got an email on gmail, fade red. This could even act as a notification devices for people with disabilities. It's both a graphical and audio stimulant that can warn them of certain events.

The code itself is not too difficult to understand, and should be fairly self-explanatory. Should you encounter anything that's hard to understand, feel free to ask, and I'll try my best to elaborate!

Interaction

Currently the Clock is controlled by a web page. It's made with the Particle Javascript library, and it kept as basic as possible to allow for easy customization. It too, should be rather easy to understand, since most actual actions are function calls to the clock, everything else is mostly cosmetics. Again, if something is unclear, feel free to ask!

1 / 2 • Very easy to use interface

In the future I'd like to expand the interaction possibilities with capacitive touch sensors. Those can be placed on the backside but can be triggered from the front. Not only does this look really neat and Star Wars-ish, but it also allows for local control, which despite the IoT era can still be nice every once in a while.

As mentioned before, services like IFTTT allow for very easy connections between online services. With Particle being one of said services, there's a lot of combinations to make, depending on your needs, wants, and or interests. Some like facebook notifications, other the current stockprice. Both are possible.

It also serves as a geeky communication device if you want it to. By using the matrix capabilities, it's possible to scroll text on the screen. Combining that with an active internet connection, and you've got a very simply and fun way to send messages to loved ones. Hook it up to IFTTT and you can even text it, or tweet it, or...

Display environmental data; those with a keen eye have probably noticed the extra sensor on the shield, that has been left unmentioned. That was in fact a DHT22 temperature and humidity sensor. Due to exams I have not been able to integrate this yet, but it's very doable, and shouldn't be too hard. That'll allow you to use the clock as an indoor thermostat. With the power of the internet you could also pull down weather data, and set it up as a local weather station, notifying you when it's going to rain and/or when it's going to be really hot.

I could go on like this for a while, but it should be obvious by now that there is no lack of possibilities.

Build your own

So, for people interested in building their own, I'll try and lay out the steps you might take to get this going. First of all, make sure you've got a bit of time to spend on this. Depending on what materials and equipment are available to you, not to mention your skills, this could take a weekend. Well spend, if I may say so myself.

Design

Download the design files, and load them up in your favorite editor. Make sure everything still has the proper dimensions, since importing files can often mess with this. The design I've uploaded has been made to work with 3mm material for the entire casing. The front plate should be 5mm clear acrylic for the best effect, since it's the same thickness as a neopixel. Then, find a place where you can use a laser cutter if you haven't got one yourself. See what type of files they require for their cutter and make sure you convert them to the appropriate format before going there. There's nothing worse than getting there with all the materials only to find out your files won't work. Time is precious, and cutting the whole clock took around 1.5 hours on a 35W Epilog Zing laser cutter. Depending on what device you have access to, that time may vary.

Cutting the materials

Once you've made sure all your files are okay to go for the machine you'll be using it's time to gather materials (if you haven't yet some so). Personally, I started with a 4mm ply case, but switched to 3mm black acrylic since it doesn't require finishing. You peel off the protective plastic and it looks amazing, whereas you'd have to sand the wood, paint it, and then hope it turns out right (which it didn't for me). Again, make sure the thickness matches the design and visa versa! Then, for the front plate, get clear 5mm acryllic, at least 30 by 30 cm (the plate itself will be 29cm diameter). Once you've got all that, go to your favorite laser cutter, prime it according to the specifications, load the materials and hit 'go'. Then, continue to watch in awe as you're making a PEW PEW laser WoMD by using a PEW PEW laser. Neat, isn't it?

1 / 4 • Cheerfully cutting away

Electronics

Right, as I've mentioned, it was a rather easy project in terms of electronics, since I had this neat little shield. I'd highly recommend you to get one as well, since it make the process a whole lot smoother. Alternatively, you can design your own, of even use a protoboard if you like. The former gives a lot of flexibility in terms of design, allowing you to change things as you please (bigger smaller proto area for example). The latter option is probably one of the cheaper ones, although you'd have to solder all connections yourself, which can get rather messy. Again, the shield is a worthwhile investment, if only to save you the hassle of soldering the connections, while allowing for plug & play functionality.

Regardless of what option you choose, you'll need to solder the shield, and the neopixel to it. In the attachment is a schematic of how the neopixel should be connected. Due to a lacking part for the shield, I've used a 'bare' neopixel on a 'bare' Photon. Luckily, the pins are marked on the shield as well, so it should be rather trivial to solder them. I chose to use male headers on the board, and female Dupont cables for the neopixel, you I could easily take it off for servicing. You can solder them permanently as well, though you'll have to be a bit more carefully when dis(assembling).

The shield on the bare matrix. Neopixel not attached.

Assembly

Once you've got the parts and electronics ready, it's time to assemble. It's rather self explanatory, but let's go through it regardless. The pictures below might help, but let's talk through it as well.

I'd suggest laying out the pieces so you've got a nice overview of what you've got. Put the backplate down, with the hole on the top right side. Put the four sides on their respective sides, making sure you mirror the pieces. Then, put the small supports in the two sides. These too need to be mirrored, since the holes need to align with the small 'pins' on the matrix. With a bit of fumbling, raise the sides up, and interlock them using the holes.

Once that's done, I'd suggest putting a little bit of scotch tape on the sides an back to keep it together temporarily. Continuing, you should now be able to lay in the matrix, which should sit flush to the case. Make sure you properly align it, since the shield should be able to go through the hole in the back. All good, moving on, put the raster over the matrix, which should prevent the light from 'bleeding' into the other letters. Then, to diffuse the light (the matrix is awfully bright), cut a piece of paper to 192mm by 192mm, and put that over the raster. Finally, add the letter plate by pushing it onto the sides. Just so I've said it, make sure you align it properly. With the bottom hole in the top right, the text should be readable from top, left to right.

Attaching the LED and front plate will be done simultaneously. Make sure both the Letter plate and the front plate are as clean as possible. You don't want to remove them after this. Put the front plate on the letter plate, making sure the 'laser nozzle' lines up with the 'E' in the top right corner. Then, using black electrical tape, start taping the two sides together, making sure the top of the tape is flush with the top of the plates. Gently turn the clock as you attach the tape, and press is gently to make sure it sticks. Due to the stretchiness of the tape, it curved nicely around the back, thus eliminating the need to cut it. Just before you reach full circle, cut if off, leaving about 5 mm of acrylic exposed, since that's where your neopixel is going to go. Prior to attaching the neopixel, I suggest coloring the sides black with a sharpie, since you'll then not notice it as much. Once that's done, put the neopixel against the clock, and stick a small piece of electrical tape over it to secure it.

Turn the clock over, and plug in the shield. If you hadn't yet attached power cables to your Matrix, you can remove the backplate, and do so now. Put the backplate on again, and insert the feet. You should be able to put them through the holes, and slide them up. If you want to hang the clock to the wall, you can omit the latter step, and use the small hole on the top to hang it.

Depending on the materials used and the accuracy of the laser cutter, things might somewhat loose, or somewhat tight. If you're lucky, the clock will hold with pressure fit, eliminating the need for adhesives. If it's on the loose side, you can consider using the black tape again, of perhaps some specialized acrylic glue. Since mine seems to hold up just fine, I've used neither.

That's it, mechanical and electrical construction completed.

1 / 7 • Lay out the pieces for an overview.

Code

unfortunately, smart robots are (still) a Star Wars dream, so unless you tell it what to do, it's not (yet) going to think for itself. To that extend, we need to put some code on it. Considering the fact that Particle is really awesome, the shield was made for it, the fact that I had every intention of using one, and this contest requires one, I figured I might as well use a Particle device for that ;) I suggest you do the same.

Okay, so you've got your Photon, and you've set it up. Assuming you've had no trouble doing so, you should have a cyan breathing device, which you can toggle the D7 led with using the app. If something did go awry, or you encountered issues, consider checking out the community for help. There are some very lovely folks on there, who'll gladly lend a hand.

So, with a working Photon, go to the web IDE. There, create a new app, and give the poor thing a name. Once that's done, use the libraries system to manually include the following libraries: neopixel, SparkIntervalTimer, Adafruit_mfGFX, RGBmatrixPanel. You have to do these manually, the IDE won't select them otherwise. Continuing, click the little '+' icon in the top of the idea to create a new tab (in the IDE, not your browser). Name the new tabs 'snake' (case sensitive!). Once that's done, copy the contents of the respective attached files into the tabs on the IDE. Finally, copy the contents of the main file, and paste it over whatever is in the main app on the web IDE by now. Make sure you edit the 'timezone' variable at around line 85-95 to make sure it matches the one you're in. After selecting the correct device and saying a little prayer, hit the 'verify' button, and hope everything works out the way it should. For those who don't know, that's when it says 'ready!' and doesn't give you a bunch of errors. If it works, hit 'flash' and be amazed at how you're now flashing a micro controller wirelessly, thanks to The Force (and some really, really awesome people over at Particle HQ!).

If all went well, your Photon should now restart, and your clock should come to life. Isn't that awesome?! (Yes! Yes it is!) Now, casually whisper (scream): "POWER! UNLIMITED POWER!", and gloat while your loved ones stare at you as if you've finally gone completely mental. Totally worth it though!

Control

The clock will actually run just fine on its own, but the real fun comes in the you can make it do stuff. For that I've made a really simple web page that'll allow you to control the clock remotely. To use it, place the three web related files (.html, .css, and .js) in the same directory. Then, edit the .html file with a text editor to replace your credentials in the appropriate places. They should be your Particle account email/password as well as the deviceID from the Photon you've used. The latter can be found be clicking the little arrow next to the device name in the Web IDE. If completed, open the .html file in your browser, and click away. If nothing got messed up, you should now be able to control your clock. If you manage to get these files on a web server, this will work from anywhere in the world. Controls, done.

Changing the display using the controls.

With the clock and controls finished, the project it pretty much done. Although, it'd be really cool and convenient to add some sounds to it as well...

Sound

As mentioned, due to conflicting timetables (exams) and bad modules, I wasn't able to integrate sound into the casing before the end of the contest anymore. What I was able to do, was hooping up a good module to a separate Photon, and trigger that using the Force (Particle.publish and subcribe). That allowed me to quickly and easily test the setup without having to solder it in yet. As a matter of fact, I might leave it separated as is, since I can now place the clock and the sound in different places, making for a cool effect. The 'sound' Photon could even be used to add some physical controls to the clock as well.

To integrate sound, hook up the DFMini MP3 player as depicted in the attached schematic. Then, put some MP3 files on an microSD card, and be sure to name them XXXX_whatever. The XXXX would be the number of the song. "0008_Empire" for example would be the eight song. Insert the card, and make sure you've got some speakers hooked up.

Using the same procedure as before, create a new app in the Web IDE and copy the attached code into the project. This one doesn't use any libraries, so you don't have to worry about that. Flash it to the device, and wait for the Photon to restart.

If everything went according to plan, the clock should now trigger various sounds upon certain actions. Give Snake a try, of try activating some of the hidden words through the control page.

For those who can't wait to see it, here it is in its full glory. The breadboard on the left is in no way connected to the clock besides through the internet. All interactions happen through the Force (and satellites, servers, transatlantic cables, fibre, ISPs... mostly The Force though).

The 'hidden' words

Well, in all honesty, what good would a Death Star do if you can't fire it? Remember that 'E' you had to align the nozzle to, well, here it is...

Those poor souls, obliterated by an energy efficient LED :'(

Now, let the apprentice become the master. I've trained you well, young Padawan, time to explore the galaxy on your own. Go forth, and expand upon what I have given thee. Build a clock, you must!

Conclusion

I've built a clock. And it's a pretty neat one. Mentioned several times, I wanted to create something 'more'. Designing a one-off 'ultimate' Star Wars project would've been cool, but then it would've been just that: 'ultimate Star Wars'. Instead, I (think) I built something that's not only ecstatically pleasing (I got my mom' seal of approval for a glowing Death Star, that's enough evidence for me...), but that's also actually useful. Yes, "it's just a clock", but I'll bet you I'll use a clock more often than a light saber (unfortunately...). With this project I've made something that's not only nice to have for now, and when my geeky friends come over, but it's actually something anybody could enjoy, due to the 'extreme' customization options. Swap the Death Star for your favorite Instagram quote, and you've finally got an excuse to use it. Hook up some IR LEDs and control your appliances. Use it to let your loved ones know you're thinking about them. Enable people with disabilities to have other means of notifications. Or, you know, attach a laser and blow up some planets. There's something for everybody.

Alternatively, just enjoy the beautiful thing you've just made :)!

1 / 2 • What he says ;)

Much more fun with sound, though still not as easy ;)

Intergalactic Snake...

A final word of thanks to all the people who made this possible. The Star Wars universe is what inspired this. Several other people made it a reality, for which I'm grateful. With that said, all rights go to their respective owners, and I do not want to take credit for what isn't mine. I've tried to give credit where it was due, but for the ones I might have forgotten, there's this: thank you! No infringement of any kind is intended. The contents I've used, has been used because I very much admire the things you've created, and I hope you can see it as such. I tried my best to combine all the components into the project that it has become, and I think it turned out rather nice.

Code

main.cpp

C/C++

It's the main code. Insert it into a new project in the web IDE and make sure you include the mentioned libraries through the library system. You'll have to add them manually, this won't happen automatically!

fastclick.js

JavaScript

Just make sure it's in the same directory as the HTML file. It'll speed up click on mobile devices, which is needed for Snake.

;(function(){'use strict';/** * @preserve FastClick: polyfill to remove click delays on browsers with touch UIs. * * @codingstandard ftlabs-jsv2 * @copyright The Financial Times Limited [All Rights Reserved] * @license MIT License (see LICENSE.txt) *//*jslint browser:true, node:true*//*global define, Event, Node*//** * Instantiate fast-clicking listeners on the specified layer. * * @constructor * @param {Element} layer The layer to listen on * @param {Object} [options={}] The options to override the defaults */functionFastClick(layer,options){varoldOnClick;options=options||{};/** * Whether a click is currently being tracked. * * @type boolean */this.trackingClick=false;/** * Timestamp for when click tracking started. * * @type number */this.trackingClickStart=0;/** * The element being tracked for a click. * * @type EventTarget */this.targetElement=null;/** * X-coordinate of touch start event. * * @type number */this.touchStartX=0;/** * Y-coordinate of touch start event. * * @type number */this.touchStartY=0;/** * ID of the last touch, retrieved from Touch.identifier. * * @type number */this.lastTouchIdentifier=0;/** * Touchmove boundary, beyond which a click will be cancelled. * * @type number */this.touchBoundary=options.touchBoundary||10;/** * The FastClick layer. * * @type Element */this.layer=layer;/** * The minimum time between tap(touchstart and touchend) events * * @type number */this.tapDelay=options.tapDelay||200;/** * The maximum time for a tap * * @type number */this.tapTimeout=options.tapTimeout||700;if(FastClick.notNeeded(layer)){return;}// Some old versions of Android don't have Function.prototype.bindfunctionbind(method,context){returnfunction(){returnmethod.apply(context,arguments);};}varmethods=['onMouse','onClick','onTouchStart','onTouchMove','onTouchEnd','onTouchCancel'];varcontext=this;for(vari=0,l=methods.length;i<l;i++){context[methods[i]]=bind(context[methods[i]],context);}// Set up event handlers as requiredif(deviceIsAndroid){layer.addEventListener('mouseover',this.onMouse,true);layer.addEventListener('mousedown',this.onMouse,true);layer.addEventListener('mouseup',this.onMouse,true);}layer.addEventListener('click',this.onClick,true);layer.addEventListener('touchstart',this.onTouchStart,false);layer.addEventListener('touchmove',this.onTouchMove,false);layer.addEventListener('touchend',this.onTouchEnd,false);layer.addEventListener('touchcancel',this.onTouchCancel,false);// Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)// which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick// layer when they are cancelled.if(!Event.prototype.stopImmediatePropagation){layer.removeEventListener=function(type,callback,capture){varrmv=Node.prototype.removeEventListener;if(type==='click'){rmv.call(layer,type,callback.hijacked||callback,capture);}else{rmv.call(layer,type,callback,capture);}};layer.addEventListener=function(type,callback,capture){varadv=Node.prototype.addEventListener;if(type==='click'){adv.call(layer,type,callback.hijacked||(callback.hijacked=function(event){if(!event.propagationStopped){callback(event);}}),capture);}else{adv.call(layer,type,callback,capture);}};}// If a handler is already declared in the element's onclick attribute, it will be fired before// FastClick's onClick handler. Fix this by pulling out the user-defined handler function and// adding it as listener.if(typeoflayer.onclick==='function'){// Android browser on at least 3.2 requires a new reference to the function in layer.onclick// - the old one won't work if passed to addEventListener directly.oldOnClick=layer.onclick;layer.addEventListener('click',function(event){oldOnClick(event);},false);layer.onclick=null;}}/** * Windows Phone 8.1 fakes user agent string to look like Android and iPhone. * * @type boolean */vardeviceIsWindowsPhone=navigator.userAgent.indexOf("Windows Phone")>=0;/** * Android requires exceptions. * * @type boolean */vardeviceIsAndroid=navigator.userAgent.indexOf('Android')>0&&!deviceIsWindowsPhone;/** * iOS requires exceptions. * * @type boolean */vardeviceIsIOS=/iP(ad|hone|od)/.test(navigator.userAgent)&&!deviceIsWindowsPhone;/** * iOS 4 requires an exception for select elements. * * @type boolean */vardeviceIsIOS4=deviceIsIOS&&(/OS 4_\d(_\d)?/).test(navigator.userAgent);/** * iOS 6.0-7.* requires the target element to be manually derived * * @type boolean */vardeviceIsIOSWithBadTarget=deviceIsIOS&&(/OS [6-7]_\d/).test(navigator.userAgent);/** * BlackBerry requires exceptions. * * @type boolean */vardeviceIsBlackBerry10=navigator.userAgent.indexOf('BB10')>0;/** * Determine whether a given element requires a native click. * * @param {EventTarget|Element} target Target DOM element * @returns {boolean} Returns true if the element needs a native click */FastClick.prototype.needsClick=function(target){switch(target.nodeName.toLowerCase()){// Don't send a synthetic click to disabled inputs (issue #62)case'button':case'select':case'textarea':if(target.disabled){returntrue;}break;case'input':// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)if((deviceIsIOS&&target.type==='file')||target.disabled){returntrue;}break;case'label':case'iframe':// iOS8 homescreen apps can prevent events bubbling into framescase'video':returntrue;}return(/\bneedsclick\b/).test(target.className);};/** * Determine whether a given element requires a call to focus to simulate click into element. * * @param {EventTarget|Element} target Target DOM element * @returns {boolean} Returns true if the element requires a call to focus to simulate native click. */FastClick.prototype.needsFocus=function(target){switch(target.nodeName.toLowerCase()){case'textarea':returntrue;case'select':return!deviceIsAndroid;case'input':switch(target.type){case'button':case'checkbox':case'file':case'image':case'radio':case'submit':returnfalse;}// No point in attempting to focus disabled inputsreturn!target.disabled&&!target.readOnly;default:return(/\bneedsfocus\b/).test(target.className);}};/** * Send a click event to the specified element. * * @param {EventTarget|Element} targetElement * @param {Event} event */FastClick.prototype.sendClick=function(targetElement,event){varclickEvent,touch;// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)if(document.activeElement&&document.activeElement!==targetElement){document.activeElement.blur();}touch=event.changedTouches[0];// Synthesise a click event, with an extra attribute so it can be trackedclickEvent=document.createEvent('MouseEvents');clickEvent.initMouseEvent(this.determineEventType(targetElement),true,true,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,false,false,false,0,null);clickEvent.forwardedTouchEvent=true;targetElement.dispatchEvent(clickEvent);};FastClick.prototype.determineEventType=function(targetElement){//Issue #159: Android Chrome Select Box does not open with a synthetic click eventif(deviceIsAndroid&&targetElement.tagName.toLowerCase()==='select'){return'mousedown';}return'click';};/** * @param {EventTarget|Element} targetElement */FastClick.prototype.focus=function(targetElement){varlength;// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.if(deviceIsIOS&&targetElement.setSelectionRange&&targetElement.type.indexOf('date')!==0&&targetElement.type!=='time'&&targetElement.type!=='month'){length=targetElement.value.length;targetElement.setSelectionRange(length,length);}else{targetElement.focus();}};/** * Check whether the given target element is a child of a scrollable layer and if so, set a flag on it. * * @param {EventTarget|Element} targetElement */FastClick.prototype.updateScrollParent=function(targetElement){varscrollParent,parentElement;scrollParent=targetElement.fastClickScrollParent;// Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the// target element was moved to another parent.if(!scrollParent||!scrollParent.contains(targetElement)){parentElement=targetElement;do{if(parentElement.scrollHeight>parentElement.offsetHeight){scrollParent=parentElement;targetElement.fastClickScrollParent=parentElement;break;}parentElement=parentElement.parentElement;}while(parentElement);}// Always update the scroll top tracker if possible.if(scrollParent){scrollParent.fastClickLastScrollTop=scrollParent.scrollTop;}};/** * @param {EventTarget} targetElement * @returns {Element|EventTarget} */FastClick.prototype.getTargetElementFromEventTarget=function(eventTarget){// On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node.if(eventTarget.nodeType===Node.TEXT_NODE){returneventTarget.parentNode;}returneventTarget;};/** * On touch start, record the position and scroll offset. * * @param {Event} event * @returns {boolean} */FastClick.prototype.onTouchStart=function(event){vartargetElement,touch,selection;// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).if(event.targetTouches.length>1){returntrue;}targetElement=this.getTargetElementFromEventTarget(event.target);touch=event.targetTouches[0];if(deviceIsIOS){// Only trusted events will deselect text on iOS (issue #49)selection=window.getSelection();if(selection.rangeCount&&!selection.isCollapsed){returntrue;}if(!deviceIsIOS4){// Weird things happen on iOS when an alert or confirm dialog is opened from a click event callback (issue #23):// when the user next taps anywhere else on the page, new touchstart and touchend events are dispatched// with the same identifier as the touch event that previously triggered the click that triggered the alert.// Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an// immediately preceeding touch event (issue #52), so this fix is unavailable on that platform.// Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string,// which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long,// random integers, it's safe to to continue if the identifier is 0 here.if(touch.identifier&&touch.identifier===this.lastTouchIdentifier){event.preventDefault();returnfalse;}this.lastTouchIdentifier=touch.identifier;// If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling: touch) and:// 1) the user does a fling scroll on the scrollable layer// 2) the user stops the fling scroll with another tap// then the event.target of the last 'touchend' event will be the element that was under the user's finger// when the fling scroll was started, causing FastClick to send a click event to that layer - unless a check// is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42).this.updateScrollParent(targetElement);}}this.trackingClick=true;this.trackingClickStart=event.timeStamp;this.targetElement=targetElement;this.touchStartX=touch.pageX;this.touchStartY=touch.pageY;// Prevent phantom clicks on fast double-tap (issue #36)if((event.timeStamp-this.lastClickTime)<this.tapDelay){event.preventDefault();}returntrue;};/** * Based on a touchmove event object, check whether the touch has moved past a boundary since it started. * * @param {Event} event * @returns {boolean} */FastClick.prototype.touchHasMoved=function(event){vartouch=event.changedTouches[0],boundary=this.touchBoundary;if(Math.abs(touch.pageX-this.touchStartX)>boundary||Math.abs(touch.pageY-this.touchStartY)>boundary){returntrue;}returnfalse;};/** * Update the last position. * * @param {Event} event * @returns {boolean} */FastClick.prototype.onTouchMove=function(event){if(!this.trackingClick){returntrue;}// If the touch has moved, cancel the click trackingif(this.targetElement!==this.getTargetElementFromEventTarget(event.target)||this.touchHasMoved(event)){this.trackingClick=false;this.targetElement=null;}returntrue;};/** * Attempt to find the labelled control for the given label element. * * @param {EventTarget|HTMLLabelElement} labelElement * @returns {Element|null} */FastClick.prototype.findControl=function(labelElement){// Fast path for newer browsers supporting the HTML5 control attributeif(labelElement.control!==undefined){returnlabelElement.control;}// All browsers under test that support touch events also support the HTML5 htmlFor attributeif(labelElement.htmlFor){returndocument.getElementById(labelElement.htmlFor);}// If no for attribute exists, attempt to retrieve the first labellable descendant element// the list of which is defined here: http://www.w3.org/TR/html5/forms.html#category-labelreturnlabelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea');};/** * On touch end, determine whether to send a click event at once. * * @param {Event} event * @returns {boolean} */FastClick.prototype.onTouchEnd=function(event){varforElement,trackingClickStart,targetTagName,scrollParent,touch,targetElement=this.targetElement;if(!this.trackingClick){returntrue;}// Prevent phantom clicks on fast double-tap (issue #36)if((event.timeStamp-this.lastClickTime)<this.tapDelay){this.cancelNextClick=true;returntrue;}if((event.timeStamp-this.trackingClickStart)>this.tapTimeout){returntrue;}// Reset to prevent wrong click cancel on input (issue #156).this.cancelNextClick=false;this.lastClickTime=event.timeStamp;trackingClickStart=this.trackingClickStart;this.trackingClick=false;this.trackingClickStart=0;// On some iOS devices, the targetElement supplied with the event is invalid if the layer// is performing a transition or scroll, and has to be re-detected manually. Note that// for this to function correctly, it must be called *after* the event target is checked!// See issue #57; also filed as rdar://13048589 .if(deviceIsIOSWithBadTarget){touch=event.changedTouches[0];// In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to nulltargetElement=document.elementFromPoint(touch.pageX-window.pageXOffset,touch.pageY-window.pageYOffset)||targetElement;targetElement.fastClickScrollParent=this.targetElement.fastClickScrollParent;}targetTagName=targetElement.tagName.toLowerCase();if(targetTagName==='label'){forElement=this.findControl(targetElement);if(forElement){this.focus(targetElement);if(deviceIsAndroid){returnfalse;}targetElement=forElement;}}elseif(this.needsFocus(targetElement)){// Case 1: If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through.// Case 2: Without this exception for input elements tapped when the document is contained in an iframe, then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37).if((event.timeStamp-trackingClickStart)>100||(deviceIsIOS&&window.top!==window&&targetTagName==='input')){this.targetElement=null;returnfalse;}this.focus(targetElement);this.sendClick(targetElement,event);// Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.// Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others)if(!deviceIsIOS||targetTagName!=='select'){this.targetElement=null;event.preventDefault();}returnfalse;}if(deviceIsIOS&&!deviceIsIOS4){// Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled// and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42).scrollParent=targetElement.fastClickScrollParent;if(scrollParent&&scrollParent.fastClickLastScrollTop!==scrollParent.scrollTop){returntrue;}}// Prevent the actual click from going though - unless the target node is marked as requiring// real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted.if(!this.needsClick(targetElement)){event.preventDefault();this.sendClick(targetElement,event);}returnfalse;};/** * On touch cancel, stop tracking the click. * * @returns {void} */FastClick.prototype.onTouchCancel=function(){this.trackingClick=false;this.targetElement=null;};/** * Determine mouse events which should be permitted. * * @param {Event} event * @returns {boolean} */FastClick.prototype.onMouse=function(event){// If a target element was never set (because a touch event was never fired) allow the eventif(!this.targetElement){returntrue;}if(event.forwardedTouchEvent){returntrue;}// Programmatically generated events targeting a specific element should be permittedif(!event.cancelable){returntrue;}// Derive and check the target element to see whether the mouse event needs to be permitted;// unless explicitly enabled, prevent non-touch click events from triggering actions,// to prevent ghost/doubleclicks.if(!this.needsClick(this.targetElement)||this.cancelNextClick){// Prevent any user-added listeners declared on FastClick element from being fired.if(event.stopImmediatePropagation){event.stopImmediatePropagation();}else{// Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)event.propagationStopped=true;}// Cancel the eventevent.stopPropagation();event.preventDefault();returnfalse;}// If the mouse event is permitted, return true for the action to go through.returntrue;};/** * On actual clicks, determine whether this is a touch-generated click, a click action occurring * naturally after a delay after a touch (which needs to be cancelled to avoid duplication), or * an actual click which should be permitted. * * @param {Event} event * @returns {boolean} */FastClick.prototype.onClick=function(event){varpermitted;// It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.if(this.trackingClick){this.targetElement=null;this.trackingClick=false;returntrue;}// Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target.if(event.target.type==='submit'&&event.detail===0){returntrue;}permitted=this.onMouse(event);// Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through.if(!permitted){this.targetElement=null;}// If clicks are permitted, return true for the action to go through.returnpermitted;};/** * Remove all FastClick's event listeners. * * @returns {void} */FastClick.prototype.destroy=function(){varlayer=this.layer;if(deviceIsAndroid){layer.removeEventListener('mouseover',this.onMouse,true);layer.removeEventListener('mousedown',this.onMouse,true);layer.removeEventListener('mouseup',this.onMouse,true);}layer.removeEventListener('click',this.onClick,true);layer.removeEventListener('touchstart',this.onTouchStart,false);layer.removeEventListener('touchmove',this.onTouchMove,false);layer.removeEventListener('touchend',this.onTouchEnd,false);layer.removeEventListener('touchcancel',this.onTouchCancel,false);};/** * Check whether FastClick is needed. * * @param {Element} layer The layer to listen on */FastClick.notNeeded=function(layer){varmetaViewport;varchromeVersion;varblackberryVersion;varfirefoxVersion;// Devices that don't support touch don't need FastClickif(typeofwindow.ontouchstart==='undefined'){returntrue;}// Chrome version - zero for other browserschromeVersion=+(/Chrome\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1];if(chromeVersion){if(deviceIsAndroid){metaViewport=document.querySelector('meta[name=viewport]');if(metaViewport){// Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89)if(metaViewport.content.indexOf('user-scalable=no')!==-1){returntrue;}// Chrome 32 and above with width=device-width or less don't need FastClickif(chromeVersion>31&&document.documentElement.scrollWidth<=window.outerWidth){returntrue;}}// Chrome desktop doesn't need FastClick (issue #15)}else{returntrue;}}if(deviceIsBlackBerry10){blackberryVersion=navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/);// BlackBerry 10.3+ does not require Fastclick library.// https://github.com/ftlabs/fastclick/issues/251if(blackberryVersion[1]>=10&&blackberryVersion[2]>=3){metaViewport=document.querySelector('meta[name=viewport]');if(metaViewport){// user-scalable=no eliminates click delay.if(metaViewport.content.indexOf('user-scalable=no')!==-1){returntrue;}// width=device-width (or less than device-width) eliminates click delay.if(document.documentElement.scrollWidth<=window.outerWidth){returntrue;}}}}// IE10 with -ms-touch-action: none or manipulation, which disables double-tap-to-zoom (issue #97)if(layer.style.msTouchAction==='none'||layer.style.touchAction==='manipulation'){returntrue;}// Firefox version - zero for other browsersfirefoxVersion=+(/Firefox\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1];if(firefoxVersion>=27){// Firefox 27+ does not have tap delay if the content is not zoomable - https://bugzilla.mozilla.org/show_bug.cgi?id=922896metaViewport=document.querySelector('meta[name=viewport]');if(metaViewport&&(metaViewport.content.indexOf('user-scalable=no')!==-1||document.documentElement.scrollWidth<=window.outerWidth)){returntrue;}}// IE11: prefixed -ms-touch-action is no longer supported and it's recomended to use non-prefixed version// http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspxif(layer.style.touchAction==='none'||layer.style.touchAction==='manipulation'){returntrue;}returnfalse;};/** * Factory method for creating a FastClick object * * @param {Element} layer The layer to listen on * @param {Object} [options={}] The options to override the defaults */FastClick.attach=function(layer,options){returnnewFastClick(layer,options);};if(typeofdefine==='function'&&typeofdefine.amd==='object'&&define.amd){// AMD. Register as an anonymous module.define(function(){returnFastClick;});}elseif(typeofmodule!=='undefined'&&module.exports){module.exports=FastClick.attach;module.exports.FastClick=FastClick;}else{window.FastClick=FastClick;}}());

styles.css

CSS

Makes things look pretty. Goes in the same directory as the HTML file.

DFmini player code

C/C++

Flash it to the device you've got the player hooked up to. This code is pretty much a copy from this topic in the Particle community. I've only added the function and subscribe block to it: https://community.particle.io/t/a-great-very-cheap-mp3-sound-module-without-need-for-a-library/20111