Grab the Sencha Touch 2.0 Dev Preview here: http://www.sencha.com/blog/sencha-touch-2-developer-preview/

While I was able to get a basic app up and running quickly, unfortunately I spent a lot of time re-factoring into a proper MVC structure. The documentation on how to do this in Touch 2.0 is not there yet and there are some albeit small but killer differences between Touch1.0 and 2.0. To a novice like me they cost me a few hours.

Everything here was based off the Sencha ExtJS 4.0 walkthrough available here:

• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/
• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/
• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/

The sample code is available on Github and you can go here and download the entire project in a single ZIP/TAR: https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

Or you can fork the repo using git: http://help.github.com/fork-a-repo/

Here are a few key points:

a) Let the app instantiate your controllers and any global stores your app needs. Notice how the initial layout is created using xtypes? These are created as aliases in the views.

b) Let your controllers instantiate your views and stores.

c) Use Component Queries instead of Ext.getCmp(‘id goes here’). This’ll keep your code more manageable as the code base grows. Note, the “ref” name here is important as it’s used to generate getters for the view instances. E.g. a ref of “stationList” will create a getter on the controller of “getStationList”.

I’ve already heard from a few folks so it looks like this project is helpful. It’s also ready for dropping into a Phonegap shell. Fork it and update or let me know if there’s anything you’d like to see added.

Attribution: Today’s photo comes from Anxo Resúa’s stream on Flickr http://www.flickr.com/photos/anxoresua/4652943076/

HTML5 had originally laid out support for a new element (the “device” element) but it appears this element has been scrapped now in favour of the “getUserMedia” API. So far I have only seen the Opera Mobile Experimental build support this but hopefully it’ll get into Dolphin and other mobile browsers soon.

http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

If you just want to cut to the chase here’s a video of the final result:

There are three moving parts here

• a) The client page which captures the video
• b) the server which is a simple Node broadcast server
• c) and the Client which is just a web page that renders the output.

The client is just a copy-paste from Opera’s website. I take the video stream, render it to a canvas, then grab the canvas as a base64 encoded image. One image per frame. I could not find a way to limit the video’s size so the resulting image is fairly large (240×400 on an HTC Incredible). I down-sampled, cutting the image data to reduce the traffic over the wire. Framerates are still pretty poor but this is just an experiment.

The server is a generic websockets server and gets a message which is a raw data/base64 stream. It broadcasts this down the any connected clients.

The client then is the simplest of all, just connects to the socket server and renders whatever it gets to an tag.

It’s all Javascript.

Client (this is a jade view).

h1
    Remote Webcam using NodeJS, Opera, Web Sockets and HTML5/Canvas
video(autoplay=true,id="sourcevid")
canvas(id="output")
div(id="log")
script
    var log = function(msg) {
       document.getElementById('log').innerHTML = document.getElementById('log').innerHTML + msg + "<br/>";
    };
    var video = document.getElementsByTagName('video')[0],
        heading = document.getElementsByTagName('h1')[0];
    if(navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);

        function successCallback( stream ) {
            video.src = stream;
        };

        function errorCallback( error ) {
            heading.textContent = "An error occurred: [CODE " + error.code + "]";
        };
    } else {
        heading.textContent = "Native web camera streaming is not supported in this browser!";
    };

    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');

    var ws;

    if('WebSocket' in window){
        connect('ws://192.168.2.100:8080/');
    } else {
        log ('web sockets not supported');
     }

    function connect(host) {
        ws = new WebSocket(host);
        ws.onopen = function () {
            log('connected');
        };

        ws.onclose = function () {
            log('socket closed');
        };

        ws.onerror = function (evt) {
            log('<span style="color: red;">ERROR:</span> ' + evt.data);
        };
    };

    function send(msg){
        if (ws != null) {
            if(ws.readyState === 1) {
               ws.send(msg);
            }
        } else {
            //log ('not ready yet');
        }
    }    

    cw = 120;//240;//video.clientWidth;
    ch = 200;//400;//video.clientHeight;
    log('width = ' + ch);
    back.width = cw;
    back.height = ch;
    draw(video, backcontext, cw, ch);

    function draw(v, bc, w, h) {

        // First, draw it into the backing canvas
        bc.drawImage(v, 0, 0, w, h);

        // Grab the pixel data from the backing canvas
        var stringData=back.toDataURL();

        // send it on the wire
        send(stringData);

        // Start over! 10 frames a second = 100milliseconds
        setTimeout(function(){ draw(v, bc, w, h); });
    }

