To learn a bit about the HTML 5 canvas I’ve been writing a simple graphing visualization tool in Javascript.  Graphing in the sense of vertices connected by edges in a network, not in the pie chart and bar chart sense.  There is already a fairly decent charting library for  HTML 5; RGraph.

The canvas API itself is quite straightforward, it even makes things like drop shadows disappointingly simple.  In fact most of the time spent on this project was on implementing a force-directed graph layout algorithm in Javascript.  This was made easier by the fact that I’d already implemented it once in Java.  You can see a demo of the project here.

The canvas element is only available on “real” web browsers such as Firefox, Chrome, Opera and Safari.  Also performance of the layout algorithm is notably better in Chrome, particularly in comparison to Firefox 3.5.7 (on Ubuntu).  The demo can even render in Internet Explorer now thanks to Google’s ExplorerCanvas library although performance is so low that it is not recommended.  The time that the layout algorithm will take to complete is impossible to predict and so the layout will time out after a set time (around 15 seconds).  For this reason you are likely to get a substandard layout on particularly slow machines or when using browsers with poor Javascript performance.  The graph that is represented in the demo is generated at random so be sure to refresh the page a few times to see the tool handle a number of graph structures.

The tool is currently quite limited.  There is only one layout algorithm available* which could be better optimised.  There are no ways to navigate the graph by zooming or panning and the appearance of the graph is currently limited to the white on blue default presented in the demo.  The graph can visualise any data as long as it is expressed in a certain format, easily described in JSON.  However it does add properties to that data when it lays out and renders the graph.  This would ideally be avoided.  I hope to address these issues in the future, particularly in regard to navigating the graph and customising the appearance, specifically so as to be able to visually distinguish and label the vertices.

The project along with it’s source is available under the MIT license from github.

HeyGraph Demo

*(although in my opinion force directed layout’s are appropriate for most small to medium size graphs) <

Additional features are snooze and the ability to set the alarm to play a random song from a playlist in your music library.  The playlist feature will only be available in the upcoming full paid-for version which I’ll likely only charge a dollar (US) or two for.

Example of Character Justification plugin

I’ve updated my Character Justify Plugin. I could go into detail but to put it simply I’ve worked to improve the alignment on the right edge particularly when there are spaces between words in the same element.  Previously I was trying to deal with the extra letter spacing caused by multiple words by subtracting an arbitrary percentage from the width that I’d stretch the letters to.  Now I’m replacing the spaces with a character of fixed size (”_”) when calculating the width of the elements.
The example has been updated to show this and I’ve tweaked the animation example to so that the animations on each element don’t get out of sync.

Happy Justifying!

Justification using pure CSS can be achieved by setting the text-align property to “justify”.  This will tell the browser to attempt to line up the words so that left the and right edges of each line are aligned with those above and below.  This effectiveness of this property can be enhanced by inserting hyphens where necessary to maintain the alignment using Hyphenator (here’s an example).

The “text-align: justify” technique is useless when applied to a list or similar column of text where each item or line only has one or two words in it.  For example in a navigation menu.  This is because the spacing that is added to achieve the justification is only added at the word boundaries.  Justification based on characters will be available in CSS3 using the property text-justify with the value “newspaper”.

I had the requirement to build a navigation sidebar with justified text for Caragh’s still unfinished website so rather than wait for CSS3 cross browser support I decided to find a solution.  One technique would be to use image replacement and insert images of the properly justified text.  The main drawback of that is it doesn’t easily allow for dynamic content so I decided to try writing a JavaScript solution.  The result is this Character Justification JQuery plugin.  All you need to do is call characterJustify() on whatever JQuery object you want to be justified.  The plugin will then insert the correct letter-spacing so that the letters are evenly spaced and the left and right edges more or less line up.

       $(document).ready(function(){
          $(".justify").characterJustify();
       });

The text will be distributed to fit within the bounds of the element(s) you called the method on unless you pass an optional integer parameter to set a particular pixel width.  I also added the regular JQuery animation parameters speed, easing and callback so you can also animate the process if you need to.

       $(document).ready(function(){

          $(".justify").characterJustify(200);

          var anim = function() {
            $(".justify").characterJustify(300, 1000, "swing", function() {
              $(".justify").characterJustify(200, 1000, "swing", anim);
            })};

          anim();
       });

Examples:

• Simple example
• Animated example

Plugin source

UPDATE: I’ve updated the plugin slightly.  Details here.  I’ve updated the above example animation code.

UPDATE: Don’t forget to clear your cache after doing this.

UPDATE 2: Perhaps it’s the cache and not the RSS widget after all.

Anyway I created my own colour-based playlist as a way of trying it out.  You can listen to it from this embedded flash player or from the 8tracks site here.

In shinyhappydan style here’s the rundown of my choices.

The Strokes - Red Light

