if(!Array.indexOf){
	Array.prototype.indexOf = function(obj){
		for(var i=0; i<this.length; i++){
			 if(this[i]==obj){
				 return i;
			}
		}
		return -1;
	}
}

Here’s my approach to working with “asset factories”; let’s start with the code:

package nute.net{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.display.MovieClip;
	import flash.net.URLRequest;

	public class FactoryLoader{

		private var __progress:Number;
		private var __assetFactory:Loader;

		public var dispatcher:MovieClip;

		function FactoryLoader( url:String = null ){
			dispatcher = new MovieClip();

			if(url!=null){
				__load( url )
			}

		}

		public function load( url:String ){
			__load( url );
		}

		function __load( url:String ):void{
			__assetFactory = new Loader();
			__assetFactory.contentLoaderInfo.addEventListener(Event.COMPLETE, __onComplete);
			__assetFactory.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, __onProgress);
			__assetFactory.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, __onComplete);
			__assetFactory.load( new URLRequest( url) );
		}

		function __onProgress(evt:ProgressEvent):void{
			__progress = evt.bytesLoaded/evt.bytesTotal;
			dispatcher.dispatchEvent( new ProgressEvent("progress") );
		}

		public function get progress():Number{
			return __progress;
		}

		function __onComplete(evt:Event):void{
			__assetFactory.contentLoaderInfo.removeEventListener(Event.COMPLETE, __onComplete);
			__assetFactory.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, __onProgress);
			__assetFactory.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, __onComplete);

			if(evt.type == "ioError"){
				trace('cant load media')
			}else{
				__progress = 1;
			}
			dispatcher.dispatchEvent( evt );
		}

		public function getObjectByClass( className:String):*{
			try{
				var ClassObject:Class = __assetFactory.contentLoaderInfo.applicationDomain.getDefinition( className ) as Class;
				return new ClassObject();
			}catch(e){
				return false;
			}
		}
	}
}

This is a way of compiling groups of content in seperate swf’s and loading them as “asset factories”.
What the does this class do then? Well, consider creating a flash file with all the classes you need bundled into it, this FactoryLoader will then load the complete set of classes and make them all available trough the “getObjectByClass” function.

To load assets with a FactoryLoader, you would do something like this:

[...]
var assetLoader:FactoryLoader = new FactoryLoader();
				assetLoader.dispatcher.addEventListener("complete", onAssetsLoaded);
				assetLoader.dispatcher.addEventListener("progress", onProgress);
				assetLoader.load( 'mybakedassets.swf' );
[...]

function onProgress(evt:ProgressEvent):void{
	trace( assetLoader.progress );
}

function onAssetsLoaded(evt:Event){
	var myNewObject:* = assetLoader.getObjectByClass("MyClassObject");
	if(myNewObject){
		addChild(myNewObject) /* or whatever you need to do */
	}
}

A “header” at the top with a top level navigation and a search field to your right.
A submenu residing to your right.
A footer with contact or a sitetree.

Between the header and the footer the content float from top to bottom of the page. Ok so there could be some minor takes on what I just said, but on the whole, that’s how the web looks.

The reasons I think we should re-evaluate that base are a few:
1. A majority of the new computers being produced have a 16:9 or 16:10 screen, leaving a very small top to bottom area when it comes to pixels. All the major browsers keep menues, tabs, locationbar etc at the top or bottom of the screen, leaving you with even less space.

2. We’re starting to navigate our systems differently, let’s face it: clicking links and dragging scrollbars around isn’t as fun as it use to be. Now it’s all about swiping, tapping and other cool new gestures.

3. Speaking of swiping, there’s a lot of handhelds out there. Think of the design I described above, not so cool on a 7×5″ display now is it? Here we are back to web 1.0 when we had to make 2 websites for 2 browsers.

What would be the first step towards a more flexibel web layout?

Gestures
I think we should start to designt the things we don’t need to see:
Swipe to the right or left instead of clicking next/prev in a pagination display.
Dubbletapping to reveal a menu.

