Weblog of Neill Horsman

if you are familiar with the photo tagging project I recently released you will know the Image Selection plug-in didn’t work in IE web browsers. After reading the authors website I have found there is a new version on the jQuery plug-in available (0.8).

I plan to update the photo tagging project this week to let all the IE users see this in action, but remember the better alternate is to download Firefox 3.5

I can drive like this :p

A few months back I worked on a project that required photo tagging. The project got scraped but I am still developing most of the functionality for future work.

The requirement for this particular project was for a photo gallery grouped into albums, with photos consisting mainly of people out on the town. I wont go into full details but here is how you tag a static image.

View the demo here
Grab the source code here

We will start with creating a table to store all the image information in
[code lang="sql"]
CREATE TABLE phototags (
id int(255) NOT NULL AUTO_INCREMENT,
photoid int(11) NOT NULL,
title varchar(255) NOT NULL,
x1 int(11) DEFAULT NULL,
y1 int(11) DEFAULT NULL,
x2 int(11) DEFAULT NULL,
y2 int(11) DEFAULT NULL,
width int(11) DEFAULT NULL,
height int(11) DEFAULT NULL,
PRIMARY KEY (id)
);
[/code]
*photoid can be used later to implement into a photo gallery

1. First include the required .js
[code lang="html4strict"]



[/code]

2. add an image to your document.
[code lang="html4strict"]

[/code]
*note we need to give it an ID which will correspond with out jQuery selector.

3. Now the jQuery
[code lang="javascript"]
//Create some vars to hold the x/y info when selecting areas of the image
var $x1, $y1, $x2, $y2, $w, $h;
function selectChange(img, selection) {
$x1.text(selection.x1);
$y1.text(selection.y1);
$x2.text(selection.x2);
$y2.text(selection.y2);
$w.text(selection.width);
$h.text(selection.height);
//load the x/y/width/height into hidden text boxes
$('input#x1').val(selection.x1);
$('input#y1').val(selection.y1);
$('input#x2').val(selection.x2);
$('input#y2').val(selection.y2);
$('input#w').val(selection.width);
$('input#h').val(selection.height);
}

$(document).ready(function () {
$x1 = $('#x1');
$y1 = $('#y1');
$x2 = $('#x2');
$y2 = $('#y2');
$w = $('#w');
$h = $('#h');
});

//here is where we tell jQuery what image the area select will appear on.
$(window).load(function () {
$('img#imageid').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange,
outerOpacity: 0.4, handles: true });
$('.imgareaselect-handle').css('opacity', 0.7);
});
[/code]

In the above code, we inclued jQuery files, made an image with an ID, told jQuery to use that image for the image area select, and set up some other bits to later store this information in a database.

4. Now we need to store the x/y/width/height into some hidden text boxes, lets create a form
[code lang="php"]

[/code]

5. Then we can connect to out mysql database and insert all this information
[code lang="php"]
// mysql('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'user' ,'pass', 'db_name');
// If user has submitted a tag, insert into database
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
if(isset($_REQUEST['form'])) {
$query = $db->query(" INSERT INTO phototags (id, title, x1, y1, x2, y2, width, height) " .
" VALUES('', '".$_POST['title']."', '".$_POST['x1']."', '".$_POST['y1']."', '".$_POST['x2']."', '".$_POST['y2']."', '".$_POST['w']."', '".$_POST['h']."') ");
}
}
?>
[/code]

6. Now we need to get the coordinates from the database to make up our imagemap using an ul.
[code lang="php"]
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
//database select
$query = $db->query(" SELECT id, title, x1, y1, x2, y2, width, height FROM phototags ");
while ($result = $query ->fetch_object()) {
//take the title for the tag and replace all spaces with a - to name the css class
$name = str_replace(' ', '-', $result->title);
?>

• title; ?>

}
}
?>
[/code]

