Raspberry Pi desktop

We got a Raspberry Pi in the office today, and hooked it up to a keyboard and monitor.

Raspberry Pi board, roughly Arduino size

In case you haven’t heard of it, Raspberry Pi runs Linux on an ARM processor and has a target price of $25/£15 for a pre-configured system.

Works a treat!

Just want to get Chrome on it now :^).

I’ve built a Google Chrome extension called Hold It! that pauses video when it’s not visible.

For example, when you:

• minimise a window with a video playing in it
• move to a different tab
• open a video link in a new hidden tab.

Video play resumes automatically when it becomes visible again.

Useful when viewing videos on multiple tab pages, or if you click a link to open a video in a new, hidden tab.

Works for YouTube, Vimeo and on any site that uses the HTML video element.

Caveats: does not work for YouTube advertisements, and does not work on bbc.co.uk and some other sites. If you have a solution, let me know!

You can get it (for free!) from the Google Chrome Webstore.

How to use the extension

After installing the extension, any playing video will be paused when you move to a different tab or minimise a window. If you click on a link to open a video in a new, hidden tab, the video will be paused until you move to the new tab.

How does it work?

This extension uses the Page Visibility API.

The API can be used to check when a web page is visible to the user or not.

If you minimise your browser window, or move to another tab, the API fires a webkitvisibilitychange event.

When a new page loads, the extension looks for videos on the page — including Flash video and HTML video elements. If the page is not visible, or becomes hidden, all playing videos on the page are paused. Play restarts (for videos that were playing) once they become visible again.

Contest per lo sviluppo di applicazioni per il Chrome Web Store italiano.

Partecipa al contest.

Avete tempo fino a lunedì 12 Settembre 2011.

You can get it (for free!) at the Chrome Web Store.

The extension displays a timeline of navigation and page load events for the current page, and a historical chart of page load timing data for all visits to the page.

It’s still a bit rough around the edges, so I’d really appreciate any feedback.

Navigation and page load timing charted for all visits to the current page

Timeline of navigation and page load events for the current visit to the current page

For web apps to be as good as native apps, they need better context (right click) menus.

Take a look at the screenshot above. This shows what happens when you click on a person in a Google+ circle: I’d like to move the person from the current circle to a different one.

A ‘proper’ context menu would be very useful in this case, but of course what I get is the usual generic browser menu with items that are irrelevant to the task I’m trying to accomplish.

I know that you can add items to context menus in Chrome apps, for example, or hack them in other ways, that there are security considerations (if people add deceptive menu items), that many (most?) users never use context menus, and so on.

BUT…

There must be a way.

The API makes it possible to find out when a web page becomes visible or hidden, for example to pause download, processing or playback in order to save CPU and bandwidth.

More information about the API is available from code.google.com and MDN.

I’ve also built a Google Chrome extension that uses the API to pause video when it’s not visible.

I’ve just worked out how to set up TextWrangler so you can view HTML files in one or more browsers — simultaneously if necessary, and with keyboard shortcuts.

Mike Piontek at Junecloud gives instructions on how to do this in Safari:

tell application "TextWrangler" to set theFile to file of document 1
tell application "Finder" to open theFile using (path to application "Safari")

Unfortunately, this doesn’t seem to work for Google Chrome.

So I did a bit of hacking (with help from a comment by someone called Rob on TUAW) and came up with this:

tell application "TextWrangler" to set theFile to file of document 1

tell application "Google Chrome"
activate
if (exists window 1) and (URL of active tab of window 1 is "chrome://newtab/") then
tell window 1 to set URL of active tab to currentURL
else
open location currentURL
end if
end tell

It may not be elegant, but it works.

Some bloke with a moustache

I’ve written an application to search Shakespeare’s sonnets, which links to Quarto 1 facsimiles of each of the poems at the the University of Victora Internet Shakespeare Editions website.

You can access it as a plain old web page in Chrome, Safari or Opera, or install the free web app at the Chrome Web Store.

The app doesn’t do much — it’s just very fast, and works locally and offline.

I’m working on a Firefox version using the Indexed Database API. Not sure where Internet Explorer is headed in terms of local database storage.

How to use it

Enter text in the input box at the top of the page to display lines from sonnets containing the text.

Search is not case sensitive. Note that a minimum of two characters must be entered. Line numbers are shown to the right of each line.

Click any line to display the whole sonnet from which it is taken.

Click on a sonnet to display a Quarto 1 facsimiles of it at the the University of Victora Internet Shakespeare Editions website.

How does it work?

The sonnets are stored in JSON format in json/sonnets.js.

The first time the app is first opened, the JSON is parsed and the sonnets are stored locally in a Web SQL database. (I’m working on an IndexedDB version for Firefox and future versions of Chrome and other browsers.)

Whenever query text is entered or altered, the database is queried and any results are formatted and displayed.

Feedback

Please send bug reports, comments or feature requests to samdutton@gmail.com.

It’s called Framegrabber and you can get it here.

Framegrabs are still images of individual film frames.

The Framegrabber extension makes it possible to take framegrabs from HTML video elements. Framegrabs can be stored in a local database or opened in a tab so they can be saved as JPEG files.

Framegrabber is also useful for bookmarking video timecodes.

Framegrabber works for any page that uses the HTML video element.

One major caveat: to create framegrabs, video must be from the same host as the page it’s on, so Framegrabber can’t capture framegrabs on sites like YouTube and Vimeo. If Framegrabber cannot capture a framegrab, it will still store the timecode of the current frame.

Videos from which framegrabs can taken can be found on many sites, including Dive Into HTML5, Mozilla and my own website samdutton.com.

How to use Framegrabber

To save framegrabs, use the icons that the extension displays at the top left of video(s) using the HTML video element:

• click on the green plus icon to open a framegrab in a new tab
• click on the red circle icon to save a framegrab in local database storage.

Note that on some pages, you may need to start playing the video before an HTML video element is actually added to the page.

Click the extension icon (to the right of the address bar) to display stored framegrabs in a popup. Click a framegrab image in the popup to navigate to the video and timecode from which the framegrab was taken.

How does it work?

Framegrabber uses several relatively new web technologies, including Canvas, HTMLMediaElement and Web SQL Database.

Below are some technical details of how the extension works.

Framegrabber creates a canvas element (but doesn’t add it to the DOM) then uses the drawImage() canvas context method to draw a video frame on it. The canvas toDataURL() method is then used to create a data URL string representing the image. The image data URL can then either be opened in a new tab, or stored locally along with the URL of the page containing the video and the timecode of the framegrab: Framegrabber does everything offline.

Local storage is accomplished using the Chrome Web SQL Data
base implementation, which is fast and reliable enough to store strings such as image data URLs, which can be 200KB or more in size (i.e. 200,000+ characters in length).

When the extension icon is clicked, data URLs are retrieved from the local database and set as the src value for framegrabs displayed in the popup.

Feedback

Please send bug reports, comments or feature requests to samdutton@gmail.com.