The server. Simple Broadcast app.

var sys = require("sys"),
    ws = require("./ws.js");

var clients = [];

ws.createServer(
	function (websocket) {

		clients.push(websocket);

		websocket.addListener("connect", function (resource) {
			// emitted after handshake
			sys.debug("connect: " + resource);
		}).addListener("data", function (data) {

		// handle incoming data
		// send data to ALL clients whenever ANY client send up data
		for (var i = 0 ; i < clients.length ; i ++ ) {
			clients[i].write(data);
		}

    }).addListener("close", function () {

		// emitted when server or client closes connection
		sys.debug("close");
    });
  }).listen(8080);

  sys.debug("Listening on port 8080");

The client.

<img src="" id="frame" style="width:240px;height:400px"/>

<div id="log"></div>

<script type="text/javascript">

	var img; 

	function Init() {

		img = document.getElementById("frame");	

	}

	$(document).ready(function () {

		Init();

	});

// Web socket connection stuff is next...	

	if('WebSocket' in window){

		connect('ws://localhost:8080/');		

	} else {

		log ('web sockets not supported');

	}

	var ws;

	function connect(host) {

		ws = new WebSocket(host);

		ws.onopen = function () {

			log('connected');

		};

		ws.onmessage = function (evt) {  	

            if (evt.data != null) {		

			  if ((evt.data[0]=== "d") &amp;amp;amp;amp;&amp;amp;amp;amp; (evt.data[1]==="a") ) img.src=evt.data;	//log('got' + evt.data);

			}

		};

		ws.onclose = function () {

			log('socket closed');

		};

		ws.onerror = function (evt) { 

			log('<span style="color: red;">ERROR:</span> ' + evt.data); 

		};

	};

	function log(msg){

		document.getElementById('log').innerHTML = msg + "<br/>" + document.getElementById('log').innerHTML ;

	}
</script>

Instead of broadcasting, you could store these frames in a MongoDB for assembly later. This would make the ultimate, storage independent video camera. Never run out of storage again!

I really need to start storing these snippets on github…

P.S. Everyone knows insects are clockwork which is why god made so many of them. Today’s image is from http://www.insectlabstudio.com/

Just enter a URL of an image and click “create drawing” to being. The page will load that image into a hidden canvas and use it as reference to draw the picture. You should use Chrome of course but this should work in all HTML5 compatible browsers.

Room for improvement might be to place the code in an enclosure, cleaning up the global DOM namespace or multi-thread it this using Web Workers although the current speed is acceptable. Web Workers in this instance might be overkill.

Enjoy.