7. Now for some CSS to show the title for the tag
[code lang="css"]
#map { margin:0; padding:0; width:400px; font-family:arial, helvetica, sans-serif; font-size:8pt; }
#map li { margin:0; padding:0; list-style:none; }
#map li a { position:absolute; display:block; background:url(images/blank.gif); text-decoration:none; }
#map li a span { display:none; text-decoration:none; }
#map li a:hover span { position:relative; display:block; left:10px; top:120px; padding:5px; border:1px solid #000; background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8; }
[/code]

View the demo here
Grab the source code here

This is my first tutorial so if its a bit hard to follow I am sorry, have a look at the source, its rather straight forward.

Feel free to use this for any personal/commercial project, modify or redistribute.
Send me an email if you find a use for it, or a better way to do everything.

Trivett Group, Australia’s largest prestige automotive group raised the benchmark in automotive motoring yet again by adding the world’s fastest production car ever built to its stable of brands, becoming the exclusive authorised dealer for Bugatti Automobile in Australia…. Read full story here.

Now they fail to mention that the Buggati wont be road legal/registrable here or that it will cost somewhere between $2.7 and $3 Million dollars, but if you have the money for it I’m sure you could hire out any local race tracks a few times a week for some beyond amazing fun.

Now I just have to wait for the Koenigsegg to come to Australia and I will be one happy little boy.

Watch a video Review of the Bugatti at Sandown: The world’s fastest road car

A week ago i submitted my site to a fairly new web site/services named Please Critique Me.

They are a bunch of great designers from around the U.S all working for some top notch agency’s over there with many years experience like myself.

If you’re curious to see what other’s in this industry think of your work you can submit your site and they do a great write up on it in general or in detail if you submit certain areas.

So today I got a tweet (@critme) from them with a link to the write up on my site.

Cautiously I started reading fearing the worst :p No not really, I was very excited to hear from other professionals, and what they wrote was great.

Some of the things mentioned (Footer, Home page portfolio) I had only been thinking about changing/adding this week.

All in all I think it was a great idea and a great free services, it has driven a lot of traffic to my site and given me some new ideas.

I couldn’t thank them more.

If you want your site reviewed, whether you’re a designer or have your own online business, jump on Please Critique Me.

Came across Project Deploy via a friend on Twitter last week.

Great little app for designers where you can create a project framework.

Are you tired of creating a new project folder, images folder, css files, linking in jquery.

This app asks you what items your project will need from css including a reset, jquery, images directory, project name, doc type etc, then lets you download a zipped file with folder structure complete.

Just extract in your web server directory and away you go.

Just came across this awesome video on YouTube. check it out, clip is directed amazingly, and some great driving

Today while browsing the wide wide web i came across an ad for Flock, although i had heard the name before i saw it as another social networking site or product and passed it by.

Not that I’m against the social network scene but the reason was i just have too many logins and accounts floating all over the place.

So today I decided to see what it was.

Flock is basically Firefox….. but uses twice as much ram again if you know what i mean.

Included in the browser we have a social side bar, where once logged in (or signed up) to all our favourite social media sites we can view all of them together in a simple yet effective view. When i say view them I mean.

• Status updates
• Friends online
• New wall posts
• New Digg stories
• Twitter friends and posts
• Youtube videos
• etc..

You can also post to your own social sites and blog… all from the browser..

In fact I am blogging to my new wordpress.com blog from the flock interface as we speak.

So what are the pro’s and cons.

I am going to start with the negative first because  it is a big problem and has been for sometime, and now will be further more, and that is memory. Flock is based on Mozilla technology, which is great don’t get me wrong, the only reason i have IE6 and 7 is to test my web designs to make sure they work.. i am and always will be a Firefox user. but we all know Firefox is a memory hog, and now with flock just adding on all these social tool bars and sidebars… you can imagine what it is like

Now i haven’t had a chance to see what extensions work or don’t work with it so i cant comment there yet, hopefully I can add in all my favourite web extensions and have Flock just like my Firefox, but then i guess we will see the memory usage spike some more.

As for Pro’s

the social interface is lovely, works well, although it is bloated with options and features, it feels very lite and easy which is what i love. everything is where it should be and works like it always has.

