Another snippet I had to write during the great Slider rebuild.

I needed to be able to take an NSImage supplied by the user and tile it within an NSBezierPath defined by more user-set values.

The below example uses a rounded rectangle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
//bgImage can be any NSImage
NSColor *c = [NSColor colorWithPatternImage:bgImage];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[path fill];
 
[NSGraphicsContext restoreGraphicsState];

Tags: NSBezierPath, NSImage, Objective C, Slider, Snippet - 小片, Tutorial - 教程

While continuing to rebuild Slider’s background image features, I was forced to rewrite the code that scales an image up/down to Slider’s portal size, ignoring the image’s original proportions. The image also had to be painted within a path, as Slider may have differently shaped corners compared to the image to be scaled.

The below code accomplishes the scaling and painting of the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//theImage = the resulting image, that will have a scaled (proportions ignored) version of "bgImage" painted onto it
NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
NSImage bg = [[NSImage alloc] initWithSize: imageSize];
 
//bgImage can be any NSImage
NSSize originalSize = [bgImage size];
[bg lockFocus];
[bgImage drawInRect: NSMakeRect(0, 0, imageSize.width, imageSize.height) 
fromRect: NSMakeRect(0, 0, originalSize.width, originalSize.height) 
operation: NSCompositeSourceOver fraction: 1.0];
 
[bg unlockFocus];
 
NSColor *c = [NSColor colorWithPatternImage:bg];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[aPath fill];
 
[NSGraphicsContext restoreGraphicsState];

“path” could be any NSBezierPath.

Tags: Cocoa, NSBezierPath, NSImage, Objective C, Slider, Snippet - 小片, Tutorial - 教程

After updating 100+ pages manually, I realized that I had neglected to add “index.php” to the end of certain links. Usually this would be fine, but the links in question are opened in Shadowbox, which will fail on pretty, “index.php”-less links.

I was able to fix this on the server in 5 seconds with find+perl:

find . -name 'FILE_NAME.EXTENSION' | xargs perl -pi -e 's/FIND/REPLACE/g'

Where FILE_NAME is the name of the files to be searched in (can be ‘*’) and EXTENSION is the filetype (can be ‘*’). FIND is the text to be searched, and REPLACE is a replacement string.

Phew!

Tags: Bash, Linux, Perl, Tutorial - 教程

See the cute little pictures on the left? The ones below the site menu? Go ahead and run the mouse over them a few times – a faded circle behind the animals changes colour each time, doesn’t it? Yep.

The idea for this came from Artemy Lebedev’s Mandership. Go there and hover the cursor over the bar-code in the top right, notice that it changes colour as you do so.

I really like this effect, and wanted to implement on this site, as I needed something to distract me from important work.

The effect is accomplished with jQuery, a colour generation function and a transparent PNG.

I thought I’d share this effect, and variations, with the world with this tutorial.

Below are four variations, each adding an additional function/plugin to achieve the different effects:

Vanilla

First, the library:

You’ll need to include jQuery in your page. First download the jQuery library, then upload it to your server. To include the library in your page, you need to modify then paste this code somewhere in your page’s header (the bit between the … tags):

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>

Change src to reflect the location of the jQuery file you uploaded to your server.

Second, the functions:

This code needs to be pasted just below the jQuery library link, also in the header.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript">/* generate random colour http://www.therustybarrel.com/david/experiments/randhex.html */
function genHex(){
	colors = new Array(14);
	colors[0]="0";
	colors[1]="1";
	colors[2]="2";
	colors[3]="3";
	colors[4]="4";
	colors[5]="5";
	colors[5]="6";
	colors[6]="7";
	colors[7]="8";
	colors[8]="9";
	colors[9]="a";
	colors[10]="b";
	colors[11]="c";
	colors[12]="d";
	colors[13]="e";
	colors[14]="f";
 
	digit = new Array(5);
	color="";
	for (i=0;i<6;i++){
		digit[i]=colors[Math.round(Math.random()*14)];
		color = color+digit[i];
	}
	return "#"+color;
}
 
jQuery(document).ready(function(){
jQuery(".colour-change").hover(function(){
jQuery(this).parent().css("background-color", genHex());
});
});
</script>

The genHex() function is from The Rusty Barrel, but the site seems to be down. It strings together some random hex values, returning them in a string suitable for use in CSS.

jQuery code that is to be triggered by some event needs to be placed between jQuery(document).ready(function(){…}); In this case we have some code that will be executed when when the visitor hovers the cursor over any element with the class ‘colour-change’. The next line selects the anchor, then gets its parent. It then asks genHex() for a random colour, uses this to change the parent’s background colour. Simple! jQuery makes Javascript much simpler, fun even. It also alleviates many issues related to browser incompatibility.

