With the arrival yesterday of confirmation of the term dates and an introductory booklet, at last I have a real sense of something happening, that a big change is coming. In two months’ time I’ll start an MSc in Human-Computer Interaction with Ergonomics at University College London.

I’ve always been interested in the user interface, the medium between man and machine, and now I get to study it full-time for a whole year. I expect to learn how to measure the efficacy of a UI and how to improve poor designs. As the range of devices with which we interact continues to grow, and the touch revolution is building a head of steam, I anticipate that the methodologies provided in the course will continue to be applicable. The role of the user experience consultant is becoming more important and I’m looking forward to morphing into one!

object oEndOfDoc = "\\endofdoc"; /* \endofdoc is a predefined bookmark */
 
Word.Application app = new Word.Application();
 
Word.Document doc = app.Documents.Add(
    ref oMissing, ref oMissing, ref oMissing, ref oMissing
);
 
Word.Range line1 = doc.Bookmarks.Item(ref oEndOfDoc).Range;
line1.Text = "First line!";
line1.InsertParagraphAfter();
 
Word.Range line2 = doc.Bookmarks.Item(ref oEndOfDoc).Range;
line2.Text = "Second line!";
line2.InsertParagraphAfter();
 
Word.Range r = doc.Bookmarks.Item(ref oEndOfDoc).Range;
r.Text = "Name\tAge\tLocation\nNigel\t44\tUK\nBill\t33\tUSA\nRuben\t86\tNicaragua\n";
 
object tab = Word.WdTableFieldSeparator.wdSeparateByTabs;
Word.Table t  = r.ConvertToTable(
    ref tab,
    ref oMissing, ref oMissing, ref oMissing, ref oMissing,
    ref oMissing, ref oMissing, ref oMissing, ref oMissing,
    ref oMissing, ref oMissing, ref oMissing, ref oMissing,
    ref oMissing, ref oMissing, ref oMissing
);

Looks pretty obvious, doesn’t it? But it took me a while to get there. The important difference is that instead of…

Word.Range r = doc.Range(ref oMissing, ref oMissing);

…I used:

Word.Range r = doc.Bookmarks.Item(ref oEndOfDoc).Range;

What I had been experiencing with the former was a document with only the final item (the table) being added. In fact, all items had been added, but at the same location in the document – so each item was being overwritten by each subsequent item. This seems obvious too, in retrospect, because I was supplying the missing value to the Range constructor’s start and end parameters, so the target range became “everything”.

I couldn’t see – and still can’t – how you’re supposed to identify a range in an empty document, but I was fortunate enough to discover endofdoc, a built-in bookmark signifying the, er, end of a document.

object oEndOfDoc = "\\endofdoc"; /* \endofdoc is a predefined bookmark */

My requirement was simply to add items to the document sequentially, so using this bookmark for the range of each item did the trick. I think that’s me done with Word Automation…

P.S. In trying to find a solution I toyed with a Word document template with predefined mail merge fields acting as placeholders for the items I wanted to add. It almost worked until I tried to replace a field with my table. Any ideas why this doesn’t work?

foreach (Word.Field myMergeField in doc.Fields)
{
    // ...
    myMergeField.Select();
    app.Selection.Range.Text = "Name\tAge\tLocation\nNigel\t44\tUK\nBill\t33\tUSA\nRuben\t86\tNicaragua\n";
    app.Selection.Range.ConvertToTable(
        ref tab,
        ref oMissing, ref oMissing, ref oMissing, ref oMissing,
        ref oMissing, ref oMissing, ref oMissing, ref oMissing,
        ref oMissing, ref oMissing, ref oMissing, ref oMissing,
        ref oMissing, ref oMissing, ref oMissing
    );
}

I’m not going to describe in full how you need to prepare your Visual Studio project. For that, read this. I wanted to utilise the ConvertToTable() method of the Word.Range object which allows us to create a table using a string delimited by tabs and newlines such as this:

The MSDN page Automating Word Tables for Data Insertion and Extraction had taken me so far, but not all the way, so here’s the useful (read: missing) code to bring it all together:

Word.Application app = new Word.Application();
 
Word.Document doc = app.Documents.Add(
    ref oMissing, ref oMissing, ref oMissing, ref oMissing
);
 
Word.Range r = doc.Range(ref oMissing, ref oMissing);
r.Text = "Name\tAge\tLocation\nNigel\t44\tUK\nBill\t33\tUSA\nRuben\t86\tNicaragua\n";
 
object tab = Word.WdTableFieldSeparator.wdSeparateByTabs;
Word.Table t  = r.ConvertToTable(
    ref tab,
    ref oMissing, ref oMissing, ref oMissing, ref oMissing, 
    ref oMissing, ref oMissing, ref oMissing, ref oMissing,
    ref oMissing, ref oMissing, ref oMissing, ref oMissing,
    ref oMissing, ref oMissing, ref oMissing
);

Please leave a comment if you have any questions on this, or if I’ve done something heinous that is a crime against Word automation

Good luck!

EDIT: If you need to add more than one item to a blank Word document, you might want to take a look at my subsequent post.

This information wasn’t immediately obvious via Google so I thought I’d post it up in an attempt to make it more findable by other folks. I actually got the information from Eric True. Thanks Eric!

So I was amused by the TV-based hotel room message system I recently encountered:

It reads: “To check your messages, please enter your room number (419)”. And it’s followed by our well-known password entry box – with the characters masked.

I was staying in Room 419.

Whether or not the room number should be masked is beside the point, although there has been some debate recently about the usefulness of masking, but it’s clearly ridiculous to show the room number when the entry box hides it.

UPDATE: The bike has been sold! Hooray! Thanks – and safe riding – to Chris.  

Details as follows; click the images to see bigger versions…

• 1999 “T” ZX-9R C1
• 44,000 km (or 27,000 miles)
• MOT expires June 2010
• Tax expires March 2010
• Datatag & Immobiliser
• Full service history
• One previous owner
• “KAW” registration
• New battery
• Parallel import

Since it was last serviced in July 2005 it’s travelled less than 4000 miles. I’m pretty ashamed I’ve ridden it so little, but at least it’s been kept in a secure, dry garage in the meantime.

The bike is 10 years old, so it’s not in perfect condition. I’d describe it as “good”.  
Somewhat predictably it has slightly chipped forks and a cracked mudguard:

The front of the mudguard has been repaired:

There’s some scuffing on the lower fairing:

And also the engine cover:

The front of the left mirror is also scratched:

But I have a range of replacements that I’ve not got around to fitting, such as a new mirror:

And engine cover:

There’s also a replacement front fairing:

I also have the original screen (the one currently on the bike is all black):

And there’s an after-market can which I took off to get the bike through the MOT and never put back on:

So I’m asking for £1100 or near offer, which is a good deal according to Parker’s.

I’m based in Surbiton. If you’re interested, let me know by leaving a comment below and I’ll be in touch. The ability to out-accelerate every car on the road doesn’t get much cheaper than this!

This URL is the kind of thing one encounters when working with Web Map Services:

It returns a geographic map image based upon the name/value pairs passed in the querystring. Google Charts work in a similar way:

To tackle such long URLs I’ve developed the boringly-named URL Editor.

Find it here: http://gingerbbm.com/urleditor

It’s a pretty simple JavaScript application (using Prototype and Scriptaculous) whose main purpose is to split the long querystring of a URL into its constituent name/value pairs in order to dramatically improve legibility. Paste a URL into the main box, click Split, and the name/value pairs appear below:

Once a URL has been split, any edits to the individual values are immediately applied to the main URL, and vice versa.

The Encode and Decode buttons attempt to encode/decode any relevant values that exist.

Click Open to open the URL in its current state in a new window/tab. And Reset resets the whole page.

Reordering of name/value pairs is achieved by dragging them, and you can add and delete them by clicking the relevant buttons.

Bugs

It wouldn’t be hard to trip the application up. The key to it all is the question mark character that denotes the start of a querystring. If you’re not interested in ever opening the URL you can simply start typing into the main box, e.g. “?a=1″, and the name/value pairs will appear.

Names

So, “URL Editor” is a fairly sober moniker, but it was the best of a bad bunch, and being a pretty good description of what it does I decided to go with it.

• U.R.[NOT HEL]L.
• URL Manager
• URL Splitter
• Querystring Dechunker
• Any ideas?

And Finally

