Two christmas disasters averted with hacks!

Having purchased a secondhand Nintendo Wii + games (of which I believe Metroid Prime Corruption shall become my biggest life-waster) -for the kids, we stupidly left it until 4am this morning to set up and test it before wrapping. We got so far as setting up an internet connection before hitting the parental lock screen, which had obviously been accidentally left in place by the store we bought it from.

Like anyone reading this probably would, we consulted Google results and discovered that the Wii parental lock can be reset by:

1. At the parental lock code input screen, choose "I forgot",
2. at the security question screen choose "I forgot".
3. Type the displayed code into a form on a Nintendo webpage.

-Aaand at this point we notice that we have to wait until office hours for an email reply due to the call centers being closed. At 4am Christmas day, kids primed to wake in roughly an hour. More Google combing required, it would seem..

Then we saw this.

Input the security code from your Wii then put the resulting code back into the Wii. Done.

Thank you marcansoft.com. You saved (part of) Christmas.

Onto part two.

The neighbours bought one of their kids an MID 7" Android tablet.

I nearly got one of these for my girlfriend as an ebook reader before settling on a Kindle 3 instead; The hackable nature of this device makes it perfect for me, and I have no doubt that when (yes, when) I own one the first thing I'll be doing is installing linux. Having used one now I have to say I was impressed with the build, which I assumed must be the nice side of the chinese ipad rip-off market, and the occasionally terrible framerate improves as soon as animations are turned off and better firmware is on there.

This beast however, had a problem. Hours after first use, transfer of a few photos somehow led to the device becoming stuck at the loading screen even after hard shutdown (holding the power button for 5 seconds), and without any more specifics about how it happened my assumption was that either the device had been turned off while transferring or its internal memory was full.

A detailed search on the problem turned up nothing but recommendations to either reflash it or get a refund, and having the slightly tearful new owner standing over me meant a judgement call of epic proportions:

Reflash a brand-new malfunctioning device, the main present of a tech-happy young'un on Christmas day, risking completely bricking it and voiding its warranty, or hand it back to her in the same sorry, spirit-destroying state that it was handed to me in and tell her to get her mum to send it back?

Of course the reflash worked.

It's an Android device. When you first power it on it displays the firmware version in the bottom-right hand corner of the screen, -this was WMT2.1.2_105- I found firmware version 2.1.6 for download, unzipped it, copied the folder titled "Scripts" to the root of a microSD card, put the card in the tablet and rebooted it. After a few screens of "Copying ROM files..Please wait" blahblahblah, the device reset and greeted us with a fresh install of a newer operating system than what it came with.

After 20 minutes of "testing", I found nothing that didn't work with the new install.

Winner.

Merry Christmas

Interfaces with HTML5 Canvas/Javascript: Pixel-perfect clicks on canvas objects

Code-free explanation for creating pixel-perfect clickable areas within HTML5/Canvas displays.

Roughly a year ago I was commissioned by a friend to do all the graphic design for his business, a soundsystem/PA build/hire/sales company. The brief, covering a logo, flyers and a website, consisted of those four most magical of words "Do what you want." -so that's what I did.

A personal obsession with clockwork and complex, well engineered mechanical devices led me to decide that I wanted to emulate the look and feel of such an object as the user interface for the website.

Besides animation, such an effect relies heavily on per-pixel interaction. If you can see that a button seems to be attached to the end of a lever, then pressing the lever itself should have the same effect as pressing the button. Also, when the graphic of the selected button moves, it should remain clickable throughout its motion unless visually hidden behind other objects.

This presents a problem; Usually, click detection within a non-interactive graphic would rely on coordinates. When the user clicks somewhere on the display, the code would grab the x/y location of the mouse cursor, then check those coordinates against a list detailing the clickable areas of the display by their individual top, right, bottom and left extremes. This solution works fine until you either have clickable areas ontop of other clickable areas, or clickable areas of irregular shape; -or especially, both.

With overlaying areas, the situation will arise where a user has clicked a location that lies over more than one designated clickable area. The solution to this is to give each area a value to reflect it's depth in the display, so when the user clicks over more than one area the code takes the depth value of all underlying areas and only considers the highest(in value, shallowest in depth) to have been clicked. Now we're storing coordinate values for top, right, bottom and left, along with a depth value for each clickable area. So far so good.

Start using clickable areas of irregular shape though, and our whole setup starts to break. Imagine for example a percentage sign %. We want the crossbar and each of the zeros to be clickable. Using the above method of having a depth value assigned to each object, we end up with something like this:

User clicks crossbar, no problem. However, user tries to click either zero and it will also be recognised as a click on the crossbar, due to the crossbar's overlaying bounding box and higher depth value. We could make sure that smaller objects are at a shallower depth, but the same problem remains:

With both zeros now placed at a higher depth than the crossbar, clicking here will be recognised as a click on the top left zero.

Besides these bounding box annoyances, using depth as an identifier also means having to base the design of the interface upon this limitation of the underlying code.

