UI Hacker - Code for Fun

Coffeescript: HTML5 placeholder attribute fallback

2012-01-05T21:02:00.000-07:00

You want to use the new HTML5 placeholder attribute on input fields, but you also want to support older browsers. Here's a little Coffeescript class that takes an HTML element in the constructor, and uses jQuery to bind the focus and blur events to swap out text like a modern browser would without the script.


# ## HTML5 placeholder feature fallback class
class PlaceholderFallback

  constructor: (el) ->
    @el = $(el)
    @initialize()
  
  # HTML5 <input> placeholder feature detection
  browserHasPlaceholder: =>
    "placeholder" of document.createElement("input")
  
  # Reads the placeholder attribute and uses it in a javascript fallback, if needed
  initialize: =>
    if @browserHasPlaceholder() == false
      placeholderText = @el.attr 'placeholder' 
      @el.removeAttr 'placeholder'
      @el.val(placeholderText)
      @el.focus (e) ->
        if this.value == placeholderText
          this.value = ''
      @el.blur (e) ->
        if this.value == ''
          this.value = placeholderText
    else
      @el = null

# Usage:
placeholderFallback = new PlaceholderFallback( element )

CSS: Disable text selection highlighting

2011-12-19T20:24:00.001-07:00

When working with touch & mouse events to drag html elements, I've occasionally resorted to disabling clicking/touching on child elements by doing something like this:


elem.onmousedown = function(e){ return false; };
elem.onselectstart = function(){ return false; };

But sometimes you want to be able to interact with those child elements... I found some nice CSS over here that prevents text & element highlighting when you're dragging with a mousemove or a touchmove event:


p {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Coffeescript: MapsLoader class for asynchronous loading of Google Maps API

2011-12-11T22:36:00.001-07:00

I'm using CoffeeScript for my current project, and we needed a way to load the Google Maps API when a user hits a particular view. This static class is auto-initialized, and all you need to call is: MapsLoader.load(callbackFunction,true). If the API has already loaded, it will invoke your callback immediately. Make sure to pass the appropriate boolean if the user is on a mobile device (true), or a desktop browser (false).

class MapsLoader

  constructor: ->

  load: (successCallback,isMobileDevice) ->
    @isMobileDevice = isMobileDevice
    @successCallback = successCallback
    if @hasLoaded != true
      @loadGoogle()
    else
      @mapsLoaded()

  loadGoogle: =>
    # reference google loader callback to local method - clean up after callback
    window.loadMaps = @loadMaps 
    apiKey = "-----your-api-key-here-----"
    script = document.createElement("script")
    script.src = "https://www.google.com/jsapi?key=#{apiKey}&callback=loadMaps"
    script.type = "text/javascript"
    document.getElementsByTagName("head")[0].appendChild(script)

  loadMaps: =>
    otherParams = if @isMobileDevice then "sensor=true" else "sensor=false"
    google.load("maps", "3", {other_params: otherParams, "callback" : @mapsLoaded});

  mapsLoaded: =>
    @hasLoaded = true
    window.loadMaps = null
    if @successCallback
      @successCallback()
    @successCallback = null

@MapsLoader = new MapsLoader()

Javascript: Hide the iOS soft keyboard

2011-10-10T23:20:00.000-06:00

I was having some trouble getting my text input field to relieve itself of focus on the iPhone, and after a little searching, I came up with a couple options. It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!


var hideKeyboard = function() {
	document.activeElement.blur();
	$("input").blur();
};

Given distance and friction, calculate the initial velocity to stop at the distance target

2011-09-25T22:38:00.000-06:00

While simulating iOS scroll views in javascript, I needed to find the initial velocity to send the scroll content back into position if you drag it out of bounds. Since the in-bounds scroll view inertia was already working with a given friction, I wanted to use this to run the calculation. After some brute-force experimenting, I came up with the equation to calculate this velocity:


// set up vars
var curPos = 0;
var distance = 2000;
var friction = 0.8;
var velocity = distance / ( friction * ( 1 / ( 1 - friction ) ) );

// in timer:
setInterval(function(){
    velocity *= friction;
    curPos += velocity;
},30);

The curPos value will ease into the target distance, no matter what you set as the friction and distance. Friction must be a decimal between zero and one.

Xcode error: "The argument is invalid"

2011-09-13T11:19:00.000-06:00

If you get this error while publishing from Xcode, you may have a rogue symlink in your project. As of Xcode 4.1, symlinks will give you the awesome, helpful error: "The argument is invalid"

Check your project for symlinks, and remove them. If you're symlinking another directory into your project, this would work in the iOS Simulator, but not on a device, so you'd probably want to come up with another strategy for including files from another project. To help with finding symlinks, run the following command from the root of your project directory. It will list any symlinks and their original location.


find ./ -type l -exec ls -l {} \;

Google Maps API: Polyline encoding/decoding issue

2011-09-01T21:12:00.007-06:00

I'm using google's Geometry Library to encode large numbers of GPS location points into a compressed format for storage. You can add this capability to your .js by adding it to the quersystring in the javascript reference:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true"></script>

The library provides a very easy way to display a path, add points realtime, store this path as an encoded & compressed string, and feed that string back into a new map when you're ready to display it later. You can see a live example here.

Encoding works great, but I ran into an issue where some of my encoded paths, generated by google.maps.geometry.encoding.encodePath() from my google.maps.Polyline object, would have major errors when using the google.maps.geometry.encoding.decodePath() method. My Polyline would have random right-angle turns that effectively ruined my path. I played around with the encoded string, trying to figure out what was causing the issue, to no avail. I found another implementation of the polyline encoding algorithm, and found an explanation of what was causing the issue.

It turns out that you need to escape the backslashes that may appear in the output string from google.maps.geometry.encoding.encodePath() (and the other library linked to above). So if you're storing the string for later, you want to do something like this:

var encodedPath = google.maps.geometry.encoding.encodePath( _poly.getPath() ).replace(/\\/g,'\\\\');

You can then feed that encoded string into a new Map's Polyline instance like so:

_poly.setPath( google.maps.geometry.encoding.decodePath( encodedPath ) );

It seems like an oversight that this double-backslash issue isn't mentioned in the Google documentation. I spent hours before trying to figure out the problem in my mobile app before coming across the fix.

Finally, after you set a decoded path as the data for a Polyline, use the following code to fit the Map to the bounds of your path:

var bounds = new google.maps.LatLngBounds();

var path = _poly.getPath();

path.forEach(function( latlng ) {

	bounds.extend( latlng );

});

_map.fitBounds( bounds );

Javascript: Formatting latitude/longitude location between Decimal and DMS (degrees, minutes, seconds)

2011-07-26T18:53:00.000-06:00

I'm working on a javascript UI for a mobile app that receives location data in the Decmial format. We wanted the fancy DMS format, so I found some code, rewrote it, and wrapped it up into a nice little static class for converting back and forth.

// A static class for converting between Decimal and DMS formats for a location
// ported from: http://andrew.hedges.name/experiments/convert_lat_long/
// Decimal Degrees = Degrees + minutes/60 + seconds/3600
// more info on formats here: http://www.maptools.com/UsingLatLon/Formats.html
// use: LocationFormatter.DMSToDecimal( 45, 35, 38, LocationFormatter.SOUTH );
// or:  LocationFormatter.decimalToDMS( -45.59389 );

function LocationFormatter(){
};

LocationFormatter.NORTH = 'N';
LocationFormatter.SOUTH = 'S';
LocationFormatter.EAST = 'E';
LocationFormatter.WEST = 'W';

LocationFormatter.roundToDecimal = function( inputNum, numPoints ) {
 var multiplier = Math.pow( 10, numPoints );
 return Math.round( inputNum * multiplier ) / multiplier;
};

LocationFormatter.decimalToDMS = function( location, hemisphere ){
 if( location < 0 ) location *= -1; // strip dash '-'
 
 var degrees = Math.floor( location );          // strip decimal remainer for degrees
 var minutesFromRemainder = ( location - degrees ) * 60;       // multiply the remainer by 60
 var minutes = Math.floor( minutesFromRemainder );       // get minutes from integer
 var secondsFromRemainder = ( minutesFromRemainder - minutes ) * 60;   // multiply the remainer by 60
 var seconds = LocationFormatter.roundToDecimal( secondsFromRemainder, 2 ); // get minutes by rounding to integer

 return degrees + '° ' + minutes + "' " + seconds + '" ' + hemisphere;
};

LocationFormatter.decimalLatToDMS = function( location ){
 var hemisphere = ( location < 0 ) ? LocationFormatter.SOUTH : LocationFormatter.NORTH; // south if negative
 return LocationFormatter.decimalToDMS( location, hemisphere );
};

LocationFormatter.decimalLongToDMS = function( location ){
 var hemisphere = ( location < 0 ) ? LocationFormatter.WEST : LocationFormatter.EAST;  // west if negative
 return LocationFormatter.decimalToDMS( location, hemisphere );
};

LocationFormatter.DMSToDecimal = function( degrees, minutes, seconds, hemisphere ){
 var ddVal = degrees + minutes / 60 + seconds / 3600;
 ddVal = ( hemisphere == LocationFormatter.SOUTH || hemisphere == LocationFormatter.WEST ) ? ddVal * -1 : ddVal;
 return LocationFormatter.roundToDecimal( ddVal, 5 );  
};

Webkit bug: translate3d positioning doesn't activate browser scrollbars

2011-04-27T00:08:00.001-06:00

After some frustration in Safari and Mobile Safari, I found that by setting a -webkit-transform: translate3d() to position the y-coordinate of an html element beyond the browser window height, it will not cause the browser to activate its scrollbars. However, by switching to the web-standards css top style, this problem is alleviated. This seems like a browser bug to me.

Consider the following css, in both desktop and mobile Safari:

<html>
<head>
  <style>
    .notbroken {
      position:absolute;
      top:10000px;
    }
    .broken {
      position:absolute;
      -webkit-transform: translate3d(0px, 10000px, 0px);
    }
  </style>
</head>
<body>
  <div class="notbroken">Scrollbars, please.</div>
</body>
</html>

Both css classes position the div 10,000 pixels down the page, but if you use the .broken version, you won't get scrollbars, and you'll never be able to see the content.

Javascript: Handle touch gestures for pinch (scale) and rotation

2011-04-19T15:30:00.002-06:00

I wrote a little class to handle pinch & rotate gestures on a web page in iOS. There's a bunch of event listener adding/removing, which can get a little messy, so this should help keep your code clean if you need to handle gestures.

Here's the class:

function GestureCallback( element, endCallback, changeCallback ) {
  this.element = element;
  this.end_callback = endCallback;
  this.change_callback = changeCallback;
  this.scale = 1;
  this.rotation = 0;
  this.init();
}

GestureCallback.prototype.init = function() {
  // scope functions for listener removal
  var self = this;
  this.gestureStart = function(e){ self.onGestureStart(e) };
  this.gestureChange = function(e){ self.onGestureChange(e) };
  this.gestureEnd = function(e){ self.onGestureEnd(e) };
  
  // really no need to check for IE stupidness, but maybe they'll support gestures someday? oy.
  if( this.element.attachEvent ) this.element.attachEvent( "touchstart", this.gestureStart ); else this.element.addEventListener( "touchstart", this.gestureStart, false );
  if( this.element.attachEvent ) this.element.attachEvent( "gesturestart", this.gestureStart ); else this.element.addEventListener( "gesturestart", this.gestureStart, false );
};

GestureCallback.prototype.onGestureStart = function ( e ) {
  if( this.element.attachEvent ) this.element.attachEvent( "gesturechange", this.gestureChange ); else this.element.addEventListener( "gesturechange", this.gestureChange, false );
  if( this.element.attachEvent ) this.element.attachEvent( "gestureend", this.gestureEnd ); else this.element.addEventListener( "gestureend", this.gestureEnd, false );
};

GestureCallback.prototype.onGestureChange = function ( e ) {
  this.scale = e.scale;
  this.rotation = e.rotation;
  if( this.change_callback ) this.change_callback( this.scale, this.rotation );
};

GestureCallback.prototype.onGestureEnd = function ( e ) {
  if( this.element.detachEvent ) this.element.detachEvent( "gesturechange", this.gestureChange ); else this.element.removeEventListener( "gesturechange", this.gestureChange, false );
  if( this.element.detachEvent ) this.element.detachEvent( "gestureend", this.gestureEnd ); else this.element.removeEventListener( "gestureend", this.gestureEnd, false );

  this.scale = e.scale;
  this.rotation = e.rotation;
  if( this.end_callback ) this.end_callback( this.scale, this.rotation );
};

GestureCallback.prototype.dispose = function() {
  if( this.element.attachEvent ) this.element.detachEvent( "touchstart", this.gestureStart ); else this.element.removeEventListener( "touchstart", this.gestureStart, false );
  if( this.element.attachEvent ) this.element.detachEvent( "gesturestart", this.gestureStart ); else this.element.removeEventListener( "gesturestart", this.gestureStart, false );
  
  this.element = null;
  this.end_callback = null;
  this.change_callback = null;
  
  this.gestureStart = null;
  this.gestureChange = null;
  this.gestureEnd = null;
};

And the instantiation:

var pinchCallback = new GestureCallback( yourElement, function( scale, rotation ){
  console.log('done: '+scale+','+rotation);
  if( scale < 1 ) {
    // leave the section, since we've pinched it closed
  }
}, function( scale, rotation ){
  console.log('changing: '+scale+','+rotation);
});

And when you're done with your gesture needs, collect your garbage:

pinchCallback.dispose();
pinchCallback = null;

Processing: MovieMaker gotchas in Eclipse

2011-04-08T00:48:00.001-06:00

I haven't touched my Processing sketches for a while, and got lots of weird errors while trying to render a video using the built-in MovieMaker object.

Exception in thread "Animation Thread" java.lang.UnsatisfiedLinkError: quicktime.QTSession.Gestalt(I[I)S
Caused by: java.lang.UnsatisfiedLinkError: /System/Library/Java/Extensions/libQTJNative.jnilib:  no suitable image found.  Did find:  /System/Library/Java/Extensions/libQTJNative.jnilib: no matching architecture in universal wrapper

The above error was fixed by switching the JVM that Eclipse was using in the "Run..." configuration. On my Macbook, I simply switched to an alternate JVM 1.5, and it got rid of the problem:

If you get the following error, you need to delete the previous rendered movie, or use some sort of timestamp to automatically name each new movie:

The movie file already exists.  Please delete it first.

Here's a little timestamp code I wrote to help prevent file name conflicts:

_timestamp = "" + String.valueOf( p.year() ) + "-" + String.valueOf( p.month() ) + "-" + String.valueOf( p.day() ) + "-" + String.valueOf(p.hour()) + "-" + String.valueOf(p.minute()) + "-" + String.valueOf(p.second());
  
_mm = new MovieMaker( p, p.width, p.height, "output/render-"+_timestamp+".mov", _framesPerSecond, MovieMaker.ANIMATION, MovieMaker.HIGH );

A stupid user-error error message I got was due to accidentally starting 2 instances of MovieMaker. Upon calling MovieMaker.finish(), I got this error:

quicktime.std.StdQTException[QTJava:7.6.6g],-2014=invalidDuration,QT.vers:7668000

Some other issues I've run into:
* Certain codecs won't be installed on your machine. For example, I can't use MovieMaker.H264, but I can use MovieMaker.ANIMATION
* After rendering a movie, Quicktime can have trouble playing it back, especially with certain codecs. My movies look blank. A workaround is to open and export the video from Quicktime Pro in order to view it.

Finally, something I've been doing with all my Processing sketches is to add the following VM Arguments to the Run Configuration. This helps avoid running out of memory and to run in 32-bit mode (required for certain operations):

-d32
-Xmx1024M
-Xms1024M

Bash script: Harvest email addresses from a directory of files

2011-02-21T22:56:00.000-07:00

I had to go through over a year of server logs to rescue newsletter signups that may or may not have been passed to our newsletter service, due to server updates that happened without my knowledge. I wrote a little command to scrape all the log files in my directory, and output a text file with all the addresses it found. Here we go:

# recursively(!) scrapes directories and prints out each email address to a new line
egrep -o -h -r '[a-zA-Z0-9_-\+\.]+@[a-zA-Z0-9_-\+\.]+?\.[a-zA-Z]{2,3}' *.* | sort | uniq > email_addresses.txt

Credit: I started with a command from Linux.com, and customized it until the output was correct, and nicely formatted.

jQuery fadeIn() bug on iPad: element disappears

2011-02-21T14:52:00.001-07:00

I'm using jQuery on a new site, and a fadeIn() animation broke, but only on the iPad with iOS 3.2.2. It works fine in every other browser, including the newer iOS (4+) for iPad. To fix the problem, which in my case doesn't affect other browsers, I simply added a callback function that manually sets the width and height of the element:

newSection.fadeIn( 300 , function(){
  newSection.css( { width:320, height:480 } );
});

I tried other css properties first, but width and height are the magic properties that prevent the element from being hidden. Quick, someone tell Steve Jobs :p

Actionscript 3: Grabbing and resizing BitmapData

2011-02-20T22:57:00.000-07:00

I found this handy little class in a Flash project that I just had to jump back into. It's an easy way to take a bitmap snapshot of any DisplayObject, then resize the image data to fit another frame. You can fill the area, letterbox/pillowbox, or just scale to new dimensions. Feel free to use this, and nevermind the warnings that show up in FDT :)

package com.cache.util 
{
 import flash.display.BitmapData;
 import flash.display.DisplayObject;
 import flash.geom.Matrix;
 import flash.geom.Point;
 import flash.geom.Rectangle;
 
 /**
  * @author justin - http://uihacker.blogspot.com/
  */
  
 public class ImageEdit 
 {
  /**
   * Return a snapshot of a DisplayObject
   */
  public static function getBitmapData( vSource:DisplayObject, vW:Number=NaN, vH:Number=NaN, vTransparent:Boolean=true, vColor:int=0xFF00FF, vMatrix:Matrix=null ):BitmapData
  {
   // set defaults.
   var vWidth:int = ( isNaN( vW )) ? vSource.width : vW;
   var vHeight:int = ( isNaN( vH )) ? vSource.height : vH;  
   
   // create BitmapData object.
   var vBmp:BitmapData = new BitmapData( vWidth, vHeight, vTransparent, vColor );
   
   // draw contents of source clip into target.
   if ( vMatrix == null ) vBmp.draw( vSource, null, null, null, null, true );
   else vBmp.draw( vSource, vMatrix, null, null, null, true ); 
   
   return vBmp;
  }
  
  /**
   * Build & return a matrix to use to scale a bitmap
   */
  public static function getScaleMatrix( scale:Number ) : Matrix
  {
   var matrix:Matrix = new Matrix();
   matrix.scale(scale, scale);
   return matrix;
  }
  
  /**
   * Pass these constants into the getResizedBitmapData() function
   */
  public static const RESIZE_SCALE:String = 'ImageEdit.resizeScale';
  public static const RESIZE_LETTERBOX:String = 'ImageEdit.resizeLetterbox';
  public static const RESIZE_CROP:String = 'ImageEdit.resizeCrop';
  
  /**
   * Return a resized BitmapData copy of the original
   */
  public static function getResizedBitmapData( sourceBitmap:BitmapData, targetWidth:Number, targetHeight:Number, resizingMethod:String = '', disposeSourceBmp:Boolean = true ) : BitmapData
  {
   // get current dimensions
   var curW:Number = sourceBitmap.width;
   var curH:Number = sourceBitmap.height;
   
   // get ratios of 2 sides
   var ratio_w:Number = targetWidth / curW;
   var ratio_h:Number = targetHeight / curH;
   var shorterRatio:Number = ( ratio_w > ratio_h ) ? ratio_h : ratio_w;
   var longerRatio:Number = ( ratio_w > ratio_h ) ? ratio_w : ratio_h;
   
   
   // apply sizing
   switch( resizingMethod )
   {
    case RESIZE_CROP :
     // get shorter ratio, so we fill the target area
     var resizedWidth:int = Math.round( curW * longerRatio );
     var resizedHeight:int = Math.round( curH * longerRatio );
     
     // create copy of, and resize the source bitmap
     var resizedSourceBmp:BitmapData = new BitmapData( resizedWidth, resizedHeight, false, 0x00000000 );
     // create scale matrix 
     var matrix:Matrix = new Matrix();
     matrix.scale( longerRatio, longerRatio );
     // take resized snapshot
     resizedSourceBmp.draw( sourceBitmap, matrix );
     
     // draw into destination bitmap, letterbox/pillowbox style
     var destBitmap:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
     var offset:Point = new Point( targetWidth / 2 - resizedWidth / 2, targetHeight / 2 - resizedHeight / 2 );
     destBitmap.copyPixels( resizedSourceBmp, new Rectangle( -offset.x, -offset.y, resizedSourceBmp.width, resizedSourceBmp.height ), new Point() );
     
     // clean up temp BitmapData
     resizedSourceBmp.dispose();
     if( disposeSourceBmp ) sourceBitmap.dispose();
     
     return destBitmap;
     break;
     
    case RESIZE_LETTERBOX :
     // get shorter ratio, so we fill the target area
     var resizedWidth:int = Math.round( curW * shorterRatio );
     var resizedHeight:int = Math.round( curH * shorterRatio );
     
     // create copy of, and resize the source bitmap
     var resizedSourceBmp:BitmapData = new BitmapData( resizedWidth, resizedHeight, false, 0x00000000 );
     // create scale matrix 
     var matrix:Matrix = new Matrix();
     matrix.scale( shorterRatio, shorterRatio );
     // take resized snapshot
     resizedSourceBmp.draw( sourceBitmap, matrix );
     
     // draw into destination bitmap, letterbox/pillowbox style
     var destBitmap:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
     var pastePoint:Point = new Point( targetWidth / 2 - resizedWidth / 2, targetHeight / 2 - resizedHeight / 2 );
     destBitmap.copyPixels( resizedSourceBmp, new Rectangle( 0, 0, resizedSourceBmp.width, resizedSourceBmp.height ), pastePoint );
     
     // clean up temp BitmapData
     resizedSourceBmp.dispose();
     if( disposeSourceBmp ) sourceBitmap.dispose();
     
     return destBitmap;
     break;
     
    case RESIZE_SCALE :
    default : 
     // create output bitmap
     var vBmp:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
     // create scale matrix 
     var matrix:Matrix = new Matrix();
     matrix.scale( ratio_w, ratio_h );
     // snapshot with scale & return
     vBmp.draw( sourceBitmap, matrix );
     
     // clean up temp BitmapData
     if( disposeSourceBmp ) sourceBitmap.dispose();
     
     return vBmp;
     break; 
     
   }
   return null;
  }
 }
}

Processing: Shapes disappear when switching from P3D to OPENGL renderer

2011-02-07T17:48:00.001-07:00

I was having some issues with my 3d scene in Processing when switching to OPENGL from the P3D rendering mode. At a certain distance, my shapes were disappearing in OPENGL, but they displayed properly in P3D. My good friend (and Processing whiz) Movax gave me the suggestion to adjust my perspective(). Theses we the value that helped my situation:

perspective( 1.0f, 1.5f, 1f, 200000f );

The 200,000 value is the maximum depth that the camera will be able to see in OPENGL mode, which was large enough to view some of my distant objects that had been disappearing.

Bash shell script: Scraping and downloading image files from a ffffound RSS feed

2011-01-24T01:54:00.001-07:00

I wrote this little script for a friend, as an exercise in bash shell scripting. This script is for OS X.

Step 1:
Install Homebrew - this is a great tool for installing common Unix tools. You should only have to open Terminal, and paste the 1-line installation script found in the link above. Something like this:

ruby -e "$(curl -fsSLk https://gist.github.com/raw/323731/install_homebrew.rb)"

Step 2:
Install wget with Homebrew: type this into Terminal and press Enter:

brew install wget

Step 3:
Save the following code into a text file called "ffffound_sssswiped.sh" and save it into your User/Pictures/ directory:

curl http://feeds.feedburner.com/ffffound/everyone | egrep -o source\ url=\"http://[^[:space:]]*.\(jpg\|png\|gif\) | egrep -o http://[^[:space:]]*.\(jpg\|png\|gif\) | xargs wget -nc -P ~/Pictures/ffffound

Step 4:
Customize! You can replace http://feeds.feedburner.com/ffffound/everyone with your own ffffound RSS feed, or anyone else's.

Step 5:
Run the script: type the following into Terminal, and hit Enter:

bash ~/Pictures/ffffound_sssswiped.sh

You should see the download progress as it scrapes the RSS feed for just the large-format image files. You can run this as often as you want, and it will skip any files you've already downloaded.

Magic!

Android + Phonegap: Scale the WebView to fit the device

2011-01-19T21:37:00.000-07:00

I was porting an iPad app to Android for the new Samsung tablet, and I had some trouble getting my web view to scale to the size of the device screen so that I wouldn't have to resize any of my assets. Obviously this is a questionable tactic, but I was experimenting and wanted to see how it would look :)

Here's the meat of my main App.java class:

public class App extends DroidGap {
 
 // declare the original size of the iPad app
 protected float ORIG_APP_W = 768;
 protected float ORIG_APP_H = 1004;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        
     // set some defaults
     this.appView.setBackgroundColor(0x000000);
     this.appView.setHorizontalScrollBarEnabled(false);
     this.appView.setHorizontalScrollbarOverlay(false);
     this.appView.setVerticalScrollBarEnabled(false);
     this.appView.setVerticalScrollbarOverlay(false);
     
     // get actual screen size
     Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
     int width = display.getWidth(); 
     int height = display.getHeight(); 
     
     // calculate target scale (only dealing with portrait orientation)
     double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );
     
     // make sure we're all good
     Log.v( "ORIG_APP_W", " = " + ORIG_APP_W );
     Log.v( "ORIG_APP_H", " = " + ORIG_APP_H );
     Log.v( "width", " = " + width );
     Log.v( "this.appView.getMeasuredHeight()", " = " + height );
     Log.v( "globalScale", " = " + globalScale );
     Log.v( "this.appView.getScale()", "index=" + this.appView.getScale() );
    
     // set some defaults on the web view
     this.appView.getSettings().setBuiltInZoomControls( false );
     this.appView.getSettings().setSupportZoom( false );
     this.appView.getSettings().setGeolocationEnabled( true );
     this.appView.getSettings().setLightTouchEnabled( true );
     this.appView.getSettings().setRenderPriority( RenderPriority.HIGH );
     
     // set the scale
     this.appView.setInitialScale( (int)globalScale );
   }
}

I also updated the AndroidManifest.xml file to lock the app into portrait orientation, work on tablet-sized devices, have a nice app name, and give the device access to the Internet and geolocation:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.phonegap.testapp"
      android:versionCode="1"
      android:versionName="1.0">     
     
    <application android:icon="@drawable/icon" 
        android:label="@string/app_name"
        android:debuggable="true">
        <activity android:name=".App" 
                  android:label="Test App" 
                  android:configChanges="orientation|keyboardHidden"
                  android:noHistory="true" 
                  android:stateNotNeeded="true" 
                  android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

    <!-- allows access to phonegap hardware features -->
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />-->
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />


   <supports-screens
     android:largeScreens="true"
     android:normalScreens="false"
     android:smallScreens="false"
     android:resizeable="true"
     android:anyDensity="true"
     />

</manifest>

And finally my res/layout/main.xml file, though I'm not sure if this is different from the Phonegap default:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >    
            <WebView android:id="@+id/appView"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            /> 
</LinearLayout>

I hope this helps someone port their hybrid html5 iPad app to Android tablets.

Javascript: Clear a webkitTransition animation

2011-01-19T21:11:00.000-07:00

I was animating an html element with Webkit transitions via javascript, and after the animation was done, I applied non-animated webkitTransform positioning to the same element. It animated instead of immediately displaying the new style. I came up with the following function to clear any previous Webkit animation values:

function clearAnimation( element ) {
  if( typeof element.style.webkitTransform !== 'undefined' && element.style.webkitTransform ) {   // 2nd conditional fixes bug in Chrome on windows
    element.style.webkitTransition = '';
    element.style.webkitTransform = '';
  }
}

This will prevent any overlap when switching between animatiions and instant repositioning.

Android: touchmove event bug

2011-01-18T19:14:00.000-07:00

touchmove events in Android web browsers have a really serious bug. If you don't include the following code, the touchmove event will fire once, but not again until you're done moving your touch, which utterly kills the usefulness of the touchmove event. It's a weird one, and may very well break more advanced touch logic that works on iOS. But if you preventDefault() on the touchstart event, your touchmove will function as expected.

element.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
  if( navigator.userAgent.match(/Android/i) ) {
    touchEvent.preventDefault();
  }
}

This bug is documented here:
http://code.google.com/p/android/issues/detail?id=5491

and is probably not entirely unrelated to my previous post about weird Android Touch event behavior:
http://uihacker.blogspot.com/2010/10/android-bug-miss-drag-as-we-are-waiting.html

CSS Grab hand cursor

2011-01-18T00:25:00.000-07:00

I wanted a grabby hand cursor in html since we're building sites that have draggable interfaces for both desktop browsers and touchscreen devices. I found some CSS that takes care of most modern browsers, and came up with a little extra for Internet Explorer and Chrome.

Here's the CSS:

#trackbar {
  width:100%;
  height:50px;
  cursor:hand;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}

#trackbar.custom_cursor {
  cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

#trackbar.grabbing {
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

#trackbar.custom_cursor.grabbing {
  cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

The 3 cursor attributes looked great in most modern browsers, but didn't work in IE (obviously) or Chrome. I looked at some code in Google Maps and gleaned the custom cursors, which you can pull down locally, but you have to reference the .cur files absolutely, or they won't work in IE. Awesome. So, because we'd rather use CSS, we only apply the custom cursor files if you're in IE or Chrome. Something like this:

if( navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Chrome/i) ) document.getElementById('trackbar').className = 'custom_cursor';

I'm not sure if there's any way around it, but it doesn't seem like IE will change cursors after you mouse down. So if you add the "grabbing" class on a mousedown event, IE will block your grabby hands :(

Actionscript: / HTML text issue from an old Flash 8 project

2011-01-11T18:50:00.001-07:00

I built a project back in 2006 that's amazingly still alive and making lots of money for a client. I had a bit of code that would insert an   into a textfield for dummy spacing in between other letters. Out of nowhere, this stopped working for the client, and all the text was space-less. This is what I had:

StringUtil.searchReplace( myStr, _dummyChar, '<span class="textDummy">&nbsp;</span>' );

This now fails to insert a space. I tried just using an actual space, but since this is an html textfield, multiple consecutive spaces don't keep making more room. So, I added a space after the  , and magically, it works like it had in previous years:

StringUtil.searchReplace( myStr, _dummyChar, '<span class="textDummy">&nbsp;</span> ' );

Whew fun!

Javascript: Prototype.js - keep a timer running and maintain scope

2010-12-08T11:48:00.001-07:00

If you create a Class with the Prototype.js class system, and you want to keep a timer running (for animation or other purposes), use this function to maintain the proper "this" scope:

runTimer: function() {
    // execute your own code here

    // keep timer running
    setTimeout(function(t) { 
        t.runTimer(); 
    }, 1000/30, this);
}

Javascript: Prototype.js Class system isolated into one file

2010-12-01T18:39:00.001-07:00

I wanted to isolate the Class system from Prototype so I could use it with other libraries. I like the way it works, especially the inheritance features. You can copy and paste this into your own class.js file, and use the Prototype.js class system just like you would if you had the whole library included in your page. Check it out:

/* From object.js ------------------------------ */
Object.prototype.getType = function(o) {
  switch(o) {
    case null: return 'Null';
    case (void 0): return 'Undefined';
  }
  var type = typeof o;
  switch(type) {
    case 'boolean': return 'Boolean';
    case 'number':  return 'Number';
    case 'string':  return 'String';
  }
  return 'Object';
};

Object.prototype.keys = function(object) {
  if (this.getType(object) !== 'Object') { alert('type error'); }
  var results = [];
  for (var property in object) {
    if (object.hasOwnProperty(property)) {
      results.push(property);
    }
  }
  return results;
};

Object.prototype.isFunction = function(object) {
  return Object.prototype.toString.call(object) === '[object Function]';
};

Object.prototype.isUndefined = function(object) {
  return typeof object === "undefined";
};

Object.prototype.extend = function(destination, source) {
  for (var property in source)
    destination[property] = source[property];
  return destination;
};

/* From array.js ------------------------------ */
function $A(iterable) {
  if (!iterable) return [];
  // Safari <2.0.4 crashes when accessing property of a node list with property accessor.
  // It nevertheless works fine with `in` operator, which is why we use it here
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
};

