Skip to content

Instantly share code, notes, and snippets.

@bhattisatish
Created February 21, 2012 15:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bhattisatish/1877001 to your computer and use it in GitHub Desktop.
Tracking football in a html5 video
// Original source http://lusob.com/2012/02/tracking-a-football-match-with-html5-and-javascript/
(function( $ ){
function format(str) {
for (var i = 1; i < arguments.length; i++) {
str = str.replace('%' + (i - 1), arguments[i]);
}
return str;
}
function buildOptions(options) {
options = options || {};
options.image = options.image || "";
options.cycle = options.cycle || 1;
options.resetMargin = options.resetMargin || 0;
options.sensibility = options.sensibility || options.cycle * 0.35;
options.autoscrollspeed = options.autoscrollspeed || 500;
return options;
}
var methods = {
init : function( options ) {
methods.options = buildOptions(options);
var wrapper = null;
return this.each(function(){
var $pic = $(this);
data = $pic.data('360view');
// If the plugin hasn't been initialized yet
if ( ! data ) {
$(this).data('360view', {
target : $pic
});
}
$(function() {
wrapper = $('<div id="meta-product-img" style="background-position:0px 0px"></div>') ;
wrapper.css("background-image", format("url(%0)", methods.options.image);
wrapper.css( { height: $pic.height(), width: $pic.width(), overflow:"hidden", position:"relative" });
$pic.wrap(wrapper);
wrapper = $pic.parent();
$pic.hide();
wrapper.data("currentIndex",0).data("tempIndex",0);
var originalHeight = 440;
var originalWidth = 220;
var totalImgs = 16;
var imgPerCol = 4;
var imgPerRow = 4;
console.log(wrapper);
wrapper.mousemove( function(evt) {
if (!!wrapper.data("refTouchX") === false) {
wrapper.data("refTouchX",evt.pageX);
wrapper.data("refTouchY",evt.pageY);
wrapper.data("refLocX",parseInt($pic.css("left")));
wrapper.data("refLocY",parseInt($pic.css("top")));
}
evt.preventDefault()
var e = evt;
var distance = e.pageX - wrapper.data("refTouchX"); //distance hold the distance traveled with the finger so far..
stripeSize = Math.floor(originalWidth / totalImgs);
var newIndex = wrapper.data("currentIndex") + Math.floor(distance*options.sensibility/stripeSize)
if (newIndex < 0)
{
newIndex = totalImgs - 1;
wrapper.data("currentIndex",newIndex);
}
newIndex = newIndex % totalImgs;
if (newIndex == wrapper.data("currentIndex"))
return;
console.log("NewIndex post " + newIndex);
//wrapper.attr("src",imgArr[newIndex]);
var currentRow = Math.floor(newIndex/imgPerRow)
//currentCol = Math.floor((newIndex - 1)/imgPerRow)
var currentCol = newIndex % imgPerRow;
//console.log("Row " + currentRow + " Col " + currentCol);
if (currentRow > imgPerCol) currentRow = imgPerCol;
//console.log("In Mousemove " + format("%0 %1", -1 * originalWidth * currentCol, originalHeight * currentRow));
wrapper.css("background-position", format("%0px %1px", -1 * originalWidth * currentCol, originalHeight * currentRow));
wrapper.data("tempIndex",newIndex);
});
});
});
},
destroy : function( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('360view');
$(window).unbind('.360view');
data.tooltip.remove();
$this.removeData('360view');
});
},
reposition : function( ) { // ...
},
show : function( ) { // ...
},
hide : function( ) { // ...
},
update : function( content ) { // ...
}
};
$.fn.productView = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 2 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.product' );
}
};
})( jQuery );
@kafle1
Copy link

kafle1 commented Jun 20, 2022

the orginal source does not exists now, can I have more details about this please!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment