This installation reacts to passers by: when they look at the wall a haunting white face stares back. This is really intended for some dark and creepy bar over a cosy living room.

interaction and simulation

Step 1: approaching

The installation responds to people nearby. If nobody is near the installation lies dormant.

When a person is detected a haunting mask is projected onto the wall. The mask is a mirror image of the person’s face. If you move around the installation the mask follows you.

Step 2: starting interaction

Step 3: following the participant

Step 4: add more people

When multiple people enter the installation the effect is more haunting. The haunting theme can be developed further to perhaps project video clips on top of the masks. The videos I have in mind are horror clips with screaming or flashes of a knife then returning back to the masks.

kit

So how does it work? The installation needs a couple of things:

• Laptop – to monitor the webcam and project the masks
• Projector – to project the Masks on a nearby surface,
• Camera – to search for people’s faces.

The detecting faces is the tricky part. I use some free face tracking software, with several limitations:

• performance – loading web cam footage is very slow with Processing,
• lighting – face tracking only really works in ambient light looking straight at the camera,
• reliability – it’s hard to find real faces as people move around, etc…

As reliable face tracking entails restrictions on lighting and environment I’ve changed direction for future installations so they exploit or are robust to unreliable face tracking.

In this installation virtual butterflies are projected on a wall and passers-by can interact with these butterflies and change their behaviour. The experience of interacting with butterflies in this way is intuitive and fun.

The Installation setup: a person, a wall, a camera and projector.

The context for this work spans a couple of my interests: technology, nature (albeit simulated) and people. I think there’s lots of interesting scope of elaborating what people think about technology. I also want to both challenge the convention that playing with technology is only for geeks and make technology more accessible generally. IT is showcased and taught poorly in contrast to the traditional sciences. For example The London’s Science Museum, which has lots of little experiments and games presumably in the name of education, is depressingly low tech. The most high tech experiment was a circuit board where you could wire together a light bulb!

When first exhibiting my butterflies installation to the public I expected an indifference towards the technology and how the butterflies worked, but I was pleasantly surprised. People were interested in the technology so why did I have this expectation? Of course is wasn’t my misconception no! Let’s think about it more abstractly. Popular culture celebrates technology but mostly through a polished and passive consumerism: it’s more common to buy technology than to experiment with it. Is consumerism a barrier making people less creative with technology? Was experimentation with technology more common with our parents, or was it only my dad playing with electronics? Interesting but let’s return to the Butterflies installation.

interaction and simulation

Step 1: Person approaches the Butterflies

The interaction is simple: the butterflies move away from you. The butterflies behaviour is programmed to be scared of you: they quickly disperse and slowly regroup together. This behaviour is only one of interactions the Butterflies are capable of but it’s a simple and engaging interaction.

Step 2: Butterflies react to person and disperse.

The Butterflies are made more realistic by their grouping behaviour, their “flocking”. Creating flocking behaviour on a computer is a relatively new idea and entails a set of rules a computer churns through to make the virtual butterflies look more realistic.

Step 3: Butterflies regroup away from person.

kit

So how does it work? Let’s first inspect the kit needed to set this up. The installation needs a couple of things:

• Laptop – to run the Butterflies simulation,
• Projector – to project the Butterflies on a nearby surface,
• Camera – to record people’s movements.

The interesting bit is detecting people’s movements reliably with a cheap camera. There is, fortunately, a cheap way of making computers interactive. The expensive route is called an ‘interactive white board’ widely used in schools across the UK. Interactive white boards allow people to interact with a computer using special pens to draw on the computer screen and control the computer. The cheap interactive white board uses a Wii Remote as a camera to watch people interacting. The WiiRemote has an infrared camera. Infrared red cameras can only see light sources such as candles and cigarette lighters, but if you’re feeling more creative: some home made LED lights. The WiiRemote tracks the light source and moves the mouse on the laptop.

My installation in Brixton Market used a ‘wand’ to interact with the Butterflies. This wand housed an LED, which was tracked by my WiiRemote, and controlled my laptop and disturbed the Butterflies.

The Guardian Science Section

The Guardian Technology Section

Furthermore I dislike the prostituting of women (the male nudes were far less sexualized) for a “good cause”.

W3C Link Checker for Mobile

Finding no mobile link checkers I extended the W3C link checker to do the job. For security reasons you should go to the official site and alter the Perl script manually, but for the trusting the edited script can be downloaded here (I’ve also removed the 1 page per second limit).

To extend checklink for mobile user agents, add a new line to line 1307 of the checklink code containing:

$request->header('User-Agent', 'Mobile');

To run this link checker across your entire site you’ll need to run it recursively (using -r), I run the script using (For -S0 to work you’ll need to alter the script again):

checklink-m -Hbrq -S0 http://stripeylines.com > release-12.2.m.html

Future Work

Ideally, the checklink script would be extended and the user-agent passes as a parameter (permitting both PC and mobile site checking). If anyone wishes to take this further I’d be interested in the end result. If I have no responses in the following weeks I’ll contact W3C with my suggestions.

Spring Web

Spring Web MVC provides a Web framework around the Model-View-Controller paradigm. As we see with the workflow picture below this paradigm neatly integrates your presentation level (the View) with your business logic (the Controller) written in Java and XML.

Incoming Request workflow in Spring Web MVC (courtesy of http://static.springsource.org)

If this diagram looks intimidating you might want to check out the Spring Web Framework documentation.

Spring Web for Mobile

Most major websites need some form of mobile optimization. Here we talk about the specific changes to Spring Web to develop our iPhone app’s website: StripeyLines. These changes are split into three main sections:

1. Structuring our mobile optimized site – We wanted our website for StripeyLines to show one set of HTML pages for our mobile users and another set for our non-mobile (err PC?) users.
2. Detecting mobile browsers – We wanted to neatly structure how the browsers user-agent was detected.
3. Using mobile optimized forms – We wanted to have mobile optimized forms in the style of my previous post.

Structuring our mobile optimized site

Ideally, to make a website for multiple devices we would have the same HTML for both browser types and swapped HTML – but the defacto mobile web standards set by Apply forbid this. Instead we have mirrored content across both mobile optimized and our PC website. This was organised using a strict naming convention:  all our PC pages ended in .jsp all the corresponding mobile pages ended in -m.jsp - which is manageable for our size project. If anyone has a different preferred style you can add to the discussion below.

Detecting mobile browsers

Having neatly structured out the HTML content into PC and mobile files all we needed was to direct the user to their corresponding page. We followed the Spring Web standard and made all our public URL’s end in .htm which then resolved to a JSP page ending in .jsp or -m.jsp.

Implementing this involved extending the standard Spring Web workflow to intercept incoming requests, notably the SimpleUrlHandlerMapping, which can be found in your Spring <servlet-name>-servlet.xml file. Here is ours below:

<!--
This bean maps URL requests to controllers.
-->
<bean id="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<!--
  This interceptor catches all requests and redirects them to portal or mobile html content.
-->
<property name="interceptors">
   <list>
     <ref bean="MultiViewController"/>
   </list>
</property>

<!--
   Catch all .htm requests and use a simple controller to present them
-->
<property name="mappings">
  <props>
    <prop key="/*.htm">ForwardViewController</prop>
  </props>
</property>

</bean>

There are two beans we reference in the exert above: the MultiViewController, which intercepts each incoming request, and the ForwardViewController which handles incoming requests ending in .htm. Whilst the ForwardViewController does nothing, the MultiViewController integrates with Spring by extending the Interceptor interface as shown below.

/**
 * This Interceptor decides whether to present mobile or PC html content.
 */
public class MultiViewController extends HandlerInterceptorAdapter {

This class overrides the postHandle method to additionally:

1. Detect the user-agent
2. Alter the incoming request to either -m.jsp or .jsp
3. Handle requests of unknown pages

Spring Web Forms

Spring Forms are a nice feature of the Spring Web Framework. Spring Forms simplifies Web Development for Java Developers by abstracting HTML forms to Java Objects. For example, the follow snippet in my JSP:

<form:form>
     First Name:<form:input path="firstName" />

would automatically populate the attribute ‘firstName’ of a Java Object when submitted.For those fearful of frameworks, the JSP is compiled to this familiar HTML:

<input type="text" value="" name="userEmail" id="userEmail">

Note the type of “text” is assumed by the Spring Integration.

Spring Web Forms for iPhone

Last week, we optimized HTML forms for the iPhone. This optimization required un-standard HTML but surprise surprise Spring Forms only generate standard HTML. Spring Form’s inputs have the standard HTML types: input, select – they do not have an ‘email’ type. Any tinkering is blocked at compile time by Spring’s Form Tag library definition.
I’ve thought of recommending this extension to future Spring Web implementations but I wouldn’t want to encourage un-standard approaches to web development – have readers any views on the matter?

In the end, I opted for a Javascript solution to change the HTML dynamically when the page is loaded.

So, I defined a Javascript function to convert the input element

/**
 * This javascript is a workaround for presenting mobile safari tags using spring MVC.
 */

/**
 * This function takes an element id and converts it to an email input, removing
 * apple's auto correct / capitalise.
 *
 * @param elementId
 *            the HTML text input into an email input for iPhone optimization
 */
function convertToEmailInput(elementId) {
	document.getElementById(elementId).type = 'email';
	document.getElementById(elementId).setAttribute('autocapitalize', 'off');
	document.getElementById(elementId).setAttribute('autocorrect', 'off');
}

On page load I call the Javascript function with its reference to convert any HTML input fields. The following HTML snippet converts the userEmail input introduced above:

<body onload="convertToEmailInput('userEmail');">

I swallow a bit of pride in posting this, but if anyone has anything to contribute to this page please comment. When I was developing this solution I couldn’t find any Web resources to my aid! In the following weeks I’ll contact the Spring Web team and ask for some mobile extensions – if you have any thoughts on the matter leave a comment.

Whilst developing the mobile optimized version for our iPhone app, StripeyLines, I discovered that our site (such as our login page) needed some tweaking. These were:

1. Stopping auto capitalision on some text input fields (such as usernames)
2. Selecting a suitable keyboard

Autocapitalisation

Auto-capitalisation is supposedly to help users using Apple’s mobile Safari. You don’t want this on any case sensitive fields like: username, userId. To remove apply propriety html to each tag:
<input autocorrect="off"
autocapitalize="off" class="text-field" type="email" name="j_username"
value="">

Nasty eh? It doesn’t appear like this Apple plan to standardise this method. It’s a presentation level, mobile specific style – why isn’t this in CSS? For mobile CSS Apple are following the standards route – why not on this? All their new mobile specific CSS (those ones starting with -webkit) are typically being proposed for future CSS versions.

For more info, on these tags and form designing, see Apple Dev Docs.

Selecting Keyboards

We all know user-names which are email addresses are a good idea (except affiliatewindow.com – shame!). To show an email keyboard, more custom HTML is required. This time Apple has extended the input type to contain the ‘email’ field.

<input type="email" />

To select other keyboards see the Apple Coding How to – documentation, anyone?

Integrating these into the Spring Web Framework

Next week, I’ll take you on the adventure of integrating these tags into the Spring Web Framework.

This post is split into the following categories:

Equality and Inequality

Girls are better than boys at Maths and Science

Table 3.12 Pupils reaching or exceeding expected standards through teacher assessment: by Key Stage and sex (page 38 )

At all ages males commit more crimes than females.

Crimes committed by age and gender

Figure 9.12 Offenders as a percentage of the population: by sex and age, 2006 (page 129)

Social Myths

Only 42% of Burglaries result in loss

Also, only 57% of burglaries involve entry.
Table 9.3 Domestic burglary: by type (page 124)

Only 29% of phone thefts happen when carried by its owner

Figure 9.4 Mobile phone theft: by circumstance of how the phone was stolen, 2005/06 (page 124)

Young girls are more promiscuous then young men (16-19)

No. of sexual partners by gender (16-19 years)

Table 7.19 Number of sexual partners in the previous year: by sex and age, 2006/07 (page 104)

More new HIV diagnosis is due to heterosexual sex

Nearly double the amount of new HIV diagnosis were the result of heterosexual sex, than homosexual sex; also Heterosexual sex caused 25 times more infections than injecting drug use. Note, this is per thousand and not a percentage of each group.

New Diagnosis of HIV

Figure 7.22 New HIV diagnoses: by year and route of transmission (page 106)

Only half of people summoned actually serve Jury duty

Table 9.21 Jury summons for Crown and Civil Courts (page 134)

Safer to be a cyclist than a pedestrian

Cycling is the third most lethal form of transport, after walking and motorcycling.
Table 12.18 Passenger death rates: by mode of transport (page 173)

Social Questions

Suicide rates for women(44+) drop by 2/3ds between 1980 and 2000, while men(25-44) double from 1980 to 2000

Figure 7.18 Suicide rates: by sex and age (page 103)

More likely to be beaten up by acquaintance than violently mugged

Figure 9.5 Violent crimes: by type (page 125)

Reoffending rate of 82% for theft from vehicles – is prison the solution?

Figure 9.18 Prisoners reconvicted within two years: by offence category (page 132)

A little surprising…

Nearly half of people ‘don’t have good enough health’ to play sport

This strikes me as a surprising reason to provide for not playing sport, which presumably improves health?
Figure 13.13 Main reason for non-participation in an active sport, 2005/06 (page 186)

Domestic energy consumption is higher for water than for lighting, appliances and cooking combined

Domestic Energy Consumption

Figure 11.10 Domestic energy consumption: by final use (page 156)

Motivation

I use VirtualBox to open Microsoft Word programs on my Ubuntu host in my Windows XP Virtual Machine. I found this was extremely frustrating, firstly finding the file in my Ubuntu, then navigating to the same file in my Windows Virtual Machine and so I requested a new feature: http://www.virtualbox.org/ticket/2482, to run commands in my Windows Guest Machine from my Ubuntu Host.

Brief Overview

The application launcher installation involves four main steps:

1. Share of Ubuntu Host folders
2. Mapping of Host folders in Windows XP guest
3. Write a Script in Ubuntu Host, used to send file names to open
4. Write a Script in Windows XP Guest, listening for file names to open

Technical Detail

The file name is sent from the Host Machine to the Guest Machine using a VirtualBox guestproperty which both the Host and Guest Machines can access. This is periodically checked by the Guest Machine, launching the file using Window XP’s default launcher.

Share of Ubuntu Host folders

The Windows Virtual Machine needs to access Host’s files. Only shared files can be opened on the Window’s Virtual Machine. I found VirtualBox’s shared folders too slow, so I shared my ubuntu root using samba; so the files on my hardisk are accessible on the network using //my-laptop/root. This is a potential security risk, so I configured Samba to require credentials (there is also a I.P. filtering option). For people concerned about security, I’d recommend sharing only your Documents folder.

To recap, share your root folder, or a ‘Documents’ folder. Note only files in this directory can be opened on the Virtual Machine.

Mapping of Host folders in Windows XP guest

Having presented your Documents folder on the network, map the network drive to Z: (this drive letter is configurable in the Window’s Script listed below). I found that on a starting my Windows Virtual Machine my machines hostname was not accessible immediately, if you rarely change networks considering using your I.P. which can be resolved instantly.

Write a Script in Ubuntu Host, used to send file names to open

We need a Bash Script to be run in Ubuntu to send the document’s filename to a named Window’s Virtual Machine. This script expects a Virtual Machine called ‘WinXP’, change this reference if your Window’s Virtual Machine name is different.

This script should be used to open Word files, instead of OpenOffice, this can be specified the ‘Open with Other Applications’ menu item, when right clicking on a word file. Don’t forget to make the file executable, using:

chmod +x vmword.sh

If you experience difficulties with this step try running the script from the command line, checking /tmp/vmword.log for output.

# This program sends all arguments to a guest property called ‘wordfile’ for a Virtual Machine called ‘WinXP’
VBoxManage guestproperty set WinXP wordfile “$*” > /tmp/vmword.log

Write a Script in Windows XP Guest, listening for file names to open

We now need a more complex Window’s Batch Script to receive and open the filename. This should be started on Window’s startup, by copying into the Startup folder in the Windows Startup Menu; there may be better ways to make this a daemon.

I am unfamiliar with Batch Programming, so this script could probably be neatened, but it does the following:

1. Checks for new filenames every second (unfortunately using inefficient polling)
2. Converts the filename from the Linux Location to the Windows location
3. Opens the file

The script requires the sleep program, this is included the rktools.exe, which can be downloaded from: http://www.microsoft.com/downloads/details.aspx?familyid=9d467a69-57ff-4ae7-96ee-b18c4790cffd&displaylang=en

The filename conversion process is dependent on which folder you shared, and which drive is mapped to that share.
My conversion process is basic and does the following:

1. Removes ‘Value: ‘ from the Value returned from the VBoxcommand
2. Prefixes filename with ‘z:’

@echo off
rem This batch script listens to the guestproperty ‘wordfile’ for its machine.
rem The program checks to see if a value is set, and if so, changes the name from
rem ‘/file.doc/’ to ‘z:/file.doc’
rem The word file is then opened in a new cmd window executing the filename, which opens in the default application.
rem This program requires sleep, which is included in rktool.exe to be installed from
rem http://www.microsoft.com/downloads/details.aspx?familyid=9d467a69-57ff-4ae7-96ee-b18c4790cffd&displaylang=en

:start

sleep 1
VBoxControl -nologo guestproperty get wordfile | find /v “No value set!” > read.txt

if errorlevel 1 goto start

rem Read file and get filename and convert

type read.txt
setlocal enabledelayedexpansion
set SEPARATOR=/
set filecontent=
set root=z:
for /f “delims=” %%a in (‘type read.txt’) do (
set currentline=%%a
set filecontent=!currentline!
)

rem trim string; removing VirtualBox text
set filecontent=%filecontent:~7%

set overallfilecontent=”!root!%filecontent%”

echo The file contents are: %overallfilecontent%

rem start program
start cmd /C %overallfilecontent%

rem delete filename from guestproperty.
VBoxControl -nologo guestproperty set wordfile

goto start