/* From function.js ------------------------------ */
Function.prototype.argumentNames = function() {
  var names = this.toString().match(/^[\s\(]*function[^(]*\(([^)]*)\)/)[1]
    .replace(/\/\/.*?[\r\n]|\/\*(?:.|[\r\n])*?\*\//g, '')
    .replace(/\s+/g, '').split(',');
  return names.length == 1 && !names[0] ? [] : names;
};

// patched with inline helpers from function.js
Function.prototype.bind = function(context) {
  if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
  var __method = this, 
    args = Array.prototype.slice.call(arguments, 1);
  function update(array, args) {
    var arrayLength = array.length, length = args.length;
    while (length--) array[arrayLength + length] = args[length];
    return array;
  }
  function merge(array, args) {
    array = Array.prototype.slice.call(array, 0);
    return update(array, args);
  }
  return function() {
    var a = merge(args, arguments);
    return __method.apply(context, a);
  }
};

// patched with inline helper from function.js
Function.prototype.wrap = function(wrapper) {
  function update(array, args) {
    var arrayLength = array.length, length = args.length;
    while (length--) array[arrayLength + length] = args[length];
    return array;
  }
  var __method = this;
  return function() {
    var a = update([__method.bind(this)], arguments);
    return wrapper.apply(this, a);
  }
};

/* From class.js ------------------------------ */
/* Based on Alex Arnell's inheritance implementation. */
/* Refer to Prototype's web site for a [tutorial on classes and inheritance (http://prototypejs.org/learn/class-inheritance). */
var Class = (function() {
  
  // Some versions of JScript fail to enumerate over properties, names of which 
  // correspond to non-enumerable properties in the prototype chain
  var IS_DONTENUM_BUGGY = (function(){
    for (var p in { toString: 1 }) {
      // check actual property name, so that it works with augmented Object.prototype
      if (p === 'toString') return false;
    }
    return true;
  })();
  
  function subclass() {};
  function create() {
    var parent = null, properties = $A(arguments);
    if (Object.isFunction(properties[0]))
      parent = properties.shift();

    function klass() {
      this.initialize.apply(this, arguments);
    }

    Object.extend(klass, Class.Methods);
    klass.superclass = parent;
    klass.subclasses = [];

    if (parent) {
      subclass.prototype = parent.prototype;
      klass.prototype = new subclass;
      parent.subclasses.push(klass);
    }

    for (var i = 0, length = properties.length; i < length; i++)
      klass.addMethods(properties[i]);

    if (!klass.prototype.initialize)
      klass.prototype.initialize = Prototype.emptyFunction;

    klass.prototype.constructor = klass;
    return klass;
  }

  function addMethods(source) {
    var ancestor   = this.superclass && this.superclass.prototype,
        properties = Object.keys(source);

    // IE6 doesn't enumerate `toString` and `valueOf` (among other built-in `Object.prototype`) properties,
    // Force copy if they're not Object.prototype ones.
    // Do not copy other Object.prototype.* for performance reasons
    if (IS_DONTENUM_BUGGY) {
      if (source.toString != Object.prototype.toString)
        properties.push("toString");
      if (source.valueOf != Object.prototype.valueOf)
        properties.push("valueOf");
    }

    for (var i = 0, length = properties.length; i < length; i++) {
      var property = properties[i], 
          value = source[property];
      if (ancestor && Object.isFunction(value) &&
          value.argumentNames()[0] == "$super") {
        var method = value;
        value = (function(m) {
          return function() { return ancestor[m].apply(this, arguments); };
        })(property).wrap(method);

        value.valueOf = method.valueOf.bind(method);
        value.toString = method.toString.bind(method);
      }
      this.prototype[property] = value;
    }

    return this;
  }

  return {
    create: create,
    Methods: {
      addMethods: addMethods
    }
  };
})();

Android: Phonegap issue with HTML5 video

2010-11-30T17:58:00.000-07:00

We've been trying to implement HTML5 video inside a WebView in an Android Phonegap app, and there's a big difference between the embedded web browser and the native web browser on the Samsung Galaxy Tab (and likely other Android devices). In the native browser, an HTML5 <video> player will pop the video into the native media player, and should play fine if you've used an appropriate codec, and jumped through the right hoops. But, in an embedded browser in a Phonegap app, the video won't play at all. We resorted to using an <a> link with a _blank target to pop you completely out of the app. This was the only solution we could come up with. It's a pretty sad story dealing with the "standards" of HTML5 video across all the platforms and browsers that supposedly support it. I'm not sure there's a good way to deal with all of the different platforms/scenarios...

Javascript: red plasma experiment

2010-11-29T17:35:00.003-07:00

I ported an old Processing experiment of mine today, as an exercise to get myself back into coding after a couple weeks of vacation. Copy and paste the code into your own html file to try it out:

<!DOCTYPE html>
<html>
  <head>
    <title>Plasma</title>

    <script type="text/javascript">
        function initPlasma()
        {
            /* MATH FUNCTIONS ------------------------------ */
            
            function MathUtil() {}

            MathUtil.getDistance = function ( a, b ) {
                return Math.abs( Math.sqrt(a*a + b*b) );
            };
            
            MathUtil.randRangeDecimel = function ( min, max ) {  
                return Math.random() * ( max - min ) + min;
            };
            
            /* GRID CELL CLASS ------------------------------ */
            
            var Cell = function( x, y, w, h ) {
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }
            
            Cell.prototype.update = function( r, g, b ) {
                this.r = r;
                this.g = g;
                this.b = b;
                                
                this.draw();
            };
            
            Cell.prototype.draw = function() {
                if( !plasma ) return;
                
                // get color, based on distance 
                var ctrlPt1 = MathUtil.getDistance( this.x - plasma.controlPoints[0].x, this.y - plasma.controlPoints[0].y );
                var ctrlPt2 = MathUtil.getDistance( this.x - plasma.controlPoints[1].x, this.y - plasma.controlPoints[1].y );
                var ctrlPt3 = MathUtil.getDistance( this.x - plasma.controlPoints[2].x, this.y - plasma.controlPoints[2].y );
                
                var rVal = .5+.5*Math.sin(this.r) * Math.cos(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100);
                var gVal = .2+.5*Math.sin(this.g) * Math.sin(ctrlPt1/100) * Math.sin(ctrlPt2/100) * Math.sin(ctrlPt3/100);
                var bVal = .2+.5*Math.cos(this.b) * Math.sin(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100)
                
                // draw pixel to canvas
                plasma.context.fillStyle = "rgb("+ Math.round( 127 + rVal * 255 ) +","+ Math.round( 127 + gVal * 255 ) +","+ Math.round( 127 + bVal * 255 ) +")"; 
                plasma.context.fillRect ( this.x, this.y, this.w, this.h );  
            };
            
            
            /* CONTROL POINT CLASS ------------------------------ */
            
            var ControlPoint = function( canvasW, canvasH ) {
                // create random x,y starting point 
                this.incX = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
                this.incY = MathUtil.randRangeDecimel( 0, 2 * Math.PI );
                // create random x,y oscillating speed 
                this.incXSpeed = MathUtil.randRangeDecimel( .01, .1 );
                this.incYSpeed = MathUtil.randRangeDecimel( .01, .1 );
                // store center point to oscillate around
                this.centerX = canvasW / 2;
                this.centerY = canvasH / 2;
            }
            
            ControlPoint.prototype.update = function() {
                // increment oscillating based on randomly-calculated speed
                this.incX += this.incXSpeed;
                this.incY += this.incYSpeed;
                // update coordinate
                this.x = this.centerX + this.centerX * Math.sin( this.incX );
                this.y = this.centerY + this.centerY * Math.sin( this.incY );
            };
            
            
            /* PLASMA CLASS ------------------------------ */
            
            var Plasma = function() {
                this.COLS = 50;
                this.ROWS = 50;
                this.CANVAS_W = 500;
                this.CANVAS_H = 500;
                this.FPS = 1000/30;
                this.NUM_CONTROL_POINTS = 3;
                
                this.startR = MathUtil.randRangeDecimel(0,2*Math.PI);
                this.startG = MathUtil.randRangeDecimel(0,2*Math.PI);
                this.startB = MathUtil.randRangeDecimel(0,2*Math.PI);
                this.startIncR = MathUtil.randRangeDecimel(.001,.05);
                this.startIncG = MathUtil.randRangeDecimel(.001,.05);
                this.startIncB = MathUtil.randRangeDecimel(.001,.05);
                this.incR = MathUtil.randRangeDecimel(.0001,.001);
                this.incG = MathUtil.randRangeDecimel(.0001,.001);
                this.incB = MathUtil.randRangeDecimel(.0001,.001);
                
                this.canvas;
                this.context;
                this.grid;
                
                this.buildStage();
                this.createGrid();
                this.createControlPoints();
                this.addSaveFunctionality();
                
                var self = this;
                setInterval( function(){ self.update(); }, this.FPS );
            };
        
            Plasma.prototype.buildStage = function() {
                // create and attach canvas element
                this.canvas = document.createElement('canvas');
                this.canvas.width = this.CANVAS_W;
                this.canvas.height = this.CANVAS_H;
                document.body.appendChild( this.canvas );
                
                // store graphical context
                this.context = this.canvas.getContext("2d");
            };
            
            Plasma.prototype.createGrid = function() {
                // calculate "pixel" size
                var boxW = this.CANVAS_W / this.COLS;
                var boxH = this.CANVAS_H / this.ROWS;
                
                // create 2D array of grid cells
                this.grid = new Array( this.COLS );
                for( var i = 0; i < this.COLS; i++ ) {
                    this.grid[ i ] = new Array( this.ROWS )
                    for( var j = 0; j < this.ROWS; j++ ) {
                        this.grid[ i ][ j ] = new Cell( i * boxW, j * boxH, boxW, boxH );
                    }
                }
            };
            
            Plasma.prototype.createControlPoints = function() {
                this.controlPoints = [];
                for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
                    this.controlPoints.push( new ControlPoint( this.CANVAS_W, this.CANVAS_H ) );
                }
            };
            
            Plasma.prototype.addSaveFunctionality = function() {
                var self = this;
                this.canvas.addEventListener("click", function(e) { 
                    window.open( self.canvas.toDataURL("image/jpeg") ); 
                }, false);
            };
            
            Plasma.prototype.update = function() {
                
                // increment the starting colors
                this.startR += this.startIncR;
                var curR = this.startR;
                this.startG += this.startIncG;
                var curG = this.startG;
                this.startB += this.startIncB;
                var curB = this.startB;
                
                // update control points
                for ( var i = 0; i < this.NUM_CONTROL_POINTS; i++ ) {
                    this.controlPoints[i].update();
                }
                
                // increment grid cells and draw to canvas
                for (var i = 0; i < this.COLS; i++) {
                    for (var j = 0; j < this.ROWS; j++) {
                        // send new base color to cells
                        this.grid[i][j].update( curR, curG, curB );
                        
                        // increment color as we traverse the grid
                        curR += this.incR;
                        curG += this.incG * 3;
                        curB += this.incB;
                    }
                }
            };
            
            
            // kick off the plasma controller
            var plasma = new Plasma();     
        }
    </script>
        
    <style>
        body, html {
            background-color:black;
        }
    </style>
  </head>
  <body onload="initPlasma();"></body>
</html>

And the result:

Android: Phonegap 0.9.2 doesn't work with Prototype.js 1.6.1

2010-11-04T18:00:00.001-06:00

This morning I upgraded to Phonegap 0.9.2 on an HTML-based native app for Android, in order to use the new notification.confirm() function. After moving my project to this new version, I started getting this error:

Error initializing PhoneGap: JSON error

I was using Prototype.js 1.6.1, and after a bunch of investigation, I determined that it was Prototype that was causing the error. I replaced 1.6.1 with 1.7_rc3, and magically, everything works. I looked into why this might be happening, but decided to move on with my life and just go with 1.7_rc3 :)

Hopefully this post saves someone a little madness.

Android bug: "Miss a drag as we are waiting for WebCore's response for touch down."

2010-10-29T11:01:00.002-06:00

I'm using Phonegap to port an HTML5 iPad app over to the Android platform. On my development HTC Incredible phone, every time I swipe my finger far enough, my app would freeze, and the adb debugging console would give me this error: "Miss a drag as we are waiting for WebCore's response for touch down." I researched a bunch and didn't find any solutions. I did find the Java code that logs this error in the core Android WebView.java class, but it didn't give me any clues to fix it.

I searched and hacked, and removed all my touch event listening code, and it would still break. Luckily the company work for has the resources to invest in development, and we went out and got a Samsung Galaxy S phone. I set the device up, published the app, and this phone did not have the cryptic issue! It did, however, show a range of other issues with fonts and the <canvas> object, which made me sad, as it's clear that building an HTML5-based app for Android isn't as easy as I hoped. The fragmentation of the Android platform is definitely an issue if you're attempting complex UI design and interaction with HTML/Javascript. I recommend keeping your HTML5 app very simple if you're targeting multiple Android platforms. Even though all new Android devices use Webkit, there are plenty of small, ugly differences.

[UPDATE]: The following code, when removed from my project, got rid of this weird error:

document.ontouchmove = function(event) {
    event.preventDefault();
};

Another update... Check out this post, and try out the demo code to get a bit more idea about how to handle preventDefault() on touch events in the Android browser: http://code.google.com/p/android/issues/detail?id=4549. It still crashes on my HTC device, but works great on the Samsung device.

Android browser bug: -webkit-transform scaling discrepency

2010-10-22T11:44:00.002-06:00

[UPDATE]: this only happens on my HTC Incredible device, but not my Samsung Galaxy S device. yeesh.

I'm porting an HTML5 app we built for the iPad over to Android for the upcoming Samsung tablet. With the small difference in aspect ratio, I'm scaling down the entire site to avoid rebuilding everything. It turns out, that if you scale a container with CSS like so:

-webkit-transform-origin: 0 0;
-webkit-transform : scale(0.78125);

That works fine. However, I wanted to scale it dynamically with javascript, based on the device size, like so:

var globalScale = window.innerWidth / 768;
element.style.webkitTransformOrigin = '0 0';
element.style.webkitTransform = 'scale(' + globalScale + ')';

The result looks the same, but now clicking on anything in the scaled container is completely broken. :(

Javascript: strip HTML tags from a string

2010-09-14T17:31:00.001-06:00

Here's a super simple RegEx to use when you want to be sure all html tags are removed from a string.

theString.replace(/<.*?>/g, '');

HTML/CSS on Android: rotation CSS difference between Android 2.1 and 2.2

2010-09-10T16:50:00.001-06:00

Well, the splinternet is getting more interesting. As many developers settle on html as the most cross-functional platform, we're faced with ever more browsers and small differences between them. One that I just found is a difference in CSS positioning and rotation between the browsers on Android 2.1 and Android 2.2.

On my current project, I have a fancy UI that has an element constantly changing rotation and position using webkit transform CSS built with javascript. On Android 2.1, it worked fine as a 1-liner:

element.style.webkitTransform = "translate3d(" + xPos + "px, " + yPos + "px, 0px) rotate(" + rotation + "deg)";

But, on Android 2.2, the rotation stopped working. It seems that you can't have the translate3d and the rotate properties all set in the style.webkitTransform property. To fix the issue, I positioned using traditional absolute coordinates with the top and left CSS properties, and then used the webkitTransform property to do the rotation. There were a ton of special browser cases in my project to handle different things. Check out my platform detection class below to see how I handled a lot of special cases in one place.

PlatformHelper = function ()
{
    this.webkit_css_enabled = false;
    this.animations_enabled = false;
    this.is_android = false;
    this.is_android21 = false;
    this.is_android22 = false;
    this.is_idevice = false;
    this.is_touchscreen = false;
    this.is_msie = false;
    this.is_msie6 = false;
    this.is_msie8 = false;
    this.is_firefox = false;
    return this;
};

PlatformHelper.prototype.init = function ()
{
    // check for webkit positioning capability
    if( navigator.userAgent.match(/iPhone/i) ) this.webkit_css_enabled = true;
    else if( navigator.userAgent.match(/iPod/i) ) this.webkit_css_enabled = true;
    else if( navigator.userAgent.match(/iPad/i) ) this.webkit_css_enabled = true;
    else if( navigator.userAgent.match(/Chrome/i) ) this.webkit_css_enabled = true;
    else if( navigator.userAgent.match(/Safari/i) ) this.webkit_css_enabled = true;
    
    // check for certain platforms
    if( navigator.userAgent.match(/Android/i) ) this.is_android = true;
    if( navigator.userAgent.match(/Android 2.1/i) ) this.is_android21 = true;
    if( navigator.userAgent.match(/Android 2.2/i) ) this.is_android22 = true;
    if( navigator.userAgent.match(/MSIE/i) ) this.is_msie = true;
    if( navigator.userAgent.match(/MSIE 6/i) ) this.is_msie6 = true;
    if( navigator.userAgent.match(/MSIE 8/i) ) this.is_msie8 = true;
    if( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i) ) this.is_idevice = true;
    if( navigator.userAgent.match(/Firefox/i) ) this.is_firefox = true;
    
    // special cases for touchscreens
    if( this.is_android == true || this.is_idevice == true ) this.is_touchscreen = true;
    
    // decide who sees animations
    if( this.is_msie == true ) this.animations_enabled = false;
    else this.animations_enabled = true;
};

