"2featured" Posts

Adobe Flex to JavaScript… why Conversion is Hard

I recently had a conversation with Simeon Bateman regarding the woes of mobile web development. We realized one of the reasons why Flex developers as in general have a hard time embracing JavaScript development.

The Problem

The particular JavaScript quirk we were discussing was window.innerHeight functions on mobile devices.  During our development on mobile devices, we ran into two frustrating issues.

Simeon’s issue was with the way window dimensions get messed up when an Android device is re-oriented.

My issue was with the way that window.innerHeight tells you how much space you have with the url bar on the screen, until the url bar is scrolled off the screen, then it reports the actual space that you can work with (since this is my post we’ll talk about my problem). This issue if frustrating because I’m trying to get a webpage to take up the whole screen on the mobile device, with the url bar scrolled out of view.

To illustrate what I’m discussing, I’ll show side by side screenshots.  The screenshot is of a page that reports the screen height and width and the window innerHeight and width and updates them on an interval.  On the left you have the URL bar, on the right the URL bar has been scrolled off the screen.  Notice how the screen size has remained the same, but the window.innerHeight has changed.

Window Size with URL barWindow Inner Height without URL bar

We both understood the problems we faced, but both believed there had to be a good and right way to solve the problem, a “best practice” if you will.  Having spent time working in the Flex community, we had come to expect an elegant way of solving the issues we faced.

Neither of us are foreign to forging our own paths through new territory, but we’re generally used to coming to a solution that feels right.  When things start getting hacky we feel like we’re in the wrong place and try to research the problem looking for a more elegant solution.

Finding A Solution

In our scenario with window.innerHeight we were trying to think how we could go about getting the height of the space we can use in an elegant fashion, and couldn’t come up with anything.  We knew how to accomplish our tasks in an inelegant fashion, but thought it was a common enough task that there would be a “right” or elegant solution.

Finally we realized that we knew of people out there who were doing what we wanted, and this is JavaScript after all, so we went and looked at the source. We checked in a few places, and discovered that most of the places we checked handled this problem in a similar way.  The great guys over at Sencha had this in their code for handling this problem and making sure the application is the correct size.

init: function (c, b) {
    var d = this,
        e = Math.max(window.innerHeight, window.innerWidth) * 2,
        a = Ext.getBody();
    d.updateOrientation();
    this.initialHeight = window.innerHeight;
    this.initialOrientation = this.orientation;
    a.setHeight(e);
    Ext.gesture.Manager.freeze();
    this.scrollToTop();
    setTimeout(function () {
        d.scrollToTop();
        setTimeout(function () {
            d.scrollToTop();
            d.initialHeight = Math.max(d.initialHeight, window.innerHeight);
            if (c) {
                c.apply(b || window)
            }
            d.updateBodySize();
            Ext.gesture.Manager.thaw()
        }, 500)
    }, 500)
}

The variable names are not great as its beautified code that was minified, but if you follow it you can see what they’re doing.

In order to size the app to the proper height and be able to have the url bar scrolled off the top, they have to double the size of the container, to ensure that they can scroll past the url bar. Then they scroll… twice on 500ms timeouts, and then they can fix the size of the app to bring the size down to what it really is without the url bar, since window.innerHeight will now report they value they want.

The Difference

This is where JavaScript development diverges from Adobe Flex development.  The fractured landscape of so many browsers and the impossibility of getting users to upgrade in a timely manner has left JavaScript developers with no choice but to hack their way through.

This is not to say that JavaScript lacks elegance… but that there are some areas where the hack is just what you need to do.

In Flex there are times where you need to implement a hack, but you generally implement it as a patch to the Flex SDK and your application code is spared the hack. This example underscores one of the big issues that Flex developers face as they move from the world of the Flash Player to the fractured world of browsers. To a Flex developer this feels like an inelegant hack, but to a JavaScript developer this is a great solution, because it works across all the different platforms we need to support.

Conclusion

I don’t present this information as a way of excusing Flex Developers from exploring HTML/JS development, but wanted to help developers understand this difference that can help on both platforms.

With this new found understanding if you feel like hopping into some HTML/JS development, may I suggest another article, by Simeon Bateman.

Adobe Flash ExternalInterface issues with Internet Explorer

On a recent project, I was asked to build a simple Flash mp3 player that could be controlled with JavaScript by using ExternalInterface.  I built and tested the whole application in under an hour and was feeling pretty good about myself.  QA filed a bug saying that JavaScript was throwing an error, and it only occurred when my mp3 player was present.

The error only happened in IE8, so I was stuck with IE’s debugger and error messages.  The error was being thrown when the loaded SWF attempted to add callbacks to ExternalInterface using ExternalInterface.addCallback  As soon as this function was called my script threw an error:

