Pixastic Desaturate images with jQuery on mouseover, mouseenter, mouseleave

Had another great morning wangling my way around 4 browsers (7 if include each version of IE). The client had a requirement an image would have a black and white version and this would flip when the user moused in, over, out, etc.

Problem was we couldn’t rely on the client loading a black and white image, or know how to create one…these are clients after all! And having them contact us each time to create the black and white version each time is not going to happen (unless they paid…).

Enter Pixastic.

This is one of the coolest widgets I have the pleasure to work with. It plays with your images soooo nicely and seems to be completely cross browser compatible. Nice work boys! However…

The Problem

When you apply Pixastic’s desaturate code to the image the image disappears out the DOM and a Canvas element replaces it. So if you have done the standard $(image id or class).hover() with jQuery (or mootools or whatever) then when you mouse over it works, but is instantly remove from the DOM so you straight away get a mouse out event being fired. Damn! Not what you want! Worse still the image now reappears causing a mouse over event which, yes you guessed, it flips it back. You get a nice wee flicker happening – not good if you don’t like flash photography!!

The Solution

I won’t go into the depths of what I did. I will just add the code so you get back to your day job and make tonnes of money.

$(window).load(function () {
    $("div.parent").each(function (index, obj) {
        $("#" + $(obj).attr("data-image")).pixastic("desaturate"); // make it black n white
    });

    $("div.parent").mouseenter(function (e) {
        var self = document.getElementById($(e.currentTarget).attr("data-image"));
        Pixastic.revert(self); // make it colour
    });

    $("div.parent").mouseleave(function (e) {
        // make it black n white again (yes I should refactor this...)
        $("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
    });
});

However what you will notice is instead of the code being in the $(document).ready() function call, it’s in the $(window).load(). Images are not fully loaded at $(document).ready() in Webkit (Chrome and Safari). As Pixastic checks to see if the image is loaded with “this.complete” before processing it (otherwise it could try to process something that isn’t there…) then your code needs to be in this function call.

But once you do that, it works a treat! Check out my demo to prove that it works!

Hollywood no longer needs actors

I found this on a gaming website, talking about using this in games, due to it being able to render this high quality in real time! But what about Hollywood? We know that Hollywood uses massive amounts of green screens these days, and have live action actor to jump about like loonies. But what if they don’t need the actors?

Separable Subsurface Scattering (Real Time) from Jorge Jimenez on Vimeo.

Think on it? There are so many people out there that have a face for radio, but a voice that every actor wants. Take this SSSS technique above and marry it with these voice actors…and you can produce the best movies ever? (well that’s the idea!)

For a director, you would never need to worry about the actor getting hurt, or growing up, or having to shave in a certain way to maintain consistency throughout the movie. You now have a real (more than realistic…) character that will never grow old, never die. Sequels won’t need to have second rate (or third rate) actors to play the main characters.

This could be revolutionary.

Depude and randomise 2 lists

I was asked to take 2 lists of names and dedupe the newer list with the names in the older list, so we only had a list of new names in a specific period (no dates here to help out!).  Turned out to be a lot simpler than I thought.  At first I thought Excel spreadsheet as the data wasn’t in a database.  I thought I could do some fancy filter action, but nope!  That was harder than a diamond on a bouncer’s knuckle!

Solution

The solution was a real simple tiny bit of .NET code:

 var likes = System.IO.File.ReadAllLines(@"D:\likes.txt");
 var olds = System.IO.File.ReadAllLines(@"D:\lomb-likes.txt");
 var duped = new List<string>();

 Array.ForEach(likes, like =>
 {
     var found = false;
     Array.ForEach(olds, old =>
     {
         if(old == like)
         {
             found = true;
         }
     });

     if(!found)
     {
         duped.Add(like);
     }
 });

 var result = duped.OrderBy(dupe => Guid.NewGuid()).ToList();

Simples!  Now get on with your work and stop reading my blog!

Microsoft.Web.Administration.dll Scripting IIS 7.0 on Vista

This is not a full article on how to script IIS7.0.  It’s about getting to that point on how to do it.  And as per usual the internet was full of incomplete information.  Here’s my complete solution when I faced problems.

Firstly the namespace Microsoft.Web.Administration was not available, nor was it in the .NET of the “Add reference” menu option.  To solve it I had to browse to:

C:\Windows\System32\inetsrv

and reference the

Microsoft.Web.Administration.dll

in that folder.  The namespace was available, and so I was rocking…straight into another brick wall!  What these other websites again forget to tell you is to set permissions on a specific file that the code I will give in a second, needs to have to be able to run.  So the file is found here:

C:\Windows\System32\inetsrv\config\redirection.config

and you need to give it the ASP.NET/NETWORK SERVICE user in security with READ access.  But guess what!?  Yes that still didn’t solve the issue!  I had to go into IIS7.0, choose the Application Pool I was working with, and change the Identity value to LocalSystem.  So thats:

Open IIS > Expand IIS > Application Pools > [select your application pool] > Advanced Settings > Process Model > Identity = LocalSystem

Job done.  Yes at last!  Woo!  I could then add new Rewrite rules into the web.config without having to manually go into IIS!

The code as promised

using System;
using Microsoft.Web.Administration;

public partial class new_iis : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        using (ServerManager serverManager = new ServerManager())
        {
            Configuration config = serverManager.GetWebConfiguration("HIE");

            ConfigurationSection rulesSection = config.GetSection("system.webServer/rewrite/rules");
            ConfigurationElementCollection rulesCollection = rulesSection.GetCollection();

            ConfigurationElement ruleElement = rulesCollection.CreateElement("rule");
            ruleElement["name"] = @"GoToGoogle2";
            ruleElement["stopProcessing"] = true;

            ConfigurationElement matchElement = ruleElement.GetChildElement("match");
            matchElement["url"] = @"^google$";

            ConfigurationElement conditionsElement = ruleElement.GetChildElement("conditions");
            conditionsElement["logicalGrouping"] = "MatchAll";
            conditionsElement["trackAllCaptures"] = "false";

            ConfigurationElement actionElement = ruleElement.GetChildElement("action");
            actionElement["type"] = @"Redirect";
            actionElement["url"] = @"http://www.google.co.uk";

            rulesCollection.AddAt(0, ruleElement);

            serverManager.CommitChanges();
        }
    }
}

