jQuery UI - Tab Systems

If you look around websites at the moment almost all of them have some kind of tab system. Facebook uses one on your page, even while I write this, the window I'm writing in is surrounded by tabs and I know I've used tabs on some of my own projects (see The Game Portal).

Tabs are primarily a form of navigation, but what makes them different from a standard navigation header bar, with standard buttons is that the flow through the site is much improved. You don't need to leave a page to view content inside a different tab. This means less wait times, and a nice way to store anything you want to show on your site.

You could opt to write your own tab system, but often it can be hard to achieve complete, or maximum browser compatibility, especially if you're in a rush, or don't want to spend to much time writing something in javascript/ajax.

In a post a few weeks ago I introduced jQuery, and briefly mentioned the jQuery UI package. The jQuery UI package builds on the jQuery framework by adding a set of transitions, actions and web components which work in practically any browser. If you have a quick look on the jQuery UI website you'll notice the build custom download button on the right of the page. You can graphically design most features of the components you want and export the styles and classes associated with them straight from the website.

So lets get started, we wanted to make a tab system.

1) Click Themes on the menu at the top of the jQuery homepage. We want to be a bit interesting so lets make a custom theme.

2) You'll notice on the right you are presented with the UI components, in the default style and on the left you'll find a menu with the headings "Roll your own" and "Gallery". For a set of premade styles click gallery. Often you'll find something here that is in keeping with the design of your website, or you'll find these styles a good jumpstart so that you don't have to design everything from scratch. So I'm making a pretty Techy website, and want something quite cool. Click on the gallery tab and select edit under the Dot Luv style. I really don't like the diagonal lines at the top though, so I'll play around with the top bar. Obviously if you like them, keep them, and have a play around with some of the other settings on the left.

3) Once you're completely happy with your design press the Download Theme button at the top of the settings, you'll be confronted with a new page. Panic not! We're making a tab menu so we don't need any of the other features (with the exception of UI Core which contains some basic functions and initializers) so deselect everything except UI Core and Tabs (in the widgets section).

4) When you're happy with this download the file using the button on the right. At this stage its a good idea to open the file called index.html within the package you downloaded. This contains all of the UI content you downloaded as well as some useful buttons (a tip - if you're looking for lightweight you can remove the styles and images for all of these buttons quite easily by hand). So there is your tab system!

5) To include it on your website you'll have to upload your stylesheet, javascript files and associated images onto your server. Once they are up just link to your files. You'll have to load in the jQuery style sheet first, then the standard jQuery library, and then the jQuery custom library.

For example:

<link type="text/css" href="css/dot-luv/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

would achieve the required effect.

Then to initiate the tab system you'll need to use a simple line of jQuery