I spent some time last week looking at Web Sockets as a way to push information to the client. Web sockets need a custom server, not an HTTP server, so I used Nugget which is an open source implementation of the web socket protocol on CodePlex (http://nugget.codeplex.com/). Nugget worked great but with all the hype and interest around Node I felt I was missing something so I built the same thing again, this time around using Node.js on the server side.

Before get started you’ll need to build Node. This can be done

“on Linux, Macintosh, and Solaris. It also runs on Windows/Cygwin, FreeBSD, and OpenBSD. The build system requires Python 2.4 or better. V8, on which Node is built, supports only IA-32, x64, and ARM processors. V8 is included in the Node distribution. To use TLS, OpenSSL is required. There are no other dependencies.”

I used Cygwin on Wintel and installed g++, Python 2.7 and GNU Make. You also need OpenSSL if you plan on using Node with Web Sockets.

Here’s a comprehensive walkthrough of installing Cygwin and building Node from scratch: [LINK]

Web Sockets uses a funky little handshake protocol [LINK] to establish the connection which I didn’t feel like implementing so I came across a WS Server implementation using Node.JS up on GitHub [https://github.com/miksago/node-websocket-server/]. This worked well with Node 0.2.5 testing from Chrome 12 which uses v-76 of the Hixie protocol.

Here’s my client which is based off the Dive into HTML5 example:

if(Modernizr.websockets){
	    connect('ws://localhost:3400/service');
	} else {
		log ('web sockets not supported');
	}
	var ws;

	function connect(host) {
		ws = new WebSocket(host);
		ws.onopen = function () {
			log('connected');
		};

		ws.onmessage = function (evt) {
			log('recv :' + evt.data);
			showNotification(evt.data);
		};

		ws.onclose = function () {
			log('socket closed');
		};

		ws.onerror = function (evt) {
			log('<span style="color: red;">ERROR:</span> ' + evt.data);
		};
	};

	function log(msg){
		document.getElementById('log').innerHTML += msg + "<br/>";
	}

	function send(){
		var msg = document.getElementById('status').value;
		ws.send(msg);
	}

	function RequestPermission (callback) {
		window.webkitNotifications.requestPermission(callback);
	}

	function showNotification(msg){
		if (window.webkitNotifications.checkPermission() > 0) {
			RequestPermission(showNotification);
		}
		else {
			window.webkitNotifications.createNotification("alert.jpg", "Test Notification", msg).show();
		}
	}

With this client-side scripe and Node running the ws-socket server I was able to get a simple echo running forth between the web page and the server.

Node has gained some ground since I first looked at it (back when Chrome was on version 8). Even Microsoft has announced plans to port it over to Windows [LINK]. In the coming weeks I plan on looking at some of the templating engines (Like http://jade-lang.com/ and http://mustache.github.com/) and web frameworks (like http://expressjs.com and http://geddyjs.org/ ) which have cropped up around it and will report back on whether it’s ready for prime time or not. Watch this space.

Attribution: Today’s image by Casch52 on Flickr [LINK]

Typically they travel and branch along a source of nutrients, following the source. I came across this awesome work of Ryan Alexander [LINK] whilst messing around with Processing one evening. Ryan used Processing which is similar to Java. Processing is a great sketch-language which makes whipping up graphical wonders a doddle and is a favourite of interactive media artists. It’s really cool and I’ve been messing with it for a few years now. Check out “http://processing.org/” for more.

A few hours later I had the same thing implemented in Javascript and HTML5 using the Canvas element although mine is not as sophisticated as Ryan’s.

Disclaimer: I know nothing of Mycelium or of Hyphae or how they branch and form. I merely tried to emulate how the branching works.

Basically you take an image as input and a number of threads are created, I called them “worms” since “hyphae” seemed a but over the top. The worms have a trajectory and will move along it in search of food. Each iteration the worm decides where to move, favouring the light or dark portions of the image. Just as in Ryan’s Processing application the image acts as a source of food. If the worm ventures into a dark portion of the image, after a while without food, he dies.

I’m sure there’s a lot more to say on how this Mycelium stuff grows than what I’ve modeled here. For example I didn’t consider the amount of food contributing to the speed of the “worm” nor did I attempt to make the worms avoid each other. This was primarily an artistic endeavor and a creative outlet written over a beer one night.

I made a bunch of different images, Martin Luthor King, Bob Dylan, Willie Nelson, Clint Eastwood. For Clint’s I made a slight adjustment where any worm that died I’d re-spawn inside his eyes. Results were pretty nice. Here’s the Flickr Album: http://www.flickr.com/photos/10277648@N03/with/5704290009/

This technique works best on images with high-contrasting areas. Basically wrinkled old men. You’ll notice how the hyphae follow the wrinkles in Clint’s face.

Bob Dylan was surprising as the threads were never able to “break through” into the darker areas around his eyes. He just didn’t have enough wrinkles to feed them.

Willie Nelson, looking down. You can start to see his two braids forming in the weeds.

If you like these click over to the Flickr Album for more: http://www.flickr.com/photos/10277648@N03/with/5704290009/

Interesting factoid: At one point Mycelium was considered the largest living organism in the world! From Wikipedia:

This 2,400-acre (9.7 km2) site in eastern Oregon had a contiguous growth of mycelium before logging roads cut through it. Estimated at 1,665 football fields in size and 2,200 years old, this one fungus has killed the forest above it several times over, and in so doing has built deeper soil layers that allow the growth of ever-larger stands of trees. Mushroom-forming forest fungi are unique in that their mycelial mats can achieve such massive proportions.

In the coming days I’ll clean up the code and try to make it configurable so you can upload your own photos and play along. More to come on this one…

[UPDATE] Source code is now available here: http://francisshanahan.com/index.php/2011/mycellium-source-code-available/

Setup Eclipse, run the Android SDK installer, install the correct USB drivers and finally check your device setup with “adb devices”. Your device should be listed.

If you don’t have an android device, be prepared for the emulator to be extremely slow especially during startup/shutdown. Be sure to mark your emulator as “Snapshot” (accessible from the ADB/AVD SDK Manager-> Start button). Also, don’t connect your device whilst the emulator is running. Adb gets confused.

I had one occurrence where the drawable resources to my project failed to get copied over properly to the device and I spent 20 minutes trying to figure out what I’d changed in my code. Turning out the emulator was running in the background. I did shut the emulator off and did an adb uninstall “myApp” and then redeployed to fix it.

Android works on Intents, Activities and Services. If you want to access the hardware, e.g. the Camera, you’ll need to fire off an Intent. Here’s an example of launching an Intent to get a Bitmap back from the camera:

http://mobile.tutsplus.com/tutorials/android/android-sdk-quick-tip-launching-the-camera/

You’ll also need to mark your application with the right permissions in the AndroidManifest.xml file. Here’s a good reference to all the Available Permissions.

Use Drawables and Styles in your layout from Day 1. Use RelativeLayout from Day 1 also and attributes such as “layout_alignRight”, “layout_alignTop” as necessary to get the achieved UI. Rather than set a bunch of things invisible/visible, use a Viewgroup such as a nested Relative Layout. Yes you can do Forms this way and if you have a lot of labels/fields to hide/show based on other fields this can be really useful.

Don’t forget you can define gradients and shapes in Drawables also. This saved me a bunch of time trying to create graphics.

In general wrap your root Layout in a ScrollView. This will ensure your screen is usable when you rotate the device.

To Launch a new screen that you need to get something back from (like a Modal dialog) use “StartActivityForResult”, otherwise just use “StartActivity”

Sample code to launch an Activity:

Intent i = new Intent(this, MyActivity.class);
startActivityForResult(i, SCREEN_A);

The constant SCREEN_A just helps you identify in the onActivityResult method which one returned.

public void onActivityResult(int requestCode, int resultCode, Intent intent) {
	super.onActivityResult(requestCode, resultCode, intent);
	if (resultCode == RESULT_OK) {
		Bundle extras = intent.getExtras();
		switch (requestCode) {
		case SCREEN_A: // do something with the return values
			break;
		}
	}
}

Remember your screen can be cancelled by the user using the Back button so only check the intent if the resultCode is “RESULT_OK”, otherwise you’ll get an exception.

Inside your child Activity do this to send data back to the parent:

Intent myReturnIntent = new Intent();
Bundle myBundle = new Bundle();
myReturnIntent.putExtras(myBundle);
setResult(RESULT_OK, myReturnIntent);
finish();

Use Log.d(TAG, “Something”) combined with “ADB LOGCAT” to debug. Define a TAG constant in every class, it’ll help you filter the Log by defining an environment variable named “android_log_tags” with the relevant tags included. http://developer.android.com/guide/developing/tools/adb.html

If you need to display a Message box, typically use a “Toast” message, here’s a good reference on Toast: http://developer.android.com/guide/topics/ui/notifiers/toasts.html

If you need a dialog box, try this:

public static void ShowAlert(String text, String title, Context activity) {

	AlertDialog.Builder myBuilder = new AlertDialog.Builder(activity);
	myBuilder.setMessage(text).setCancelable(false)
		.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
			public void onClick(DialogInterface dialog, int id) {
                                // just close
				dialog.cancel();
		        }
		});

	AlertDialog alert = myBuilder.create();
	alert.setIcon(R.drawable.myIcon);
	alert.setTitle(title);
	alert.show();
}

and you can add a “.setNegativeButton” if you need more control.

If you need to store simple string name-value pairs use preferences use the built in UI and Preference manager. Good tutorial is here: http://www.kaloer.com/android-preferences.

If you don’t want to use a Menu you can always use a TabView and I found Google’s example to be complete and easy to follow: http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

For background, long running processing use a Service. Great simple complete example here: http://marakana.com/forums/android/examples/60.html

That should be plenty to help you get your first android app up and running.

So you can only prescribe a treatment if it can be shown to have a significant associated benefit which outweighs the impact that treatment will have on the patients’ health. This is known as the Risk/Reward Ratio.

Reward must be proven, typically through Clinical Trials and typically more than one. Your results must be documented, peer reviewed, repeatable. In short you must follow the Scientific Method.

In technology there can be a tendency to ignore the “burden of proof” as it were and simply go with what sounds right. I admit I’m making a sweeping generalization here but it’s one I grapple with on a daily basis so I don’t feel too bad about it.

Example: Should a website implement caching? the natural reaction being “of course it should, everyone knows caching is a good thing”. Caching removes load from the database, speeds up requests by avoiding data access and generally makes the site run quicker. The right answer is “maybe, let’s look at the evidence”.

An evidence based approach to answering this question would ask the following questions:

• What’s the expected cache-seek time? Is it faster or slower than going directly to the database? Databases are pretty darn fast. Will I need to execute complex queries against my cache? What’s my cache key?
• How big will the cache grow? Am I caching per user? per client? per entitlement? Does caching sensitive data in the web tier impact my system’s security profile (yes)? How big can I let the cache grow?
• What’s the mechanism for flushing the cache? How stale can the data get?
• Will caching reduce functionality? Or will it flat-out break functionality by not reflecting changes right away?
• How will caching influence my test cycle? Testing becomes more complex now because I need to test w/cache populated, w/cache empty, w/cache service down, the number of destructive test cases just increased.
• What’s the benefit? Am I shaving milliseconds off an already acceptable page-rendering time? Or is the page already breaking the SLA and I need to do something?
• What is the cost of implementing caching? this includes writing the code, writing the test cases, maintaining the code, etc.

Based on evidence we may very well find that caching is not a good idea, in spite of how attractive it sounds on the surface.

I see similar things in the security world: Should we implement one-way SSL with IP restriction between the app and web tier or should we use mutual SSL? Is one more secure than the other? On paper, yes, in practice depending on how you store the keys, who can access the box etc. maybe not.

Evidence Based Architecture supports the K.I.S.S. principle, basically Occams’ Razor said a different way.

So let me be the first to coin the term “Evidence Based Architecture”. Perhaps we should make architects/engineers take the equivalent of the Hippocratic Oath. How different would your system look if the designer started each day with “I shall do no harm”.

In CygWin, to generate an epub file I use this command:
a2x -fepub myFile.txt --no-xmllint --verbose

This was giving me this error:

>> warning: failed to load external entity
>> “http://docbook.sourceforge.net/release/xsl/current/epub/docbook.xsl”;
>> compilation error: file /etc/asciidoc/docbook-xsl/epub.xsl line 13
>> element import
>> xsl:import : unable to load
>> http://docbook.sourceforge.net/release/xsl/current/epub/docbook.xsl

Note I am using Docbook-XSL 1.75.2.

The issue was reported on the Arch Linux distro recently here:
https://bugs.archlinux.org/task/22746?project=1&string=docbook-xsl

and on Google Groups here:

http://groups.google.com/group/asciidoc/browse_thread/thread/fdd5194c09bd4b87

Typically there is a mapping from URIs in XML/XSL sheets to local versions of those files. Xslt-proc uses this to speed up processing by avoiding the download. The issue in this case is the mapping for ePub files did not exist (not sure why).

The Fix: It turns out the fix is simple but took a while to figure out. I downloaded the latest DocBook-XSL version – (http://sourceforge.net/projects/docbook/files/docbook-xsl) and unzipped. This will contain a folder for ePub/docbook.xsl.

Next locate the mapping file, this is usually /etc/xml/catalog.

Inside it’ll have mappings from web-URIs to local-URIs. Something like this:

<rewriteURI uriStartString=”http://docbook.sourceforge.net/release/xsl/current” rewritePrefix=”/usr/share/xml/docbook/xsl-stylesheets-1.76.1/”/>

You just need to ensure your ePub folder is included as a sub-folder off of this local path. Manually copy it from wherever you unzipped to the right spot (in my case /usr/share/xml/docbook/xsl-stylesheets-1.76.1/epub) and you’re done.

Now you can generate ePub format for all those non-Kindle book readers.

If you’re building a website with a non-trivial CSS file (aren’t we all),  SASS  makes managing the CSS a lot simpler.

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”

Sencha Touch uses SASS to manage its stylesheets. I’ve been researching this in my evenings and weekends and am at the point where I want to change how Sencha Touch looks. It’s not as simple as you’d think. Essentially I need to create a new theme. Hence a little SASS is warranted.

Unfortunately both the instructions on the Sencha site [LINK] and the SASS site [LINK] are a little out of date and buggy. Here now are the steps I followed to get this working on windows:

1. Start by installing Ruby – http://rubyforge.org grab the latest rubyinstaller-1.9.2-p136.exe – nothing to it and you’ll end up with c:\ruby192 and some Start-Menu items.
2. This comes with Gems so you can skips the gems install. There is one snag though with Ruby 1.9.2-p136 that the install sets up an incorrect folder – c:\ruby192\lib\ruby\site_ruby – remove this one (just rename it to be safe) and gems will work. Maybe they’ll fix this in the next release.
3. Install Compass: at a Ruby command prompt type “gem install compass”. If you’re behind a proxy I found this works: “gem install –http-proxy <proxyAddress:Port> compass”

Next create a new folder in your Sencha folders. If your directories look like this

c:\myWebsite\js\sencha-touch-1.0.1\resources\css

c:\myWebsite\js\sencha-touch-1.0.1\resources\sass

You’ll want to create this one:

c:\myWebsite\js\sencha-touch-1.0.1\resources\SCSS

Inside that create two files as per the Sencha website:

Config.Rb (a ruby file)

# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)

# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")

# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")

# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')

# Specify the output style/environment
output_style = :compressed
environment = :production

No changes are needed to config.rb

Next create Application.scss(The file extension is important here)

// 1. Variable overrides, example:
// $base-color: #af2584;

// 2. Include Sencha Touch styles
@import 'c:\myWebsite\js\sencha-touch-1.0.1\resources\themes\stylesheets\sencha-touch\default\all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

// 3. Define custom styles (can use SASS/Compass), example:
// .mybox {
//     @include border-radius(4px);
// }

The @import line is important. I changed it to the location of the default theme in Sencha Touch with the “all” appended.

Lastly, run SASS using “compass compile”. You’ll end up with a new file names “application.css” located under

c:\myWebsite\js\sencha-touch-1.0.1\resources\css\application.css

Now reference that new CSS file in your Sencha website and you’re all set. Refer to Sencha’s site for tips on customizing the Theme itself [http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/].

SASS on its own is a boon if you’re doing serious CSS work. If not it’s probably over kill. You can do things like define variables and have those determine your CSS based on functions, you can nest elements for easier maintenance and even remove whitespace and combine multiple CSS files into one automatically.

Definitely one for the toolbox.