But I never wrote the code. I found it at http://forums.iis.net/t/1150481.aspx so I have to massively thank them for showing how easy it is.  And remember you will be able to edit any part of the web.config via this code, or similar code ’cause you will need to edit it to your needs.

ASP.NET ValidationSummary – Stopping the scroll back to top

I came across an issue today with a validation summary form on a sign up form.  The form was at the bottom of a page containing much text…well that’s what was in the design and it will probably turn into “Please sign up here” once the client get’s their hands on it.  But that’s par for the course.

Now because the sign up form was below the lorem ipsum text in the design, I also placed the validation summary below this.  But this causes a small technical issue when you hit the submit button and some of your elements do not validate, the whole page scrolls to the top.  Not very easy for a user to see what went wrong without scrolling back to the form.

Why does this happen?  Microsoft in their infinite wisdom have placed some really annoying javascript into their validation code.  If you inspect the shite that Microsoft pumps into the page with a form and validation controls, you may find (there is a lot of code) a window.scrollTo(0,0) line buried away.  This of course scrolls your window back to the top.  For most cases this will be fine, as most cases the form is not preceded by craps loads of text, and your validation summary will either be at the top, or be as close as dammit to it.  Not in my case, and not as it seems many others.  So I had to find a solution. Continue reading ASP.NET ValidationSummary – Stopping the scroll back to top

Facebook’s Graph API and ASP.net

Am enthralled with the new Facebook API. It’s awesomely simple to use. I mean really simple to use. They have changed the authentication process as well, and fuck me it’s so so much simpler than before.

Previously I integrated Facebook Connect with iMapFlickr, to allow uses to post to their own wall automatically, saying that they had created a new map about cheese and bunny rabbits.  But it was such a pain in the ass to use.  But I did it, although am a little balder for it!!

Facebook – now with added thought

The new Facebook API throws essentially everything they have done out the window, rewriting everything and using oAuth to authenticate a user.  They have even made oAuth simpler, which leads me to think it’s not really the full oAuth specification, but hey it works nicely!

But one thing they forgot to do was let .NET developers in on the secrets.  They released all the libraries and code and examples for other programming languages but .NET is sitting outside of Facebook Towers crying, not being allowed into the party as it has “Microsoft” as part of it’s name.  Fuckers.  I sold me soul to Microsoft a long time ago, so I have spent some time working this out. Continue reading Facebook’s Graph API and ASP.net

Fighting Cancer with Music

Many of you that read my blog The few of you that read my blog may have seen that I have been helping a good friend Donna, build her website and promote her charity Fighting Cancer with Music.  She is currently promoting an event in Taylor, Texas for her friend Jenny Tepernning:

The Jenny Benefit

So if you read this and you are in that area, please head along and find out more.

What’s also cool is this allowed me to post my first blog on the awesome blog site Elephant Journal.  Waylon Lewis was kind enough to let me post about what is Donna is up to.  He has a phenomenal following of regular 30K visitors, with 170K more than visit at least once a month.  So hopefully this will help Donna out in ways that I could never have possibly done.  Thanks Waylon!