Overcoming Phonegap Memory Limits With Local Storage

localstorage_phonegapDuring development of Turkey Volume Guessing App, it began to crash at random on the iPad 2. Being a Phonegap app, it was the age old problem of memory limits in Mobile Safari. In this case the app is generating three large uncompressed png images which must be stored for use at different points in the workflow. Mobile Safari has strict memory limitations and usually resolves issues by shutting the browser down.

Here, the issue is more than inefficiency. The app flow depends on these three large images in order to allow back-stepping through the process. Fortunately, HTML5 client-side storage came to the rescue.

Of the three storage mediums available, only LocalStorage and WebSQL are reliably available in PhoneGap. LocalStorage is the easiest to implement but it has a 5 megabyte limit. WebSQL has more programming overhead, but gives you a more liberal 50 megabytes. I already had done a WebSQL based cache for another project so I decided to go with that.

Creating a Cache in WebSQL

The WebSQL cache is a simple 3 field table:

var cachedb = openDatabase('localcache', '1.0', 'Mobile Client DB', 2 * 1024 * 1024);
cachedb.transaction(function (tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS tblCache (cacheId INTEGER PRIMARY KEY, cacheName TEXT, cacheData TEXT, cacheTimeStamp INTEGER)");

With a Getter and a Setter:

function Get(pKey) {
    return new Promise(function(resolve, reject) {
        cachedb.transaction(function (tx) {
            tx.executeSql('SELECT * FROM tblCache WHERE cacheName=?', [pKey], function(tx, result){
            }, function(result, error){reject(error);});
function Set(pKey, pValue) {
    return new Promise(function(resolve, reject) {
        // Check for an existing key
        cachedb.transaction(function (tx) {
            tx.executeSql('SELECT * FROM tblCache WHERE cacheName=?', [pKey], function(tx, result){
                if( result.rows.length > 0 ){
                    tx.executeSql('UPDATE tblCache SET cacheData=?, cacheTimeStamp=? WHERE cacheId=?',
                        [pValue, Date.now(), result.rows.item(0).cacheId], function(tx, response){
                            status = result.rows.item(0).cacheId;
                            console.log('Updating tblCache: '+status);
                    }, function(result, error){console.log(error);reject(error);});
                    tx.executeSql('INSERT INTO tblCache (cacheName, cacheData, cacheTimeStamp) VALUES ( ?, ?, ? )',
                        [pKey, pValue, Date.now()], function(tx, response){
                            status = response.insertId;
                            console.log('Inserting into tblCache: '+status);
                    }, function(result, error){console.log(error);reject(error);});
            }, function(result, error){console.log(error);reject(error);});

Then you can add data to the cache by passing it with an arbitrary key:

Set('canvasPhoto', base64Data).then(function(result) {
    console.log('data cached');
}).catch(function(error) {
    console.log('something went wrong');

Pass the key to the Get function to retrieve the data.

For Turkey Volume Guessing App I use the toDataUrl() method of the <canvas> element. It returns the current canvas state as a base64 encoded string which can be saved to the cache. The cached images can be pulled directly into the canvas when needed in the app flow. Of course, the images still take up memory when displayed. But in a case like this one where you’re simply passing along images from step to step, client side storage is the way to go.

The cache can be used to store any string data. I’ve used this technique to cache html content within other apps. It stores the Listmas ad used within Turkey Volume Guessing App. Stored data is long-term and will survive app upgrades. Though my example uses WebSQL, the basic technique applies to all forms of client-side storage in HTML5.

Posted in Tutorials, Web Development | 17 Comments

Turkey Volume Guessing App

icon_256With Halloween over, and Christmas not quite here, it’s time for the unsung hero of the holiday trifecta to shine. Thanksgiving means turkey and turkey, more than food, is an accurate way of measuring the volume of any space. Using the size of an average turkey as a base unit, any space can be defined in terms of how many turkeys will fill it. The Turkey Volume system is best used for measuring enclosed spaces, such as the size of your turkey storage freezer. Turkey Volume Guessing App brings the system of turkey volume into the 21st century with unparalleled accuracy.

“Turkey Volume Guessing Man” in MST3k episode “Riding With Death”

“Turkey Volume Guessing Man” in
MST3k episode “Riding With Death”

The Turkey Volume system was first proposed in the television series Mystery Science Theater 3000 as a superior method of measuring volume. Though actual turkeys may vary greatly in size, the Turkey Volume system is based on a standard roughly equivalent to 1.5 cubic feet (0.04 cubic meters). In the past, the process of turkey volume measurement has been messy and prone to salmonella infection. This led to the development of turkey volume guessing as a knee-jerk solution to safe measurement. Simply guessing the number of turkeys that would fill a space proved to be grossly inaccurate and left the measurement system in a state of flux.

Turkey Volume Guessing App uses modern technology to bring survey grade accuracy never before seen in the field. Simply use the app to snap a picture of the space you wish to measure. Then use the software caliper to outline the space. The app then calculates the precise number of turkeys required to fill that space. The results are graphically mapped on your photo and may be uploaded to the web for easy sharing.


Get your free copy for iOS or Android at turkeyvolumeguessingapp.com!


Posted in Food, Portfolio, Web Development | 1 Comment

Five Halloween Movies You Might Not Have Heard Of

There’s a long list of movies I watch every October. Most aren’t surprising and you probably have watched them more often than me. But a few of my Halloween staples are somewhat obscure. All are quite cheesy, but I love cheese and I love these movies. So here’s my list of 5 Halloween movies you might not have heard of:

#5 Chopping Mall

choppingmall1A group of teenagers hide out in the mall where they work, to party all night. Mall management decides to test out a new autonomous robotic security system that same night. Hilarity ensues. This movie came out in 1986 and everything about it screams 80’s. From the ridiculous looking robots to the mall setting to the obnoxious teenagers. Do kids even know what a mall is anymore? You’ll find yourself rooting for the robots in this movie and it’s a good thing too. Despite a top speed of five miles-per-hour and virtually no dexterity, they manage to kill a lot of people.

#4 The Wicksboro Incident

MV5BOTU1ODIyMDUxMF5BMl5BanBnXkFtZTcwNTA4MDMyMQ@@._V1_SY317_CR3,0,214,317_AL_This is a found-footage film along the lines of The Blair Witch Project. Two guys producing a documentary on aliens locate an elderly man who claims to have stumbled upon a secret invasion. As the story goes, the Man was working in a secret underground lab in the non-existent town of Wicksboro, Texas, when one day it mysteriously disappears. The man goes into hiding for the next 45 years. Our heroes follow the old man out into the desert to find evidence corroborating his story. I won’t spoil the ending, but it involves the obligatory video selfie apology taken from inside a dumpster. While it does have some absolutely ridiculous moments, like the old man’s home brew alien detector device, it’s chock full of suspense. The movie remains ambiguous enough that you can easily suspend disbelief.

#3 Killer Klowns From Outer Space

movieposterThis movie is admittedly not that obscure, but it’s always left out of top 10 lists and that is such a crime. The title couldn’t explain the premise better and there’s nothing about this movie that isn’t great. As the Klowns terrorize the small town of Crescent Cove, California, every possible clown meme is turned into an instrument of terror. This movie totally cashes in on Coulrophobia and yet somehow makes the Klowns so laughable that you can’t help but love them.

#2 Night Skies

MV5BMTU3NTAzMTE5MF5BMl5BanBnXkFtZTcwMDY3NTAzMQ@@._V1_SY317_CR1,0,214,317_AL_This one dives into the lore of the famous Phoenix Lights UFO sighting. It documents the events of a group 20-somethings who wreck their motor home on the back roads of Arizona. Turns out, they’re stranded in the exact spot some Alien monsters decided to camp out. I’m a big fan of foreshadowing, those creepy moments when the characters know something is horribly wrong but haven’t figured out what it is. This movie has that in spades. It’s full of tense moments all the way through. The ending, of course, turns into a cheesy gore-fest that lets you ride out the suspense wave to a good night’s sleep.

#1 The WNUF Halloween Special

MV5BMjI1OTMzNzc3M15BMl5BanBnXkFtZTgwNzkxNzI1MDE@._V1_SY317_CR6,0,214,317_AL_I discovered this one last year, thanks to the Extra Secret Podcast, and it’s now my all-time favorite Halloween movie. Another found-footage film, WNUF Halloween special takes the form of a home recorded video tape of a 1980’s local news TV special. The idea is simple: reporter takes camera crew into haunted house on Halloween night, reporter never comes out. What makes this so special is how it’s excellently produced to look exactly like a videotaping from that era. I won’t lie, if you’re under the age of 30 you’ll probably think it’s stupid. But if you lived in the 80’s, this movie is a friggin’ time machine. The absolute best parts are the fictitious commercial breaks that capture that era of television perfectly. I’ve never seen this one for rental, but if you’re into 80s nostalgia, buy it, you won’t regret it.


Posted in Reviews | Leave a comment

Applying Responsive Design to HTML5 Banner Ads

banner_0With the Chrome and Firefox teams making clear plans to deprecate Flash, the de-facto banner ad standard, there has been a frantic push to convert Flash ads to HTML5 format. HTML5 can replicate most of the features of Flash, but is often more complicated and time consuming to produce. I’ve spent a lot of time reproducing Flash ads in HTML5 and I’m often forced to sacrifice features which simply don’t translate well. Moving forward, HTML5 banners will need to grow beyond Flash mimicry and take advantage of this new medium.

My novelty app Turkey Volume Guessing App, coming this November, contains an interstitial ad for other apps I produce. With the holiday season rapidly approaching, the first promotion will be for my wish list app, Listmas. It occurred to me that a responsive layout would allow the ad to display cleanly on all device screen sizes from phone to tablet. Since the in-app ad is in HTML5 format it works well as a stand-alone banner ad in many sizes, both static and expandable.

90px To Infinity

The simplistic flat design style of MyListmas.com lends itself well to SVG/CSS3 based animation. To start, I did make one concession in the universal size requirement, the banner has a minimum size of 300 wide and 90px high. With a repeating background and positioning based on percent, the ads build animation plays well at every other possible size. Though the layout does focus toward the middle 300px, it can be modified to make better use of greater space.

To compliment its infinitely expandable height, the ad had two vertical breakpoints. The smallest format begins at 90px and contains the complete build animation with a CTA to visit MyListmas.com. The first break-point begins at 250px and reveals badges linking directly to the app stores. The second break-point begins at 600px and reveals copy describing the app and a secondary CTA linking to MyListmas.com.

When used as an interstitial, the ad takes advantage of the forth dimension, time. In Turkey Volume Guessing App the ad first plays out its build animation full-screen. At the 10 second mark the ad container frame collapses vertically to a 90px height and gently returns the user back to the app while still remaining visible at the top. The final reveal for the full vertical content is hidden until the user follows the collapsed state CTA to “Tap to learn more.” This format combines the attention grabbing nature of an interstitial ad with the persistence of an expandable ad.


View An Interactive Demo of the Ad

Future Development

As it stands, the ad fits all industry standards. All animation ceases at 12 seconds and, without a custom font, it fits in a 40k slot. All copy is fully editable so it could be translated into other languages as well. For convenience, all image and font assets are base64 encoded and embedded into a single index.html file. For this iteration, I focused the ad around more conventional banner sizes. With further development, the ad could be improved to work in sizes smaller than 300x90px and make better use of larger sizes.

Posted in Web Development | 3 Comments

Fire TV Stick : Don’t compare it to Chromecast

20141209_231728I set out to compare the Fire TV Stick with Chromecast and soon realized that was a mistake. Chromecast has only one function, play whatever video your phone/tablet/computer tells it to. Chromecast turns your television into a big-screen peripheral for your device. That works for a wide range of situations but sometimes you need additional functionality, especially when a phone/tablet/computer isn’t available. This is where set-top boxes like Roku, AppleTV and the original Fire TV become useful. Fire TV Stick doesn’t compete with Chromecast, it competes with those set-top boxes; and that’s a good thing. There’s room for Fire TV Stick AND Chromecast behind your television. For the money you would spend on one of those expensive boxes, you can buy a Fire TV Stick and a Chromecast. They’ll give you all of the functionality you care about and you’ll still have enough money left over for a Chinese dinner with your movie.

Exactly what you need, no more, no less

20141209_231930Fire TV Stick has two main advantages over competing products: price and performance. When you compare it to set-top boxes you find that it provides most of the same features: It streams video from all the usual sources, it has an app ecosystem, it even plays games. It falls short only in very specific areas: It hesitates for a fraction of a second when making menu selections, it doesn’t run video games that have whiz-bang 3D lighting and smoke effects, it doesn’t take up space around your television. In most cases, those limitations won’t apply to you. When you factor price into that consideration, Fire TV Stick is a product that can’t be beat!

It’s time to move past the four-way directional

20141209_233829The one negative aspect of Fire TV Stick is its remote control. I think the Chromecast team are the only product designers on the planet who understand that everyone who streams video has a smartphone in their pocket. Chromecast taught me how unnecessarily complicated remote controls make television and the best interface is no interface at all. Fire TV Stick has a very straightforward interface, but it still has an interface. You HAVE to use the four-direction remote control to navigate a huge hierarchy of menus. Amazon provides a free companion app to use your phone as a remote control. It will give you some extended functionality, like voice search and a keyboard, but it’s still just a remote control. There’s no way to simply push content from your phone or tablet to the screen as you would with Chromecast.

A better video game console than you deserve for $40

20141214_210024I was very pleasantly surprised with the library of video games available to Fire TV Stick. You won’t be playing the latest First Person Shooter with its realistic reflections and ray-traced atmospheric lighting. But you can play Sonic the Hedgehog with no noticeable lag. I bought the double dragon trilogy just for the hell of it and remembered how bad I am at those games. But what really surprised me was that my all-time favorite game, Carmageddon, was available. Even though the game is around 20 years old, it’s 3D and it’s fast-paced. Though I had trouble with the controls, I was able to play enough of it to see that performance was flawless. One side note about the controls, I didn’t purchase the official Amazon Game Controller. I already own a Nyko Playpad Pro and found it almost fully compatible with the Fire TV Stick. So far every game has worked perfectly, except the steering in Carmageddon. Even without steering, I was able to get halfway through the first track and waste two opponents. Yeah, I’m that good at Carmageddon. I assume steering would work with the official controller, and I love the game enough to seriously consider that purchase.

Unless you have a very specific need that only one of the more expensive boxes can provide, Fire TV Stick is the answer for you. At $40 it’s almost an impulse buy and you get a lot for your money. Even if you own a Chromecast, Fire TV Stick is still worth consideration. I own three Chromecasts and I still see a place for the Fire TV Stick behind my television.

Posted in Media Server, Retro Gaming, Reviews | 2 Comments