Adding a Custom WWW Thumbnailer to the MATE Caja Filebrowser in Linux

djbarney-www-thumbnailer-screenshot

The PhantomJS based thumbnailer in action !

I’ve made a WWW page thumbnailer. I started with this example. This is based on the way MATE desktop and other Window Managers allow definition of new thumbnailers. There seems to be some confusion about official documentation and specification, although there is an old guide here. It does not quite match the current way of doing it but at least its something. Apparently this is due to Freedesktop not being an official standards producing body, although the thumbnailer system has been adopted by many Window Managers.

A Small Thumbnailer Mystery

Initially it was a bit of a mystery why this PhantomJS based thumbnailer did not work. On my system (Debian), Blender thumbnailer did work, but “text/html” thumbnails did not show. Turning on “Caja Preferences -> Preview -> Show text in icons” did show the actual HTML text in the file as the thumb. But I was stumped. I decided to create a “dummy” thumbnailer to find out what was going on. Creating a dummy executable script for the thumbnailer with something like echo “$1 $2 $3” > /tmp/test.txt never created anything so it seems that Caja never called the thumbnailer. I tried restarting Caja (killall caja). Nothing ! Then I realised. I was assuming that Caja would recreate the thumbnails when presented with a new thumbnailer. But it doesn’t. Thumbs need to be deleted from “~/.cache/thumbnails”.

Dummy Thumbnailer

#!/bin/bash
echo "$1 $2 $3" > /tmp/phantom-test.txt
# write dummy PNG of size $3 to output file $2
convert /home/djbarney/bin/phantomjs-1.9.2-linux-i686/bin/dummy-thumb.png -resize $3 $2
exit

Now “phantom-test.txt” contains

"/media/fifth-element/Unextracted_Net_Grabs_Archive/mars/zero_longitude_on_mars.html /tmp/.mate_desktop_thumbnail.CKT85W 128"

… and Caja looks like this …

dummy-caja-thumbnails

Dummy thumbnailer test

This “dummy thumbnailer” method could come in useful when writing other thumbnailers.

The PhantomJS Linux File Manager WWW/HTML Thumbnailer

Extract PhantomJS to “~/bin”.

djbarney@djbarney-anubis ~/bin
$ ls -lah
total 28K
drwxr-xr-x   3 djbarney djbarney 4.0K Nov  9 14:51 .
drwxr-xr-x 106 djbarney djbarney  12K Nov  9 14:51 ..
-rwxr-xr-x   1 djbarney djbarney 4.3K Nov  5 14:57 blender-thumbnailer.py
lrwxrwxrwx   1 djbarney djbarney   40 Nov  9 14:43 phantomjs -> phantomjs-1.9.2-linux-i686/bin/phantomjs
drwxr-xr-x   4 djbarney djbarney 4.0K Sep  7 07:58 phantomjs-1.9.2-linux-i686

Create a symbolic link in “~/bin” to phantomjs-1.9.2-linux-i686/bin/phantomjs”.

Put the actual Bash script that calls the Javascript into “~/bin”.

#!/bin/bash
# Called by Caja using definition in "~/.local/share/thumbnailers/caja-phantomjs-webkit.thumbnailer".
# Using "%i" = Input/file path/URI. "%o" = PNG filename with path but without PNG extension. "%s" = Thumbnail image size.
# Assumes executables in "~/bin" are in system wide $PATH, or install to "/usr/local/bin".
# Write requests from Caja to somewhere where we can see them.
# echo "$1 $2 $3" >> /tmp/phantom-test.txt
# Call the actual WWW thumbnailer and write messages and errors to somewhere where we can see them.
phantomjs ~/bin/phantomjs-1.9.2-linux-i686/bin/make-www-screenshot.js "$1" $2 $3 2>&1 
# | tee -a /tmp/phantom-test.txt &
wait
# PhantomJS javascript cannot write direct to a PNG file with a PNG extension as Caja requires. Could use
# javascript to rename file but its fiddly so do it here !
mv $2.png $2
exit

Put “make-www-screenshot.js” in ~/bin/phantomjs-1.9.2-linux-i686/bin”.

// MATE Caja PhantomJS Webkit Thumbnailer, Barney Holmes/DJ Barney 2013
//
// Requires PhantomJS. See readme.txt
var system = require( 'system' ),
 webpage = require( 'webpage' ),
 page = webpage.create(),
 url = system.args[ 1 ] || '', // Set default path to generic thumb here ?
 path = system.args[ 2 ] || '', // set a default value if argument was not set
 width = +system.args[ 3 ] || 256, // set a default value if argument was not set
 height = +system.args[ 4 ] || 256; // set a default value if argument was not set
function getFileName(filename) {
 // Converts URI to normal system path (removes URL encoding like "%20".
 // Not used at the moment (currently thumbnailer only for MATE, Gnome uses a URI).
 var filename = decodeURIComponent(url);
 return filename.match(/[^/]+[.][\w]+$/i)[0];
}
page.onError = function ( msg ) {
 system.stderr.writeLine( 'ERROR:' + msg );
};
page.onConsoleMessage = function( msg, lineNum, sourceId ) {
 system.stdout.writeLine( 'CONSOLE: ' + msg, lineNum, sourceId );
};
// Each of the following is set to "width" as thumbnail is always square.
page.viewportSize = {
 height : width,
 width : width
};
page.clipRect = {
 height : width,
 width : width
};
page.open( url, function( status ) {
 console.log( 'Opened URL/URI: ' + url + ' ... with NAME: ' + url + ' ... to write thumbnail: ' + path + '... with SIZE=' + width + ' PAGE OPEN STATUS=' + status );
window.setTimeout( function() {
 var outputPath = path +
 '.png';
 console.log( 'Rendering to ' + outputPath );
 page.zoomFactor = 0.25;
 page.render( outputPath );
 phantom.exit();
 }, 500 );
} );

Put the thumbnailer entry in“~/.local/share/thumbnailers”.

[Thumbnailer Entry]
TryExec=caja-phantomjs-webkit-thumbnailer
Exec=caja-phantomjs-webkit-thumbnailer %i %o %s
MimeType=text/html;

Remove thumbnails from ~/.cache/thumbnails” (Anyone. Is there a better way of doing this ? We are clearing all of the users thumbnails!).

Restart Caja … “killall caja”.

That should be it.

djbarney-www-thumbnailer-screenshot

The final result

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s