This is something I developed for Train, The PM system requires that the user type in the username of the intended recipient , this is a perfect place to use Auto Completetion.

After a bit of searching i discovered that you can do auto completetion in rails, but it uses prototype, which aside from being obtrusive would get in the way of all the jQuery stuff i have in Train already.

So i decided to write something in jQuery myself. When you think about it using jQuery there are only a few things that you need:

• A text field that you want to search with
• A div to display results in
• An Ajax request that gets triggered on text entry
• An Ajax response with the results in

So lets first create a javascript document that will serve as our Auto Completetor. The code on this page should look something like this:

$(document).ready(function(){
$('#message_receiver_id').keyup(function(){
		if($(this).val()==""){
			$('#auto_complete_results').html("")
		}else{
			$.getScript('/users?search=' + $(this).val());
		}
	});
	$('#auto_complete_link').live("click",function(){
		$('#message_receiver_id').val($(this).html());
		$('#auto_complete_results').html("")
		return false
	});
});

So what does that do?

$(’#message_receiver_id’).keyup(function(){ This binds the following code to the event to keyup event of the “#message_receiver_id” input box.

The if statement hides the box if the user deletes all content in the text field, otherwise you would get a list of 10 users.

$.getScript(’/users?search=’ + $(this).val()); calls index.js.erb from the users index action and passes the value of the text area as the search parameter.

The next bit disables the links and makes it so that when you click them it changes the content in the text field.

You then need to add a link to the javascript file on the page you require it on using the javascript_include_tag helper method in your head tags.

Now this is where things get a little complicated, You want to perform a search using the auto completion and that needs to go on through the index action, but in most cases you will probably already/want to produce a list through HTML. So the Question becomes how do you make the output different depending on what the format of the request was. Well i get around this by only using the search parameter for the Ajax request. Rails will already use index.js.erb when a javascript request is made.

This means that you could modify the controller to look like this:

def index
		@users = User.paginate(:page => params[:page], :per_page => 15, :order => "username ASC") unless params[:search]
		@autocompletes = User.find(:all, :conditions => ['username LIKE ?', "%#{params[:search]}%"], :limit => 10) if params[:search]
	end

You then need to create 2 views in the intended controller you are searching, index.js.erb and _results.html.erb

index.js.erb needs to look like this:

$("#auto_complete_results").html("<%= escape_javascript(render("results")) %>");

This code changes the content of the results div tag to the contents of _results.html.erb, escape_javascript just makes sure that the content wont harm your javascript.

_results.html.erb needs to look like this:

<ul>
	<% @autocompletes.each do |user| %>
	<li><%= link_to user.username, '', :id => 'auto_complete_link' %></li>
	<% end %>
</ul>

You just need to add a div tag under the text field with the id of auto_complete_results.

The results should look something like this:

Auto Completetion Demo

javascript, jQuery, rails, Train Hide

My latest improvement to my home desk area is an Acer Aspire Revo R3600, i currently have an old Acer Power F1 under my desk driving a second monitor running ubuntu 9.10 (sort of the 9.04 -> 9.10 update shafted it slightly). I use Synergy to let me use the mouse and keyboard on my main windows 7 machine control both machines.

I decided to replace the Acer Power F1 with a Revo. I went for the option on ebuyer that comes with a 2GB RAM stick aswell.

Job1: Fit the RAM

Fitting the RAM is the first thing i need to do, without it the Ubuntu installer will mis calculate the amount of swap space needed. My first big question on this was “can i fit the RAM without voiding the warranty?” the answer “yes”

To fit the ram find this screw (covered by a sticker):

Revo Screw hole

You thenhave to pull the side without the power switch on away from the main body. Took me a little bit of working to get it off but it did separate in the end. You will then be confronted with this:

Inside the Revo

Fit the ram into the spare slot (above the HDD next to the CPU).

Clip the side back on and your done!

Job2: Fitting the Revo

I want my Revo on the back of my second monitor, a Samsung SyncMaster 2043NW. The Revo comes with a nice VESA bracket for itself which fits nicely on a 20″ monitor. Once its clipped in it should look something like this:

VESA Mounted Revo

Job3: Install an OS

My Revo came with some random Acer Linux Distro on it that seemed to take the “its only got a 1.6 atom dont ask it to do anything bar open our browser” approach. So i set it to boot to my USB DVD Drive (you could boot to a pendrive to install an OS). It is very important that you turn off the RevoBoot otherwise it wont even try booting to your media.

My OS of choice is Ubuntu 9.10, it loaded up the live environment no problem and picked everything up. It did inform me that a “non-free” driver existed for my graphics card which i can install, you will need this after install!

Job4: Setup the OS Post install

This is where all you people not putting Ubuntu 9.10 (later versions should be similar) on their Revos need to split off to a guide for their OS.

You can try booting into ubuntu straight off but for me that didnt work, the nvidia drivers are missing and this means that X wont start for the fresh install. Now for me is was even worse and X kept attempting to start, meaning that i couldnt use tty1 etc… so i had to use recovery mode. To get into recovery mode pres the down arrow when grub appears during boot (i found the best thing to do was to hammer the down key just after the acer splash screen dis appeared). Select “Recovery Mode” from the list. Once that boots press “Shell with networking” and you should then be presented with a BASH Shell. Run a system update by typing in `apt-get update` and then install  the nvidia drivers `apt-get install nvidia-glx-180`. Then re-boot and X will work again.

Thats about it, i’m yet to find anything that doesn’t work but write a comment if you find anything wrong. I used the Wired connection during install but once i had it in place in my room it quite happily swapped over to a wireless connection.

I added a USB Bluetooth Dongle to the setup so that i can connect up my phone if i ever need to, or if i get a Bluetooth keyboard for example.

It is remarkably quiet, not that you can hear much over the drone of my PC.

Revo behind the Screen

Revo, Ubuntu Hide

This is something i wrote for my netbook, it uses the functionality in Windows 7 to bind tasks to events in the system log. You First need to copy this script and set a couple of values:

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

WScript.Sleep 20000
 
 
 
strComputer = "."
strProxyURL=""
strProxyPort=""
 
 
 
Set objShell = CreateObject("WScript.Shell")
 
 
Set objWMIService = GetObject("winmgmts:" _
 
    & "{impersonationLevel=impersonate}!\\" & strComputer & "\root\cimv2") 
 
 
 
Set colComputerIP = objWMIService.ExecQuery _
 
    ("Select * from Win32_NetworkAdapterConfiguration")
 
For Each IPConfig in colComputerIP
 
      If Not IsNull(IPConfig.IPAddress) Then 
 
        For intIPCount = LBound(IPConfig.IPAddress) To UBound(IPConfig.IPAddress)
 
                strIPAddress = strIPAddress & "IP Address: " & IPConfig.IPAddress(intIPCount) & "~"
 
            Next
 
      End If
 
Next
 
 
 
If InStr(strIPAddress, "10.0.0.") > 0 Then
 
      strTheIPAddress = Mid(strIPAddress, InStr(strIPAddress, "10.0.0."), InStr(InStr(strIPAddress, "10.0.0."), strIPAddress, "~") - InStr(strIPAddress, "10.0.0."))
Else
 
      strTheIPAddress = "UNKNOWN"
 
End If
 
 
 
If Len(strTheIPAddress) > 1 And Right(strTheIPAddress, 1) = "~" Then
 
      strTheIPAddress = Left(strTheIPAddress, Len(strTheIPAddress) - 1)
 
End If
 
 
If strTheIPAddress <> "UNKNOWN" Then
	objShell.popup "UnSetting the Proxy",0,"Proxy Script",vbOK + vbInformation
	objShell.RegWrite "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ProxyEnable",0,"REG_DWORD"
Else
	objShell.popup "Setting the Proxy to " & strProxyURL &  ":" & strProxyPort,0,"Proxy Script",vbOK + vbInformation
	objShell.RegWrite "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ProxyServer",strProxyURL & ":" & strProxyPort,"REG_SZ"
	objShell.RegWrite "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ProxyEnable",1,"REG_DWORD"
 
End If

Set strProxyURL and strProxyPort, to the proxy values you want to use. You will then notice I only have 1 “no proxy” network defined, “10.0.0.”, this is because thats the IP Range i use at home, and whilst in schools the IP range varies massively. Alter all the 10.0.0. to your IP range, you could also add another case (elseif) for 192.168.1. for example.

To set the proxy script to work on wireless connections you need to open up event viewer (right click computer -> Manage). Then in the tree menu open “Event Viewer -> Applications and Services -> Microsoft -> Windows ->WLAN Auto Config”

In there find an event with an id of 8000, e.g.

Event 8000 in my Event Log

Then from the Side menu you need to click “Attach Task To This…” under Event 8000.

You can call the task what ever you like, probably a good idea to call it something like “Wireless Proxy Script”. Accept all the defaults for the task and then when asked for the program to run point it at the script you copied earlier in this post.

There should be a similar event in the Wired Auto Config logs that you can attach an identical event to.

Networking, VBS, Windows Hide

The next improvement to my MSI Wind U100 has arrived! A touch screen that requires no solder to fit and sits in nicely. I ordered it from FidoHub, the screens product page is http://www.fidohub.com/product.php?prod_id=46&sort3=

FidoHub gave me a FedEx tracking number so I was able to track the screen from Taipei City right till it arrived at my door.

It was reelatiively easy to install,i followed the guide over at netbookmag, one thing i will add to that is that you need  to leave quite a bit of length on the cable from the screen so that you can position the hub properly.

After using the screen for a little while it seems very good, the screen is very accurate and it tracks the pen no problem, touch with the fingers also works well.

Hardware, Wind Hide

Right a little background to begin with, I use FOG in a few schools to image my machines and i have been thinking about adding some more functionality to the PXE Menu, namely a live distro so that i can quickly rule out driver problems etc… on machines by leaving windows, it also allows for data recovery as you can browse the HDD and a network share.

I found some instructions on how setup DSL (Damn Small Linux) in the FOG menu but DSL didnt support the hardware in the first machine i tried. I then remembered Slax which i had used in the past and decided to try that. And this is how you set it up (bit harder than DSL, but easier than DSL-N).

I am using Fedora 10 here but FOG is the same on both Fedora and Ubuntu so the file locations should be the same.

The first step is to get a copy of Slax, you need to get the USB version from here: http://www.slax.org/get-slax.php

Extract that .tar file to anywhere on your FOG Server and then browse to the extracted files. You will notice that there are 2 folders “boot” and “slax” these two folders need to be copied to different locations. The boot folder needs to be copied to “/tftpboot/fog/slax/” (you will need to make the slax folder). The slax folder needs copying to “/var/www/html/slax”

You now need to alter the Grub config for FOG. Open up “/tftpboot/pxelinux.cfg/default” in your favorite editor and add:

LABEL Slax
	MENU LABEL Slax
	KERNEL fog/boot/vmlinuz
	IPAPPEND 1
	APPEND initrd=fog/boot/initrd.gz ramdisk_size=6666 root=/dev/ram0 rw autoexec=xconf;telinit~4 changes=/fog/slax/

Then save the file. If you want to password protect the option which i highly recommend you need to add “MENU PASSWD yourpassword” under the MENU LABEL line.

Thats it! now when you boot to your network you should get another option on your boot menu like this:

FOG Menu with Slax

It should take a minute or two to boot and once it does you should end up with an environment like this: (good old KDE 3.5)

Slax running from my FOG Server

Now the Beauty of using Slax for this is that although its a read only file system you can actually install programs! and very easily too. If you want to install something simply download the module file from the Slax website and place it in “/var/www/html/slax/modules” and it will boot up with them installed!

Fedora, FOG, Networking, PXE, Slax, Ubuntu Hide

Well today is windows 7 release day, so i woke up this morning logged into my student email (used the £30 student deal on pro upgrade) to get my download link and product key.

After using works internet to download it i realised that it was a .exe installer so i would need a copy of windows installed first before i could install it. This was a slight problem as i had 2 640GB HDDs waiting to go in as a RAID 0 array. So would be changing primary hard disks.

My way around this problem was to isntall the Windows 7 RC on the new disks and then upgrade it to Windows 7. Of course it moaned about going from ultimate to pro bu after retrying with a custom upgrade i now have a clean isntall of pro on my PC

I did have allot of problems getting the RAID drivers to work but after a few failed attempts i came accross the right drivers that are working well now.

Windows Hide

In this article i will show you how to create a simple javascript editor that inserts some content into a text area, in my case bbcode. Its sole purpose its to make using bbcode easier for the end user. It isnt a WYSIWYG Editor!

The first and most important part is the text area, this is done in the normal way.

<textarea cols="50" id="editor" rows="20"></textarea>

The ID is very important as it is what javascript uses to interact with text area, i have used “editor” as the ID for this text area.

Instead of writing loads of functions like “bold()” and “underline()” i wrote one function called “addtags” which has 2 paramaters “string” and “id”. This is the function:

function addtags(s,id){
	var editor = document.getElementById(id);
	editor.value+=s;
	editor.focus();
}

The next step is to create the links that insert the tags. Lets start with the basics, bold tags, this is done simply by creating a link to “javascript:addtags(’[b]text[/b]‘,’editor’)”. This then inserts the text “[b]text[/b]” into the text area.

I also expanded this idea to allow for popups when click the links, mainly so that instead of inserting “[img]url[/img]” it would popup and ask for the url and put it in for you. to do this you need to make a link that looks like this:

<a href="javascript:addtags('[img]' + prompt(&quot;What is the url of the Image?&quot;,&quot;Type the URL here&quot;) + '[/img]','post_body')">Image</a>

Thats about it for the editor. Im going to compile a few techniques together for a much better version thats allot easier to use and is more than just a substiture for not bieng able to remeber bb code

javascript Hide

Ive swapped theme on this blog, the old one was getting a bit dated and i was having some problems reading posts after the faded background disappeared. The wite text on the black background was rather hard on the eyes, i think it has something to do with the font that was in use.

So ive swapped to this skin. I like the layout and after a couple of tweaks to my plugins it all works fine now. One big benefit of this skin is that it uses the Jquery javascript library to add some nice features like resizable text and collapsable posts.

php, wordpress Hide

Overlay boxes are poping up all over the place now, the most common use ive seen is to display a bigger version of an image when you click on a thumbnail.

They arent hard to create, all you need is 2 or 3 divs and a few lines of javascript, for a basic one. There are obviously much more complicated ones that resize themselves etc… when they open. This one just appears when you click a link and disappears when you click on close.

So first off lets create the div tags.

At the top of your page (just after the <body> tags)

<div id="overlay" class="overlay" style="display:none;" onclick="overlay('close')"></div>
<div id="overlay-box" class="overlay-box" style="display:none;"></div>

You also need to add a couple of styles to your css:

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

.overlay{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:1000;
	opacity:0.6;
	filter:alpha(opacity=60);
	background-color:#000000;
}
.overlay-box{
	position:absolute;
	margin-top:50px;
	margin-left:23%;
	z-index:1001;
	width:50%;
	background-color:#FFFFFF;
	border:8px solid #000000;
	padding:15px;
	max-width:50%;
	overflow:auto;
	text-align:center;
}

There are few things in that css id like to explain before we go on.

Setting the z-index attribute to 1000 means that the overlay appears infront of all the other divs etc… on the page. Setting it to 1001 for the box means that the box appears infront of the overlay. The overlay is basically and big black rectangle that covers the entire page, and because we have set the opacity and the alpha filter it has some transparrency, so you can still see the site behind it.

So you now need some javascript to make it appear and disappear. Instead of writing “show()” and “hide()” Ive written one function that swaps the state of the overlay.

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

function overlay(id){
	var div = document.getElementById("overlay");
	var box = document.getElementById("overlay-box");
	var cont = document.getElementById(id);
	if(div.style.display == "block"){
		div.style.display="none";
		box.style.display="none";		
	}else{
		div.style.display="block";
		box.style.display="block";
		box.innerHTML = cont.innerHTML;
	}
}

This is where this box becomes re-usable. instead of writing your content into the “overlay-id” div you write into any div you want and hide that div, you then pass its id into the function.

Simply create a link to “javascript:overlay(’myid’);” and it will bring up the overlay. You can close the overlay by clicking anywhere in the black. You could also put the same link into the content, this would close the box.

css, javascript Hide

In a previous post I mentioned that Arcath.net was now using Train, my new RoR CMS.

Well I think now is a good time for a progress report.

I am picking up RoR quite quickly (it helps that i already knew ruby). Im not getting stuck when making new controllers etc… so development is speeding up . Feature wise Train currently has:

• Front Page Blog, that also if configured will submit the titles with a link to twitter
• A Page manager
• A user system (doesnt have a UCP yet)
• A Project listing system
• A Basic Group System

I am currently working on the forums and hope to have something resembeling forums working in the not to distant future.

rails, ruby, Train Hide