Casablancas’ lyrics are often pretty oblique as he veers schizophrenically between elation and desolation.  This one is no exception, starting with the sentimental and sweet  “Two can be complete without the rest of the world” and ending with the ominous “Get yourself a lawyer and a gun“.  I always felt that “First Impressions of Earth” is the album where The Strokes decided to try something new on each song.  In this case Julian’s uncharacteristic staccato delivery lends a welcome spin to their familiar sound.

Other “Red” contenders:

• Kings of Leon - Red Morning Light
• Loretta Lynn - Little Red Shoes

I’ve long been a fan of the Psychedelic Furs, particularly their sophomore “Talk Talk Talk”.  So when I noticed the National cover of their song that spawned that John Hughes movie in the track list for their Daytrotter session (sadly no longer available) I was eager to hear it.  It doesn’t disappoint, substituting the Furs very’ eighties guitars for organs and Richard Butler’s Bowiesque sneer for Matt Berninger’s smouldering baritone.

Other “Pink” contenders:

• Flaming Lips - Yoshimi Battles The Pink Robots

Typical folk fare from the band fronted by Dante DeCaro; typical in that it sets traditional folk song lyrics to original music but still great fun.  Who knew Dante had such an interesting voice when he was letting Steve Bays do all the singing in Hot Hot Heat.

“Hooka, tooka, soda cracker/ Does your mamma chew tobacco?”

Other “Green” contenders:

• Baby Calendar - Green Tea
• Dinosaur Jr - Green Mind

Digital Ash in a Digitial Urn, Bright Eyes’ “electronic” offering, is one of the those great records where at a given time any of the tracks on it could be my favourite.  If pushed I’d often choose this one though as Oberst sums up high school counter culture with Don Dellilo, whisky, smoking, “the sorrowful Midwest”, “grass stain jeans” and “a girl from class to touch”

Other “Gold” contenders:

• Pretty Girls Make Graves - Bring It On Golden Pond
• Yeah Yeah Yeahs - Gold Lion

The coolest Stroke singing one of his coolest songs.   “Yours To Keep” is a sublime album, sounding somewhat like The Strokes themselves if they allowed more influence from the Beatles or the Beach Boys.

Other “Blue” contenders:

• Band of Horses - Windows Blues
• Mazzy Star - Blue Flower
• Wilco - Sky Blue Sky
• Joanna Newsom - This Side Of The Blue
• The Walkmen - Blue Route

A band I used to be a member of (I was the lead guitarist) so I won’t talk this one up.

Other “White” contenders:

• er … Bing Crosby - White Christmas?

Again barely a colour but one of those small bands you can never remember how you stumbled onto but are forever grateful you did.  Baby Calendar blend elements of some of my favourite bands such as the precocious riffs of early Death Cab and Pretty Girls Make Grave’s frenetic energy and guitar lines.  Think Mates of State but charmingly naive and audacious rather than earnest and conservative.

Whilst cherry is definitely more of a tone than a proper colour I could not resist including this.  Singer Britt Daniel’s vocals always hold an air of casual aloofness without seeming snotty or conceited, his guitar lines are always on the right side of the hooky/cheesy spectrum and often they churn out little pop gems like this one from “Ga Ga Ga Ga Ga”.

I had the pleasure of seeing Jenny at Austin City Limits this year and she sounded and looked fantastic.  Acid Tongue is definitely a record that comes across better live but this is a nice safe ballad that avoids the dodgy lyrics of some of the other tracks.

Other “Black” contenders:

• Death Cab for Cutie - Blacking Out the Friction
• The White Stripes - Black Math

Dan already snagged this Joanna Newsom song that covers three “colours” in one title so I went with the Final Fantasy cover.

I also saw Conor Oberst at ACL performing with his Mystic Valley Band and this lead me to get back into an album I’d all but overlooked, his previous release “Cassadaga”.   More of a fruit than a colour but this songs pensive, haunting charm rounds off the playlist well.

11 Vessels they are meant to protect (6)

Book meme:

• Grab the nearest book.
• Open it to page 56.
• Find the fifth sentence.
• Post the text of the sentence in your journal along with these instructions.
• Don’t dig for your favorite book, the cool book, or the intellectual one: pick the CLOSEST.

Via Leah Culver, via Eric Florenzano’s Blog

The nearest book to me was a cryptic crossword book. This is the fifth across clue from the 56th crossword.  No idea what the answer might be.  Any ideas?

UPDATE:  Chris has done this over on his blog.

UPDATE 2: The answer is LINERS

Having said that there is one way that Digg is letting me down.  I would consider myself a power user when it comes to computers, as I imagine many Digg users are given it’s tech news bias and history.  I would say that one of the most valuable UI metaphors for a power user would definitely be keyboard shortcuts.  I certainly used them heavily to write this blog entry.  (Alt-Shift-A within the Wordpress editor is a good one for creating a link).  For a long time though shortcuts were limited to the desktop as the web was not rich enough to support anything other than mouse navigation (with the exception of shortcuts for back or forwards and tabbing through endless links).