Utilizing available space
On most screens there’s more pixels from left to right than from top to bottom, but the designs are still stuck in the 960 grid. Lets make content more liquid and fill up the page from left to right. There’s some nice new features in CSS3 called column-count for instance that will be much usefull for this.

Make a proper structure
A proper structure built upon tags, categories or whatever is your terminology, makes for a superb navigation. Why have both a menu, a site structure a taglist and a search field on every page?
Are your site that hard to navigate? Or maybe your visitors just that stupid? Let’s be honest, quite few users comes to your index page and starts looking for something, they probably got to that specific page on your site because a search engine or a link took them there. For this, a “related” section is much more likely to be useful for your visitor rather that a site tree or a taglist.

So in conclusion, what I am saying is: really think and rethink your design next time you do a layout, don’t just do as we always have done. It’s time for something new.

I’m going to show you how you can put it to use by building an Air app that can controll your spotify app, or any other app really, by waiting for telnet connections and then run applescript calls based on commandos sent by the telnet client. Flexibel approach to controlling a huge set of applications on your mac. This could be achieved on a Windows or nix machine aswell, asumed that you can control whaterver you need to control by commando line.

Lets start with the simple as3 code to create the Socket Server to handle incoming commandos:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.ProgressEvent;
	import flash.events.ServerSocketConnectEvent;
	import flash.net.ServerSocket;
	import flash.net.Socket;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.utils.ByteArray;

	import flash.desktop.NativeProcess;
	import flash.desktop.NativeProcessStartupInfo;
	import flash.filesystem.File;
	import UserIp;
	public class SpotifyRemote extends Sprite
	{
		private var serverSocket:ServerSocket = new ServerSocket();
		private var clientSocket:Socket;
		private var process:NativeProcess;
		private var localIP:TextField;
		private var localPort:TextField;
		private var logField:TextField;
		private var message:TextField;
		private var ipInfo:UserIp;

		public function SpotifyRemote()
		{
			setupUI();
			if( NativeProcess.isSupported ){
				are_we_native.text = "We dare to shell"
			}else{
				are_we_native.text = "no shell =("
			}
		}

		private function onConnect( event:ServerSocketConnectEvent ):void
		{
			clientSocket = event.socket;
			clientSocket.addEventListener( ProgressEvent.SOCKET_DATA, onClientSocketData );
			log( "Connection from " + clientSocket.remoteAddress + ":" + clientSocket.remotePort );

			if (clientSocket != null && clientSocket.connected)
				{
					clientSocket.writeUTFBytes( "+OK hello old friend" );
					clientSocket.flush();

				}
		}

		private function onClientSocketData( event:ProgressEvent ):void
		{
			var buffer:ByteArray = new ByteArray();
			clientSocket.readBytes( buffer, 0, clientSocket.bytesAvailable );
			log( "Received: " + buffer.toString() );

			do_shell( buffer.toString() )
		}

		private function bind( event:Event ):void
		{
			if (serverSocket.bound)
			{
				serverSocket.close();
				serverSocket = new ServerSocket();

			}
			serverSocket.bind( parseInt( localPort.text ), localIP.text );
			serverSocket.addEventListener( ServerSocketConnectEvent.CONNECT, onConnect );
			serverSocket.listen();
			log( "Bound to: " + serverSocket.localAddress + ":" + serverSocket.localPort );
		}

		private function send( event:Event ):void
		{
			try
			{
				if (clientSocket != null && clientSocket.connected)
				{
					clientSocket.writeUTFBytes( message.text );
					clientSocket.flush();
					log( "Sent message to " + clientSocket.remoteAddress + ":" + clientSocket.remotePort );
				}
				else
				{
					log("No socket connection.");
				}
			}
			catch (error:Error)
			{
				log( error.message );
			}
		}

		private function log( text:String ):void
		{
			logField.appendText( text + "\n" );
			logField.scrollV = logField.maxScrollV;
			trace( text );
		}

		private function setupUI():void
		{
			localIP = createTextField(10,10,"Local IP","192.168.0.15");
			localPort = createTextField(10,35,"Local port","8888");
			createTextButton( 170, 60, "Bind", bind );
			message = createTextField(10,85,"Message","Lucy can't drink milk.");
			createTextButton( 170, 110, "Send", send );
			logField = createTextField( 10, 135, "Log", "", false, 200 )
			            ;
			this.stage.nativeWindow.activate();
		}

		private function createTextField( x:int, y:int, label:String, defaultValue:String = '', editable:Boolean = true, height:int = 20 ):TextField
		{
			var labelField:TextField = new TextField();
			labelField.text = label;
			labelField.type = TextFieldType.DYNAMIC;
			labelField.width = 100;
			labelField.x = x;
			labelField.y = y;

			var input:TextField = new TextField();
			input.text = defaultValue;
			input.type = TextFieldType.INPUT;
			input.border = editable;
			input.selectable = editable;
			input.width = 280;
			input.height = height;
			input.x = x + labelField.width;
			input.y = y;

			this.addChild( labelField );
			this.addChild( input );

			return input;
		}

		private function createTextButton( x:int, y:int, label:String, clickHandler:Function ):TextField
		{
			var button:TextField = new TextField();
			button.htmlText = "" + label + "";
			button.type = TextFieldType.DYNAMIC;
			button.selectable = false;
			button.width = 180;
			button.x = x;
			button.y = y;
			button.addEventListener( MouseEvent.CLICK, clickHandler );

			this.addChild( button );
			return button;
		}

		private function trim( s:String ):String{
			return s.replace( /^([\s|\t|\n|\r]+)?(.*)([\s|\t|\n|\r]+)?$/gm, "$2" );
		}

		private function do_shell(args:String){

			args = trim(args);

			args = args.substr(0,4);

			var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
			var file:File = File.applicationDirectory.resolvePath("remote_calls.sh");
			nativeProcessStartupInfo.executable = file;
			var processArgs:Vector. = new Vector.();
			processArgs[0] = args;
			nativeProcessStartupInfo.arguments = processArgs;
			nativeProcessStartupInfo.workingDirectory = File.applicationDirectory;
			process = new NativeProcess();
			process.start(nativeProcessStartupInfo);
			are_we_native.text = '"'+args+'"';
		}
	}
}

