Tracking football in a html5 video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the orginal source does not exists now, can I have more details about this please!!