Archive for the ‘Web dev & programming’ Category.

Ubiquity

Mozilla Labs have just launched the Ubiquity plugin for Firefox and to me it looks fantastic. The plugin makes it really easy to embed a map say into an email – without all the faffing around of cutting and pasting URLs from Google Maps into emails etc – it also does much more than this – but I’ve only just started to play!

Even though I’m not generally one for command-line type interfaces, this one works for me. Will be interesting to see how many developers jump on this to create new commands. I can see how you might want to add an IM command (for MSG of course) or one for Cohere. Also, how will this affect some other Firefox plugins, for example if Delicious wrote a set of commands for this (maybe they already have?) then would you really need the Delicious Firefox plugin?

When doesn’t “removeelement” remove an element?

When you’re trying to use XUL. I’ve just been working on enhancing the Cohere Firefox plugin/extension/add-on so that you can optionally show a toolbar, this toolbar will also show the ideas from Cohere which are linked to the webpage you’re currently looking at (quick screengrab below):

Anyway, getting back to my original point, I needed to be able to dynamically change this drop down list whenever you browse to another page, or select another tab. Getting my plugin to go off and query the Cohere webservice to find the relevant ideas all worked fine, the problem I had was being able to remove the current items from this drop down list.

The documentation seemed to show that I can use ‘removeelement’ to remove the element from the list by setting the removeelement attribute to true (though does seem to be bit of an odd way to do things – setting an attribute to remove an element), but it didn’t work and I spent a little while figuring out why .

In the end it turned out that setting the removeelement attribute to true only means that the element is removable, so you can create the following:

<menulist id="menulist">
    <menupopup id="menupopup">
        <menuitem label="my label" value="a value" removeelement="true"/>
    </menupopup>
</menulist>

but the item “my label” will appear in the drop down list, to actually remove the item you need to do something like this in your javascript:

var ilist = document.getElementById('menupopup');
for (var i=0; i<ilist.childNodes.length;i++ ){
    ilist.removeChild(ilist.childNodes[i]);
}

Thought I’d post it up here as it confused me and might save others struggling to figure out what’s going on ;-)

Recording Video on Asus Eee

I’ve just spent a frustrating couple of hours unsuccessfully attempting to get my Asus Eee (running Ubuntu Hardy Heron) to allow me to record short videos using the built in webcam and mic.

I started off by applying these fixes and have checked that it all works fine using skype. I first tried recording using ‘Cheese’ – this resulted in the video working fine – but no sound ( I also tried with plugged in mic/headphones). So I installed ucview and gave that a go instead,  but his was quite erratic too, most of the time it would appear to record, but then on playback, only the first frame would be visible, and no sound (using either built in mic or a plugged in mic). I also found that sometimes ucview wouldn’t stop recording even after I’d clicked the button and I had a to kill the process to get it to stop.

I then went back to looking at cheese only to find that it now won’t start, the top window bar appears, but with big grey square underneath – no menus or webcam preview. Restarting, removing and reinstalling all made no difference :-(

Really not sure what is causing these problems, from googling & reading wikis and blogs most other people seem to have got ucview and cheese working fine – so just me then ;-) If anyone has an idiots guide as to what to check then feel free to send on to me

I’ve been trying to get this working in the hope that when I go away to Ethiopia I’ll be able to record short video blogs to post up – but I may have to fall back to just using my digital camera and the video/sound recorder on that, but would’ve been nice to be able to use the webcam and mic.

On a different note, I hope that Ubuntu updates will soon include FireFox3…

More IE/CSS/div fun

Not being a designer spending all my time getting to know the ins and outs of how floating divs work, it tends to take me a little while to get my head around how to lay out pages using pure CSS. I thought I’d pretty much got how to do 2 and 3 column layouts with CSS and divs, but today I found a new problem which really had me stumped for a while.

Essentially I wanted an ordered list, then within each <li> element a couple of <div>s which I could float to layout how I wanted. Everything was working fine in Firefox, but not in IE(6), the images below show the output given in Firefox and IE:

IE (6):

Firefox:

HTML code which generated the above images.

The items numbered 1-3 show how I want the output to appear, but my first stab at the code resulted in items numbered 4-6. As you can see, in Firefox it appears fine, but in IE the ‘float:left’ is being ignored, making the div containing the text appear below the checkbox. [Aside: you might ask why I'm using divs and floats for something as simple as just some text next to a checkbox, well, this is just my starting point, my final page will be more complicated than this example!]

The only difference between the working and non-working examples is that the div containing text has width property defined (set to 100%) in the working version. I’m not sure why this should be necessary – my example shows that it’s not needed if the wrapper div isn’t part of an ordered list.

My only explanation is that this is another (frustrating) little IE CSS bug – unless anyone can give me another explanation? Alternatively if there are better ways to do what I’m trying to achieve?

Through the Square (javascript) Window

For the Cohere site, I’ve been trying to figure out how you can keep track of a pop up window using Javascript even when the parent page changes (to another page on same domain) and to know whether the pop up window is already open. I’m having exactly the problem mentioned in this forum post – but as yet no solution.

All the example scripts I’ve found so far will only work if the parent page remains the same. I.e. you’re testing whether the pop up is already open, but applying this test on the document/page that originally opened the popup. What I’m looking to do is subtly different – so the pop up remains open so as you are browsing Cohere you can add ideas to make connections between.

I would think that this ought to be possible, because if you open a popup window with the same name as an existing one, the old one will get overwritten – so it ‘knows’ that the pop up exists. Plus, this is all running from the same domain, so there won’t be any cross domain issues.

If anyone has any pointers as to how to achieve this, it would be much appreciated. Or if you have other suggestions for how the same results could be achieved. Cheers ;-)

Cohere reCaptcha-ed

Yesterday, we discovered that some of the users on Cohere were actually spam, the usernames were random characters and the descriptions on these users profiles consisted entirely of links for loans, pills etc (all the usual spam). To try and stop this happening again I’ve added reCaptcha to the user registration form.

This was really easy to implement, the only slight change I had to make was to fix the code so requests to the recaptcha servers went through our proxy (shame there aren’t optional params to add proxy details – but easy enough to fix).

Time for Timelines

A couple of weeks ago, Peter (one of the OU graphic designers) asked me if Cohere could produce nice graphical timelines (the BBC has some really nice ones). He’s been tasked to produce one for one of the OpenLearn courses and was thinking about the best way to do it – and so it could be replicated easily (when he gets asked to make another one for another course). Peter pointed me at Simile from MIT – which is a kind of Google Maps API for timelines.

My response was that Cohere couldn’t currently provide exactly what he was looking for (we’ve not really worked on many different visualisations yet), however, you could use Cohere as the repository for providing data (via the Cohere API) to Simile. All we’d need to do would be add the facility to add a date to an idea/node, and another formatting output options to get the data in the way that Simile requires. (Note to self: should also add location option for ideas/nodes so they could be displayed on a Google Map as another visualisation option for Cohere)

Yesterday I had a go with this on my Cohere development server, so can now add dates to nodes and export in the correct format for Simile. I also created a little script so that I can show my blog postings on a Simile timeline:

This timeline is dynamically generated and shows the last 100 of my blog postings. If you’d like to have a look at the script I’ve used for generating this, then you can download it. Depending on where you post it up (relative to your WordPress installation), you may need to slightly alter line (no. 14) to point to your wp-config.php file.

The main downside that I’ve found so far with Simile is that is will only allow data to be dynamically loaded via XMLHttpRequest. This means that the data source must reside on the same domain as the page you’re displaying the timeline on (unless you can use a iframe as I have done above) – it would be fantastic if Similie could also accept data via JSON and so avoid the cross-domain problem (I’ll need to check whether this has already been added as new feature request in their issue tracker).

Then completely coincidentally, this morning I saw this post from Stuart about Dipity – an online timeline creator. So I’ve had a very quick play with it this morning – creating the following timeline (also of my blog):

This took about 30 seconds to produce, buy just adding the URL of my blog feed.

These two timelines, although displaying the same data, are obviously quite different with Dipity is far more graphical, though IMHO a bit cluttered and not so easy to read. Simile looks quite grey in comparission, though I’ve not yet explored the API fully and how you can customise the colours/display. Dipity is much quicker to get up and running with, but my feeling is that Simile would offer more flexibility (within bounds), for example I can’t tell yet if Dipity has the capability to show events which span a period of time (i.e. have start and end dates – as Simile allows).

(Looking at Dipity has reminded me that we should create an RSS feed for Cohere nodes).

Any pointers to other timeline visualisations appreciated :-)

iPlayer/Flash on Ubuntu Hardy Heron

A few days ago I mentioned that I was having problems with playing BBC iPlayer programs on my Asus Eee. I was also having problems with _some_ other Flash content – though not all.

Turns out that I’d installed the wrong version of the Flash plugin – actually I’d installed more than one and the conflicts were creating the same problems as if the plugins hadn’t been installed at all. However the instructions in the forum posting fixed me up.

Upgrading to Ubuntu 8.04 Hardy Heron

I’ve updated my Asus Eee from Ubuntu 7.10 to the latest release (8.04), though I didn’t strictly speaking upgrade, it was more of a reinstall. I’d intended to upgrade using Ubuntu’s update manager, but when I tried this I got a message to say that I didn’t have enough disk space, needed 1.3Gb, but I’d only got about 1Gb free. In the process of freeing up some space by removing packages, I think I removed too much, as I couldn’t even get the login screen to appear. So anyway, I ended up just doing a reinstall. All went fine, though I needed to look up a couple of bits to get the wireless working.

My only little niggle with Ubuntu 8.04 is that it’s got Firefox 3 Beta 5, rather than the current stable version of Firefox, this causes a bit of an issue for me because it means I can’t install Google Gears or the del.icio.us plugin, neither of which work with Firefox 3 yet – I assume they’ll soon get them working when v3 is fully released (don’t know when this is due – maybe summer, but hopefully soon). Having been playing with Firefox addons the other day, I think I may be able to hack the del.icio.us plugin to make it work, but don’t think I’ll be able to do the same for Google Gears.

Another unresolved issue I have is that I can’t seem to view any BBC iPlayer programmes. Flash appears to be installed fine and works for other sites, but when I try to play any programmes I just get the message “Something went wrong. There seems to be a problem playing this video. Please try again. undefined” :-( But I haven’t yet figured out where this problem is. [Update, I now have this resolved]

Firefox extension for Cohere

I’ve started to build a Firefox extension for Cohere. This is the first time I’ve ever had a go creating FF add-on, but it seems straightforward enough so far, thanks to some good examples and explanation. In couple of hours I’ve got my head around basically how it works and even created the requisite helloworld plugin, though for originality I called mine Cohere… just to prove it here’s a screenshot…

However I think that’s the easy part over with now and it’s only going to get more tricky. Not from the point of view of creating the actual add-on, but figuring out how to make it easy to use. What we’re trying to build is something along this lines of the del.icio.us firefox add-on, but the difference being that we want to offer users the ability to make connections between 2 websites (or bits of text grabbed from websites), which means the add-on will need to have a neat way of storing one idea, whilst the user is browsing the web searching for the next idea to make the connection to.

My thinking at the moment is that when you make an idea from a page it will automatically create the node for you and give you a short list of your most recent ideas you have added to make connections between.