Object doesn’t support this property or method

IE 8 Error Screen

The stack trace showed an anonymous JScript block with a function named __flash__addCallback which was throwing the error when trying to append a property to a JScript object. The debugger for this particular error looked like this.

I scoured the internet searching for solutions to this problem as I was sure it had to be something that was well documented.  I came across some solutions that appeared to work for people such as: ensure your object tag has an id, ensuring you set the type or class id on the object tag. These solutions worked for some people, but didn’t solve the problem I was having.

After a little more investigation I realized that some of my ExternalInterface calls were successful, while others were not.  I then realized that play and stop were probably reserved names for IE8 and might be the root of my problem.  I adjusted the names of the callback functions to playSong and stopSong and things started working.

This Doesn’t Work:

ExternalInterface.addCallback("play", play);
ExternalInterface.addCallback("stop", stop);

This Works:

ExternalInterface.addCallback("playSong", play);
ExternalInterface.addCallback("stopSong", stop);

The moral of the story is to avoid common names when using ExternalInterface. Play and Stop I know are reserved, and I’m sure there’s a host of others out there.

Finding celebrity locations via Twitter — Celebrity Exif data mining

:: UPDATE ::

Nate Beck gave a presentation on this topic at Ignite Seattle 13, here’s the video.


Last week one of my favorite video podcasts, Hak5, had a segment on Exif data mining (Episode 721). In the episode Rob Fuller (a.k.a. Mubix) shared his experience, how his images contained unwanted GPS information embedded in the Exif headers.

While mining Exif information from images is nothing new (Version 2.1 of the specification is dated June 12, 1998)… most consumers don’t realize the kind of information attached to their images by default.

In February of this year, Johannes Ullrich over at ISC published a paper titled Twitpic, EXIF and GPS: I Know Where You Did it Last Summer. Johannes explains:

“Modern cell phones frequently include a camera and a GPS. Even if a GPS is not included, cell phone towers can be used to establish the location of the phone. Image formats include special headers that can be used to store this information, so called EXIF tags.”

So after watching the segment, I was curious how widespread the issue is and decided to conduct my own investigation, codenamed Seeker.

Harvesting images

I decided to write a quick ruby script to harvest images from multiple image sites. The sites that I targeted were: Twitpic, Twitgoo, Tweetphoto, and yfrog. Some were easier to harvest than others, mostly due to easily accessible APIs.

After running the script on myself, a few of my friends and the team over at Hak5. I decided to widen my search to include public figures and celebrities.

Finding celebrities

At first I just scoured the internet looking for verified accounts for celebrities. I found a few sites that have lists of Twitter accounts for celebrities. My favorite one is WeFollow, which is owned by Digg.

So I wrote a script to collect Twitter account names from WeFollow. All I needed to provide the script was a category and a number of pages to scrape.

I edited the results and tossed in a few people that weren’t on WeFollow, and I came up with the following list of 147 celebrities.

Below is a glimpse of the log file while the script is running.

And in about 42 minutes… I had 11,688 photos from 147 Twitter handles. Not every celebrity on the list had images on those services. In fact I couldn’t detect images for 22 of the celebrities.

Processing 147 users
Starting twitpic
Finished twitpic -- 985.437336 seconds
Starting yfrog
Finished yfrog -- 980.306637 seconds
Starting tweetphoto
Finished tweetphoto -- 475.657377 seconds
Starting twitgoo
Finished twitgoo -- 85.571865 seconds
Total Time : 2526.98922 seconds

Extracting the Exif data

Now that I had 11,688 images, it was time to go through the images and see what kind of gems were hidden in the metadata.

So I wrote yet another ruby script which goes through each image and dumps all of the Exif data into a text file.

And the result…

44 users affected
125 users total
GPS count: 878
Total count: 11688
Percentage: 7.51%

Success! 878 images out of 11,688 have GPS data.

Visualizing the information

Now by day I’m an Adobe AIR developer, so naturally I decided to write a simple Flex 4 interface to help me visualize the information I collected, codenamed SeekAIR.

[note]
I was able to find personal addresses for some of the celebrities, but have opted not to share that information. The images I have chosen to share are public places where the location is obvious.
[/note]

Since it was Darren’s show that sent me on this investigation… let’s take a look at Darren’s images.

Darren Kitchen (hak5darren)

First I checked Darren’s TwitPic “Places I’ve Been” page to see if he has GPS enabled on purpose…

It doesn’t seem so.

Let’s open the photos up in SeekAIR and see what we can find…

These are just a couple of the images that I found from Darren which had GPS data encoded in them… I also learned that Darren took these photos on his Droid phone because that information was in the Exif data.

Not that Darren Kitchen isn’t a celebrity in my life… but let’s take a look at someone a little more interesting.