With richer and richer web applications there is now a good precedent for using keyboard shortcuts within the browser page.  A shining example of this is Google Reader with over 20 commands covering pretty much everything you’d need to do with the application.  There’s even a cheat sheet of the different combinations that you can access by simple typing ‘?’.  Here’s a fairly old video from Tim Ferriss where Robert Scoble describes how he uses Reader with the keyboard to read over 622 feeds a day. (This is over a year old, so who knows how many feeds he reads now.)

Keyboard shortcut cheat sheet in Google Reader

Another great example is Socialthing!.  Socialthing! is quite a simple app that aggregates feeds from sites such as Facebook, Twitter and Digg.  When  updates arrive, to prevent the UI from changing while you might be viewing it, a button appears that you can click when you’re ready to have the new items displayed.  Scrolling to the top of the page and clicking this with the mouse got really tiresome, really quickly.  Luckily the Socialthing! developers spotted this just as fast and allowed you to simply hit ‘E’ to import new items.  They added a few other useful shortcuts as well.

I don’t need the mouse to do this

So why use the mouse to do this?

So how can the Digg experience be improved for regular, heavy users?  The major peeve for me when using the Digg story page is the select field for sorting the comments.  I often want to change back and forth between the modes that the comments are sorted on and having to switch back to the mouse every time I need to do this becomes a real drag.  There are too many links on the Digg story page to tab to it so having a shortcut to focus this field would be nice.  However  I would propose having four key commands:  ‘O’ to show oldest comments first, ‘N’ for newest, ‘C’ for the most controversial and ‘M’ for most dugg.  Hitting ‘S’ or the spacebar to show the story that has been linked and, of course, ‘D’ to then digg it would complete the shortcuts for the story page.

What about the front page or any of the category sections that display a list of stories?  How about taking a leaf out of Google Reader’s book and using ‘J’ and ‘K’ to cycle forwards and backwards through the list, and then perhaps ‘O’ to open them?  Perhaps also hitting number keys 1-10 to select one of the top news stories from the list on the right.

Making it easier to quickly Digg stories may not chime with the motivation behind Digg’s recent decision to ban those who are using scripts to automatically Digg stories.  However these shortcuts could easily be mimicked with a simple Firefox extension so I hope that Digg will act to prevent it’s most loyal users succumbing to RDI: Repetitive Digging Injury.

Here’s a little tutorial on how to set up a checkbox in the header of an Altio list.  The minimum requirements to complete this tutorial should only be that you have an Altio server instance installed, preferably version 5.1 or later.  Why not take this opportunity to try out the 5.2 beta?

Step one is to install an application featuring an Altio list configured to display checkboxes.  Download this application package for an example:

Checkbox Tutorial

To install an Altio archive file place it in the deploy directory of your Altio installation : <Altio_Install>/WEB-INF/classes/deploy.

For example:

/home/tomm/AltioInstalls/AltioLiveStudio5.2Enterprise/tomcat/webapps/altio52/WEB-INF/classes/deploy

or

C:\Program Files\AltioLiveStudio5.2Enterprise\tomcat\webapps\altio52\WEB-INF\classes\deploy

This simple application allows you to “design” a title header for  a website or application by choosing which images to include in the background of the header.  It may be contrived and somewhat limited but it will still serve as a good example as you achieve all of this by clicking check boxes in a list.

So let’s start by adding a header checkbox to the list in the application.  Open the tutorial’s view file in designer and select the VISIBLE column in the list (expand Windows->WINDOW->LIST in the View Explorer and click on VISIBLE).  In the Properties window expand the Appearance group and change the “Show Checkbox in Header” property to “Y”.

If you save your app and run it you should find that a check box has appeared in the header of the checkbox column.  If you click on it to alter it’s value though, you’ll also find that is has no effect.  This is because Altio has no default behaviour for this checkbox; we need to add some application logic to edit the underlying data ourselves.

The list control has a “Header Check Box Toggled” event fired whenever the user clicks on one.  Click on the list and then select the “Events” tab in the Properties window.  We’ll add a “Set Attribute Value” action to change the value of the list’s data according to the user’s setting in the header checkbox.  Click on the “Header CheckBox Toggled” event in the tree view and find the “Set attribute value” action in the list below.  Double click it to add the action to the event trigger.

Click on the parameters tab and enter the following parameters.  You can copy and paste them or build them up using the data builder.

• Element : /IMAGE
• Attribute : @VISIBLE
• Value : ${LIST/VISIBLE.headerchecked}

This means for every IMAGE element, set it’s VISIBLE parameter to whatever the user has set the value of the header checkbox to.  And because the action has been placed under the “Header Checkbox Toggled” event it will run every time the user clicks the checkbox.  Save the application and run it again and you should find the checkbox now works as you’d expect.

UPDATE:  I’ve replaced the flash videos in the post with embedded altio applets.  You’ll need to accept the security certificate to run the application but you can trust us.  Honest.  Also this has been cross posted at altio.com