Final say: I would open flock every other day to have a play, but at the end of the day if i open face book in Firefox, its going to work without using 200-300meg of ram.

Adobe released details Monday about Creative Suite 4, its first update to more than a dozen design and editing tools since Adobe CS3 some 17 months ago.

The costs of the applications, set to reach consumers in October, haven’t changed since CS3, but remain hefty. Should longtime users upgrade?

Of course that depends on the specific tools you need. However, we suspect that only the most well-heeled will jump at the chance, as CS4 shares the majority of tools with its predecessor. Perhaps more dramatic, life-changing alterations will come with the next Creative Suite. That said, time-saving tweaks to Illustrator and Flash in particular could lure professionals immersed in them to upgrade.

With CS4, Adobe aimed to unify the interfaces of more than a dozen applications, including Flash and other former properties of Macromedia. You’ll see similar pull down menus for toggling among workspaces that you can customize, as well as Flash-based panels that nicely snap open and shut. Corporate design departments will find plenty of enhancements for their teams to share work more quickly.

Adobe continues to improve integration among the applications. After Effects, as only one example, can import Photoshop 3D layers and export content directly into Flash.

Options for working with high-definition video and mobile content expand too, with support for the latest formats as well as for making Adobe AIR applications. Among other highlights:

Photoshop CS4 will use your computer’s graphics chip for the first time, while offering support for 64-bit Windows.

At long last, you can handle more than one project at a time in Illustrator, thanks to the new multiple Artboards feature.

Flash CS4 has a rebuilt animation model, so you can make objects move on the stage in two quick steps. And Flash introduces a new, XML-based file format.

Dreamweaver provides plenty of shortcuts to CSS coding, including within the Properties panel.

We’ve been toying with the beta code of CS4 for several weeks. Check out our first take reviews and videos of the six suites and their individual applications for more details. We’ll report back with rated reviews after working with the final code.

Taken from cnet.com

Today the letter box also was nice enough to supply me with my oil block (tuneagent)

Again will i state before this install that my engine is out, and i also have the intake manifold off making this task mush easier. Also at the bottom of this post i will included the few problems i encountered

First off me start with removing the old oil filter adaptor plate

Filter adaptor

In this photo we can see the oil filter and a plug which is the standard oil pressure switch that is connected to your dash light.

Also we see to Allen key bolts, there are 4 in total that you have to unbolt.

Once removed we end up with this.

Filter plate removed

Filter plate removed

Now a VERY IMPORTANT NOTE HERE! in the first image we see two orange seals on the filter adaptor plate. As there is no gasket on this surface these seals seal the oil flow into the filter plate. I tried to remove these seals to see if they were any good to use again, but years old they just fell apart.

Luckily i have a box full of water and oil o’rings and seals so i found some that matched the size i needed.

Rubber seals

You can see here on the new adaptor there is a recess for seals and i have a seal on one of them.

Use some grease to hold them in place while installing this back on.

Now was time to put the gauge senders in place. On either side of this adaptor is a small hole for a gauge sender. i decided to put the stock oil pressure switch in place as well as my vdo oil pressure sender for a gauge i have.

Gauge Senders

When putting in these kind of thing, use thread tape around the threads to create a nice seal, also the thread is tapered as to get tighter when screwing in. Be careful not to do them up to tight or too loose. Too tight can damage the thread or crack something.

Now time to screw it back on. Check again now to make sure your two rubber seals are still in place, if you think for 1 sec that these have come loose or fallen out while putting it back on, CHECK.. these are very important.

install the 4 allen key bolts back in and tighten.

New oil block

Here it is installed. looks good!

Now onto the important notes!

********************************

Firstly I will repeat, make sure the oil seals are in 100%.

Now in this image above you can see the gauge senders sticking out each side, one thing i check before putting it all together was if they were going to fit and clear everything. You can see a wiring coming off the standard sender, this is because there was just enough room for it to fit in there with the stock nissan plug, but enough for a spade terminal..

The VDO oil pressure sender was an even tighter fit against the starter motor, the starter actualy touches the poll coming out of it so i am going to cut this down a tad shorter..

All done