Chaos Laboratory

A brief intro…

Past few weeks I’ve been extremely busy designing a Property Investment site for a client. The primary requirement was a custom CMS (Content Management System) – which I had to build from scratch. While it drove me over the edge at times overall it was a thoroughly enjoyable as well as an educational journey for me. Since this is a site that caters to foreign investors, one of the requirements was a Currency Conversion Calculator which could be embedded in any of the articles thus providing the visitors an opportunity to get an idea of the property prices in their native currencies, without having to leave the page. At first I sought the easy way out – i.e. I searched far & wide for a currency calculator service that’d allow me to convert between almost any of the world currencies. Unfortunately the free ones out there are really pathetic and the my client wasn’t willing to shell out any $$ for a paid service. That got me down to designing one on my own. I’ve been dabbling in AJAX for a while now and find the whole idea of RIA (Rich Internet Application) really attractive. So I decided to walk the AJAX way and came up with this cool-tool. Once done with the main project, I was so satisfied with the result that I thought it’d be a really good idea to convert it into a sidebar widget for WordPress. So here I am, with curreX – the Ajax based Currency Converter for WordPress.

Current Version

• 0.9

Features

• The widget is very simple and does exactly what it’s supposed to do. It accepts a currency value (integer or decimal) and a source & destination currency and gives you the converted rate once you hit the Convert button.
• It employs an AJAX back-end, i.e. the conversions are performed without having to refresh the whole page, making the tool really lightweight & fast. Looks cool too.
• Performs client-side validation of the amount entered – thus cutting out chances of entering an erroneous value and crashing the calc. midway while performing a conversion.

Requirements

• WordPress 2.x
• WordPress Sidebar Widgets Plugin in case you’re using WordPress 2.1.x or below. This is not required, if you’ve WordPress 2.2.x installed.

Download

curreX  (99.5 KiB, 5,951 downloads)

Installation

Installation couldn’t get any easier. Once downloaded, simply…

1. Unzip the archive.
2. Copy the extracted folder named curreX into your WordPress plug-ins folder.
3. Activate the plug-in from the Plug-in Manager in WordPress.
4. Visit the Sidebar Widgets page under Presentation menu to drag & drop the widget onto any sidebar you desire.

That’s it…

For those who’re using curreX with non-widget-enabled themes, you should insert the function
< ? show_currex( default_from, default_to, decimal_places, type, title ); ?>
in an appropriate place. For further details on this function & it’s parameters, refer to the FAQs section of the readme.txt bundled in the distribution.

Demonstration

A live demonstration of this can be found under the Coding section of my blog. Though the implementation of the demo is slightly different (it’s hard-coded into in a page), it should give you an idea on what the widget can do.

Showcase (the widget in action)

• GoBackpacking
• Hua-Hin Live – A customised version of the plug-in can be seen in action in the property list pages, once you’ve searched for properties

Subversion Repository

• curreX: SVN Check-out Link (Anonymous check-outs permitted)

Change Log

• Version 0.9 (2008-06-22)
  • Added Flash based Widget support. Now one has the option of choosing between the HTML/JavaScript version or the Flash version from the widget configuration panel of WordPress.
  • The structure of the show_currex() function (for non widget-enabled themes) has changed slightly too – to support embedding of the flash widget.
• Version 0.8 (2008-06-19)
  • While releasing version 0.7 I had made some changes in the path structure (reference to any additional files that were loaded in the background) – and I messed up a bit there. As a result, the core javascript module that fetched the conversion rates and performed the calculations wasn’t loading properly.
  • Fixed some minor CSS issues. Now the look & feel of the widget can be modified in its entirety through the accompanying CSS file.
• Version 0.7 (2008-05-16)
  • Added the functionality to display curreX in non-widget-enabled themes too (by popular demand). Till version 0.6, this plug-in could only be used in the form of a widget with widget-enabled themes.
• Version 0.6 (2008-05-11)
  • This is a complete port to jQuery. Decided to finalise on one ajax library and jQuery emerged the winner. No more Protoculous for me.
  • Split out the styling into a separate CSS file. Anyone with even a bit of CSS knowledge, can now easily alter the looks of the widget without having to touch the core code file(s).
  • Implemented BlockUI – a jQuery plugin that blocks the widget interface while performing a currency conversion routine (ajax based).
  • Included a HELP option, that leads directly to the Chaos-Lab Forums (curreX Subforum)
• Version 0.5 (2007-09-21)
  • Minor fix – but at the same time a major one from the perspective of functionality. The back-end URL for fetching conversion data from Yahoo! Finance had changed from finance.yahoo.com to download.finance.yahoo.com. This caused the plug-in to generate a message saying “Error contacting Yahoo! Finance” and not work at all. Thanks to Lia Johnston for pointing me to the correct URL.
• Version 0.4 (2007-03-15)
  • Fixed a minor bug that caused incorrect version reporting in WordPress plug-ins management panel.
• Version 0.3 (2007-03-15)
  • Bundled prototype.js library along with the distribution instead of relying on a theme to have it. This way the latest version of prototype can always be bundled along with.
  • Made some minor changes in the layout for smoother functionality & improvement of looks.
  • Renamed a bunch of plug-in related variables to avoid name collision with other plug-ins.
• Version 0.2 (2007-03-05)
  • Fine tuned the widget. Now the currency unit values are written off an array instead of the ungainly manual approach that was being used earlier on. This reduced the file-size of the main plug-in considerably despite adding new code.
  • Added the configuration section. One can now set the default currency units to be displayed when the widget loads (from & to).
  • Added a Decimal Place option, which defines the number of decimal places to show in the converted result.

Please Note

I offer support for my plug-ins via the Chaos Laboratory Support Forum only. I will NOT respond to support queries left in the comment section below and, in most cases, will also not publish them. Of course, if you’d like to say something nice or helpful, then feel free to leave a comment!

If you find this plug-in useful, please consider making a donation towards further development of this useful little utility.

Alternatively, you can help me by reviewing this post by clicking on the following link. Believe it or not, this will help us both earn some cash from PayPerPost.

Mar 01st by miCRoSCoPiC^eaRthLinG

Continue Reading

Following the tutorial(s) I posted on creating OpenSearch plug-ins for Firefox that can search Invision Power Board based forums & WordPress blogs, I received quite a few requests for help in creating such plug-ins for a wide variety of blogs/CMS/sites.

To make the job easier for all of you, I decided to create a couple of sample plug-ins, which I’ll list here as zip files. The zip will contain…

• An XML file – which contains the actual plug-in code
• A sample HTML file, which shows how to display a plug-in installation link on your site, as well as how to enable auto-discovery of the same by Firefox & IE7

Simply go through those files and replace the appropriate fields. In most cases, all you’ll need to modify is the actual URL to your site and the Author details. While setting up the plug-in at your site, feel free to put your name as the author’s name in it. No credits are required

I’ll try to cover as much ground as possible and update this list frequently. At the moment, the list isn’t so “wide” as I claimed in the title and if you don’t find a suitable plug-in here, check back at a later point of time, or just drop me a line at:

To start with, I’ll list the plug-ins I’ve received the maximum number of requests for…

Plug-ins List

Content Management Systems

1. Mambo CMS based Sites
   
2. Joomla CMS based Sites

Bulletin Board Systems

1. Invision Power Board based Forums

Blog Softwares

1. WordPress based Blogs

Miscellaneous Sites

1. iPodNova Torrent Search
2. BlogSpot based Blogs
3. PsyDB – Psychedelic Trance Database

Jan 14th by miCRoSCoPiC^eaRthLinG

Continue Reading

In my earlier tutorial titled Creating OpenSearch Plugins for Firefox (adds to the QuickSearch bar) I taught you how to write a basic OpenSearch XML format plug-in that can be used with both Firefox 2.x and IE7. The demonstrated example consisted of creating a plug-in that searches through Invision Power Boards.