PlatformHelper.prototype.updatePosition = function ( element, xPos, yPos, rotation )
{
    if( !this.webkit_css_enabled || this.is_android22 )
    {
        element.style.left = xPos + 'px';
        element.style.top = yPos + 'px';
        element.style.MozTransform = 'rotate(' + rotation + 'deg)';
        element.style.webkitTransform = 'rotate(' + rotation + 'deg)';
    }
    else
    {
        var new_transform = "translate3d(" + xPos + "px, " + yPos + "px, 0px) rotate(" + rotation + "deg)";
        if( element.style.webkitTransform != new_transform )    // only apply style if not already in position
         element.style.webkitTransform = new_transform;
    }
};

Javascript / CSS animated text fire effect

2010-09-08T17:03:00.001-06:00

A coworker sent me a funny example of a text-shadow CSS fire effect. I had a little time to kill, so I took the example and created an animated version using javascript. It's not very realistic, but it is highly silly:

Copy and paste the code into an html file to try it out:

<!DOCTYPE html>
<html>
  <head>
    <title>Fire</title>

    <script type="text/javascript">
        function fireText()
        {
            var FireColorStop = function( xPos, yPos, blur, color )
            {
                this.x = xPos;
                this.y = yPos;
                this.blur = blur;
                this.color = color;
                this.oscSpeed = Math.random() * Math.abs( yPos ) / 75;
                this.oscIncrement = 0;
                this.xOffset = 0;
                this.yOffset = 0;
                this.blurOffset = 0;
            };
        
            FireColorStop.prototype.oscillate = function() 
            {
                this.oscIncrement += this.oscSpeed;
                this.xOffset = Math.sin(this.oscIncrement) * this.blur / 3;
                this.yOffset = Math.sin(this.oscIncrement) * 1;
                this.blurOsc = this.blur + 10 + Math.sin(this.oscIncrement) * 3;
            };
        
            FireColorStop.prototype.getCSS = function() 
            {
                return ( this.x + this.xOffset ) + 'px ' + ( this.y + this.yOffset ) + 'px ' + this.blurOsc + 'px ' + this.color; 
            };
            
            // create objects for each color stop for independent animation
            var fireColors = [  new FireColorStop(0,  0,  4,  '#FFFFFF'),
                                new FireColorStop(0, -5,  4,  '#FFFF33'),
                                new FireColorStop(2, -10, 6,  '#FFDD33'),
                                new FireColorStop(-2,-15, 11, '#FF8800'),
                                new FireColorStop(2, -25, 18, '#FF2200')
                                ];
        
            var fps = 1000/30;
            var text = document.getElementById('fireText');
            
            // oscillate color stops and rebuild fire css
            setInterval( function(){ 
                var shadowCSS = '';
                for( var i = 0; i < fireColors.length; i++ )
                {
                    fireColors[i].oscillate();
                
                    shadowCSS += fireColors[i].getCSS();
                    if( i < fireColors.length - 1 )
                        shadowCSS += ', ';
                }
                text.style.textShadow = shadowCSS;
            }, fps );
        }
    </script>
        
    <style>
        body, html {
            background-color:black;
        }
        #fireText {
            background-color:black;
            position:absolute;
            display:block;
            width:100%;
            height:300px;
            line-height:300px;
            color:white;
            font-family: Arial, Verdana, sans-serif;
            font-size:50px;
            font-weight:bold;
            text-align:center;
        }
    </style>
    
  </head>
  <body>
    <div id="fireText">
        Yeah Dude.
    </div>
    <script type="text/javascript">
        fireText();
    </script>
  </body>
</html>

Android browser bug: pinch/zoom kills setTimeout()

2010-07-27T16:48:00.001-06:00

I'm working on some cross-platform/mobile touch/mouse code for a fancy html/js UI, and everything's been working great, but when I pinch/zoom the web page in an Android browser, my setTimeout() calls stop running. To be safe, I recommend using setInterval() instead.

// before:
setTimeout( function() { runTimer(); } , 1000/30 );
function runTimer() {
    // update graphics here
    setTimeout( function() { runTimer(); } , 1000/30 );
}

// after:
setInterval( function(){ runTimer(); }, 1000/30 );
function runTimer() {
    // update graphics here
}

I initially thought that my touch events (touchstart, touchmove, touchend) were randomly failing after zooming, because my custom motion code would completely break after running at a solid 30+ fps. It appears that this is a known bug in pre-2.2 (Froyo) Android web browsers: http://code.google.com/p/android/issues/detail?id=8566

PHPFlicker: Get images by user's tag

2010-07-25T15:51:00.000-06:00

I started using phpFlickr (http://phpflickr.com/), so I could use Flickr as a query-able backend for some of my images. I'm tagging images that I want to show up on certain pages of my site, but there wasn't an example for using tags on the phpFlickr examples page. So here's an example:

<?php
 $api_key = "YOUR_API_KEY";
 $user_id = "YOUR_USER_ID";
 $secret = "YOUR_SECRET";
 
 require_once("./php/flickr/phpFlickr.php");
 $f = new phpFlickr($api_key, $secret);

 $photos = $f->photos_search(array( "api_key"=>$api_key, "user_id"=>$user_id, "tags"=>"promo", "tag_mode"=>"any", "extras"=>"original_format,tags,url_o,description") );
 
 // Loop through the photos and output the html
 foreach( (array)$photos['photo'] as $photo ) 
 {
  // get original, or large if no original
  if( isset( $photo['url_o'] ) ) 
   echo '<a rel="lightbox[flickr]" title="'. $photo['title'].' - '. $photo['description'].'" href="'. $photo['url_o'] .'">';
  else
   echo '<a rel="lightbox[flickr]" title="'. $photo['title'].' - '. $photo['description'].'" href="'. $f->buildPhotoURL($photo, "large") .'">';

  echo '<img border="0" alt="'.$photo[title].' - '. $photo['description'].'" title="'.$photo[title].' - '. $photo['description'].'" src="' . $f->buildPhotoURL($photo, "square") . '" />';

  echo "</a>";
 }
?>

Just replace YOUR_API_KEY, YOUR_USER_ID (something like: 38845956@N05), and YOUR_SECRET (something like 7fc67607bd5abc59). This type of search is "secure", meaning that you have to acquire a secret key via the Flickr API.

This script will display square thumbnails that link out to the largest available image size. This can easily by styled, augmented with a lightbox javascript, or customized via the phpFlickr search options.

Enjoy.

Javascript: iPad orientation class with Prototype.js

2010-07-05T01:31:00.002-06:00

I'm writing an iPad app in "HTML5", and I wanted to keep track of the device orientation. I wrote this little class to send notifications when it changes, and to always have simple access to the current state. This requires Prototype.js, but could easily be ported to another OOP style.

var AppState = Class.create({
 PORTRAIT: 0,
 LANDSCAPE: 1,
 orientation: -1,    
 initialize: function() {
  this.orientation = this.PORTRAIT; // default for desktop browser
  this.setUpOrientationListener();
 },
 setUpOrientationListener : function() {
  // add listener to window if it's orientation-capable
  if( window.orientation !== undefined )
  {
   var self = this; // handles scope
   window.onorientationchange = function (event)
   {
    if ( Math.abs( window.orientation ) % 180 == 90 )
    {
     self.orientation = self.LANDSCAPE;
    }
    else
    {
     self.orientation = self.PORTRAIT;
    }
    // send out custom event
    var containerNode = $$('body');
    containerNode[0].fire("app:orientationchange", { orientation: self.orientation });
   }
   // make sure local flag is set right away
   window.onorientationchange(null);
  }
 }
});


/*
// example code for listening to custom event that fires on orientation change
document.observe("app:orientationchange", function(event) {
 console.log( "Tag " + event.target.tagName + " with id of " + event.target.id + " says the orientation is now " + event.memo.orientation + ".");
});
*/

/*
// class initialization
var app_state = new AppState(),
*/

iPhone: UISegmentedControl with custom colors

2010-05-27T17:19:00.006-06:00

[UPDATE]: We had an app approved with this code. Keep in mind that Apple has very inconsistent policies regarding app approval, but it's looking good for now.

Tasked with building a UISegmentedControl with different colors for selected/unselected buttons, I created a subclass that accomplishes this by digging through the subviews of the segmented control. I can't verify that this will get approved by the mysterious app store process, nor can I say it will function properly if you're using all of the built-in functions of UISegmentedControl (adding/removing segments dynamically will break this code). But for a simple case, it's working well for my purposes. Here we go:

CustomSegmentedControl.h :

#import 


@interface CustomSegmentedControl : UISegmentedControl {
 
 UIColor *offColor;
 UIColor *onColor;
 
 BOOL hasSetSelectedIndexOnce;
}

-(id)initWithItems:(NSArray *)items offColor:(UIColor*)offcolor onColor:(UIColor*)oncolor;
-(void)setInitialMode;
-(void)setToggleHiliteColors;

@end

CustomSegmentedControl.m :

#import "CustomSegmentedControl.h"


@implementation CustomSegmentedControl


-(id)initWithItems:(NSArray *)items offColor:(UIColor*)offcolor onColor:(UIColor*)oncolor {
 if (self = [super initWithItems:items]) {
        // Initialization code
  offColor = [offcolor retain];
  onColor = [oncolor retain];
  hasSetSelectedIndexOnce = NO;
  [self setInitialMode];
  [self setSelectedSegmentIndex:0];  // default to first button, or the coloring gets all whacked out :(
    }
    return self;
}

-(void)setInitialMode
{
 // set essential properties
 [self setBackgroundColor:[UIColor clearColor]];
 [self setSegmentedControlStyle:UISegmentedControlStyleBar];
 
 // loop through children and set initial tint
 for( int i = 0; i < [self.subviews count]; i++ )
 {
  [[self.subviews objectAtIndex:i] setTintColor:nil];
  [[self.subviews objectAtIndex:i] setTintColor:offColor];
 }
 
 // listen for updates
 [self addTarget:self action:@selector(setToggleHiliteColors) forControlEvents:UIControlEventValueChanged];
}

-(void)setToggleHiliteColors
{
 // get current toggle nav index
 int index = self.selectedSegmentIndex;
 int numSegments = [self.subviews count];
 
 for( int i = 0; i < numSegments; i++ )
 {
  // reset color
  [[self.subviews objectAtIndex:i] setTintColor:nil];
  [[self.subviews objectAtIndex:i] setTintColor:offColor];
 }
 
 if( hasSetSelectedIndexOnce )
 {
  // this is super weird - the subviews array is backwards... so deal with it like that
  [[self.subviews objectAtIndex: numSegments - 1 - index] setTintColor:onColor];
 }
 else
 {
  // ...but the very first time, they're the expected order :-/
  [[self.subviews objectAtIndex: index] setTintColor:onColor];
  hasSetSelectedIndexOnce = YES;
 }

}


@end

And to initialize :

NSArray *toggleItems = [[NSArray alloc] initWithObjects:@"One",@"Two",@"Three",nil];
CustomSegmentedControl *toggleNav = [[CustomSegmentedControl alloc] initWithItems:toggleItems offColor:[UIColor blackColor] onColor:[UIColor redColor] ];
[toggleNav addTarget:self action:@selector(handleToggleNav:) forControlEvents:UIControlEventValueChanged];
[toggleNav setFrame:CGRectMake(52, 8, 211, 25)]; 
[self.view addSubview:toggleNav];
[toggleNav release];

Otherwise, follow the documentation for a UISegmentedControl, and enjoy.

iPhone: Bug in UITextField component - setTextColor not working

2010-05-27T16:41:00.000-06:00

I'm working on a form for an iPhone app that does real-time form validation to let the user know if they're trying to create an account with a username that already exists. To let the user know that a username is already taken, I set the UITextField textColor property to red:

#define kColorRedError [UIColor colorWithRed:1 green:0 blue:0 alpha:1.0]
//... UITextField *username = [[UITextField alloc] initWithFrame:CGRectMake(12, 14, 296, 30)];
[username setTextColor:kColorRedError];

This wouldn't update until I typed another letter into the UITextField, so quite often it would display an error when it shouldn't, and vice versa. I tried using setNeedsDisplay and some other bits of code to try to force a display update after setting the text color. Nothing worked, until I tried this:

[password setTextColor:kColorRedError];
username.text = username.text;

...Quite absurd, but forces a redraw on the component. Gotta love those Apple components ;)

iPhone: Subviews in UIButtons block the touch, unless...

2010-04-21T18:59:00.001-06:00

If you add a UIView or other UIView subclass to a UIButton, the UIView object will block touches/clicks on the UIButton. There's a simple fix to ensure that subviews in your UIButton don't interfere. In the following case, I have a subclass of UIView that loads an image from the web (WebImage), that's created inside a subclass of UIButton:

WebImage *thumb = [[WebImage alloc] initWithFrame:CGRectMake(1, 1, 94, 94) andImageUrl:@"http://mysite.com/thumbnail.png"];
[self addSubview:thumb];
thumb.userInteractionEnabled = NO;
thumb.exclusiveTouch = NO;
[thumb release];

All you need to do is set userInteractionEnabled and exclusiveTouch to NO or FALSE, and the subview will no longer block your button.

iPhone: You can't have a UIView subclass named "WebView"

2010-04-19T16:25:00.000-06:00

Good lord, this wasted half a day. I was creating a UIView subclass to hold a UIWebView, and named it "WebView". Not too abstract, right? I kept getting the following cryptic error:

*** -[WebView _isAncestorOfFirstResponder]: unrecognized selector sent to instance 0x463a7b0
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[WebView _isAncestorOfFirstResponder]: unrecognized selector sent to instance 0x463a7b0'

I renamed my class "WebViewView" and no more errors. Thanks for the shitty error messages Apple!

iPhone/iTouch/iPad: Check for the ability to make a phone call

2010-04-14T19:24:00.000-06:00

I came across a situation where I wanted to lay out different buttons in case the iDevice (iPod Touch or iPad) can run my app, but can't make a phone call. The iPhone will display a "Call Store" button, but other devices won't. For a simple check, look at the following code, which checks for the device name, and looks for "iPhone" at the beginning of the string. It's a very simple implementation, but I didn't need further detection functionality for this project.

// check iDevice model for calling capability and initially assume it's an iPhone
NSString *model= [[UIDevice currentDevice] model];
BOOL canMakeCalls = YES;
//model = @"iTouch"; // manual test for non-iPhones in simulator
if ( ![model hasPrefix:@"iPhone"] ) canMakeCalls = NO;
[model release];

Then you can conditionally display or disable UI elements depending on whether it's for the iPhone only. This can obviously be customized further and more robustly, but for something quick and easy, I hope you find it useful. Check out this blog for a much more detailed detection class.

Actionscript 3: Masking in Native 3D Issue in FP10

2010-03-19T00:09:00.001-06:00

Today I tried to mask a Sprite that was in a container that had native 3d rotation applied - i.e. a parent Sprite had some rotationX and rotationY. The masking wasn't working, but it turns out that it was only not working because another Sprite within the same parent container had a 3D "z" value set. In order to get the masking to behave properly, I had to nest the Sprite and its mask in another Sprite, so that no sibling clips had z-positioning within the same immediate parent clip. Hopefully this little note saves someone the time it took for me to realize what the issue was.

iPhone: Get the class name of an object

2010-03-12T08:53:00.002-07:00

Sometimes you want to know what type of object something is, when pulling it out of an array. In Obj-c there's a simple way to do that:

NSLog(@"object type = %@", [[myObject class] className]);

NSLog(@"object type = %@", [[myObject class] description]);

or!

if( [[myArray objectAtIndex:i] isKindOfClass:NSClassFromString(@"MyCustomClass")] ) { NSLog(@"it's a MyCustomClass"); }

Easy.

ActionScript 3: Papervision3d: html links in a TextField

2009-09-02T13:45:00.000-06:00

Papervision is fun, and the most commonly used 3D library in Flash. The developers have done an amazing job taking care of so many issues that arise when rendering multiple interactive objects to one BitmapData object. For example, if you create a 2D Sprite, put a button inside it somewhere, and then use that Sprite as a MovieMaterial texture for a 3D object, the MouseEvent listeners are automatically handled, and your buttons in the texture work as expected, which is awesome. One major issue along these lines is that if you have an html-enabled TextField with active hyperlinks, this button functionality does not get forwarded through the Papervision core. I saw some code that another developer had posted on a forum, and I rewrote it to work nicely with multiple links. The idea is that you can find the character positions of a hyperlink's text in the TextField, and draw buttons as Sprites in the 2D texture, on top of the TextField, so that your hyperlinks will have an active hit state and work inside a 3D object. I also included a dispose function to clean up, and have rollover listeners to enable the hand cursor in the PV3D viewport, which happens in a different class. This all could've been done a little cleaner with multiple classes and more regular expressions, but I wanted to keep it really simple and easy to implement and garbage collect. Here's the code:


protected var _htmlButtons:Array;
protected var _htmlButtonLinks:Array;

/**
 * Create hit areas for html links - since they aren't handled automatically by PV
 */  
