In my last post I gave my first impressions of the BT eFrame1000 - a wifi equipped digital photo frame, and I hinted that I’d started to investigate how to exploit a feature that’s intended for streaming Flickr photo albums so that I could view information from other sites. So far, I’ve had some success at cajoling the frame into displaying pictures from sites other than Flickr, and showing news and weather updates. Here’s how…

Background

The eFrame 1000 has a feature that can be configured (via the Windows PC software) with URLs for Flickr photo albums. Once configured, you can go to the frame and select Photos > Flickr > [Album Name] to stream the photos in that album directly from Flickr over your wireless network without needing a computer to be switched on. All references to this feature on the frame, the PC software and in the documentation specifically refer to Flickr and Flickr only (I suspect that’s because Yahoo! (who own Flickr) have a partnership with BT who make the frame and the two companies co-brand some of their broadband products). This feature works because each public album/stream/group on flickr has an RSS url that users can subscribe to in order to see the 20 most recent uploads.

Non-Flickr feeds

A flickr RSS feed contains a link to each image (and a smaller thumbnail version). It turns out that although it’s not a documented feature, you can configure the frame to use any RSS feed that’s in the correct format and the frame won’t care that it isn’t coming from flickr.com. Be warned though, you can’t just take a regular RSS news feed, it has to be a feed where every item contains an embedded image in the same format used by Flickr e.g:

<media:content url="http://farm4.static.flickr.com/3483/3290803901_527112a24e_o.jpg"
type="image/jpeg"
height="1920"
width="2560"/>
<media:thumbnail url="http://farm4.static.flickr.com/3483/3290803901_9178782db5_s.jpg"
height="75"
width="75" />

I haven’t yet determined whether the media:thumbnail tag is used.

Frame Channel

The best site so far has been FrameChannel.com. This is a service designed for wifi picture frames whereby a user creates their own channel by subscribing to “widgets”. It’s intended for framechannel specific frames that will make full use of their API to control slideshow speed, transitions, order etc, but they also provide an RSS feed in a format that works with the eFrame. So, if you subscribe to a weather report, you configure the widget on the frame channel website with your location and then the RSS feed for you channel will contain an image that is created by the weather widget to show your local forecast. Similarly the reuters news widget will generate an image in the feed containing a brief headline and associated picture. The RSS feed is a little hidden away so here’s how you find it: Sign in to your framechannel account. Configure your channel. Go to “My Account”. Copy the feed url that appears just below the tab bar into your browsers address bar and load the feed. Then drag the url from your address bar into the flickr feed url box in the eFrame software and click “Update”  - that will download the configuration to your frame. Then in future on your frame you can go to Photos > Flickr  and you’ll see an album named something like “FrameChannel content for…”.

Other sites

I’ve had some success at finding other sites that work with the eFrame. I’ll keep the list below up-to-date as I find others.

Tick/Cross images from FamFamFam Silk library.

Potential Gotchas

I had a few issues with the PC software for the eFrame in that when I tried to load a feed that it didn’t like, it then subsequently failed to accept any other feeds (even valid ones) and just failed silently without any error message. I had to shutdown the sofware (from the system tray) and restart before it would start accepting new feeds again.

Tags: digital frame, eframe, eframe1000, photo, photography

This week I bought a digital photo frame. I’ve been tempted to get one of these for a while but been put off until now for a few reasons:

• The “affordable” screens are either very small or very low resolution (or both).
• I run XBMC on my old Xbox so can view every photo I’ve ever taken on the 37″ LCD in the living room anyway.
• Cropping and copying images to a memory card and transferring to the frame seemed like too much hassle.

Frames equipped with WiFi provide a solution to the issue of transferring images to the frame and have been around for a while now but are usually expensive and often tied to a specific photo sharing site or need an ongoing subscription. Enter the BT eFrame 1000 which until recently was £130, but last week I noticed has been reduced to just under £40 (less if you happen to work for said company and get an extra few pounds staff discount, ahem! End of disclaimer). At that price it’s comparable to the run-of-the mill unbranded, low-res screens and I decided was worth a punt. It arrived yesterday and here are my initial thoughts…

Continue Reading »

Tags: bt, eframe, eframe1000, photo, photography

As you may know if you follow me on Twitter, a couple of weeks ago I started to investigate ways of producing graphs within a webpage. The driver for this was for a dashboard application to track progress against targets and was one of those “JFDI” projects at work that we all get sprung upon us from time to time.  The key requirement was for slick looking graphs  above all else.  For speed of development I decided I wanted a client-side solution so that quickly focussed my investigation around 3 approaches:

1. Images generated off-platform (Google Charts)
2. Flash (Fusion Charts)
3. Javascript (JQuery + Flot)

For my project we focussed on Option 2 and 3 and eventually setttled on the Javascript route. I’ve summarised below the factors that influenced our decision.

Images (Google Charts)

http://code.google.com/apis/chart

I’ve been looking for an excuse to use Google Charts for some time as it’s a very simple API for embedding an image in a webpage yet produces really good looking charts (far better than I’ve seen in equivalent comercial applications). To use GoogleCharts you simply generate a url like the one below, and use it as the src attribute in an image tag.

http://chart.apis.google.com/chart?cht=lc&chs=200x100&chd=s:ithankYouGodformostthisamazingdayforthel&chxt=x,y&chxl=0:|Apr|May|June|1:||50+Kb

