jQuery Roundup: Mockjax, ImageMapster, Face Detection

by

at 2011-09-27 07:00:00

original http://feedproxy.google.com/~r/dailyjs/~3/HXZHfo0PD7Y/jquery-roundup

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Mockjax

jQuery Mockjax (GitHub: appendto / jquery-mockjax, License: MIT or GPL) by Jonathan Sharp is a library for mocking jQuery’s network requests. This can be useful when writing tests. It can mock the same data types that jQuery supports: text, HTML, JSON, JSONP, Script, and XML.

Mocking a request looks a lot like the ajax API:

$.mockjax({
  url: '/restful/fortune'
, responseTime: 750
, responseText: { status: 'success' }
});

Mockjax modifies jQuery using $.extend({ ajax: function() { // ... } }); — by passing one argument to $.extend the jQuery object itself is modified. The original ajax module is kept around internally and used to simulate network requests by changing jQuery’s xhr function.

As shown above, request latency can be simulated using a parameter. There are other advanced configuration options as well, including contentType and isTimeout.

ImageMapster

ImageMapster (GitHub: jamietre / ImageMapster, License: MIT) by James Treworgy is a plugin that makes it easier to manipulate HTML image maps. That means interesting effects can be created using image maps and more modern HTML/CSS/JavaScript techniques, while still falling over to the basic functionality in older browsers. The ImageMapster demos page has a lot of examples — the “Vegetable Tray” example shows off some of the basic features.

By calling $('img').mapster(options), ImageMapster will attempt to bind to each image that has an associated map. An area within the image map can be selected with $('area').mapster('select'). The project has lots of options and features, but fortunately the ImageMapster documentation is thorough.

JavaScript Face Detection

This isn’t a jQuery project, but some extremely interesting client-side coding: JavaScript Face Detection + Canvas + Video = HTML5 Glasses! The author, Wes Bos, has written a tutorial and the provided source (wesbos / HTML5-Face-Detection) for some interesting HTML5 Canvas and JavaScript that uses the Core Computer Vision Library.

The CCV JavaScript library uses Web Worker to parallelise computation, but Wes said:

In the CCV examples, they provide a web worker example so we could do this asynchronously, but in my tests it was significantly slower.

The HTML5 Glasses demo that comes with this tutorial doesn’t run in real time (on my computer it updates every 380-400ms), but the tracking library seems to work very well.

Google Reader