Development with Mobile devices/VMs and local hosting


I’ve longed for a way to avoid having duplicate host files on all my virtual machines for a while now. And when I relalised there was is no way on iPad to modify hosts, I had to find a way. Here’s my solution, using a proxy on my host machine, and pointing iPad, mobile, and Virtual Box guest OSes to the proxy.
Read more…

jQuery Takeover Loader


A really simple jQuery plugin I’ve just written for my portfolio part of this site.

When the document is ‘ready’ call takeoverloader() on jQuery results (desired DOM elements). In my case I used $(document). It will then track all img elements in the children of your chosen element and report progress and completion of the loading process.

It will ignore img tags with an empty src attribute, or a class of .noloader

So you’re initial code would be something along these lines:

$(document).ready( function() 
{
	// hide content div (UI being loaded)
	$('#content').hide();
	// takeover the loading.
	$(document).takeoverloader( {
		progress: function( progressAmount ) // called each time an item is loaded
			{
				// do something with progressAmout (normalised)
				$('.loadprogress').text( Math.round( progressAmount * 100 )+'%' );
			},
		complete: function() // called when loading is finished
			{
				$('.loadprogress').hide();
				$('#content').fadeIn();
				// etc
			}
		}
	);
 
	// To forcibly remove events, call 'destroy'
	$(document).takeoverloader( 'destroy' );
});

It’s up on github, and there’s also a minified (google closure compiled) version in the repo too.

Links:
http://github.com/pixelbreaker/pixelbreaker_jquery/tree/master/takeoverloader

Tiny, fast javascript with Google Closure-Compiler


I’ve just spent a few hours trying to clean up the javascript on a project that’s about to launch, and I’m really impressed with Google’s Closure-compiler, it’s available online, as a Rest API or as a java app. I’ve been running it on my machine, with a shell script to batch the compilation of .js files.

It not a ‘real’ compiler, it doesn’t produce machine code, but it not only shortens your code, such as variable names etc, it also optimises it, to make it more efficient.

1
2
3
4
5
6
//before closure compiler
var settings = { maxZoom: 6, gridSize: 65, styles: clusterStyles };
if( !!markerClusterer ) markerClusterer = null;
markerClusterer = new MarkerClusterer( map, markers, settings );
// after
j&&(j=null);j=new MarkerClusterer(map, markers, { maxZoom: 6, gridSize: 65, styles: clusterStyles } );

Read more…

PolarClock3 for Snow Leopard


I’ve had some time this morning to wrap the screensaver up in something other than screentime, and it all works perfectly for me. My first delve into Cocoa. Thanks Si Heys for the code I needed for this.

Please have a go and let me know if it works ok on Snow Leopard, and also older OSes, if there’s problems, comment here, and I’ll try and rectify any issues.

You can download it here.

jQuery plugins coming soon.


Pretty soon, I’ll be releasing two plugins for jQuery.

They are re-writes of my current javascript extensions to SWFObject. One for full browser flash with a minimum width and height. And an updated version of the MouseWheel enabler for Macs.

I’ve gone for jQuery as I’ve been using it a fair bit recently with jQuery SWFObject, and it’s super easy to work with.

Here’s an example of a full browser flash object, with a minimum width/height. The best thing being that there is no requirement for fiddly CSS to make the full browser view work, the CSS is all implemented by jQuery!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function () 
{
	// add an extra class to the <body> element for JS-only styling
	$("body").addClass("js");
 
	$.flash.expressInstaller = '_includes/expressInstall.swf'; 
 
	if( $.flash.hasVersion(9.1) )
	{
		var mainFlash = $.flash.create(
			{   
				swf: 'FlashApplication.swf',
				width: '100%',
				height: '100%',
				id: 'FlashApplicationSwf',
				name: 'FlashApplicationSwf'
			}
		);
		SWFAddress.setId('FlashApplication');
		$('#flashContent').html( mainFlash );
		$('#flashContent').fullFlashMinSize( 800, 600 );
	}		
});

Wired article


Wired got in touch a while ago asking about the PolarClock, and I’ve finally seen the finished article, it looks great!

pic after the jump…

Read more…

iPhone PolarClock released


Screenshot2

Ed Kauffmann over at RayFlex has been busy developing the iPhone release of the PolarClock. It’s now ready and released at version 1.0. If you buy this application you will get free upgrades to future versions. Money raised from the sales of the iPhone version will go towards further development of both the iPhone and Mac/PC versions of the PolarClock.

It has a few new features, my favourite being the moon phase at the centre of the concentric rings. Good work ed.

You can get a copy here:

AS3.0 MouseWheel on Mac OS X


I’ve finally found the time to port my SWFObject add-on SWFMacMouseWheel (catchy I know) to ActionScript 3.0 and SWFObject 2.0

There’s now two examples in the zip, one for use with SWFObject 1.5, and a totally re-written version for use with SWFObject 2.0 (formerly SWFFix)

All you have to do in your main application class (or document class) is

1
2
3
import com.pixelbreaker.ui.osx.MacMouseWheel;
 
MacMouseWheel.setup( stage );

You can then add listeners to TextFields, Sprites etc etc as you normally would any other MouseEvent.

Example JavaScript to be used with the dynamic embed method

1
2
3
4
5
6
var vars = {};
var params = { scale:'noScale', salign:'lt', menu:'false' };
var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object
 
swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "9.0.0", "js/expressInstall.swf", vars, params, attributes );
swfmacmousewheel.registerObject(attributes.id);

I have updated the SWFObject 2.0 version to be more compact, and it also falls inline with the code style of SWFObject2.0. see swfmacmousewheel_src.js for the uncompressed version, deploy swfmacmousewheel2.js on your site.

Download source and demo here or view the demo online

AS3.0 Memory monitoring


I just came across the property System.totalMemory. It’s very useful, especially for the engine I am currently working on, and dealing with AS3 garbage collection.

It returns the memory currently being used by the Flash Player. It’s in bytes so it pays to clean it up slightly.

[as]
var mem:String = Number( System.totalMemory / 1024 / 1024 ).toFixed( 2 ) + ‘Mb’;
trace( mem ); // eg traces “24.94Mb”
[/as]

It seems this takes account of all instances of the flash player. For example, I have a logger/debug panel running in the sidebar of firefox, built in flex. As soon as I open this and it’s initialised, it uses an extra 5 – 10mb of ram. So be warned, if you see a massive increase in memory usage, check you don’t have loads of sites open with ad banners or other flash based stuff.