<script type="text/javascript">
$(function()
{
// Tabs
$('#tabs').tabs();
}
</script>

And finally the actually object needs to be placed in your page:

<div id="tabs">

<ul>
  <li> <a href="#tabs-1">Tab 1</a> </li>
  <li><a href="#tabs-2">Tab 2</a></li>
  <li><a href="#tabs-3">Tab 3</a></li>
</ul>

<div id="tabs-1">I am tab 1's content</div>
<div id="tabs-2">I am tab 2's content</div>
<div id="tabs-3">I am tab 3's content</div>

</div>

As you can see all of the content is loaded into seperate divs, one for each tab!

This is really useful as I mentioned earlier for getting smooth flows around your site, and for improving the user experience!

Unfortunately blogger blogs don't allow you load in style sheets on the fly from within posts so I don't think I can get you a live example, but here is a link to a page I'm working on which does use the tab system. Bear in mind its work in progress!

Also check out The Game Portal if you haven't done so already as that also uses jQuery UI!

Enjoy!

Nitrome - Some featured games!

I've been getting really addicted to games by Nitrome recently, a flash game company based in London, England. I thought I'd feature a few of my favourites on the site.

First is Snot Put, a cute and equally gross take on the shot put event where you have to swing the main character as fast as you can in a circle, the aim of the game being to throw it as far as you can. Its a small game, but the physics are good and its really addictive!

Next is Twin Shot 2, a new instalment from the design team. This game is beatifully made, and has done an incredible job of recreating the magic of games like Bubble Bobble in the late 80s and early 90s. From start to finish the character and level design is gorgeous, the music is great and not at all repetitive, there are loads of levels (including a bonus pack of 50).

As always just click the thumbnails to play or you can catch them on facebook on The Game Portal.

I'm sure you'll love these ones, Enjoy!

Build your own color detector.

In my university lab last Summer I built a colour detector and I thought I'd let you all in on how. If you have a bit of programming knowhow and have the right electronic components (which are really easy to pick up either from the internet or from an electronics store) then this blog should familiarise you with the core principles involved when building a colour detector.

The image to the left is the finished product. 3 tinted LDRs the PIC16F819 micro controller make up the colour detector (as well as an optical to digital converter if you want a PC readout).

Understanding the nature of the colours present in light is a vital part of this project. Light has an additive nature, unlike pigments, which have a subtractive nature. This means that increasing proportions of red, green, and blue light result in

the formation of white light, and various combinations of those colours can form every colour in the visible spectrum.

Due to their ability to produce such a vast array of hues they also form the basis for colour formation in standard computer monitors, televisions and other liquid crystal displays. Technically the choice of red, green and blue are not exact, they are chosen due in large part to the sensitivities of the cone cells in the rear of the retina. Differences in the hues of the red, green and blue constituents chosen may produce different absolute colour spaces, for example sRGB and Apple RGB are two absolute colour spaces used in computer monitors. In computing terms the R, G, B value of a colour represents its red, green and blue components proportionally, normally each on a scale of 0-255 (This requires three 8-bit values). For various other purposes in computer graphics a further two bits per unit may be added, for example RGBA includes information about the alpha channel (transparency) of a pixel, and contains three 10-bit units of colour per pixel. In the case of visible light however only the RGB values, and their associated intensities need to be taken into account.

Since the LDRs that will be used in the colour detector have little or no wavelength dependence it is necessary to use colour filters to determine which wavelengths of light are hitting which detector and in what proportions. Colour filters work by transmitting certain wavelengths of light and reflecting or destroying through interference, the other wavelengths. Manufacturers often produce filters that allow not only the target colours wavelengths through. The effect of this is is often to brighten up the filters, by letting through more light.

A problem with this is that it is practically impossible to determine the exact chromaticities of the filter. A solution to this involves measuring intensities of pure red, green and blue light after they pass through the filter when compared to the intensities before transmission. By creating a transformation matrix from one set of colours to the other and inverting that matrix, a transform will be created to convert measured intensities (post filter) to the original colour of light (pre filter).

Since an optical interface is being used which can only transfer data digitally there is no way of transferring the 3 analogue voltage values directly to the computer. The PIC is used to sample the 3 values, store them, and then convert them into a form which is analysable by the PC. The way chosen to do this was to take a voltage value (in 8-bit so between 0 and 255), and a time delay proportional to this which turned the output port either on or off after each delay. The code snippet below shows how this was achieved although full code for all programs used in the project can be found in the appendices.

//liner delay subroutine (0xFF times input variable);

a equ 0x45

b equ 0x46

delay movwf a

movlw 0xFF

movwf b

ca movwf b

cb decfszb

goto cb

decfsz a

goto ca

return

The delay loop assumes that the voltage value has previously been stored in a. When the loop is called the embedded loop repeats 256a times, creating a time delay proportional to a. By turning the output port on and off, before and after the loop is called, a square wave output of voltage can be created with a period proportional to the input voltage.

movlw b'00000001'

movwf PORTB

// then call the delay loop

movlw b'00000000'

movwf PORTB

This can be repeated 3 times for each of the measured values, resulting in three flashes. The timed pulses will then be sent optically to the computer.

For documentation on how to program your PIC or other microchip I recommend visiting the manufacturers website at http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=64

So the image to the right is pretty much a summary of the whole system from

LDR to PIC to LED. After this stage the 3 flashes and their corresponding delays (how long they are on/off for) is sent to the computer via an optical to digital converter.

The final step was to write some software in C (as well as a codec for the optical to digital converter), to output RGB values and display something nice on the screen, in this case a blue LED is being shone onto the LDRs.

The image below shows a schematic of the colour detector.

If you have any more questions about the project, let me know,

Good luck!