protected function activateHrefs( textField:TextField ):void
{
 var htmlTxtStr:String = textField.htmlText;
 var plainTxtStr:String = textField.text;
 var linkOpens:Array = getIndexesOfArray( htmlTxtStr, "<a " );
 var linkCloses:Array = getIndexesOfArray( htmlTxtStr, "</a>" );
 
 _htmlButtons = new Array();
 _htmlButtonLinks = new Array();
 
 // helps step through and not repeat duplicate links
 var lastPlanTextIndex:int = 0;
 
 // loop through links found
 for( var i:int = 0; i < linkOpens.length; i++ )
 {
  // create button
  var button:Sprite = new Sprite();
  button.x = textField.x;
  button.y = textField.y;
  this.addChild( button );
  
  // get text position in html text
  var firstCharIndex:int = linkOpens[i];
  var linkLength:int = linkCloses[i] - linkOpens[i] + 4;
  
  // pull out string inside open and close tags
  var linkString:String = htmlTxtStr.substr( firstCharIndex, linkLength );
  
  // get href from <a> tag
  var hrefPattern:RegExp = /href=['"]\S+['"]/i;
  var hrefs:Array = linkString.match( hrefPattern );
  var href:String = ( hrefs ) ? hrefs[0].substring(6, hrefs[0].length - 1) : "";
  
  // strip tags
  linkString = linkString.substr( linkString.indexOf( ">" ) + 1 ); // chop open tag
  linkString = linkString.substr( 0, linkString.length - 4 ); // chop end tag
  
  // find link text in non-html text
  var linkStringPlainTextIndex:int = plainTxtStr.indexOf( linkString, lastPlanTextIndex );
  lastPlanTextIndex = linkStringPlainTextIndex;
  
  // draw rects for letters
  button.graphics.beginFill(0xFF0000, 0);
  for( var j:int = linkStringPlainTextIndex; j < linkStringPlainTextIndex + linkString.length; j++ )
  {
   var charRect:Rectangle = textField.getCharBoundaries(j);
   if( charRect ) button.graphics.drawRect(charRect.x, charRect.y, charRect.width, charRect.height);
  }
  button.graphics.endFill();
  
  // add listeners
  button.addEventListener( MouseEvent.CLICK, onHyperlinkClick );
  button.addEventListener( MouseEvent.MOUSE_OVER, onHtmlLinkOver );
  button.addEventListener( MouseEvent.MOUSE_OUT, onHtmlLinkOut );
     
  // store button and link so we can launch on click
  _htmlButtons.push( button );
  _htmlButtonLinks.push( href );
 }
}

/**
 * Returns an array of all the indexes of needle in haystack
 */
protected function getIndexesOfArray( haystack:String, needle:String ) : Array
{
 var indexs:Array = new Array();
 var startIndex:int = 0;
 while( startIndex != -1 )
 {
  startIndex = haystack.indexOf( needle, startIndex );
  if( startIndex != -1 )
  {
   indexs.push( startIndex );
   startIndex += 1;
  }
 }
 return indexs;
}

/**
 * simply opens the link
 */
protected function onHyperlinkClick( e:MouseEvent ) : void
{
 // find button and launch corresponding link
 for( var i:int = 0; i < _htmlButtons.length; i++ )
 {
  if( e.target == _htmlButtons[i] )
  {
   navigateToURL( new URLRequest( _htmlButtonLinks[i] ), '_blank' );
  }
 }
}

protected function onHtmlLinkOver( e:MouseEvent ):void
{
 // dispatch an Event to tell the PV3D viewport to enable the hand cursor:
 // ( _pvView as BasicView).viewport.buttonMode = true;
}

protected function onHtmlLinkOut( e:MouseEvent ):void
{
// dispatch an Event to tell the PV3D viewport to disable the hand cursor:
// ( _pvView as BasicView).viewport.buttonMode = false;
}

/**
 * clean up when if leave the papervision section
 */
public function dispose():void
{
 // kill html hyperlink buttons
 if(_htmlButtons != null) {
  for( var i:int = 0; i < _htmlButtons.length; i++ )
  {
   _htmlButtons[i].removeEventListener( MouseEvent.CLICK, onHyperlinkClick );
   _htmlButtons[i].removeEventListener( MouseEvent.MOUSE_OVER, onHtmlLinkOver );
   _htmlButtons[i].removeEventListener( MouseEvent.MOUSE_OUT, onHtmlLinkOut );
  }
  _htmlButtons.splice( 0 );
  _htmlButtonLinks.splice(0);
  _htmlButtons = null;
  _htmlButtonLinks = null;
 }
}

ActionScript 3: Choose a random item from an Array, with weighting

2009-09-01T14:38:00.003-06:00

It's very common to simply choose a random item from an Array, using a random number. But what if we want change the probabilities that certain items will be chosen? I've written a little function that takes an Array of weights (Numbers), which correspond to the Array of items you'd like to choose from, and returns an index to pull a random, weighted item from the source Array. Check out the example:


// our array of items
var fruits:Array = ['apple','orange','banana','mango'];
// our array of weights
var weights:Array = [20,10,40,30];
// pick a random fruit, based on weights, with bananas most likely to get picked
var myFruit:String = fruits[ randomIndexByWeights( weights ) ];

/**
 * Takes an array of weights, and returns a random index based on the weights
 */
private function randomIndexByWeights( weights:Array ) : int
{
 // add weights
 var weightsTotal:Number = 0;
 for( var i:int = 0; i < weights.length; i++ ) weightsTotal += weights[i];
 // pick a random number in the total range
 var rand:Number = Math.random() * weightsTotal;
 // step through array to find where that would be 
 weightsTotal = 0;
 for( i = 0; i < weights.length; i++ )
 {
  weightsTotal += weights[i];
  if( rand < weightsTotal ) return i;
 }
 // if random num is exactly = weightsTotal
 return weights.length - 1;
}

You can see that the weights array must be the same length as the data array that you're choosing from. Note that in the example, my weights add up to 100, but you can use any scale that you'd like, as the weights are added up, and a random number is chosen in that scale.

ActionScript 3: Shuffle/randomize any Array

2009-09-01T14:32:00.003-06:00

A quick little function for randomizing/shuffling an Array that contains objects or primitive of any data type:


public static function randomizeArray( arr:Array ):void
{
 for( var i:int = 0; i < arr.length; i++ )
 {
  var tmp:* = arr[i];
  var randomIndex:int = Math.round( Math.random() * ( arr.length - 1 ) );
  arr[i] = arr[randomIndex];
  arr[randomIndex] = tmp;
 }
}

You can see that it crawls through an Array, swapping each position with another, random position in the Array.

ActionScript 3: Adding a textual suffix to numbers

2009-09-01T09:35:00.005-06:00

If you need to write out a number with a textual suffix, like "25th" or "173rd", there's a little logic that will make this really easy. Check it out:


// suffixes corresponding to the last digit of a number: 0-9
private static const NUMBER_SUFFIXES:Array = [ 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th' ];

private function getNumberSuffix( value : int ) : String
{
 // handle most cases by modding by ten
 var suffix:String = NUMBER_SUFFIXES[ value % 10 ];
 if( value % 100 >= 11 && value % 100 <= 13 ) suffix = 'th';  // handle 11-13
 if( value == 0 ) suffix = '';         // handle zero
 return suffix;
}

ActionScript 3: Get the percentage of a value within a number range

2009-08-31T16:15:00.004-06:00

Sometimes, when creating UI elements or performing geometric calculations based on the sizes or positions of objects (or lots of other tasks), it's useful to find the percentage of a number within a range of 2 other numbers. Use this function to easily relate these values:


/**
 * Returns a percentage of a value in between 2 other numbers.
 * @param bottomRange  low end of the range.
 * @param  topRange  top end of the range.
 * @param  valueInRange value to find a range percentage of.
 * @return The percentage of valueInRange in the range.
 *  @use getPercentWithinRange( 50, 150, 100 );  // displays 50
 */
public static function getPercentWithinRange( bottomRange:Number, topRange:Number, valueInRange:Number ):Number
{
 // normalize values to work off zero
 if( bottomRange < 0 )
 {
  var addToAll:Number = Math.abs( bottomRange );
  bottomRange += addToAll;
  topRange += addToAll;
  valueInRange += addToAll;
 }
 else if( bottomRange > 0 )
 {
  var subFromAll:Number = Math.abs( bottomRange );
  bottomRange -= subFromAll;
  topRange -= subFromAll;
  valueInRange -= subFromAll;
 }
 // simple calc to get percentage 
 return 100 * ( valueInRange / ( topRange - bottomRange ) );
}

ActionScript 3: Constant easing function

2009-08-31T09:12:00.004-06:00

Sometimes you want to ease a numeric variable or object property to a new value. Typically, you would do this with a tween, via the built-in Tween object, or a 3rd party tween library like Tweener or TweenLite/TweenMax. Sometimes, for a fluid interface, you might want different properties constantly easing (floating) towards their current target destination. In this situation, you would want to interpolate the values incrementally towards the target using the Event.ENTER_FRAME listener. I wrote a nice little function that will take the current value, the target value, and an optional easing value (where higher numbers increase the time to reach the target value), and ease the property towards the target. Check it out:


private function easeTo( current:Number, target:Number, easeFactor:Number = 10 ):Number
{  
 return current -= ( ( current - target ) / easeFactor );
}

// usage:
this.addEventListener( Event.ENTER_FRAME, onEnterFrameLoop );

private function onEnterFrameLoop( e:Event ):void {
 mySprite.x = easeTo( mySprite.x, 200, 5 );
}

Now, wherever mySprite is, it will smoothly tween towards the x destination of 200. This can be applied to any numeric property.

Actionscript: Crossdomain issue when loading Twitter user icons

2009-06-18T14:49:00.003-06:00

When building a new Flash piece, I ran into a crossdomain issue when trying to load the user icon images that come back from the Twitter API. After some searching, I found that by replacing the root of the url, the crossdomain issues are easily solved. Check it out:


var thumbnail:String = "http://s3.amazonaws.com/twitter_production/profile_images/252274568/profile_image_normal.jpg";
thumbnail = thumbnail.replace(/http:\/\/s3.amazonaws.com\/twitter_production\//g, 'http://twitter_production.s3.amazonaws.com/');

I was surprised it was this easy, but by moving the "twitter_production" portion of the path to the front of the subdomain, you now get a good crossdomain.xml here: http://twitter_production.s3.amazonaws.com/crossdomain.xml

Processing: Spiral growth generative art

2009-05-13T15:50:00.003-06:00

A coworker got me excited to play around with Processing again, and I wrote a couple new generative art scripts. Here's a fun one:


float x;
float y;
float curRotation;
float rotationVelocity;
float curRadius;
float radiusVelocity;
float radiusThreshold;
float curSize;
float sizeVelocity;
float curRed;
float redVelocity;
float curGreen;
float greenVelocity;
float curBlue;
float blueVelocity;

void setup(){
size(1000,1000);
smooth();
background(45,0,0);
frameRate(100);
reset();
}

void draw(){

x = (width / 2) + sin(curRotation) * curRadius;
y = (height / 2) + cos(curRotation) * curRadius;

noStroke();
//stroke(100,100,100,150);
fill(curRed,curGreen,curBlue);
ellipse(x,y,curSize,curSize);

curRadius += radiusVelocity;
curRotation += rotationVelocity;
curSize -= sizeVelocity;
if( curRed > 45 ) curRed -= redVelocity;
curGreen -= greenVelocity;
curBlue -= blueVelocity;

if( curSize <= 0 ) //curRadius > radiusThreshold ||
{
 reset();
}

}

void reset(){
 curRadius = 0;
 curRotation = random(0,3.14*2);
 curSize = 20;
 sizeVelocity = random(.05, .2);
 rotationVelocity = random(.001, .009);
 radiusVelocity = random( .1, 2 );
 radiusThreshold = random( width / 3, width / 4 );
 // make a shade of red
 curRed = random(100, 255);
 redVelocity = random( .1, 1 );
 curGreen = random(0, 50);
 greenVelocity = .5 * redVelocity;
 curBlue = curGreen;
 blueVelocity = greenVelocity;
}

It ends up looking something like this:

ActionScript 3: 502 error on crossdomain.xml request in IE

2009-04-22T16:17:00.006-06:00

My team and I ran into a very strange security error today while testing our new Flash projects that load assets from external URLs. It only showed up in IE, which was quite mystifying. We had taken care of all of our crossdomain issues by updating our crossdomain.xml files, adding proper security code to all of our media loads as such:


new LoaderContext( true, ApplicationDomain.currentDomain, SecurityDomain.currentDomain );

But something wasn't right. I installed Fiddler, which is a super handy tool for debugging in IE, since FireBug is only available for FireFox. We found that IE was making the request for crossdomain.xml, but the server it was requesting from was the name of the media file, and not the actual server. After a bit of poking around we found that the CMS we were using was automatically formatting the Flash embed code, and was adding this:


<param value="" name="base">

This simple embed param caused the super weird behavior, only in IE. Hopefully this may be helpful to someone who runs into the same issue. Yay IE!

Javascript: scroll / animate a background image

2009-04-21T17:17:00.010-06:00

I got the urge to add a little flavor to a repeating background image on one of my personal sites. When you roll over the div with your mouse, the image starts scrolling by incrementing the background-position css. First you need a div with a background-image, a background-position, and an id of "header":


#header {
background-image:url(../images/site-header-single.gif);
background-position:-73px 0;
background-repeat:repeat-x;
width:752px;
height:242px;
}

Then you need to attach the mouse rollover functionality to the header - I did this dynamically with protoculous, as seen below in the final Event.observe method. The rest is simple: start a timer, grab the background position offset from the css, increment, and apply the reassembled css. Easy:


// setTimeout variable for clearing on rollout
var headerTimeout;

function addHeaderBehavior() {
 Event.observe( $('header'), 'mouseover', startHeaderAnim, false);
 Event.observe( $('header'), 'mouseout', stopHeaderAnim, false);
}

function startHeaderAnim() {
 headerTimeout = setTimeout( "incrementHeader()", 50 );
}

function incrementHeader()
{
 // get x variable of background-position
 var bgOffsets = $('header').getStyle('background-position').split(' ');
 var offsetX = bgOffsets[0];
 var offsetY = bgOffsets[1];
 // strip px and increment
 offsetX = offsetX.replace( /px/, '' );
 offsetX = parseInt( offsetX ) + 1;
 // update style
 $('header').setStyle( { backgroundPosition:offsetX + 'px  ' + offsetY } );
 
 startHeaderAnim();
}

function stopHeaderAnim(event) {
 clearTimeout( headerTimeout );
}


Event.observe(window, 'load', addHeaderBehavior, false);

ActionScript 3: Easily generate code to draw a complex image

2009-04-02T14:55:00.005-06:00

In Flash, I always do everything in a programmatic way if possible. This includes drawing shapes with code instead of having library items. This is especially true, now that the preferred method of compiling is using the Flex mxmlc compiler. Sometimes, though, certain things are too much of a pain to draw pixel by pixel. No longer though, as there's a REALLY simple way to generate the code to draw complex shapes for you.

Step 1: save a .png of the image you want drawn.
Step 2: open Flash, and drop your image into the library, giving it a linkage ID of "MyGraphic".
Step 3: drop the following code into the actions panel and publish.
Step 4: copy the output code and apply it to a BitmapData object in your project.


var mc : MyGraphic = new MyGraphic( null, null ); 
for( var i:int = 0; i < mc.width; i ++)
{
    for( var j:int = 0; j < mc.height; j ++)
    {
        if( mc.getPixel32( i, j ) != 0 ) trace( "bmp.setPixel32( "+i+", "+j+", "+mc.getPixel32( i, j )+" );" );
    }
}

the resulting code in my case looked like this:


public static function drawVideoPlayhead():Bitmap
{
 var bitmap:Bitmap = new Bitmap();
 var bmp:BitmapData = new BitmapData( 7, 8, true, 0x00000000 );

 // begin generated code
 bmp.setPixel32( 0, 3, 4289309097 );
 bmp.setPixel32( 0, 4, 4288322202 );
 bmp.setPixel32( 0, 5, 4287664272 );
 bmp.setPixel32( 0, 6, 4286874756 );
 bmp.setPixel32( 1, 2, 4290888129 );
 bmp.setPixel32( 1, 3, 4291085508 );
 bmp.setPixel32( 1, 4, 4290822336 );
 bmp.setPixel32( 1, 5, 4290032820 );
 bmp.setPixel32( 1, 6, 4288256409 );
 bmp.setPixel32( 1, 7, 4286874756 );
 bmp.setPixel32( 2, 1, 4291677645 );
 bmp.setPixel32( 2, 2, 4291875024 );
 bmp.setPixel32( 2, 3, 4291677645 );
 bmp.setPixel32( 2, 4, 4290822336 );
 bmp.setPixel32( 2, 5, 4290032820 );
 bmp.setPixel32( 2, 6, 4289374890 );
 bmp.setPixel32( 2, 7, 4287598479 );
 bmp.setPixel32( 3, 0, 4293322470 );
 bmp.setPixel32( 3, 1, 4293388263 );
 bmp.setPixel32( 3, 2, 4292335575 );
 bmp.setPixel32( 3, 3, 4291677645 );
 bmp.setPixel32( 3, 4, 4290822336 );
 bmp.setPixel32( 3, 5, 4290032820 );
 bmp.setPixel32( 3, 6, 4289374890 );
 bmp.setPixel32( 3, 7, 4287598479 );
 bmp.setPixel32( 4, 1, 4294046193 );
 bmp.setPixel32( 4, 2, 4293256677 );
 bmp.setPixel32( 4, 3, 4291677645 );
 bmp.setPixel32( 4, 4, 4290822336 );
 bmp.setPixel32( 4, 5, 4290032820 );
 bmp.setPixel32( 4, 6, 4289374890 );
 bmp.setPixel32( 4, 7, 4287598479 );
 bmp.setPixel32( 5, 2, 4293717228 );
 bmp.setPixel32( 5, 3, 4292861919 );
 bmp.setPixel32( 5, 4, 4290822336 );
 bmp.setPixel32( 5, 5, 4290032820 );
 bmp.setPixel32( 5, 6, 4289703855 );
 bmp.setPixel32( 5, 7, 4288059030 );
 bmp.setPixel32( 6, 3, 4293914607 );
 bmp.setPixel32( 6, 4, 4293190884 );
 bmp.setPixel32( 6, 5, 4292730333 );
 bmp.setPixel32( 6, 6, 4291677645 );
 // end generated code
 
 bitmap.bitmapData = bmp;
 return bitmap;
}

Notes: using the setPixel32() function, and defaulting the BitmapData to a background color of 0x00000000 ensures that your Bitmap will have a transparent background. Note that the code here ignores empty pixels for efficiency. Finally, this code could easily be converted to draw into a Shape or Sprite, but for my purposes, bitmaps are usually what I want. Hope you find this useful!

ActionScript 3: Toggling a Boolean the easy way

2009-03-16T18:00:00.004-06:00

This may be common knowledge to some, but I was pretty excited when I realized I didn't need an conditional statement to figure out which direction to toggle a Boolean value. Check it out:


var isTrue:Boolean = true;
isTrue = !isTrue;
trace(isTrue);      // prints "false"
isTrue = !isTrue;
trace(isTrue);      // prints "true"

Simplicity is your friend.

ActionScript 3: Checking for empty xml nodes

2009-03-09T13:50:00.002-06:00

When parsing xml in AS3, you grab a leaf node's inner content by using the XML( node ).text() function. You can compare the result with a String, but if you're checking for an empty string, the .text() function doesn't compute, because it returns an XMLList, instead of a String. While a non-empty string comparison works fine between an XMLList and a String, an empty String ( i.e. var mystring:String = ""; ) is not the same as an empty XMLList. To ensure that your comparison works, it's always a good policy to cast your text node to a String. See the example below:


var isEmptyNode:Boolean = false;
if( String( node["myNodeName"].text() ) == "" )
{
    isEmptyNode = true;
}

iPhone: MPMoviePlayerController preload issues

2009-02-04T15:06:00.000-07:00

As of this writing, the MPMoviePlayerController object doesn't seem to send the MPMoviePlayerContentPreloadDidFinishNotification notification on the iPhone Simulator. This is happening when I'm loading an .m4v over the net. This issue makes my app appear broken on the simulator, because I'm waiting for the preload to finish before calling the "play" function on the MPMoviePlayerController object. When I test on the iPhone itself, there's no problem. Just an FYI.

iPhone: Rotate a UIImageView

2009-01-30T15:24:00.000-07:00

Here's a simple little snippet that's useful if you want to rotate a UIImageView continuously for something like a clock hand graphic:


#define DEGREES_TO_RADIANS(__ANGLE__) ((__ANGLE__) / 180.0 * M_PI)

CGAffineTransform cgCTM = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(45));
myImage.transform = cgCTM;

iPhone: Custom font loading : complete example

2009-01-30T11:29:00.003-07:00

UPDATE: It looks like someone has built a far more robust custom font engine than my example here. I haven't tried it yet, but the example project looks great: http://github.com/zynga/FontLabel

This code was cobbled together from a couple different posts I found on blogs and iphone forums, here and here. This is a complete example, which nobody wanted to supply - I hope this is useful to someone. The one major hole is that is does not support multi-line text. Let me know if you figure out a good way to handle it :)