Adam Savage (donttrythis)

Another show that I love is MythBusters, so naturally Adam Savage was on my list of people. Again I checked Adam’s “Places I’ve Been” on TwitPic…

Same thing, apparently no images have locations. Again this is misleading, because many of Adam’s photos have GPS data in them… for example:

You may argue that Adam Savage isn’t a celebrity, and I’d have to fight you on that account. But in any case, let’s move on to another example.

Tom Hanks (tomhanks)

Once again to show I have nothing up my sleeve, let’s check Tom’s “Places I’ve Been” page.

Now let’s open the photos in SeekAIR…

This one shows Google street view of the location where the image was shot.

And this one shows Tom at Pixar.

Once again we have found GPS data hidden within these images. But… GPS data is not the only information that is included in Exif headers.

Britney Spears (britneyspears)

Britney didn’t have any GPS data in her photos, but nonetheless other information can be found in the Exif data.

This one made me laugh…

I mean, we all know that almost all celebrity photos have been Photoshopped, but this photo has the proof embedded right inside of it.

Collection Statistics

Now, you may be asking yourself exactly how many images are affected, so let’s take a look at the statistics.

Breakdown by Device

The following chart is a bit startling. I’m not going to draw any conclusions about it… perhaps the Apple iPhone is the most popular device among celebrities.

The article from ISC has a better chart showing the cross section by device for the general public.

Affected Files By Site

As you can see in the below chart, the majority of images came from TwitPic. It seems to be the most popular image service.

Affected Users By Site

You’ll notice the total users on this chart is 214; this is because some users had pictures on multiple image services. The blue bar represents the affected users out of the total users for the site.

Where to go from here

So what can we do to protect ourselves going forward? This issue affects everyone, not only celebrities. Consumers should be aware of what information is leaving their mobile devices.

Remove previous images

The thing about Twitter is that tweets expire. So the tweets that correspond with a particular image may no longer be available. According to the Twitter API Wiki:

“We also restrict the size of the search index by placing a date limit on the updates we allow you to search. This limit is currently around 1.5 weeks but is dynamic and subject to shrink as the number of tweets per day continues to grow.”

Turn off location services for the camera

Thankfully, the latest release of Apple iOS4 has the ability to turn off “Location Services” specifically for the camera application.

If you’re not an iPhone user, your device should have similar settings.

Scrub your images before you upload them

Since Seeker was just a weekend project, I haven’t gotten around to this yet… but ZaaLabs will be releasing a free Adobe AIR application to scrub Exif data from images before uploading them to these image services. Stay tuned.

Hey where can I get Seeker?

I will not be releasing the Seeker or SeekAIR code or applications to the public.

A note to the users mentioned in this post

ZaaLabs is willing to assist in identifying and removing affected images… Contact us.

The WOPR running on Adobe AIR 2

I don’t know about you guys, but one of my favorite movies of all time is WarGames with Matthew Broderick.

If you haven’t seen it, Netflix has it available on instant watch… go now… watch it… I’ll wait.

Alright, awesome movie huh?!

One of the characters in the movie is Joshua, also known as the WOPR or War Operations Plan Response.

WOPR

With the release of Adobe AIR 2.0, Adobe has given us a new fun class to play with, ServerSocket.

The ServerSocket class allows code to act as a server for Transport Control Protocol (TCP) connections.

So I decided to combine my love of WarGames and the WOPR and create a WOPR emulator in Adobe AIR 2 that can be accessed using Telnet.

How to use the WOPR

Install using the badge installer here:

Get Adobe Flash player

When you open the WOPR application it attempts to connect to 127.0.0.1 (localhost) on port 9999. If the console doesn’t show an error, you’re good to go.

On the Mac, open up Terminal (Applications > Utilities > Terminal)… if you’re on the PC, you should go and download PuTTY.

Once you’re in Terminal enter this command (if you change to a different port number, use that number instead of 9999):

telnet 127.0.0.1 9999

Once you’re in, you can have fun with Joshua. For example:

LOGON: Joshua
GREETINGS PROFESSOR FALKEN.
Hello
HOW ARE YOU FEELING TODAY?
I am fine. How are you?
EXCELLENT. IT'S BEEN A LONG TIME.
CAN YOU EXPLAIN THE REMOVAL OF YOUR USER ACCOUNT ON 6/23/73?
People sometimes make mistakes
YES THEY DO. SHALL WE PLAY A GAME?
Love to. How about Global Thermonuclear War
WOULDN'T YOU PREFER A GOOD GAME OF CHESS?
Later. Let's play Global Thermonuclear War
FINE

It’s a lot of fun! I haven’t implemented any of the games yet… but this shows what kind of cool stuff you can write with the new Adobe AIR 2 features.

Download Full Source Code here.

Enjoy!