Google Charts supports an extensive range of chart types beyond the regular bar, line & pie and the images can be annotated with custom text for the legend, axes and data series. Like all Google’s API services, Charts is free to use, and although there’s no hard rate limit Google do reserve the right to block any traffic that they detect as “abusive” beyond 250,000 hits per day (not an issue for my application but worth bearing in mind).

Flash (Fusion Charts)

http://www.fusioncharts.com/

For the type of slick interactive graphs that were needed for this project, flash was in many ways the obvious choice. Personally I’m not a big fan of flash, partly because I have zero flash skills but also because downloading flash files often bloats the page unecessarily and is littered with fancy effects that apart from being annoying are usually not accessible. However, after taking a look at the Fusion Charts gallery I had to give it serious cosideration becuase it ha’s support for a huge range of chart types (many of which I hadn’t even seen before I don’t really know what they represent!). There can be no denying that the charts themselves are really nice to look at and the tutorials show how easy it is to get set up and running.

Click the image to view working demo

It wasn’t until I created a quick prototype using some static data (click the image above) that I started to have a few doubts: When you embed a FusionCharts flash object on your webpage, you pass it a url where the source data will be retrieved from. This data must be in the FusionCharts prescribed XML format which is fine if you’re creating your own data sources, but not if you want to consume an existing csv/xml/json feed. There’s no Javascript API to the flash object so you can’t parse data within your page and then pass it to the flash to render. Also, if you wanted to allow the user to zoom in and out of the chart, or toggle series on and off, your chart would need to fetch a new dynamically generated data feed each time. This adds load on  the server, but also degrades performance because of the round-trip delay in requesting new data which seems unecessary when all the data is already held within the page and just needs to be filtered. I also discovered that although the flash file is only 60KB in size, that’s only for one chart type, if you want to switch to bar or pie you have to load another flash file each time.  For these reasons and also because FusionCharts is proprietary software that we can’t edit/enhance and comes with a (albeit very reasonable) licence fee we decided to rule out this option.

Click the image to view working demo

Flot is by no means perfect: it’s only at version 0.6 (and hasn’t been updated in around 12months)  and although the features are impressive, there are a few short falls.  It really only supports line and bar charts (there’s a patch discussed on the flot issue tracker that adds support for pie charts). Also, to get certain features to work (e.g. tooltips and zooming) you need to write you own implementation using the events generated by flot - there’s no chart.enableZooming() here! Having said that, these are only minor criticisms about features that aren’t even available at all in the alternative solutions.

Also worthy of a mention:

Sparklines

http://www.omnipotent.net/jquery.sparkline/

Toward the end of my search I found Sparklines (via @stevereynolds). It’s a nifty little jquery plugin for producing tiny little charts - similar to the “summary” charts on the Google Analytics dashboard page. I haven’t actually used it (yet) but it looks useful for times when you want several small graphs on a single page to give an indication of trends and to entice users to dig deeper for more in-depth analysis.

For a project at work this week I needed to modify a Javascript library so that under a particular condition it would generate a JS event that could be handled elsewhere in the application.  Why use JS events rather than just call a regular JS function? Well, I guess partly to maintain consistency with the way that other events are handled within the app, and partly because it’s a more elegant solution: When an event is thrown, if there’s nothing to catch and handle the event it doesn’t matter but when you call a JS function you need to be sure that the function exists otherwise you’ll end up with JS errors on the page so you have to first test that the function exists before you call it. Also an event can propagate up through the ancestory of objects on your page so it can be handled at whichever level is most appropriate or handled in different ways at different levels.

In JQuery the syntax for creating an event handler is exremely simple, for example, given the following HTML:

<div id='container'>
   Click me!
</div>

…the JQuery code to handle for the click event would be:

$('#container').click(function() {
   alert('You clicked me!');
});

In the above example, the “click” method is a shorthand utility method provided by JQuery, but is the same as:

$('#container').bind('click', function(e) {
   alert('You clicked me!');
});

There’s a whole bunch of standard HTML events that the browser may generate in response to user input (and that can be handled in similar fashion). You can also get JQuery to generate these events programatically.

It turns out that you can create a handler for your own custom event in exactly the same way, just change the name of the event (”click” in the example above), to the name of the event you want to create and be sure to use the longhand “bind” method. E.g.

$('#container').bind('myEvent', function(e) {
   alert('My event just fired');
});

Then, when you want to trigger this event, use the err… “trigger” function:

   $('#container').trigger('myEvent');

Because we’re using events rather than a straight method call (and JQuery 1.3 or later) we could write another handler for myEvent but on an ancestor of #container - the document body in this case. The handlers would be called in order, first on #container, then on the body. If we want to prevent the event from bubbling up through the DOM we can kill it with the stopPropagation() function:

$('#container').bind('myEvent', function(e) {
   e.stopPropagation();
   alert('My event just fired');
});

I was surprised by just how simple this was once I realised that the process for custom events is exactly the same as that for standard browser events.

Tags: event, events, javascript, jquery, js

TinyURL bookmarklet in action

If you just want to try this out, drag the link below to your bookmarks toolbar, then click the new bookmark. I’ve only tested in Firefox 3.04 so far so your mileage may vary if you use another browser. Let me know in the comments if you find this useful or have any problems.

Tiny

(v1.1 updated Dec 6th: The generated tiny url is now automatically selected ready to be copied)

Read on for a description of how it works…

Continue Reading »

Tags: bookmarklet, javascript, js, json, jsonp, tinyurl, wtframework