You can go ahead and build this as an air app right away, on line 106 you might want to add your ip address, allthough you can change this once the app is running aswell.

The function we want to take a closer look to is the one called

do_shell()

, this is where the actual calling of functions is being handled. You might see that I’m calling on a shell script called

remote_calls.sh

, it’s just a simple shell script that executes some applescript files. Let’s take a look at it:

#!/bin/bash

#
#	Script to logg time spent of files
#	Author: Daniel @ Nute Digital Agency
#

echo $1

if [ $1 = "play" ]
	then
	arch -i386 osascript "play.scpt"
fi

if [ $1 = "stop" ]
	then
	arch -i386 osascript "play.scpt"
fi

if [ $1 = "next" ]
	then
	arch -i386 osascript "next.scpt"
fi

if [ $1 = "back" ]
	then
	arch -i386 osascript "back.scpt"
fi

if [ $1 = "upvo" ]
	then
	arch -i386 osascript "volume_up.scpt"
fi

if [ $1 = "down" ]
	then
	arch -i386 osascript "volume_down.scpt"
fi

And finally, the applescripts:

--play.scpt
tell application "Spotify"
	activate
end tell

tell application "System Events"
	keystroke space
end tell

--next.scpt
tell application "Spotify"
	activate
end tell

tell application "System Events"
	keystroke (ASCII character 29) using {command down} --next
end tell

--back.scpt
tell application "Spotify"
	activate
end tell

tell application "System Events"
	keystroke (ASCII character 28) using {command down}
end tell

--volume_up.scpt
tell application "Spotify"
	activate
end tell

tell application "System Events"
	keystroke (ASCII character 30) using {command down} --volumeup
end tell

--volume_down.scpt
tell application "Spotify"
	activate
end tell

tell application "System Events"
	keystroke (ASCII character 31) using {command down}
end tell

That it folks!

Imagine you have a colleague who’s using our little script to get his path, he now sends it to you so you can open the folder he’s refering to, do the same procedure as last time (create an app of the script below, and drag to your finder toolbar). You press the app, and you are presented with an input, enter the path your mate sent you and presto, you will get a new finder window of that location.

