"flex" 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.

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.

Speaking at 360|Flex San Jose 2010

So if you haven’t seen my fun badge there on the right side of my blog… —>

I will be speaking at 360|Flex San Jose.

If you haven’t attended a 360|Flex conference before, you really should. In my opinion, 360|Flex is the best conference out there for Flex developers. It’s put on by developers for developers.

It is a very focused conference, where you can really get into the nitty gritty of Flex and geek out with other members of the community. Plus the food isn’t half bad.

When are you speaking?

I’ll be speaking on Wednesday, March 10th (my birthday) from 1:00 pm – 2:20 pm.

What will you be speaking about?

Session Title: Flexible Games… game development with stuff you already know.

Session Level: Intermediate

Description: I don’t know about you… but as an enterprise software developer, sometimes I need to take a break from the corporate world and want to develop something fun. In this session Nate Beck will take you through the basics of game development using the Flex SDK you know and love.

Nate will walk you through setting up your development environment, the basics of game development, using the open source PushButton game engine and building a functioning game.

What will Doug McCune do for revenge?

For those of you who weren’t at 360|Flex in Indianapolis, there was an incident… You can read about it in my Punking Doug McCune post.

Since the incident, Doug has vowed to get payback. And if you don’t know Doug, he is a scary creative guy. So we’ll have to see what he comes up with. Find out, along with me at my session.

Alright I’m convinced, where do I sign up?

Either click here or click the 360|Flex San Jose badge on the top right of my blog.

More information about travel and the conference in general can be found on the 360|Flex Website.


Developing games with PushButton Engine – Part 1 – Using Flex and Flash Builder

So I know I haven’t posted in quite some time. Between work, BugQuash, MAX, contributing to PushButton Engine, my country’s 500th anniversary to plan, my wedding to arrange, my wife to murder and Guilder to frame for it, I’ve been swamped.

But tonight… I break my blog silence. As I just mentioned, I’ve been contributing to the PushButton Flash Game Engine. I’m now going to show you how to set up Flex Builder 3 or Flash Builder 4 in a way that allows you to develop games on PushButton Engine, as well as how to work on the core engine itself. I’m breaking this down into very small pieces so that everyone can follow along. So it’s going to be a long post with lots of pretty pictures.

After writing this post, it ended up being longer than I hoped. So I’m going to write a series of posts about developing games using PushButton Engine. This post will focus only getting set up inside Flash and Flex Builder. The plan is to add other IDEs in as well, for example FlashDevelop, FDT, etc…

Step 1 : Download the PushButton Engine source code.

[note]
If you are not familiar with Subversion or you need a primer to the basics of contributing to or working with open source projects please check out my “Getting Dirty with the Flex SDK” post, more specifically the TechWed Presentation.
[/note]

WARNING!! For these steps to work, you must use at least revision 602 of the PushButton Engine.

Download the PushButton Engine core from Google Code. Since I am a developer in the engine, I have checked out trunk and all of the branches. My working copy is located in /pbe (or C:/pbe on Windows). I will use that location throughout the rest of this post. Make sure that if you choose a different location that you sub it in wherever I use “/pbe”.

So on OS X, to checkout the source code, open up Terminal and type in the following lines:

cd /
svn checkout http://pushbuttonengine.googlecode.com/svn/ pbe

Step 2 : Import the PBEngine Library project within Flex/Flash Builder.

Open up Flex Builder (or Flash Builder), right click in the Flex Navigator and choose Import. (You can also use File > Import > Other).
Import Project

Open up the “General” folder and choose “Existing Projects into Workspace” and click “Next”.
002_existing

Click the “Browse” button next to “Select root directory”.
003_rootDir

In revision 600 of the PushButton Engine I added “FB3″ and “FB4″ directories underneath “trunk/development”. These directories have a Flex Library project skeleton within them that can be imported directly into Flex Builder.

If you are using Flex Builder 3, use the FB3 directory, and if you’re using Flash Builder 4, use the FB4 directory.
004_selectFB3

Click Finish.
005_selectedPBEngine

You will see a Flex Library project in the Flex Navigator now. You will also have an error, don’t worry, we’ll fix that in the next step.

Step 3 : Setup the a Linked Resource for PBE

So here is the error that you will see:
configuration variable ‘compiler.source-path’ value contains unknown token ‘PBE’
006_error

The project skeleton uses something called a “Linked Resource”, so that it can find the PushButton Engine source files. To set this Linked Resource, you do the following:

Open up Flex Builder’s preferences.
007_preferences

Under General > Workspace > Linked Resources… Click “New…”
008_linkedResources

Click on the “Folder…” button and navigate to the PushButton Engine “trunk” folder, “/pbe/trunk” (C:/pbe/trunk on Windows).
009_selectFolder

Hit “OK” and you should see PBE listed in the Linked Resources now.
010_PBEResource

Clean the project to incorporate and rebuild all of the changes.
011_cleanProject

If you see PBEngine.swc underneath the bin folder, you are good to go! Nice work!
012_projectWSource

:: UPDATE ::

There have been file renames and other changes in the PushButton engine since this post. If your SWC is failing to build do the following.

In the Flex Navigator, right click on the PBEngine Flex Library project. Click Properties. Go to “Flex Build Library Path”, under “Classes” uncheck [source path] src and recheck it. If you are using Flash Builder 4, you can simply select “Include all classes from all source paths”. Any other questions… post a comment and I’ll answer them.

Step 4 : Create your game!

For this example I’m going to create a VERY simple Hello World game to show that we have everything working correctly.

Right-click in Flex Navigator and choose “New” > “ActionScript Project”.

Give it a name of “HelloGame”, and click Finish.
013_createASOnly

Now, to use the PBEngine Library within our HelloGame project, we need to create a link between the two.

To do this, right click on the “HelloGame” project and choose “Properties”.
014_helloProperties

Choose “ActionScript Build Path” from the list, and then click on “Add Project…”
015_AddProject

You should see “PBEngine” in the list.

If you don’t see PBEngine, or you get a message that tells you, “There are no Flex Library projects in your workspace”, make sure that a) you have created a PBEngine Library by following the previous steps and b) the project is not closed.
016_PBEngine

Select “PBEngine” and click “OK”. You will now see PBEngine listed in the Build path libraries box.
017_withLibrary

Now that the two projects are linked, you can start using classes right out of the PushButton Engine. Code completion works, and everything compiles. Woot!
018_Intellisense

Great, now let’s write our impressive Hello World game.

Here is the source:

package {
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.debug.Logger;
 
	import flash.display.Sprite;
 
	public class HelloGame extends Sprite
	{
		public function HelloGame()
		{
			PBE.startup(this);
			Logger.print(this, "Hello Nate!");
		}
	}
}

Run or Debug the game. At first you will see a blank screen, that is expected… Press the ~ (tilde or `) key, and the PushButton Console should come up.

The console has some commands by default: help, version, showFps and verbose (1 || 2)
020_console

You can add your own custom commands to the console to assist you while developing your games… but that is a post for another time.

Any questions, be sure to hit us up over on the PushButton Engine Forums or in the freenode IRC channel: #pbengine.