As an afterthought, I felt like coming up with another quick tutorial on creating the same for WordPress. I won’t spend any time on explaining the components of the plug-in and hence you’re advised to go through the tutorial first before continuing with this. This post is merely an example of how-to modify the code shown earlier on to perform searches on WordPress.

If you ever notice the URL in the address bar when you perform searches using the internal search engine of WordPress, you’ll find the the index.php page is being called along with a variable called “s“, which contains the keywords. Say for instance, you are searching for the term “Firefox” .. the syntax will be …

http://www.domain.com/index.php?s=Firefox

If you refer to the tutorial you’ll see that we can pass on variable-value combinations to a URL using the Param tags. That’s the only parameter you need to pass for WordPress searches. I’ll cite the XML code of my site’s plug-in as an example. It should be self-explanatory.

	ChaosLab
	Chaos Laboratory: Blog Search
	miCRoSCoPiC^eaRthLinG
	microscopic.earthling@gmail.com
	open
	false
	en-us
	UTF-8
UTF-8
	
	http://www.chaos-laboratory.com/favicon.ico
	

	
	http://www.chaos-laboratory.com/index.php

Notice, how I’m passing the keywords in the form of the dynamic variable {searchTerms}.

Any questions ??

Jan 07th by miCRoSCoPiC^eaRthLinG

Continue Reading

A brief introduction

This tutorial will attempt to explain in a simple manner how to create an OpenSearch plug-in for Firefox. These plug-ins appear in a drop-down menu in the Firefox Quick-Search bar (located right of the URL/Address bar) and help you perform quick searches across various search engines without having to visit the search page first. Pretty neat, eh?

These search plug-ins were in existence (for Firefox) for a long time. But only with the introduction of Firefox 2.0, the OpenSearch standards have been adopted.

OpenSearch is a collection of simple formats for the sharing of search results.

The OpenSearch description document format can be used to describe a search engine so that it can be used by search client applications.

The OpenSearch response elements can be used to extend existing syndication formats, such as RSS and Atom, with the extra metadata needed to return search results.

The example I’m going to demonstrate searches Invision Power Board (Bulletin Board System). You can make this plug-in perform searches on virtually any other Blogs / Bulletin Board / Content Management System / Search Engine with just some minor modifications in the way the search URL (along with keywords) is sent to the search engine. Here’s a screen-shot of two such plug-ins I’ve created for Astahost & Trap17 forums powered by IPB (Invision Power Board).

Advantages

There are quite a few advantages of shifting to the new OpenSearch format for these plug-ins, namely …

• OpenSearch plug-ins are universally supported across many browsers & search clients. Specially worth a mention here are Firefox and IE7 !!
• OpenSearch supports Autodiscovery of the plug-in, which means you don’t really have to instruct the user to click on a link on your site to install the plug-in. The search client can auto-discover the plug-in script based on a link provided between the HEAD tags of the page.If you wish to, the old-school click & install method can still be implemented.
• A lot of recent Blogs / CMS / BBS etc. softwares have started supporting the OpenSearch API, which provides a flexible common standard for XML based searches. A list of such software can be found here.

Without further ado, lets get down to business …

The actual plug-in

The OpenSearch plug-ins consist of a single XML file called the OpenSearch Description File. It follows a very simple syntax as shown below:

	engineName
	engineDescription
inputEncoding
	outputEncoding
	
	


	
	searchFormURL

Most of the tags here need to be customised according to the Search Engine you’re going to use with the plug-in. Here’s what you need to modify here.

engineName

engineName enclosed within the ShortName tags specifies the name of the Search Engine as it’ll show up in the dropdown list. Replace this with the name of your Search Engine.

engineDescription

engineDescription enclosed within the Description tags shows up as a brief description of the Search Engine. Replace this with a suitable description.

inputEncoding

inputEncoding enclosed within the InputEncoding tags declares the encoding to use for search string / keywords you provide for a search. The search string is encoded in this format prior to sending to the Search Engine. Your best best is to use UTF-8 here to declare it as Unicoded text that’ll cover the whole Unicode Character Set.

outputEncoding

outputEncoding, enclosed within the OutputEncoding tags acts similar to InputEncoding and declares the character set to be used for producing the search results output. Even here the best used option is UTF-8.

Image

Enclosed within the Image tags, this specifies the image / icon to be used for the Search Engine. This icon turns up next to the search engine name in the dropdown list and also shows up to the left of the quick-search bar. The image is usually in a 16 x 16 pixels format.

The image data can be provided in two formats:

1. As a direct URL link to the location of the image file (gif/jpg/png etc.)
2. As base64 encoded data which can be embedded in the plug-in directly. This I believe, is a more elegant way of doing it. However, I couldn’t make it work properly for me. The image simply refused to turn up and hence I’d to resort to method 1.There’s a very good tool at URI Kitchen that encodes any uploaded image in base64 format. The encoded data can then be directly embedded in the plug-in.

Url

Enclosed within the Url tags, this provides the actual location of the Search Engine page. The method attribute defines whether to use GET or POST for fetching the data, while the template attribute points to the location of the search query page. NOTE, that IE7 doesn’t support the POST method and hence to make your plug-in compatible with both IE7 and Firefox, you should ideally use GET here.

Param

Further nested within the Url tags lie a series of Param tags which have two attributes – a name and a value. These act as parameters which are passed to the search engine while performing a query. This too, isn’t supported in IE7. However, you can use a dynamic variable called {searchTerms} to pass on keywords.

Say for instance, I’m searching Invision Power Board based forums. The standard search string in IP takes the format,

http://www.domain.com/index.php?act=Search&CODE=show&searchid=xxx&search_in=posts&result_type=topics&highlite=keywords

If you study the URL carefully, you’ll notice that there are a couple of variables like act, CODE etc. which appear every time along with same values. You can use Param tags to define key-value pairs for these variables, which will then be passed onto the Search Engine during a query.

The actual search keywords (as mentioned before) are available through a variable called {searchTerms}. IPB supports a variable called keywords in the search string and hence you can define a key-value pair like…

… to pass the keywords. Here’s a full working example of the plug-in I created for Astahost forums…

	AstaHost
	AstaHost: Search the Forums
	miCRoSCoPiC^eaRthLinG
	microscopic.earthling@gmail.com
	open
	false
	en-us
	UTF-8

UTF-8

	http://plugins.astahost.com/splugins/astahost.gif
	






http://www.astahost.com/index.php

Here you’ll notice several other tags like Developer, Contact, SyndicationRight, AdultContent etc. which I haven’t discussed in this article. A detailed outline of all the OpenSearch tags can be found at: OpenSearch Description Elements.

Autodiscovery

If you recall I’d discussed a feature called Autodiscovery earlier on. This helps search clients automatically discover a plug-in embedded in your page. The process is quite simple. All you’ve to do is include a special LINK statement in the HEAD part of your page.

You simply need to modify the title and the href link to the actual plug-in file.When you visit a site with the plug-ins set to be auto-discovered, here’s how the drop-down menu in the quick-search box will look like…

Adding the plug-in Programmatically

You can also include the plug-in on your page in a click-and-install manner. The process has been simplified. All you need to do is provide a link to install the plug-in on your page and in the link, add the window.external.AddSearchProvider() JavaScript statement. Example is shown below.

	Link Text

Clicking on this link will cause Firefox to pop-up a dialog box asking the visitor for a confirmation of plug-in installation. Example of the dialog box …

Working examples can be found at the Astahost Plug-ins Page.

Any questions / confusions ?? Feel free to leave a comment and I’ll make sure to get back to you.

Jan 07th by miCRoSCoPiC^eaRthLinG

Continue Reading