I'm just going to post my 2 classes here. I've set up a base class that does the drawing, and a subclass that defines font-specific configuration. You'll have to put your .ttf (TrueType) font in the bundle, and use it's name there to customize your own font subclass. You'll also have to set the glyph offset in the subclass - a font-editing tool can help with this.

Here we go:

CustomFontBase.h

@interface CustomFontBase : UIView {
NSMutableString *curText;
UIColor *fontColor;
UIColor *bgColor;
int fontSize;
NSString *fontName;
NSString *fontExtension;
float autoSizeWidth;
int glyphOffset;
BOOL isGlowing;
UIColor *glowColor;
}

- (void)updateText:(NSString*)newText;
- (void)initTextWithSize:(float)size color:(UIColor*)color bgColor:(UIColor*)bgColor;
- (void)setGlow:(BOOL)glowing withColor:(UIColor*)color;
- (void)autoSizeWidthNow;

@property (nonatomic, retain) NSMutableString *curText;

@end

CustomFontBase.m

#import "CustomFontBase.h"


@implementation CustomFontBase

@synthesize curText;


- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// set defaults
[self setBackgroundColor:[UIColor clearColor]];
bgColor = [UIColor clearColor];
[self setCurText: [[NSMutableString alloc] initWithString:@""] ];
fontColor = [UIColor whiteColor];
fontSize = 15;
isGlowing = FALSE;
[self setContentMode:UIViewContentModeTopLeft];  // make sure it doesn't scale/deform when setFrame is called 
}
return self;
}


- (void)drawRect:(CGRect)rect {
// get context and flip for normal coordinates
CGContextRef context =  UIGraphicsGetCurrentContext();
CGContextTranslateCTM ( context, 0, self.bounds.size.height );
CGContextScaleCTM ( context, 1.0, -1.0 );

// Get the path to our custom font and create a data provider.
NSString *fontPath = [[NSBundle mainBundle] pathForResource:fontName ofType:fontExtension];
CGDataProviderRef fontDataProvider = CGDataProviderCreateWithFilename([fontPath UTF8String]);
// Create the font with the data provider, then release the data provider.
CGFontRef customFont = CGFontCreateWithDataProvider(fontDataProvider);
CGDataProviderRelease(fontDataProvider); 
// Set the customFont to be the font used to draw.
CGContextSetFont(context, customFont);

// prepare characters for printing
NSString *theText = [NSString stringWithString: curText];
int length = [theText length];
unichar chars[length];
CGGlyph glyphs[length];
[theText getCharacters:chars range:NSMakeRange(0, length)];

// draw bg
if( bgColor != [UIColor clearColor] )
{
CGRect bgRect = CGRectMake (0, 0, self.bounds.size.width, self.bounds.size.height);
CGContextSetFillColorWithColor( context, bgColor.CGColor );
CGContextFillRect( context, bgRect );
}

// Set how the context draws the font, what color, how big.
CGContextSetTextDrawingMode(context, kCGTextFill);
CGContextSetFillColorWithColor(context, fontColor.CGColor );
CGContextSetFontSize(context, fontSize);

// set a glow?
if( isGlowing ) {
//CGContextSetShadow(context, CGSizeMake(0,0), 3 );
CGContextSetShadowWithColor( context, CGSizeMake(0,0), 3, glowColor.CGColor );
}

// Loop through the entire length of the text.
for (int i = 0; i < length; ++i) {
// Store each letter in a Glyph and subtract the MagicNumber to get appropriate value.
glyphs[i] = [theText characterAtIndex:i] + glyphOffset;
}

// draw the glyphs
CGContextShowGlyphsAtPoint( context, 0, 0 + fontSize * .25, glyphs, length ); // hack the y-point to make sure it's not cut off below font baseline - this creates a perfect vertical fit

// get width of text for autosizing the frame later (perhaps)
CGPoint textEnd = CGContextGetTextPosition( context ); 
autoSizeWidth = textEnd.x;

// clean up the font
CGFontRelease( customFont );
}


// call this after creating the LandscapeText object to set the styling
- (void)initTextWithSize:(float)size color:(UIColor*)color bgColor:(UIColor*)txtBgColor {
// store font properties
fontColor = color;
fontSize = size;
bgColor = txtBgColor;

// autoscale height to font size
[self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, fontSize)];
}

// set new text to display
- (void)updateText:(NSString*)newText {
[self setCurText: [NSString stringWithString:newText] ];
[self setNeedsDisplay];
}

- (void)setGlow:(BOOL)glowing withColor:(UIColor*)color {
glowColor = color;
isGlowing = glowing;
}

- (void)autoSizeWidthNow {
//printf( "autoSizeWidth = %f \n", autoSizeWidth );
[self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, autoSizeWidth, fontSize)];
}


- (void)dealloc {
[curText release];
[super dealloc];
}


@end

CustomFontMyFont.h

#import 
#import "CustomFontBase.h"

@interface CustomFontMyFont : CustomFontBase {

}

@end

CustomFontMyFont.m

#import "CustomFontMyFont.h"


@implementation CustomFontMyFont


- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// Initialization code
fontName = @"MyFont";
fontExtension = @"ttf";
glyphOffset = -29;        // adjust this offset per font until it prints the proper characters
}
return self;
}


- (void)dealloc {
[super dealloc];
}


@end

Usage:

CustomFontMyFont *myLabel = [[[CustomFontMyFont alloc] initWithFrame:CGRectMake(100, 100, 55, 20)] autorelease];
[myLabel initTextWithSize:11 color:[UIColor whiteColor] bgColor:[UIColor clearColor]];
[myLabel updateText:@"Custom Font"];
[self addSubview:myLabel];

iPhone: Attach an image with one line of code

2009-01-29T18:16:00.000-07:00

I got sick of the 4 lines of code it takes to attach and garbage collect a UIImageView to your UIView, so I wrote a static function for our DisplayUtil class to clean up this process. Check it out below and feel free to use:


+ (UIImageView*)attachImageToView:(UIView*)viewObject withId:(NSString*)imgId andRect:(CGRect)rect {
 UIImageView *img = [[UIImageView alloc] initWithFrame:rect];
 img.image = [UIImage imageNamed:imgId];
 [viewObject addSubview:img];
 [img release];
 return img;
}

ActionScript 3: Prevent graphics from blocking your button

2009-01-27T13:21:00.000-07:00

In Flash 9, a non-button graphic that lays over a real button wil prevent the user from clicking the button underneath. This was never a problem in Flash before AS3 / Flash 9, but is quite a common problem to deal with. It's quite easy to get around the issue. You simply need to disable any mouse interaction with the inactive graphic. Even though you haven't told it to act as a button, the default is to capture mouse actions as a DisplayObject. Just add this code to the non-button graphic:


graphic.mouseChildren = false;
graphic.mouseEnabled = false;

Fixed!

iPhone: Disable screen dimming

2009-01-21T14:50:00.000-07:00

This can be very handy if you're developing an iPhone game, where the screen shouldn't automatically dim to save battery life. Use this code when you launch your gameplay view, and set it back when you leave gameplay:


[[UIApplication sharedApplication] setIdleTimerDisabled:YES];

iPhone: send and receive events/notifications

2009-01-19T15:32:00.000-07:00

Objective-C has a really friendly and useful event system that allows your objects to talk to each other without any knowledge of the other objects. Events are called Notifications in Objective-C, and are routed through a system-wide object called NSNotificationCenter. You don't need to import this object - it's always available to every class.

Here's the syntax for dispatching an event/notification with an ID of "EventName":


[[NSNotificationCenter defaultCenter] postNotificationName:"EventName" object:self];

It also sends along "self", which is a reference to the dispatching object. You could replace "self" with a reference to another object that may contain more relevant data to the event being dispatched.

To respond to this event, you need to set up a listener:


[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(listenerFunction:) name:@"EventName" object:nil];

Our object, "self" is now ready to receive this event. It must have a function called "listenerFunction", but this name is up to you. Note that setting "nil" as the object lets us respond to any object in the application that sends out a notification called "EventName". Alternatively, we can listen to only one object that will send this event, by replacing "nil" with a reference to the object.

Finally, you need a function that actually does something when the event/notification is received. See below:


- (void)listenerFunction:(NSNotification *)notification
{
 MyDispactherObject *incomingObject = [notification object];
 NSLog(@"EVENT RECEIVED");
}

If we don't need to do anything with the object that was sent with the event, we can ignore the first line in the function.

[UPDATE]: Thanks to CC in the comment section for correcting my example and reminding us that we want to clean up after ourselves and remove event listeners before things are properly garbage collected. Here's the syntax for removing the listener we added above (replace "nil" with the object reference if you were listening to a specific object):


[[NSNotificationCenter defaultCenter] removeObserver:self name:@"EventName" object:nil];

Finally, here's Apple's official Notification documentation for further reading:
http://developer.apple.com/documentation/Cocoa/Conceptual/Notifications/Introduction/introNotifications.html

ActionScript: Random number function

2009-01-16T09:16:00.000-07:00

I saw that one of the top results for "actionscript random number" in a Google search is incorrect, so I figured it would be a good idea to post another proper one.

Here's the ActionScript 3 version:

function randNum( low:int, high:int ):int
{
 return Math.round( Math.random() * (high - low) ) + low;
}

And here's the ActionScript 2 version:

function randNum( low:Number, high:Number ):Number
{
 return Math.round( Math.random() * (high - low) ) + low;
}

Javascript: setInterval() - call a function every X seconds

2009-01-15T09:25:00.000-07:00

setInterval() is used when you want a function to run repeatedly on a timer. I wrote this little html page to remind me to get up and stretch every half-hour. I keep it open in my browser during the day to keep me from slouching for too long. Programming for hours on end can lead to Repetitive Strain Injuries in the hands and arms (amongst other problems), so this could help you too :)


<html>
<head>
<script>
setInterval ( "tellMeToGetUp()", 1000 * 60 * 30 );
function tellMeToGetUp()
{
 alert('GET UP DUDE!');
}
</script>
</head>
<body>
</body>
</html>

Note the time passed into the setInterval function. It means: 1000 milliseconds x 60 seconds x 30 minutes. setInterval uses milliseconds, so this is a clear way to describe how long you want the interval to be.

iPhone: Rotate a sub view to landscape layout

2009-01-14T16:51:00.000-07:00

After trying some other hacks, I came up with this little bit of code to rotate my full-screen UIView to landscape mode, which let me lay out all the sub views in a standard coordinate system.


#define DEGREES_TO_RADIANS(__ANGLE__) ((__ANGLE__) / 180.0 * M_PI)

- (id)initWithFrame:(CGRect)frame {
 if (self = [super initWithFrame:frame]) {
  // Initialization code
  self.backgroundColor = [UIColor clearColor];
  [self setViewToLandscape:self];
 }
 return self;
}

-(void)setViewToLandscape:(UIView*)viewObject {
 [viewObject setCenter:CGPointMake(160, 240)];
 CGAffineTransform cgCTM = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(-90));
 viewObject.transform = cgCTM;
 viewObject.bounds = CGRectMake(0, 0, 480, 320);
}

iPhone: Create a UIButton with a custom graphic

2009-01-13T09:47:00.000-07:00

Here's a little code snippet if you don't want to use the standard UIButton styles. You can attach an image instead:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom] initWithFrame:CGRectMake(0, 0, 24, 24)];
[button addTarget:self action:@selector(prevButtonClick:) forControlEvents:UIControlEventTouchUpInside];
[button setBackgroundImage:[UIImage imageNamed:@"IntroArrowLeft.png"] forState:UIControlStateNormal];
[self addSubview:button];

iPhone: Create a UIButton and respond to the touch

2009-01-12T14:34:00.001-07:00

Here's the basic code to create a text button and do something when it's touched:

// add the button to the view
-(void)buildButton {
 UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] initWithFrame:CGRectMake(0, 0, 150, 25)];
 [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
 [button setTitle:@"CLICK IT" forState:UIControlStateNormal];
 [button setCenter:CGPointMake( 320 / 2, 480 - 25 )];
 [self addSubview:button];
}

// respond to the button click
-(void)buttonClick:(UIView*)clickedButton
{
 NSLog(@"CLICK!");
}