Note that this code must be pasted below the line calling the jQuery library. Why? Because the colourChange() function needs jQuery to run, and javascript code only knows about libraries included above themselves.

Third, the HTML:

1
2
3
4
5

<div style="width:600px; height: 188px; background-color: #333333; margin: 0px auto;">
<a href="http://pagesofinterest.net/blog/2009/06/using-png-transparency-the-jquery-colour-change-plugin" class="colour-change"
<img src="http://pagesofinterest.net/images/post/dizi.png" alt="Disciples are not necessarily inferior to teachers, teachers are not necessarily superior to disciples."/>
</a>
</div>

The HTML required for this effect consists of three elements: an outer div, an anchor and an image. The styling for the div is very important. It must be given width and height values equal to the width and height of the image it is wrapping, and it must be given a background colour.

The anchor is given the class “colour-change”, which is required for jQuery to handle the cursor hover event.

The image should be whatever image you want to use – with at least a little transparency!

You can use this effect as many times as you want on any page – as long as whatever page you’re using it on has 1) the jQuery library link in the header, 2) the functions below the jQuery link in the header, and 3) the anchors must be given the class ‘colour-change’.

Colour Animation

Follow the vanilla section of this tutorial first.

Any of the variations can be combined with the excellent colour animation plugin for jQuery. This results in a smooth transition between colours, which is desirable in some cases. Here is our example + colour animations:

To integrate the colour animation plugin with this example:

Download the colour animation plugin, upload it to your sever.

Link to it in the header of your page, between the jQuery link and the functions code, e.g:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.colouranimations.js"></script>
<script type="text/javascript">
function genHex(){
[...]
}
jQuery(document).ready(function(){
[...]
});
</script>

Swap the line “jQuery(this).parent().css(“background-color”, genHex());” with:

jQuery(this).parent().animate({backgroundColor: genHex()},500);

the ‘500′ value tells the function how long you want the transition to take, in milliseconds. Change this to whatever you like!

Hover-Intent

Any of the effect variations can be combined with hover-intent. If you plan on applying this colour-change effect to multiple items on a page, you should seriously consider this plugin. If will prevent the crazy “piano key” behaviour that can occur when a visitor hovers over multiple items in quick succession.

Follow the vanilla section of this tutorial first.

Download the hover-intent jQuery plugin, upload it to your server.

Link to it in the header of your page, between the jQuery link and the functions code, e.g:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.hoverintent.js"></script>
<script type="text/javascript">
function genHex(){
[...]
}
jQuery(document).ready(function(){
[...]
});
</script>

Replace the jQuery code with:

1
2
3
4
5

jQuery(document).ready(function(){
jQuery(".colour-change").hoverIntent(function(){
jQuery(this).parent().animate({backgroundColor: genHex()},500);
}, function(){});
});

You’ll notice that I’ve combined the hover intent plugin with the colour animation plugin in the code above. If you’d like to do this, make sure you include both plugins! Your jQuery, hover-intent and colour animation links should look like:

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.color.animation.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.hover.intent.js"></script>

Remember that the jQuery link must be first! In this case the order of the following two doesn’t matter. The rule is this: if javascript X requires functions within javascript Y, then javascript Y must be included before javascript X.

Brightness/Darkness Manipulation

Any of the effects can be combined with this to produce a random colour change of a consistently darker/lighter brightness level. This can be good in situations where you want the randomized colour change to be more subtle.

Follow the vanilla section of this tutorial first.

I include this section in case you want to use only light/dark colours. Maybe the full range is too garish for you?

You’ll need to include the following two functions. Copy them just above the genHex() function. The functions are modified from code found in this post this post on the Experts Exchange.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function LightenColor(h, d) {
 
	var r, g, b, txt;
 
	h = (h.charAt(0) == "#") ? h.substring(1,7) : h;
 
	r = parseInt(h.substring(0,2),16);
	g = parseInt(h.substring(2,4),16);
	b = parseInt(h.substring(4,6),16);
 
	r = (r+d > 255) ? 255 : (r+d < 0) ? 0 : r+d;
	g = (g+d > 255) ? 255 : (g+d < 0) ? 0 : g+d;
	b = (b+d > 255) ? 255 : (b+d < 0) ? 0 : b+d;
 
	txt = b.toString(16);        if (txt.length< 2) txt = "0"+ txt;
	txt = g.toString(16) + txt;  if (txt.length< 4) txt = "0"+ txt;
	txt = r.toString(16) + txt;  if (txt.length< 6) txt = "0"+ txt;
 
	return "#"+ txt;
}
function DarkenColor(h, d) {
	return LightenColor(h, d* -1);
}

To get a random light colour, swap the jQuery(this).parent().css(“background-color”, genHex()); for:

jQuery(this).parent().css("background-color", LightenColor(genHex(),100));

To darken:

jQuery(this).parent().css("background-color", DarkenColor(genHex(),100));

There you go! I hope you found this tutorial helpful – please let me know if you spot any errors :)

Tags: jQuery, Programming - 编程, Tutorial - 教程

Somehow I broke my JDownloader installation, I think by meddling with the network settings. Nothing would download, and the auto-update was borked. I decided to delete it and reinstall it, but I had quite a lot of download packages queued, and wanted to rescue them. I managed to do this successfully, here’s how:

Locate the “backup” folder, in JDownloader’s root directory. For me, as I used this method to install JDownloader, the folder was in “/opt/JDownloader/”. Find the most recent “backup.zip” file. Note that there may be some numbers between “backup” and “.zip”. In Ubuntu’s default file manager, Nautilus, one can select “List View” and then click “Date Modified” to easily find the most recent file.

Copy this file and paste it to your desktop.

Create a new folder on your Desktop, call it “BACKUP”. Copy all files in JDownloader’s root directory into this folder.

Follow these instructions to install JDownloader. You can skip the “sudo mkdir /opt/JDownloader” step if you installed JDownloader with this method.

When JDownloader is installed, extract the “backup.zip” file you copied to your Desktop and modify then execute the following in a terminal:

sudo mv ~/Desktop/database.script /opt/JDownloader/config/database.script
sudo mv ~/Desktop/database.properties /opt/JDownloader/config/database.properties

Open JDownloader.

Your packages should have been restored. If you’re happy with the new installation, you can go ahead and delete the “BACKUP” folder.

Tags: Fix, JDownloader, Tutorial - 教程

I’m in the middle of a project involving Wikipedia and ResearchCyc, and I needed to get the data contained in DBpedia’s Infobox RDF Triple file into a MySQL database so I could use it in conjunction with the database created by the excellent Wikipedia Miner.

This script parses out the Wikipedia page, DBpedia Infobox Predicate and Infobox subject, and inserts them into a MySQL table. I thought I’d share it with The Internet in case someone else wanted to work with DBpedia infobox data in the same way.

One ends up with a table filled with entries like:

+----------+-----------------+---------------+------------------------------------------+
| id       | predicate       | subject       | page                                     |
+----------+-----------------+---------------+------------------------------------------+
| 22378459 | foundationDate  | 1918-10-18    | Fortaleza_Esporte_Clube                  | 
| 21460098 | areaCode        | 07404         | Bösingen,_Baden-Württemberg              | 
| 21536062 | demonym         | Caronelli     | Carona_(BG)                              | 
| 23913919 | draftyear       | 1991          | Mike_Pritchard                           | 
| 22278400 | producer        | Bow_Wow       | Face_Off_(Bow_Wow_&_Omarion_album)       | 
| 22320735 | bodyStyle       | Coup          | Fiat_1200                                | 
| 22245790 | classis         | Magnoliopsida | Euphorbia_atropurpurea                   | 
| 23710420 | order           | Sapindales    | Malleastrum_leroyi                       | 
| 25463380 | starring        | Lena_Headey   | The_Contractor                           | 
| 26021756 | latitudeMinutes | 27            | Walnut_Township,_Atchison_County,_Kansas | 
+----------+-----------------+---------------+------------------------------------------+

And a table containing the frequencies of each predicate:

+-------------------------+-----------+
| predicate               | frequency |
+-------------------------+-----------+
| background              |     30863 | 
| homeTown                |     49083 | 
| genre                   |    245669 | 
| label                   |    132028 | 
| associatedBand          |     35371 | 
| associatedMusicalArtist |     35371 | 
| artist                  |     98762 | 
| producer                |     96997 | 
| reviews                 |     35207 | 
| recordDate              |     24784 | 
+-------------------------+-----------+

I used the DBpedia infobox data from this post: “DBpedia – Rethinking Wikipedia infobox extraction“, kindly provided by Georgi Kobilarov. The data linked to in that post is much more suitable for my requirements than previously available DBpedia infobox data – instead of multiple predicates for birth date – birthDate, dateBirth, dateOfBirth, birth…, they’ve been mapped to dbpedia:Person#birthdate. Wonderful!

To handle the occasional /uXXXX, I used Unicode::String and Unicode::Escape, by Gisle Aas and Hitoshi Amano respectively.

The script could be improved: though the Wikipedia Pages and DBpedia Infobox Predicates are fine, some of the subjects are rather … interesting. As I’m currently only interested in the 200 most frequently occuring predicates, I haven’t put more time into smoothing out some of the more interesting subject data. If anyone makes changes to the script, please let me know and I’ll update this post.

Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

#!/usr/bin/perl
 