try
	tell application "Finder"
		activate
		set current_path to (the target of the front window) as alias
		set current_path_posix to the POSIX path of current_path as string

		set temp to display dialog "Enter Path" default answer current_path_posix
		set new_location to the text returned of temp

		set macPath to POSIX file new_location as Unicode text

		open macPath

	end tell
end try

This example fills the input dialog with the location of the current folder, this could easily be changed to default contain the content of your clipboard, making the example workflow I mentioned even faster.

Consider this:

try
	tell application "Finder"
		set this_folder to (the target of the front window) as alias
		set this_folder_posix to the POSIX path of this_folder
		set the clipboard to this_folder_posix
	end tell
end try

Open script editor, paste the code above then save it as an app. Drag the app to the toolbar of your finder window and voila, once you click it, the path of the currently open window is in your clipboard.

Stay tunes for part 2, opening a finder window at the location in your pasteboard.

What if you could just track the time you have spent on a file, and then based on location of that file see how much time you have spent on a project? This will not give you the complete time spent, but it would give you a ballpark figure to see the time of _actual_ production time for a project.

I’ve seen some commercial application doing this, so I figured it can’t be impossible. This is my first attempt in AppleScript:

tell application "System Events"
	set frontApp to name of first application process whose frontmost is true
end tell

if frontApp is "Adobe Photoshop CS4" then
	try
		tell application "Adobe Photoshop CS4"
			set document_path to file path of front document as string
		end tell
	end try
else if frontApp is "Adobe Illustrator CS4" then
	tell application "Adobe Illustrator"
		set theOutdatedPathObj to the file path of current document
		set document_path to (POSIX path of theOutdatedPathObj) as string
	end tell

else if frontApp is "Adobe After Effects CS4" then
	tell application "System Events"
		tell process "After Effects"
			set document_path to title of window 2
		end tell
	end tell

else if frontApp is "Coda" then
	try
		tell application "Coda"
			set document_path to file path of current editor of document 1 as string
		end tell
	on error
		--do nothing
	end try
else
	tell application frontApp
		try
			if the (count of windows) is not 0 then
				set window_name to name of front window
				set document_path to window_name
			end if
		on error
			set window_name to "could not tell"
			set document_path to "could not tell"
		end try
	end tell
end if

set currentTime to current date
set myFilePath to (path to desktop as string) & "nutelogger.txt" as string
set myFileRef to open for access file myFilePath with write permission
write frontApp & ";" & document_path & ";" & currentTime & ";
" to myFileRef starting at eof
close access myFileRef

-- Get the "hour"
set timeStr to time string of (current date)
set Pos to offset of ":" in timeStr
set theHour to characters 1 thru (Pos - 1) of timeStr as string
set timeStr to characters (Pos + 1) through end of timeStr as string

-- Get the "minute"
set Pos to offset of ":" in timeStr
set theMin to characters 1 thru (Pos - 1) of timeStr as string
set timeStr to characters (Pos + 1) through end of timeStr as string

-- Get the seconds
set Pos to offset of ":" in timeStr
set theSec to characters 1 thru (Pos - 4) of timeStr as string
set timeStr to characters (Pos + 1) through end of timeStr as string
set theSecInt to theSec as integer

set logged_user to short user name of (system info)
-- we sent to the server four times an hour
if theMin is "15" then
	--since this script is called approx 6 times a min, we only upload if secs is less than 12
	if theSecInt is less than 12 then
		set possix_path to POSIX path of myFilePath
		do shell script "curl -T " & possix_path & " ftp://user:password@example.com/private_html/" & logged_user & "-nutelogger.txt"
		--here we should also flush the current logfile
		tell application "GrowlHelperApp"
			set the allNotificationsList to {"Nute Logger", "Nute Logger Updated Server"}

			set the enabledNotificationsList to {"Nute Logger"}
			register as application "Nute Logger" all notifications allNotificationsList default notifications enabledNotificationsList icon of application "AppleScript Editor"

			notify with name "Nute Logger" title "Nute Logger" description "Nute Logger Update Done" application name "Nute Logger"

		end tell
	end if
end if

The script gets executed every couple of seconds with launchd and isn’t slowing my machine down the least. The writing to a plain text file could be replaced with a sqlite injection and the push to a server could be limited even more.

As one could see, the drawback of this approach would be that you have to customize it for every application, and if the application doesn’t support AppleScript, well, then you are out of luck. I was thinking of using lsof to get files of the frontmost app, but this won’t show you which window that is active, so if you have more than one file open, the time will be wrong since it would count the time you spend in one window on several documents. Another downside would be that you actually have to do a lot of customization here as well since you would like to sort of all the “dirt” files and focus on the filetypes you would be working on in each application.

So in the end, maybe some sort of combination of the two, which would anyhow lead you to a world of pain making rules for all applications.

Why isn’t “Time Spent” something that the filesystem would keep track of from the beginning? I could imagine hundreds of situations where this would be most usefull.

Here’s a snipped for all you unlucky people who’s server provider is not enabling json support in the php build. I have a habit of always adding “meta” fields to my tables when I work on large projects in php to enable simple extension without modifying the mysql table, storing data in json format is super for these type of meta fields where you don’t really now what data is going to be in there tomorrow.

It’s originally for “the internet” but slightly modified by yours truly.

function array_to_json( $array ){

    if( !is_array( $array ) ){
        return false;
    }

    $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) ));
    if( $associative ){

        $construct = array();
        foreach( $array as $key => $value ){

            // We first copy each key/value pair into a staging array,
            // formatting each key and value properly as we go.

            // Format the key:
            if( is_numeric($key) ){
                $key = "key_$key";
            }
            $key = "'".addslashes($key)."'";

            // Format the value:
            if( is_array( $value )){
                $value = array_to_json( $value );
            } else if( !is_numeric( $value ) || is_string( $value ) ){
                $value = "'".addslashes($value)."'";
            }

            // Add to staging array:
            $construct[] = "$key: $value";
        }

        // Then we collapse the staging array into the JSON form:
        $result = "{ " . implode( ", ", $construct ) . " }";

    } else { // If the array is a vector (not associative):

        $construct = array();
        foreach( $array as $value ){

            // Format the value:
            if( is_array( $value )){
                $value = array_to_json( $value );
            } else if( !is_numeric( $value ) || is_string( $value ) ){
                $value = "'".addslashes($value)."'";
            }

            // Add to staging array:
            $construct[] = $value;
        }

        // Then we collapse the staging array into the JSON form:
        $result = "[ " . implode( ", ", $construct ) . " ]";
    }

    return $result;
}

Turns out, you can get pretty cool stuff working with some creative coding.

Allthoug Peddlr isn’t using that many advanced features, it’s getting there slowely.

So what is Peddlr?
Peddlr is a cycle app to monitor your workouts, save statistics and tracks and will work as a motivational coach aswell. With a community edition running in your browser it’s going to be like a nike+ for peddlers.

The main features for Peddlr will be:

• Monitor your races with gps data
• Ghostrunner for competition mode
• Save and share your favorite tracks
• Live race mode
• Motivational audio feedback

The idea is to try getting all of this working true pure html and js goodness, at the moment I’m using raphaeljs to plot out track and I’m currently working on how to autoplay audio for the audio feedback.

And here’s some pics

First screen to select workout mode, possible mode will be “Track”,”Freeform” or “Challenge” where “Challenge” is a community driven challenge system.

Seconds screen is a example of the “Track” mode, here you see your position on the track, and some in race data

Third screen is runningmode where the visual section (right hand side) has been toggled to “Pace & Elevation”. This graph is drawn with raphaeljs.

Fourth screen is an example of the ghost runner, I’m not a 100% about this view, since ghost only can be available when you are on a known track, you might just want to add the ghost to the track preview instead (screen 2)

Although the only thing precent at this time is the actual in race view, and the track preview, you can actually try it out by pointing your iphone to http://www.mondayhero.com/iphone/peddlr/, save it as a webapp to store data locally.

The app calls my server when you stop the race to store race data, but all together it’s a fairly small load.