The solution is colour. When the user clicks an area of the user interface, the colour of the pixel directly underneath the cursor is compared to a list of colours belonging to each clickable area. This allows for precise clicks on objects nomatter what their depth or location happens to be, so we could now click objects through cutouts in overlying clickable objects, if we wanted.

Grace 0.1 - Geographical remote traceroute in the browser.

The time has come to release our first donationware project, in the form of an online application named Grace. If you just want to jump straight in to see for yourself, go here then click the [You] button.


Grace is a pretty specialist type of tool, called an http remote geographical traceroute; Http because it runs in the browser, remote because it runs from a remote location, and geographical because it gives a graphical representation of the physical location of certain stuff.. And if that explanation wasn't patronising enough, you tech-savvy will have to grit your teeth through the next two paragraphs while I explain what a traceroute actually does.

The internet is a network of computer networks, connected in no uniform order whatsoever. To get data from where it's stored to where it needs to be, it has to be broken up and passed piece by piece from one computer to another until it gets to its destination, where it is reconstructed and used. The large majority of this journey will be spent sprinting through fibre optic terrestrial and undersea cables, followed by the last few kilometers crawling through copper wires buried under streets, slung between telegraph poles and probably broadcast over wifi.

The physical route taken depends on how your network connects to the network containing the data you want, which in reality comes down to the various data transit agreements between every network provider along the way, often referred to as peering agreements. This is easily visualized as a tree and its roots, with you at the tip of a branch, and the data you want at the tip of a root. At every fork will be a piece of switching hardware called a 'Hop', deciding which lane to throw your data down next;- And these bad boys are what traceroute applications like Grace are interested in. Each Hop along the route is yelled at, and the time taken for it to yell back (its Timeout) is noted, along with its reported location, its average timeout, a human-readable name and a guess at its specific role, if possible.

If you just skipped to this paragraph because you already know what a traceroute is, please visualize traceroute results mapped onto a tree view of network providers...

The trunk of this tree, especially on long haul routes, will often belong to what is known as a Tier 1 provider. This term is generally used to describe a computer network which is capable of reaching any other computer network without having to pay anyone for the use of their infrastructure along the way. The benefits of this are numerous, so at any opportunity a network provider will try to get your data onto one of these routes. Grace0.1 recognises every Tier 1 provider by name.

Obviously things would be even more messy without a naming system for all of these different high speed, high capacity appliances, and while it is true that common, documented naming systems exist, none of them are universal. Grace0.1 goes a long way toward figuring out what a specific piece of equipment does from its name, and the results are usually accurate. As an example, one Hop in your trace results might be named:

ae-1-100.ebr2.Denver1.Level3.net

"ae" is a well-used short name for a piece of equipment called an ethernet bundle, and a major manufacturer of them named Juniper ships with "ae" set as the factory default name, so Grace0.1 will assume this to be the case.

"-1-100" are the numbers of the actual hardware slots on this peice of equipment that the connection is passing through. In this case it went into the first slot on the chassis and was kicked back out of the hundredth.

"ebr" is another well-used short name. It describes where this machine is within the network, rather than what it actually does; -This is a Core router. It is not connected to the outside world in any way other than through immediately neigbouring Peering routers.

"Denver" is obvious. Some networks use airport codes, others just shorten the full city name to four letters. -And others still just make things up as they go along.

Oh! and "Level3.net" is one of them thar Tier 1 networks. Ain't it a beauty?

I think it's time to round up. I hope this post gets at least one person interested in the tech behind the screen. Those of you who know all of this stuff x50 will be raging right now; please be aware that I want to draw people's interest, not scare them off with geekery and pedantic detail.

Grace0.1 is my first javascript project. I wrote the first lines of code when I decided that I needed to respecialise before Flash sank and took me with it; and I feel that it was worth the endeavour. Cross-browser differences are the only real downside to this language besides a few badly executed commands which are easily coded around, and after Grace I can tell you that the very first thing my next script will do is to find out exactly what environment it's running in so it can configure itself accordingly from the start.

Demo   Download

Have fun, and donate us some coffee money; You'll love what we're doing next =]

switchcode

Just because we're quiet doesn't mean we're not doing anything...

Admittedly it's been a while since any of us posted on here. We set out hoping to create regular posts describing in detail all the wonderful things Essentially Unknown has in progress and to offer our faithful followers, but... Well, to be honest we've all been too busy on our various delicious projects that we simply haven't had the time!

We have a lot going on at the moment including a few projects which we're dying to tell you all about. Silence in the pursuit of perfection is all I'll suggest for now, and trust me when I say the patience is well worth the end result ;]

So for now, yes we are quiet. And there's lots going on behind the scenes to be sure to stay updated to get the news as it happens.

phpBB page Integration

Custom gallery page for users of Sheffield's Autonomous Arts website. the gallery uses phpBB's user features and requires login for image submission.

click here to view

Photonsurge - Proposed New Layout

The proposed new layout for Richard King's personal site, Photonsurge.co.uk. Coded in XHTML and CSS with PHP enhancements to follow shortly.