###################################################################################
#
#	Parse out the Wikipedia page title, the DBpedia Infobox Relation and the subject from the infobox.nt file.
#
#	Inserts data into a MySQL database tables with the structures:
#	
#	infoboxes
#
#	+-----------+--------------+------+-----+---------+----------------+
#	| Field     | Type         | Null | Key | Default | Extra          |
#	+-----------+--------------+------+-----+---------+----------------+
#	| id        | int(11)      | NO   | PRI | NULL    | auto_increment | 
#	| predicate | varchar(255) | YES  |     | NULL    |                | 
#	| subject   | varchar(255) | YES  |     | NULL    |                | 
#	| page      | varchar(255) | YES  |     | NULL    |                | 
#	| type      | int(1)       | YES  |     | NULL    |                | 
#	+-----------+--------------+------+-----+---------+----------------+
#
#	predicateFrequency
#
#	+-----------+--------------+------+-----+---------+-------+
#	| Field     | Type         | Null | Key | Default | Extra |
#	+-----------+--------------+------+-----+---------+-------+
#	| predicate | varchar(255) | NO   | PRI |         |       | 
#	| frequency | int(6)       | YES  |     | NULL    |       | 
#	+-----------+--------------+------+-----+---------+-------+
#
#	
#	To output to a CSV file, uncomment lines beginning with "#@#"
#	
#	DBpedia infobox.nt downloaded from: http://blog.georgikobilarov.com/2008/10/dbpedia-rethinking-wikipedia-infobox-extraction/
#
#	Script written by Michael Robinson - faceleg - http://pagesofinterest.net/
#
#	Contact: mike@pagesofinterest.net
#
####################################################################################
 
use strict;
use warnings;
use DBI;
use DBD::mysql;
 
####################################################################################
#
#	Unicode: 		http://search.cpan.org/~gaas/Unicode-String-2.09/String.pm
#	Unicode::Escape:	http://search.cpan.org/~itwarrior/Unicode-Escape-0.0.2/lib/Unicode/Escape.pm
#
####################################################################################
use Unicode::Escape qw(escape unescape);
 
#Database details
my $username = '';
my $pass = '';
my $db = 'wikipedia';
my $querystring;
 
#connect to database
my $dbh = DBI->connect( "dbi:mysql:$db", $username, $pass, { 'PrintError' => 1, 'RaiseError' => 1 } );
 
my $lost = 0;	# amount of entries that are "lost" due to crazy formatting.
 
#File & directory declarations
my $dir = "/path/to/":
my $DBpedia = "infobox.nt";
#@#my $CSV = "cleanedRDF.csv";
 
###################################################################################
#
#	Decode URL encodings	
#
#	thanks to: http://glennf.com/writing/hexadecimal.url.encoding.html
#
###################################################################################
sub URLDecode {
	my $theURL = $_[0];
	$theURL =~ tr/+/ /;
	$theURL =~ s/%([a-fA-F0-9]{2,2})/chr(hex($1))/eg;
	$theURL =~ s/<!–(.|\n)*–>//g;
	return $theURL;
}
 
###################################################################################
#
#	If a string begins with 0 or more white spaces and ", and ends with " and 0 or more white spaces, remove the white spaces and ".	
#
###################################################################################
sub deQuote {
	my $deQuoted = $_[0];
	if($deQuoted =~ /^\s*".*"\s*$/){
		$deQuoted =~ /\s*"(.*)"\s*$/;
		return $1;
	}
	else{ return $deQuoted; }
}
###################################################################################
#
#	Inserts data into MySQL table
#
###################################################################################
sub doInsert {
	if($3 && $3 !~ /^\s*$/ && $3 ne ""){	#make sure the subject isn't empty... in theory - doesn't seem to work for radio station: frequency...?!
		#insert triple into infoboxes table
		$querystring = "insert into infoboxes (page,predicate,subject) values(";
		$querystring.= $dbh->quote(URLDecode($1)).",".$dbh->quote(deQuote(URLDecode($2))).",".$dbh->quote(deQuote(unescape(URLDecode($3)))).")";
		$dbh->do($querystring);
 
		#insert or update data in predicateFrequency table
		my $predicate = $dbh->quote(deQuote(URLDecode($2)));
 
		$querystring = "INSERT INTO predicateFrequency(predicate,frequency) VALUES($predicate,0) ON duplicate KEY UPDATE frequency=frequency+1";
		$dbh->do($querystring);
	}		
}
# go through dbpedia infobox relations
open (IB, $dir.$DBpedia);
#@#open (CSV,'<'.$dir.$DBpedia);
 
while(<IB>) {
 
	chomp;	#offer a byte sized sacrifice to the great compiler
 
	###################################################################################	
	# 
	#	Wikipedia page title should not be dequoted!
	#	
	#	Split into elements 
	# 	$1 = Wikipedia Page
	# 	$2 = Predicate
	# 	$3 = Object
	#
	###################################################################################
	#
	#
	#	standard triple, no extra screwing about required.
	#
	###################################################################################
   	if($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>\s<http:\/\/dbpedia.org\/resource\/(.*)>.*/){ 
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}	
	###################################################################################
	#
	#	standard triple with date, remove trailing declaration.
	#
	###################################################################################	
	elsif($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>(.+)\^\^<http:\/\/www.w3.org\/2001\/XMLSchema#date>\s\./){ 
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}
	###################################################################################
	#
	#	"Differently" presented data
	#
	###################################################################################
	elsif($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>(.+)\s\./){ 	
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}
	else{
		$lost++;
	}
	#@#print CSV "\n"; 
}
 
close(IB);
#@#close(CSV); 
$dbh->disconnect;
 
#let the world know how many we dropped
print $lost;

Tags: DBpedia, MySQL, Perl, Tutorial - 教程, Wikipedia

Today it occurred to me that Thunderbird 2 is pretty old, so I looked into Thunderbird 3’s progress.

I stumbled across a thread on Nabble that contained a link to a mozilla PPA that included Thunderbird 3 Beta versions.

You can find it here:

PPA for Ubuntu Mozilla Daily Build Team

To install it, open a Terminal, then follow the steps below:

Backup your sources list:

sudo cp /etc/apt/sources.list /etc/apt/sources.list_bak

Backup your Thunderbird 2 profile (if you’ve been using it):