I’ve tried it out in FF3, IE8, Safari 3 and Opera 9 on XP and it’s all good. It also appears to work in FF3 and Safari 3 on the Mac. Not tried it on Chrome yet, but I don’t expect any surprises. For me it’s been fairly robust, and a useful tool in my arsenal. I hope others find it useful.

Get it here:
http://gingerbbm.com/software/PathAndFilenameToClipboardSetup.msi

It adds itself to the context menu in Explorer and appears like so:

Disclaimer: Of course this software comes with absolutely no guarantees or warranties of any kind! It should work on Windows XP; I’ve not tried it on anything else. If you have any difficulties leave a comment and I might take a look…

You’ve got a piece of code that creates an image in your web page by passing a bunch of parameters in a GET string to some server-side process:

$('tile').src = 'http://img.com/generate.php?a=1&b=2&c=3';

But what do you do when the URL goes beyond the limit? Practically, for cross-browser solutions, the limit is around 2000 characters (thanks to IE), and I recently had to find a workaround when generating images via a WMS.

The Solution

When we’re dealing with HTML forms, if a GET isn’t big enough we have to use a POST. The difficulty in the scenario described above is that there’s no way to provide the POST variables when making the assignment to the image’s src attribute.

I thought about how to use an Ajax POST but even if image data could be streamed back to the browser in this way, there’s no mechanism for getting it into an HTML image.

And then I discovered the data URI scheme which allows us to assign a base64 representation of an image to an HTML image like so (where the ellipsis indicates the position of the base64 data string):

$('tile').src = 'data:image/gif;base64,...';

If I could issue a POST to the server to generate my image, I could convert that image into a base64 string to pass back to the browser, which I could then utilise in the data URI scheme syntax.

I discovered this method in this brilliant post where the same trick is used to for CSS and to reduce HTTP requests. And by reading that post I learned that we have to do it another way in IE. In IE we have to use MHTML and it involves a little more work on the server but we can still end up with this (where somestring indicates the position in mhtml.txt of the base64 data string):

$('tile').src = 'mhtml:http://img.com/mhtml.txt!somestring';

A proxy script on the server is required to pass the POST variables through to the image-generation program, and convert the resultant image into a base64 data string. Since the WMS I use is located on an external server I was already using Troy Wolf’s PHP proxy script (note that it requires class.php). Converting to base64 is a cinch in PHP:

$base64_encoded_image = base64_encode($response);

I simply added the code I needed to the end of Troy’s proxy script.

So, the flow of events is:

• Client issues an Ajax POST request to the proxy script.
• Proxy forwards the request to the image-generation program and converts the resultant image into a base64 data string.
  • For IE, the proxy saves the string to a file and returns the filename to the client.
  • For all other browsers, the proxy returns the string to the client.
• Client’s Ajax “on success” callback assigns the relevant string to the HTML image’s src attribute.

Anyway, here’s a demo page.
And here’s a zip containing all the necessary files.

A Few Considerations

The IE workaround involves creating a file on the server that contains the base64 representation of the generated image. The format of the file must be as follows in terms of line breaks, and in terms of the double quotes around the boundary parameter:

Content-Type: multipart/related; boundary="_ANY_SEPARATOR"

--_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64

R0lGODlh...snip...AACgAACoAAC

The folder in which the MHTML files are generated obviously requires the appropriate privileges. If this method were used in a production environment an automated procedure would be required to delete periodically old MHTML files. IE8 is a great improvement over previous versions and actually supports the data URI scheme, so one day in the distant future all the MHTML workaround shenanigans will be unnecessary. But until then we’re stuck with having to write a file to the server every time – and if we’re doing that it might be preferable simply to write the image to the server and return its URL to the browser. At least it would mean no JavaScript browser-sniffing, and that’s no bad thing.

The festival is curated this year by Ornette Coleman, a free jazz legend whose seminal release came in 1959 – the same year as Miles Davis’s. I’ve yet to listen to Ornette Coleman’s work, but he is the principle inspiration behind one of my favourite bands, The Bad Plus, and his selection of musicians for the Meltdown is awesome.

We’re going to see Yoko Ono (with Cornelius), Charlie Haden (with The Bad Plus) and Ornette Coleman himself. Bring it right on!

And if money were no object I’d also go and see James Blood Ulmer, The Roots, Led Bid, Acoustic Ladyland and Bobby McFerrin!