Embed AR Player
/* *************************************************************************
INSTRUCTIONS: How to embed the above player into your web page
************************************************************************* */
// The AR Player requires 4 parts to operate as intended. The 4 areas
// where the code needs to be copied to can be seen in the following
// simplified web page structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of your web page</title>
[1] JAVASCRIPT
[2] PLAYER JS
[3] CSS STYLES
</head>
<body>
[4] HTML ELEMENT
</body>
</html>
// Copy the code blocks below into your web page using the
// structure above as your guide.
[1] Javascript
<!-- // • Loads and caches the AR mockup images
// • Makes the AR Mockup spinnable -->
<script type="text/javascript">
Player={};Player.version="1.0.4";Player.defaults={id:"player",width:520,height:392,rho:[],theta:[]};Player.clear=function(a){if(Player[a].o==undefined){return}Player[a].o.onmousemove=undefined;Player[a].o.onmouseup=undefined;Player[a].o.onmouseout=undefined};Player.applyMask=function(b,a){return b.mask==undefined||b.mask==""?a:b.mask.replace("{id}",a)};Player.initimg=function(e,c,b,d){var a=e.theta[b]+"_"+e.rho[c];return Player._initimg(e,Player.applyMask(e,a),d)};Player._initimg=function(e,b,d){var c=e.base==undefined||e.base==""?"./":e.base+"/";console.log("img.src: "+c+b);var a=new Image();a.src=c+b;if(d!=undefined){a.onload=d}var f=document.createElement("div");f.style.backgroundImage=undefined;f.classList.add("hidden");f.appendChild(a);return a};Player.init=function(m){console.log("Player.js by HaptUX Inc., version "+Player.version);console.log("start: "+m.id);var c=m.id;if(c==undefined){console.log("id: undefined...");return}try{if(Player[c]==undefined){Player[c]={}}var d=Player[c];var p=Player.clone(Player._css);for(var j in Player.defaults){if(d[j]==undefined){d[j]=Player.defaults[j]}}if(m!=undefined){for(var q in m){d[q]=m[q]}}d.o=document.getElementById(d.id);d.start=function(a){d.o.classList.remove("pointer");d.o.onmousedown=undefined;delete d.click_to_start;Player.init({id:d.id})};d.img=[];if(d.slide_show!=undefined||d.auto!=undefined){d.idx=-1;var g;if(d.slide_show){for(var f in d.slide_show){var h=Player._initimg(d,(d.slide_show[f]["id"]?Player.applyMask(d,d.slide_show[f]["id"]):d.slide_show[f]["src"]),function(){this.parentElement.style.backgroundImage="url('"+this.src+"')"});d.o.appendChild(h.parentElement);d.img.push(h)}}if(d.auto){for(var f in d.auto){var h=Player._initimg(d,Player.applyMask(d,d.auto[f]),function(){this.parentElement.style.backgroundImage="url('"+this.src+"')"});d.o.appendChild(h.parentElement);d.img.push(h);if(f==0){h.parentElement.classList.remove("hidden")}}}if(d.click_to_start){d.o.classList.add("pointer");d.o.onmousedown=function(a){delete d.slide_show;delete d.auto;d.start.call(null)}}d.rotate=function(){if(!d.slide_show&&!d.auto){return}var e=d.idx;if(++d.idx>d.img.length-1){d.idx=0}var a=Number(d.delay)?Number(d.delay)*1000:2000;if(d.img[d.idx]&&d.img[d.idx].parentElement.style.backgroundImage!=undefined){if(d.img[e]){d.img[e].parentElement.classList.add("hidden")}d.img[d.idx].parentElement.classList.remove("hidden");if(d.slide_show){if(Number(d.slide_show[d.idx]["d"])){a=Number(d.slide_show[d.idx]["d"])*1000}if(!d.click_to_start){if(d.slide_show[d.idx]["a"]){d.o.onclick=function(i){document.location=d.slide_show[d.idx]["a"]};d.o.classList.add("pointer")}else{d.o.onclick=undefined;d.o.classList.remove("pointer")}}}}window.setTimeout(d.rotate,a)};if(d.transition){p["#%id% div.hidden"]=p["#%id% div.hidden"].concat(Player.browsers("transition","opacity "+d.transition))}d.rotate()}else{if(d.click_to_start){d.o.classList.add("pointer");if(d.theta!=undefined||d.rho!=undefined){d.o.onmousedown=d.start}}else{try{while(d.o.firstChild){d.o.removeChild(d.o.firstChild)}}catch(l){}d.spin=d.rho[0]=="0"&&Number(d.rho[d.rho.length-1])==360*(1-1/d.rho.length);if(d.ir==undefined){d.ir=d.spin?0:Math.round((d.rho.length-1)/2)}else{for(var j in d.rho){if(Number(d.rho[j])==Number(d.ir)){d.ir=j}}}if(d.it==undefined){d.it=Math.round((d.theta.length-1)/2)}else{for(var j in d.theta){if(Number(d.theta[j])==Number(d.it)){d.it=j}}}var h=Player.initimg(d,d.ir,d.it);d.o.appendChild(h);d.o.style.backgroundImage="url('"+h.src+"')";h.parentElement.classList.remove("hidden");d.dragtospin=document.getElementById(d.id+"_dragtospin");if(d.dragtospin==undefined){d.dragtospin=document.createElement("div");d.dragtospin.setAttribute("id",d.id+"_dragtospin");d.dragtospin.classList.add("dragtospin")}else{if(d.dragtospin.classList.contains("hidden")){d.dragtospin.classList.remove("hidden")}try{d.dragtospin.parentElement.removeChild(d.dragtospin)}catch(l){}}d.count=0;d.total=d.rho.length*d.theta.length;for(var s in d.theta){d.img.push([]);for(var b in d.rho){var h=Player.initimg(d,b,s,function(){if(d.dragtospin!=undefined){d.dragtospin.innerHTML=""+(++d.count"}});if(d.ir!=b||d.it!=s){d.o.appendChild(h)}d.img[s].push(h)}}d.o.appendChild(d.dragtospin);d.o.onmousedown=function(a){var i=Player[this.id];if(i.count!=i.total){return}i.scaleX=i.o.offsetWidth/40;i.scaleY=i.o.offsetHeight/30;i.x=a.screenX;i.y=a.screenY;if(i.dragtospin!=undefined){i.dragtospin.classList.add("hidden")}if(!i.o.classList.contains("move")){i.o.classList.add("move")}i.o.onmousemove=function(o){var n=i.ir+(o.screenX>i.x?Math.floor((o.screenX-i.x)/i.scaleX):-Math.floor((i.x-o.screenX)/i.scaleX));var r=i.it-(o.screenY>i.y?Math.floor((o.screenY-i.y)/i.scaleY):-Math.floor((i.y-o.screenY)/i.scaleY));if(r>=i.theta.length){r=i.theta.length-1;i.y=o.screenY}else{if(r<0){r=0;i.y=o.screenY}}if(n>=i.rho.length){n=i.spin?0:i.rho.length-1;i.x=o.screenX}else{if(n<0){n=i.spin?i.rho.length-1:0;i.x=o.screenX}}if((r!=i.it)||(n!=i.ir)){i.x=o.screenX;i.y=o.screenY;i.o.style.backgroundImage="url('"+i.img[r][n].src+"')";i.it=r;i.ir=n}};i.o.onmouseup=function(n){Player.clear(c)};i.o.onmouseout=function(n){Player.clear(c)}}}}p["#%id%"]=p["#%id%"].concat(d.fit_parent?[{height:"100%"},{"background-size":"auto 100%"}]:[{width:d.width+"px"},{height:d.height+"px"}]);Player.css(d,p)}catch(k){console.log(k)}};Player._css={"#%id%":[{"background-repeat":"no-repeat"},{"background-color":"transparent"},{"background-position":"center center"},{"-webkit-user-select":"none"},{"-khtml-user-select":""},{"-moz-user-select":""},{"-o-user-select":""},{"-ms-user-select":""},{"user-select":""},{position:"relative"}],"#%id% div":[{position:"absolute"},{height:"100%"},{width:"100%"},{"background-size":"auto 100%"},{opacity:"1"},{"pointer-events":"none"},{"background-position":"center"},{"z-index":"10"}],"#%id% div.hidden":[{opacity:"0"},{"z-index":"11"}],"#%id% img":[{display:"none"}],"#%id%.pointer":[{cursor:"pointer"}],"#%id%.move":[{cursor:"move"}]};Player.css=function(f,b){function d(p){var m="",e,n="";for(var l in p){m+=l.replace("%id%",f.id)+" {\n";for(var h in p[l]){e=Object.keys(p[l][h])[0];m+=e+": "+(p[l][h][e]==""?n:p[l][h][e])+";\n";if(p[l][h][e]!=""){n=p[l][h][e]}}m+="}\n"}return m}var g=document.getElementById(f.id+"_css");try{if(g!=undefined){document.getElementsByTagName("head")[0].removeChild(g)}}catch(c){}var a=document.createElement("style");a.type="text/css";a.setAttribute("id",f.id+"_css");if(a.styleSheet){a.styleSheet.cssText=d(b)}else{a.appendChild(document.createTextNode(d(b)))}document.getElementsByTagName("head")[0].appendChild(a)};Player.browser_styles=function(b,a){return"\"'-webkit-"+b+"': '"+a+"'\", \"'-moz-"+b+"': '"+a+"'\", \"'-o-"+b+"': '"+a+"'\", \"'-ms-"+b+"': '"+a+"'\", \"'"+b+"': '"+a+"'\""};Player.browsers=function(k,v){return eval("[{'-webkit-"+k+"': v}, {'-moz-"+k+"': v}, {'-o-"+k+"': v}, {'-ms-"+k+"': v}, {'"+k+"': v}]")};Player.clone=function(b){var d=[];for(var c in b){d[c]=b[c].slice(0)}return d};
</script>
[2] Player JS
<!-- // • Initializes the AR player on your web page
// • Parameters define AR player features
// • Base is the URL of the images folder (default is local ./img)
// • The id MUST BE UNIQUE for each embedded AR player -->
<script type="text/javascript">
function init() {
Player.init({
id: 'player',
drag_to_spin: 'Drag to Spin',
transition: '.5s ease-in-out',
width: 640,
height: 480,
it: 75,
ir: 0,
theta: ['0', '15', '30', '45', '60', '75', '90'],
rho: ['0', '15', '30', '45', '60', '75', '90', '105', '120', '135', '150', '165', '180', '195', '210', '225', '240', '255', '270', '285', '300', '315', '330', '345'],
base: './img',
mask: '{id}.jpg'
});
}
window.onload = init;
</script>
[3] CSS
<!-- // • Defines what your AR player will look like
// • Change player position
// • Customize 'Drag to Spin' style -->
.player {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.dragtospin {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
cursor:pointer;
position:absolute;
text-align:center;
top: 50%;
-webkit-transform: translatey(-50%);
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
transform: translatey(-50%);
width:100%;
}
.dragtospin span {
display: block;
position: relative;
top: 50%;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #fff;
max-width: 100px;
min-height: 108px;
margin: 0 auto;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTAxQTI5NEI0RDAxMUU4QUU3QkFDMEFBMzFEQjhCRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTAxQTI5NUI0RDAxMUU4QUU3QkFDMEFBMzFEQjhCRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5MDFBMjkyQjREMDExRThBRTdCQUMwQUEzMURCOEJGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5MDFBMjkzQjREMDExRThBRTdCQUMwQUEzMURCOEJGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ggmE4AAABn9JREFUeNrsnAlsFVUUhqdIFVAbqmxuQVPU0gomKAmuNAETtKVxASVxSVxQXGIgIgJC0SgqRgmJQAiLiqlgo0VwYReJSiRaEKqioYDUikhbyyJiC9rnf9L/xcl4b+fOe/Nm3hs9yZdp3tw7c+fMzLlnudOsWCxm/S//SFYaKKQfeARcCjqCHeANsD6U0YhCQuQ+0BD7t/wGysIYU9jKaI7p5S/wVNDjCuuVGQaWgq4u7VrA7aAy6jbkS3C5YdtvwGDQFMTAOoSgjMkOZWwC74K9mvaXgAlRNaq5YCdtxHEw1bavO1ipsSd1oFsUjerjtouco9gvSqnWKKUsigr5jBdX084dH6VRyJaoKaQInODFTXNpu0GhkFYwLNXjDNKoltITbQBzXNqqptksMDxKRnUT7/QSw/Z1iqdke1SekDzQ3zbNmsg6zRR8dRT8EPFMTwMH6aGayGbNeIuioJAB3FZ78DgXgiOa6DjjFZLP7bce+rSCLe0cK6MVksftDo/9vlP81sd2vIxUSDHoyb8/9tj3e8VvXcA1qRpsxwAU0ofbeoMnpJj+hn18McdvFg1ro+P1WpkpfsjL9CG+MGi7MZaYrMokP6QXtz8ZtH0BNHs8/jFQlkk2pDu3DQZtV4M3PR5/CRNOGaOQnh4UIvIkqDNs+zOYkmmzTPwJaTRsfwDMNmy7gO0zKqf6PDgB3uKM04VuvMwgnRxt5ffD4BXwicv0Ws1aTtommeVirwXngvPAWaAHyQU5Ho4lRrIKLFMozeJULNn4ixjwSSL66bAVMopxhUSxF4PzQbbbLM9ZoZlPze+O/SeBzuAQfRKxJ3crjrMKPMxQoLPNF5Hj7aPLvygBR9CTQuQu38HH+Ao+CU7ZD34AP/Ld/pWI/fgK1CRgkKsc5zpGx+wePiVdqEiV8o+Cr8FiMN8vx2woWAz2O5yho+BzMBeMAQWKvsNBLTiQhLM00XHeBYo214FysBU0Mt3olINgBeidaE5V8pcfslwQl0NgGXjUsCwwmv1+8Snbtg/0NGjfgTdxN0uidmkBa7wopAd41VF3lXTeDMPB2Bnrk0KKOZ5Ear15dO1bFAX1e90UMshRFxHtvp6AIpwK2eVDnDE9yf4XKGo+rbz5SoVcBfY6lDE2yUH4qRC/UFUHFzkVIvZgh6PRCh9Ono4KEQ4rll7cZI92nwB9HRNQlRVdOagIYZ6xxzKDFZ0KfDjxCW5PSSNlFGp8qN52heQqGtwCHkzy5C3cZqfgwkqsthpPiYc+8hZs1DhyWXaFqJI32QyyFiteJ1OJu+an+pzBlzG9A6700G8u2Aa6afbvt3uq41xSdE10dEo8Gq8R7N/skzGcrChxlrg4aJXgiMv1yfQ73jntLjfMX+6imywHKHS5gBJbv2QUIcfZrBmPUyEXggqwR+Gl6mS9atHdmayW3eglR83ochcDun0M6qQ6t4FR7a0M08cl8Hr0ZcQ7EpysafMaOIMR99ngdEWWvj2RcQ5pL9qVvMJD7bxrXo1qA5M+xxmptvBvsS97wXhN36lgDC8yFSI3axaYZBLtFtKlbYqlVlYrzl3KkkWqRBbtfEpX3vMKonzGEFUe3sdkFDJLEYT5JRLMrWOw58uSqsHgWbCW0asfUqmZSWp9VMI2LvZL+UrmETRk8eKzeH/ntGP8VFLJ4zhF8rDTwJ00kqYG/g/arGpm7teGnXXPpcXuwVlLDHNXXlQOs+qd6MqL47edHrFOBlAxxRrv0mKRSnKoLzJ9mfZlCPEsb7baFr/MTvAYIxmAXqbYJwvxPvBttAGE2nn0VFsNHDkTT7XWg6ealsXu3WAPnaUhSR7rOTAQzGNG3XcJagXRTh9TCvWMwov4qrRmWilTZLrV9hXEZtZ00laCekLii+f62YrfJvmO/oFrJMA85m4awccM2y8F9WBKVL+5q6BC3jNsX2ObSWSp1cCoKeQBmztd4NK2VFOKvC1KX0NUWG0rg8RbHe3SVuW95ljmq5AywoYIC3m3pXDeS9OmQJN22BrEGIP+CLGcCSJZmThT02aSpgrwUdRmmTgrbNWymY5994M/NUnu/Kh+yDwULGdpIsbVQFX0Oa7XFLXKmQpIuYT1IfN8A8Mal8OsLG6PskIkV7JGE847ZQaYGNTAwvx3GRK1vh2vqWpEXqcbghxU2P8/ZBBrQYWKffJ1w11W26K9/4xCLAZ7ExjO57LY9T54KYzBpINC0kr+FmAAoQx2Gq5CBzEAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: center 15px;
background-color: rgba(93,95,198,.9);
overflow: hidden;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.dragtospin span strong {
position:absolute;
bottom:0px;
left:0px;
width:100%;
font-weight:600;
padding-bottom:8px;
}
[4] HTML
<!-- // • Place this div anywhere in your web page within <body></body>
// • The AR player will be embedded into this div element
// • The div id MUST MATCH the id you enter in the [2] Player JS parameters -->
<div class="player">
<div id="player"></div>
</div>
Online Help
// The code above represents the baseline AR player functionality. For
// additional features such as creating a slideshow, auto play mode or
// detailed descriptions of the Player parameters please click Learn more...
View configuration options...