mkdir /home/<username>/.mozilla-thunderbird_bak
cp -R /home/<username>/.mozilla-thunderbird/* /home/<username>/.mozilla-thunderbird_bak/

Open the list in gedit:

sudo gedit /etc/apt/sources.list

Scroll to the bottom of this file and paste the repository location (the selected lines in the below image). Make sure you select the version of Ubuntu that you’re using!

Save then close sources.list.

Add the GPG key:

sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com EF4186FE247510BE

Update package information:

sudo apt-get update

If you get an error here, repeat the GPG key add step, replacing the above key with the key reported in the error message.

Now install Thunderbird 3!

sudo apt-get install thunderbird-3.0

When that’s done, you’ll be able to access it at: Applications -> Internet -> Shredder 3 Mail/News.

If you want to change the icon:

sudo gedit /usr/share/applications/thunderbird-3.0.desktop

Replace the text following Icon= with a path to your image file. For example:

...
Icon=/home/faceleg/.icons/hydroxygen/128x128/apps/thunderbird02.png
...

Save and close the file.

Have fun!

Tags: Thunderbird, Tutorial - 教程, Ubuntu

JDownloader is an excellent download manager. When I had a Mac I used Speed Downloader, but when the free trial period ran out I switched back to DownThemAll, a download manager plugin for Firefox.

The only thing I missed about Speed Downloader was its ability to store my Rapidshare Password: a feature not supported by DownThemAll – no more returning to the computer to find my downloads folder filled with useless .html files as I’d forgot to make sure the Rapidshare Cookie was set… JDownloader can not only store one’s Rapidshare details, it can store details for just about every other download service imaginable.

JDownloader also has an option to capture the clipboard – copy a link and it will automatically open a “Add download” window – surprisingly useful. Downloads can be organised into packages. JDownloader will attempt to unpack compressed files automatically (there is an option to turn this off).

It’s pretty great – I’m sure it’ll give whatever download manager you’re currently using a run for your money.

Installing it (properly) in Ubuntu:

If you’re using a flavour of (Ubuntu) linux, you may want to set JDownloader up so you don’t have to start it by right-clicking on “JDownloader.jar” and selecting “Open with Sun Java JRE”. I know I did.

How to ‘install’ JDownloader:

This tutorial assumes you have Java installed and working. If you don’t have Java installed: How to Install Java in Ubuntu.

Download JDownloader, extract it to your Desktop. Download a JDownloader icon, rename it to “JDownloader.png” and put it in the JDownloader folder.

Open a Terminal (Accessories -> Terminal).

Create a JDownloader install directory:

sudo mkdir /opt/JDownloader

Move the extracted files to their new home (replace “X” with version number):

sudo mv ~/Desktop/JDownloader\ X.X.XXX/* /opt/JDownloader/

Change their ownership:

sudo chown -R $USER:$USER /opt/JDownloader
 
sudo chmod -R +r /opt/JDownloader

Make the JDownloader.jar file executable:

sudo chmod +x /opt/JDownloader/JDownloader.jar

Make JDownloader runnable from Terminal:

sudo touch /usr/local/bin/JDownloader
sudo nano /usr/local/bin/JDownloader

This opens the file for editing within the Terminal. Paste the following:

#! /bin/sh
java -jar /opt/JDownloader/JDownloader.jar

To save and close the file, press CTRL + X, then Y, then ENTER.

Make a menu item for JDownloader:

sudo nano /usr/share/applications/JDownloader.desktop

Paste the following:

[Desktop Entry]
Encoding=UTF-8
Name=JDownloader
Comment=Download Manager
Exec=java -jar /opt/JDownloader/JDownloader.jar
Icon=/opt/JDownloader/JDownloader.png
Terminal=false
Type=Application
Categories=GNOME;Network;
StartupNotify=True

Enjoy!

Credit to Kmassada for his post about installing Eclipse 3.4

Tags: JDownloader, Tutorial - 教程, Ubuntu

It took me awhile to understand what the ‘path’ attribute was for, and the differences between it and the ‘permalink’ attribute. I couldn’t find a clear explanation that explained the differences, and how one should use these attributes. I’ll explain the differences and how I use the attributes here.

Both attributes should be used for the ratings and comments widgets.

The ‘permalink’ attribute should be the full URL linking to the page that this widget mostly relates to. For this post:

permalink='http://pagesofinterest.net/blog/2009/03/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes/'

JS-Kit will use this attribute to link back to the page the widget mostly relates to, both in that page and elsewhere. In emails alerting people that their comment has a reply, in a page’s comment rss feed, in the most recent JS-Kit comments script, or anywhere else a link to the most relevant page is required.

The ‘path’ attribute is a different story. This attribute must start with ‘/’. This is because the ‘path’ attribute is appended to a site’s comment rss URL to give that widget’s comment rss – to view the comments rss for the whole site, go to the base comment rss URL. If a character other than ‘/’ is used, the comment rss for that page won’t work – see this example.

The ‘path’ attribute needs to be unique to the site. This means that no widgets should accidentally share the same ‘path’ attribute. If one wants a widget to be displayed elsewhere on the site, that widget’s ‘path’ attribute should be used. For example:

Code*:

1
2
3
4
5
6
7
8
9

<div style="text-align:center;">
	<a href="http://pagesofinterest.net/code-of-interest/">Slider's</a> User Rating:	
	<br />
	<br />
</div>
<center>
	<div style="text-align:center" class="js-kit-rating" title="Slider" view="split" starColor="Golden" permalink="http://pagesofinterest.net/code/of_interest.php" path="http://pagesofinterest.net/code/of_interest.php/slider">
	</div>
</center>

Result:

The ‘path’ attribute is what JS-Kit uses to differentiate between a site’s different widgets – if there was no way for JS-Kit to do this, then each widget on a site would always show the same data! The ‘path’ attribute for this page’s comments/ratings widget:

path='/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes'

Correct use of these attributes allows one to display different widgets, with their own comment/rating information on the same page.

To display one JS-Kit Comments/Ratings widget in each blog post, one could do the following:

At the base of each post:

1
2

<div view='split' class='js-kit-rating' title='Title of Post' permalink='http://the-path-to-this/posts/permalink.html' path='/unique_path' starColor='Golden'></div>
<div class='js-kit-comments' path='/unique_path' permalink='http://the-path-to-this/posts/permalink.html'></div>

Note the ‘path’ for the comments and ratings widget are identical.

And once per page (Rapid Weaver users can paste this into the custom footer field):

1
2

<script src='http://js-kit.com/comments.js' type='text/javascript'>
</script><script src='http://js-kit.com/ratings.js' type='text/javascript'></script>

As long as you’ve used different paths, the comments/ratings should display correctly. Because of the path attribute, you’ll be able to change the permalink at any time, and the comments/ratings will remain the same (as long as you don’t change the path). I’ve done this for every blog post!

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Recent Comments PHP Script
Styling JS-Kit Comments

*Please forgive my lazy use of the center tag.

Tags: JS-Kit, Tutorial - 教程

Yesterday I was trying to implement a Shadowbox contact form in the Bay of Islands SPCA site, but I just couldn’t get it to work. I was using the standard setup that works perfectly well on the Te Kuiti SPCA Site:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript" src="http://tekuitispca.org/sb/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
Shadowbox.loadSkin('classic', 'http://tekuitispca.org/sb/skin');
Shadowbox.loadLanguage('en', 'http://tekuitispca.org/sb/lang');
Shadowbox.loadPlayer(['iframe'], 'http://tekuitispca.org/sb/player');
 
window.onload = function(){
 
    var options = {
        initialWidth:     '0',
        initialHeight:    '0'
    };
 
    Shadowbox.init(options);
    }
 
</script>

And the HTML:

<a href="http://www.tekuitivets.co.nz/" rel="shadowbox;initialHeight=0;initialWidth=0;width=900;height=700;" title="Atkinson &amp; Associates Vet Clinic">Atkinson &amp Associates Vet Clinic</a>

I uploaded all the files, changed the addresses in the above code. Strangely, it worked find in Rapid Weaver, but not in Safari, Firefox, Epiphany or any other browser – either in export mode or after a full upload. My search for “Shadowbox just won’t work!” yielded no results, so was forced to use the programmer’s final weapon – exhaustive trial and error.

I tried various things for about an hour, and finally struck gold with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script type="text/javascript" src="http://boispca.org/sb/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
	Shadowbox.loadSkin('classic', 'http://boispca.org/sb/skin');
	Shadowbox.loadLanguage('en', 'http://boispca.org/sb/lang');
	Shadowbox.loadPlayer(['iframe'], 'http://boispca.org/sb/player');
 
	jQuery(document).ready(function(){
 
		var options = {
		initialWidth:     '0',
		initialHeight:    '0'
		};
 
		Shadowbox.init(options);
 
		jQuery("#contact-us").click(function(){
			Shadowbox.open({
			        player:     'iframe',
			        title:      'Contact Us',
			        content:    'http://boispca.org/contact/',
			        height:     500,
			        width:      400
			    });
		    return false;
		});
	});
 
</script>

And HTML:

<a href="http://boispca.org/contact/" id="contact-us" title="Contact" >Contact</a>

Now whenever one clicks the contact button, Shadowbox is called through jQuery.

I don’t know why the normal way didn’t work!

Tags: Fix, jQuery, Rapidweaver, Shadowbox

Jealous of people able to display their blog’s recent comments in the sidebar, I wrote this little script.

It reads recent posts from your site’s comment rss feed and prints n comments out in a nicely formatted div. Using it is as simple as changing one line, uploading the file, and pasting some code wherever you want the recent comments to be displayed.

I tried to make a javascript version, but I the cross-domain AJAX issue thwarted my attempts. Instead I wrote it in PHP – if you don’t have PHP enabled on your hosting then you won’t be able to use this script, sorry!

To use the script, first download it.

Open the file in a text editor. Change the ‘$commentsRSS’ value to your JS-Kit Comments RSS URL. This is the line:

4

$commentsRSS = 'http://rss.pagesofinterest.net/';	//change this to your comments rss feed

To find your RSS URL, look here: Customizing JS-Kit Comments. Scroll until you see “Setting up the RSS”.

Once you’ve changed that variable, rename the file to “recent-comments.php”, and upload it to your server.

Take note of where you uploaded it to.

Paste

< ?php include('PATH_TO/recent-comments.php') ?>

wherever you want your recent comments to be displayed.
Change “PATH_TO” to the path to the file, e.g. “http://pagesofinterest.net/code/download/recent-comments.php”. Remove the whitespace between < and ?.

Save, then load the page in your browser. You should see your recent comments displayed wherever you pasted the code.

If you see a strange error message instead, try pasting the contents of the recent-comments.phps file wherever you want the recent comments to be displayed, instead of the above “include” statement.

Any problems, leave a comment and I’ll try to help.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Comments, JS-Kit, PHP, Tutorial – 教程

I joined Twitter yesterday, and installed the Twitter Tools plugin.

Unfortunately, the “Post from sidebar” feature was broken for me. I think this was because my Wordpress installation is in a different directory from the actual blog, and Twitter Tools was looking in the wrong place for class-snoopy.php.

To fix it, I had to edit one line in the “do_tweet($tweet = ”)” function of the twitter-tools.php file.

I changed the 7th line of this function to:

require_once('/home/a_folder/public_html/wordpress/wp-includes/class-snoopy.php');

Fixed!

If you experience this problem, replace “/home/a_folder/public_html/wordpress/wp-includes/” with the path to your Wordpress installation’s class-snoopy.php file.

Tags: Fix, Twitter, Wordpress

I’ve updated the Fancy Footer snippet, now Trackbacks/Pingbacks will be able to find your posts – the previous version’s implementation was … lacking.

The previous snippet used the post permalink as both the permalink and the path – the Trackback/Pingback system didn’t like “http://“ being included in the path attribute.

I was afraid that I wouldn’t be able to find a solution that allowed us to have Trackback/Pingback support and keep our existing comments.

I am glad to say that my fears were unfounded, and I managed to come up with a solution. The snippet now parses out the “http://domain.com” part of the permalink, and uses that for the path attribute for the widgets. Happily, JS-Kit must do a similar thing, as it hasn’t messed up my comments (the path attribute is what JS-Kit uses to determine what page to display which comments).

The snippet may be downloaded here. To learn how to use this snippet, read Fancy Footer – Usage and Tips.

Tags: PHP, Rapidweaver, Snippet - 小片

This post aims to give some tips and guidance on how to style JS-Kit Comments, so they closely match your blog’s theme.

I’ve used an external CSS file to style my comments. If you’re like me, you won’t want to read the rest of this tutorial, and would rather view the stylesheet directly.

Styling JS-Comments is really quite straightforward. I strongly recommend you read this post before moving on, as it contains tips on resizing JS-Kit elements, such as the width/height of comments, among other things.

Use of an external CSS sheet is advised, as it will allow the reader to apply the same styles site-wide with minimum hassle.

Stylesheets should be edited using your favourite text-editor. If you don’t have a favourite, I recommend Text Wrangler, which is an excellent (and free) editor.

I’m just going run through the stylesheet used to style my comments, as the possibilities are too numerous for me to list here. I encourage you to experiment – it is one of the best ways to learn CSS.

The relevant selectors are:

1) .js-singleComment
2) .js–comment-stripe-1
3) .js-singleCommentDepth0
4) .js-singleCommentDate
5) .js-siteAdmin

Note that the full list of selectors can be found using the FireBug addon combined with Firefox.

The first three selectors allow us to apply styling such that the first message of a thread will have style x, the next message will have style y, the next message will have style z, next style y, next z… This is not only pretty, but also makes it easier for the reader to quickly determine where a thread began, and clearly defines the boundary between each comment.

Here is the styling that I have applied to selector #1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.js-singleComment {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
background: #ECF4FF;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles all comments that are: not the first comment of a thread, even numbered.

The first two lines give rounded corners in Safari 3 and Firefox 3.

The four lines below that control the background colour and the image that gives the shadow effect, implying that the comment is ‘œbelow’ the previous comment.

The next four lines control the borders – note the lack of a top border, which is taken care of by the image I’ve used.

Finally, the comment has some padding applied to it. I did this as the rounded corner combined with the top shadow image made text difficult to read in some places.

The styling I have applied to selector #2 is:

1
2
3
4
5
6
7
8
9
10
11
12

.js-comment-stripe-1 {
background: #E4EDF2;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles comments that are: not the first comment of a thread, are odd.

The styling format is identical, I’ve just used different images and colours.

The styling I have applied to selector #3 is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.js-singleCommentDepth0 {
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius-bottomleft: 11px;
background: #fff;
background-image: url('http://pagesofinterest.net/images/comments_border.png');
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 13px;
color: #333;
border: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles the first comment of each thread.

This time, the first 4 lines control rounded borders.

The background image is now used to give the pleasing graduation effect at the bottom of the comment box, and the background colour is white.

The whole box has a border applied to it, and I’ve given the top a margin of 13px. This margin further differentiates the comment from any previous thread.

The padding is the same.

The styling for the final 2 selectors is:

1
2
3
4
5
6

.js-singleCommentDate {
font-style: italic;
}
.js-siteAdmin {
color: black;
}

The first styles the date, the second gives the Admin’s name a different colour.

And finally, upload your CSS file to your server, and include the following BELOW the JS-Kit Comment’s insertion code. It is important that the CSS is included after the JS-Kit code.

<link rel="stylesheet" type="text/css" media="all" href="PATH_TO/jskit.css" />

This will break XHTML validation, as the link tag is strictly not allowed anywhere but the head. For me the price is worth paying.

I hope you have fun styling your comments!

To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘˜Permalink’ and ‘˜Path’ Attributes
Recent Comments PHP Script
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Customization - 用户化, JS-Kit, JS-Kit Comments, Programming - 编程, Rapidweaver, Tutorial - 教程

The following are the exact steps I took to get OpenCyc running in Ubuntu 8.10. Without this thread I wouldn’t have been able to do it.

1) Install Java. In a Terminal:

~$ sudo apt-get install sun-java6-jre

2) Download OpenCyc

3) Unpack the downloaded file and move the folder to whatever directory

4) Within the OpenCyc folder, locate the “scripts” folder and open it. Open each script in Gedit and change the first line from*:

#!/bin/sh
to:
SHELL = /bin/bash

*Taken from DashAsBinSh.

5) In a Terminal, cd to the OpenCyc/scripts directory, then do:

(for 64 bit)

~$ echo SuSE-9.2-x86_64 > platform-override.txt

(for 32 bit)

~$ echo SuSE-9.2-x86_32 > platform-override.txt

Finally:

~$ ./run.sh

Note that the first time OpenCyc is run you may be in for a long wait – it took about 10~15 minutes on my laptop.

When it is finally finished loading, point a browser to:

Tags: AI - 人工智能, Cyc, OpenCyc, Tutorial - 教程, Ubuntu