├── .gitignore ├── README.md ├── package.json ├── public ├── fonts │ └── Apercu.ttf ├── images │ ├── current.jpg │ ├── current.png │ ├── doc01.jpg │ ├── doc01.png │ ├── video.jpg │ └── video.png ├── scripts │ ├── client.js │ ├── getMedia.js │ ├── jquery.js │ ├── p5.dom.js │ ├── p5.js │ └── p5ml.js └── style │ ├── circles.png │ └── style.css ├── server └── server.js └── views └── index.mustache /.gitignore: -------------------------------------------------------------------------------- 1 | server/private 2 | .DS_store 3 | */.DS_store 4 | */*/.DS_store 5 | node_modules 6 | public/fonts 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [ DEPRECATED ] This project uses an old version of ml5.js. 2 | 3 | 4 | # ML PONG 5 | 6 | Machine Learning Pong it's an experimental version of the famous computer game Pong that aims to educate users on how machine learning tasks are trained through a fun gaming experience. The user is able to teach, in realtime, a neural network and then play the game in the browser using a set of assigned emojis as reference. 7 | 8 | 9 | ![ML PONG](public/images/doc01.jpg) 10 | 11 | ## How it works 12 | 13 | ML Pong uses the P5 DeepLearn library https://github.com/cvalenzuela/p5-deeplearn-js to train the controllers and predict the output. 14 | 15 | ## Demo 16 | 17 | Video Demo version runs in 2 different windows browsers and is sending the data through web sockets. (The repo for this project combines the game and the controller in one single page) 18 | 19 | ### [ML PONG](https://www.youtube.com/watch?v=koZYwOAHmQM&feature=youtu.be) 20 | [![ML PONG](public/images/video.jpg)](https://www.youtube.com/watch?v=koZYwOAHmQM&feature=youtu.be) 21 | 22 | 23 | ## Usage 24 | 25 | Currently version of the game runs the game and the controller at the same page.* 26 | 27 | - Clone Repository. 28 | - Create `private` directory inside of `/server` and add your `cert.pem` and `key.pem` certificates. 29 | - Replace your credentials in the`server.js` file. 30 | - Run `$ npm install` 31 | - Start `$ npm start` 32 | 33 | Project will run at port 3000. 34 | 35 | ## Test 36 | 37 | https://am7673.itp.io:3000 38 | 39 | ![ML PONG](public/images/current.jpg) 40 | 41 | 42 | ## License 43 | 44 | MIT 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "deeplearn-socket", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "cd server && node server.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.16.2", 14 | "mustache-express": "^1.2.5" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /public/fonts/Apercu.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/fonts/Apercu.ttf -------------------------------------------------------------------------------- /public/images/current.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/current.jpg -------------------------------------------------------------------------------- /public/images/current.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/current.png -------------------------------------------------------------------------------- /public/images/doc01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/doc01.jpg -------------------------------------------------------------------------------- /public/images/doc01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/doc01.png -------------------------------------------------------------------------------- /public/images/video.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/video.jpg -------------------------------------------------------------------------------- /public/images/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/images/video.png -------------------------------------------------------------------------------- /public/scripts/client.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | let socket; 4 | let startPredicting = false; 5 | let times = 0; 6 | let keyPressed = 0; 7 | 8 | 9 | let emojis =["🙂", "😛", "☝", "✋", "✌", "✊"]; 10 | let logText = document.getElementById('log'); 11 | let video = document.getElementById('my-video'); 12 | let videoText = document.getElementById('videoText'); 13 | let videoShow = document.getElementById('video'); 14 | let renderList = document.getElementById('renderList'); 15 | let loading = document.getElementById('loading'); 16 | 17 | let ry = 251; 18 | let gy = 213; 19 | let by = 28; 20 | let black = 0; 21 | let changeColor = false; 22 | let reset = false; 23 | 24 | 25 | var gameStart = false; 26 | var paddleL = { 27 | x: 40, 28 | y: 400, 29 | w: 25, 30 | h: 120, 31 | }; 32 | var paddleR = { 33 | x: 740, 34 | y: 100, 35 | w: 25, 36 | h: 120, 37 | }; 38 | var ball = { 39 | x: 50, 40 | y: 20, 41 | diam: 22, 42 | speedX: 5, 43 | speedY: 5, 44 | }; 45 | var speedX = 4; 46 | var speedY = 4; 47 | var paddleSpeed = 8; 48 | 49 | 50 | let lU = 0; 51 | let lD = 0; 52 | let rU = 0; 53 | let rD = 0; 54 | 55 | 56 | logText.innerHTML = "🙃"; 57 | 58 | 59 | 60 | document.addEventListener('DOMContentLoaded', function() { 61 | 62 | 63 | // LOAD MODEL 64 | let knn = new p5ml.KNNImageClassifier(loopURls); 65 | let index = 0; 66 | let trainingTime = 5; 67 | let startPred = false; 68 | 69 | 70 | // TRAIN NEW EMOJIS 71 | emojis.forEach(trainNewEmojis); 72 | 73 | function trainNewEmojis(element, index){ 74 | let liNotTrained = document.getElementById(element); 75 | 76 | liNotTrained.addEventListener("click", function(){ 77 | console.log("Click" + liNotTrained.id ); 78 | liNotTrained.children[1].innerHTML = " ↝ Training " + keyPressed + " / 10"; 79 | 80 | keyPressed++ 81 | 82 | console.log("A preesed", keyPressed, "times"); 83 | 84 | 85 | let position = index; 86 | 87 | knn.addImage(video, index); 88 | 89 | if(keyPressed === 12 ){ 90 | 91 | liNotTrained.children[1].innerHTML = " ↝ Trained as " + liNotTrained.children[1].getAttribute("data-trained") + " √"; 92 | liNotTrained.children[1].style.color = "#bdb4b4"; 93 | 94 | setTimeout(function(){ modelSign.style.display = "none"; }, 1500); 95 | 96 | keyPressed = 0; 97 | 98 | console.log("position trained" ); 99 | console.log(index); 100 | // socket.emit('position', position); 101 | 102 | } 103 | 104 | }); 105 | 106 | } 107 | 108 | 109 | function loopURls(){ 110 | 111 | //START PREDICTING 112 | console.log('start predicting'); 113 | 114 | loading.style.backgroundColor = "purple"; 115 | loading.style.color = "white"; 116 | loading.innerHTML = "LOADING "; 117 | 118 | setTimeout(function(){ 119 | loading.style.display = "none"; 120 | },3000) 121 | 122 | startPred = true; 123 | window.startPred = startPred; 124 | 125 | setInterval(function() { 126 | knn.predict(video, function(data) { 127 | 128 | console.log(data); 129 | 130 | let position = data.classIndex; 131 | let emoji = emojis[data.classIndex]; 132 | 133 | 134 | if (emoji == "🙂") { 135 | console.log(emoji); 136 | logText.innerHTML = emoji; 137 | } 138 | 139 | // console.log(data); 140 | if (emoji == "☝") { 141 | lU = 1; 142 | logText.innerHTML = emoji; 143 | } else { 144 | lU = 0; 145 | } 146 | 147 | if (emoji == "✋") { 148 | console.log(emoji); 149 | lD = 1; 150 | logText.innerHTML = emoji; 151 | } else { 152 | lD = 0; 153 | } 154 | 155 | if (emoji == "✌") { 156 | rU = 1; 157 | logText.innerHTML = emoji; 158 | } else { 159 | rU = 0; 160 | } 161 | 162 | if (emoji == "✊") { 163 | rD = 1; 164 | logText.innerHTML = emoji; 165 | } else { 166 | rD = 0; 167 | } 168 | 169 | 170 | if (emoji == "😛") { 171 | ball.x = 0; 172 | ball.y = 20; 173 | paddleL.y = 300; 174 | logText.innerHTML = emoji; 175 | } 176 | 177 | 178 | 179 | 180 | }) 181 | }, 250); 182 | } 183 | 184 | 185 | 186 | // CAMERA 187 | navigator.getUserMedia = navigator.getUserMedia; 188 | 189 | if (navigator.getUserMedia) { 190 | navigator.getUserMedia({ audio: false, video: true }, 191 | function(stream) { 192 | video.srcObject = stream; 193 | videoShow.srcObject = stream; 194 | 195 | video.onloadedmetadata = function(e) { 196 | video.play(); 197 | videoShow.play(); 198 | 199 | }; 200 | }, 201 | function(err) { 202 | console.log("The following error occurred: " + err.name); 203 | } 204 | ); 205 | } else { 206 | console.log("getUserMedia not supported"); 207 | } 208 | }) 209 | 210 | 211 | function setup() { 212 | createCanvas(800, 600); 213 | smooth(); 214 | } 215 | 216 | function draw() { 217 | 218 | gameStart === true; 219 | 220 | background(ry,gy,by); 221 | noStroke(); 222 | 223 | createLeftPaddle(); 224 | createRightPaddle(); 225 | createBall(); 226 | ballBounceTopAndBottom(); 227 | ballBounceRight(); 228 | ballBounceLeft(); 229 | } 230 | 231 | 232 | function createBall() { 233 | //Create ball 234 | if (changeColor == false) { 235 | fill(black, black, black); 236 | } else { 237 | fill(245, 224, 2); 238 | } 239 | ellipse(ball.x, ball.y, ball.diam+5, ball.diam+10); 240 | 241 | ball.x = ball.x + speedX; 242 | ball.y = ball.y + speedY; 243 | 244 | } 245 | 246 | 247 | function createLeftPaddle() { 248 | //Create the left paddle 249 | if (changeColor == false) { 250 | fill(black, black, black); 251 | } else { 252 | fill(245, 224, 2); 253 | } 254 | rect(paddleL.x, paddleL.y, paddleL.w, paddleL.h); 255 | //Control the left paddle 256 | if (lD === 1) { 257 | if (paddleL.y + paddleL.h < height - 5) { 258 | paddleL.y = paddleL.y + paddleSpeed; 259 | } 260 | } 261 | if (lU === 1) { 262 | if (paddleL.y > 5) { 263 | paddleL.y = paddleL.y - paddleSpeed; 264 | } 265 | } 266 | } 267 | 268 | function createRightPaddle() { 269 | //Create the right paddle 270 | if (changeColor == false) { 271 | fill(black, black, black); 272 | } else { 273 | fill(245, 224, 2); 274 | } 275 | rect(paddleR.x, paddleR.y, paddleR.w, paddleR.h); 276 | //Control the right paddle 277 | 278 | if (rD === 1) { //move paddle down 279 | if (paddleR.y + paddleR.h < height - 5) { 280 | paddleR.y = paddleR.y + paddleSpeed; 281 | } 282 | } 283 | if (rU === 1) { //move paddle up 284 | if (paddleR.y > 5) { 285 | paddleR.y = paddleR.y - paddleSpeed; 286 | } 287 | } 288 | 289 | } 290 | 291 | function ballBounceTopAndBottom() { 292 | 293 | //If if the ball hits the top or bottom of the court it bounces 294 | if (ball.y + 12.5 > height || ball.y < 12.5 && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { 295 | speedY = speedY * -1; //reverse the direction of the motion 296 | ball.y = ball.y + speedY; //keeps things moving 297 | } 298 | 299 | } 300 | 301 | function ballBounceRight() { 302 | //if the x of the edge ball is more than the x of the right paddle and 303 | //the y of the ball is greater than the y of the rectangle and 304 | //less than the y of the rectangle plus the height 305 | if (ball.x + 12.5 > paddleR.x && ball.y + 12.5 > paddleR.y && ball.y + 12.5 < paddleR.y + paddleR.h && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { 306 | speedX = speedX * -1; //This reverses the direction, I think 307 | ball.x = ball.x + speedX; //This keeps the ball moving 308 | } 309 | //if the edge of the ball is lower than rect y and 310 | //the x of the ball is greater than the x of the rect and less than the width 311 | else if (ball.y + 12.5 > paddleR.y && ball.y < paddleR.y + paddleR.y + paddleR.h && ball.x + 12.5 > paddleR.x && ball.x < paddleR.x + paddleR.x && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { 312 | speedY = speedY * -1; //reverse the direction of the motion 313 | ball.y = ball.y + speedY; //keeps things moving 314 | } 315 | 316 | //if the edge of the ball is higher than rect y plus height and 317 | //the x of the ball is greater than the x of the rect and less than the width 318 | else if (ball.y + 12.5 < paddleR.y + paddleR.h && ball.y > paddleR.y && ball.x > paddleR.x && ball.x < paddleR.x + paddleR.h && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { 319 | speedY = speedY * -1; //reverse the direction of the motion 320 | ball.y = ball.y + speedY; //keeps things moving 321 | } 322 | } 323 | 324 | function ballBounceLeft() { 325 | //if the ball hits the left wall 326 | /* if (ball.x < 0) { 327 | speedX = speedX * -1; //This reverses the direction, I think 328 | ball.x = ball.x + speedX; //This keeps the ball moving 329 | print("pow");*/ 330 | 331 | //if the ball hits the front of the left paddle 332 | if (ball.x - 12.5 < paddleL.x + paddleL.w && ball.y + 12.5 > paddleL.y && ball.y + 12.5 < paddleL.y + paddleL.h && ball.x > 0 && ball.x < width && ball.y > 0 && ball.y < height) { 333 | speedX = speedX * -1; //This reverses the direction, I think 334 | ball.x = ball.x + speedX; //This keeps the ball moving 335 | } 336 | } 337 | -------------------------------------------------------------------------------- /public/scripts/getMedia.js: -------------------------------------------------------------------------------- 1 | navigator.webkitGetUserMedia({ audio: true, video: true }, function() { 2 | console.log('ok'); 3 | }, function(e) { 4 | console.log('webcam not ok'); 5 | }); -------------------------------------------------------------------------------- /public/scripts/jquery.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v1.8.3 jquery.com | jquery.org/license */ 2 | (function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write(""),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u)[^>]*$|#([\w\-]*)$)/,E=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,S=/^[\],:{}\s]*$/,x=/(?:^|:|,)(?:\s*\[)+/g,T=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,N=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g,C=/^-ms-/,k=/-([\da-z])/gi,L=function(e,t){return(t+"").toUpperCase()},A=function(){i.addEventListener?(i.removeEventListener("DOMContentLoaded",A,!1),v.ready()):i.readyState==="complete"&&(i.detachEvent("onreadystatechange",A),v.ready())},O={};v.fn=v.prototype={constructor:v,init:function(e,n,r){var s,o,u,a;if(!e)return this;if(e.nodeType)return this.context=this[0]=e,this.length=1,this;if(typeof e=="string"){e.charAt(0)==="<"&&e.charAt(e.length-1)===">"&&e.length>=3?s=[null,e,null]:s=w.exec(e);if(s&&(s[1]||!n)){if(s[1])return n=n instanceof v?n[0]:n,a=n&&n.nodeType?n.ownerDocument||n:i,e=v.parseHTML(s[1],a,!0),E.test(s[1])&&v.isPlainObject(n)&&this.attr.call(e,n,!0),v.merge(this,e);o=i.getElementById(s[2]);if(o&&o.parentNode){if(o.id!==s[2])return r.find(e);this.length=1,this[0]=o}return this.context=i,this.selector=e,this}return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e)}return v.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),v.makeArray(e,this))},selector:"",jquery:"1.8.3",length:0,size:function(){return this.length},toArray:function(){return l.call(this)},get:function(e){return e==null?this.toArray():e<0?this[this.length+e]:this[e]},pushStack:function(e,t,n){var r=v.merge(this.constructor(),e);return r.prevObject=this,r.context=this.context,t==="find"?r.selector=this.selector+(this.selector?" ":"")+n:t&&(r.selector=this.selector+"."+t+"("+n+")"),r},each:function(e,t){return v.each(this,e,t)},ready:function(e){return v.ready.promise().done(e),this},eq:function(e){return e=+e,e===-1?this.slice(e):this.slice(e,e+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(l.apply(this,arguments),"slice",l.call(arguments).join(","))},map:function(e){return this.pushStack(v.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:[].sort,splice:[].splice},v.fn.init.prototype=v.fn,v.extend=v.fn.extend=function(){var e,n,r,i,s,o,u=arguments[0]||{},a=1,f=arguments.length,l=!1;typeof u=="boolean"&&(l=u,u=arguments[1]||{},a=2),typeof u!="object"&&!v.isFunction(u)&&(u={}),f===a&&(u=this,--a);for(;a0)return;r.resolveWith(i,[v]),v.fn.trigger&&v(i).trigger("ready").off("ready")},isFunction:function(e){return v.type(e)==="function"},isArray:Array.isArray||function(e){return v.type(e)==="array"},isWindow:function(e){return e!=null&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return e==null?String(e):O[h.call(e)]||"object"},isPlainObject:function(e){if(!e||v.type(e)!=="object"||e.nodeType||v.isWindow(e))return!1;try{if(e.constructor&&!p.call(e,"constructor")&&!p.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||p.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw new Error(e)},parseHTML:function(e,t,n){var r;return!e||typeof e!="string"?null:(typeof t=="boolean"&&(n=t,t=0),t=t||i,(r=E.exec(e))?[t.createElement(r[1])]:(r=v.buildFragment([e],t,n?null:[]),v.merge([],(r.cacheable?v.clone(r.fragment):r.fragment).childNodes)))},parseJSON:function(t){if(!t||typeof t!="string")return null;t=v.trim(t);if(e.JSON&&e.JSON.parse)return e.JSON.parse(t);if(S.test(t.replace(T,"@").replace(N,"]").replace(x,"")))return(new Function("return "+t))();v.error("Invalid JSON: "+t)},parseXML:function(n){var r,i;if(!n||typeof n!="string")return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(s){r=t}return(!r||!r.documentElement||r.getElementsByTagName("parsererror").length)&&v.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&g.test(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(C,"ms-").replace(k,L)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,n,r){var i,s=0,o=e.length,u=o===t||v.isFunction(e);if(r){if(u){for(i in e)if(n.apply(e[i],r)===!1)break}else for(;s0&&e[0]&&e[a-1]||a===0||v.isArray(e));if(f)for(;u-1)a.splice(n,1),i&&(n<=o&&o--,n<=u&&u--)}),this},has:function(e){return v.inArray(e,a)>-1},empty:function(){return a=[],this},disable:function(){return a=f=n=t,this},disabled:function(){return!a},lock:function(){return f=t,n||c.disable(),this},locked:function(){return!f},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],a&&(!r||f)&&(i?f.push(t):l(t)),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!r}};return c},v.extend({Deferred:function(e){var t=[["resolve","done",v.Callbacks("once memory"),"resolved"],["reject","fail",v.Callbacks("once memory"),"rejected"],["notify","progress",v.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return v.Deferred(function(n){v.each(t,function(t,r){var s=r[0],o=e[t];i[r[1]](v.isFunction(o)?function(){var e=o.apply(this,arguments);e&&v.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s+"With"](this===i?n:this,[e])}:n[s])}),e=null}).promise()},promise:function(e){return e!=null?v.extend(e,r):r}},i={};return r.pipe=r.then,v.each(t,function(e,s){var o=s[2],u=s[3];r[s[1]]=o.add,u&&o.add(function(){n=u},t[e^1][2].disable,t[2][2].lock),i[s[0]]=o.fire,i[s[0]+"With"]=o.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=l.call(arguments),r=n.length,i=r!==1||e&&v.isFunction(e.promise)?r:0,s=i===1?e:v.Deferred(),o=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?l.call(arguments):r,n===u?s.notifyWith(t,n):--i||s.resolveWith(t,n)}},u,a,f;if(r>1){u=new Array(r),a=new Array(r),f=new Array(r);for(;t
a",n=p.getElementsByTagName("*"),r=p.getElementsByTagName("a")[0];if(!n||!r||!n.length)return{};s=i.createElement("select"),o=s.appendChild(i.createElement("option")),u=p.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t={leadingWhitespace:p.firstChild.nodeType===3,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(r.getAttribute("style")),hrefNormalized:r.getAttribute("href")==="/a",opacity:/^0.5/.test(r.style.opacity),cssFloat:!!r.style.cssFloat,checkOn:u.value==="on",optSelected:o.selected,getSetAttribute:p.className!=="t",enctype:!!i.createElement("form").enctype,html5Clone:i.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",boxModel:i.compatMode==="CSS1Compat",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},u.checked=!0,t.noCloneChecked=u.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!o.disabled;try{delete p.test}catch(d){t.deleteExpando=!1}!p.addEventListener&&p.attachEvent&&p.fireEvent&&(p.attachEvent("onclick",h=function(){t.noCloneEvent=!1}),p.cloneNode(!0).fireEvent("onclick"),p.detachEvent("onclick",h)),u=i.createElement("input"),u.value="t",u.setAttribute("type","radio"),t.radioValue=u.value==="t",u.setAttribute("checked","checked"),u.setAttribute("name","t"),p.appendChild(u),a=i.createDocumentFragment(),a.appendChild(p.lastChild),t.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,t.appendChecked=u.checked,a.removeChild(u),a.appendChild(p);if(p.attachEvent)for(l in{submit:!0,change:!0,focusin:!0})f="on"+l,c=f in p,c||(p.setAttribute(f,"return;"),c=typeof p[f]=="function"),t[l+"Bubbles"]=c;return v(function(){var n,r,s,o,u="padding:0;margin:0;border:0;display:block;overflow:hidden;",a=i.getElementsByTagName("body")[0];if(!a)return;n=i.createElement("div"),n.style.cssText="visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px",a.insertBefore(n,a.firstChild),r=i.createElement("div"),n.appendChild(r),r.innerHTML="
t
",s=r.getElementsByTagName("td"),s[0].style.cssText="padding:0;margin:0;border:0;display:none",c=s[0].offsetHeight===0,s[0].style.display="",s[1].style.display="none",t.reliableHiddenOffsets=c&&s[0].offsetHeight===0,r.innerHTML="",r.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",t.boxSizing=r.offsetWidth===4,t.doesNotIncludeMarginInBodyOffset=a.offsetTop!==1,e.getComputedStyle&&(t.pixelPosition=(e.getComputedStyle(r,null)||{}).top!=="1%",t.boxSizingReliable=(e.getComputedStyle(r,null)||{width:"4px"}).width==="4px",o=i.createElement("div"),o.style.cssText=r.style.cssText=u,o.style.marginRight=o.style.width="0",r.style.width="1px",r.appendChild(o),t.reliableMarginRight=!parseFloat((e.getComputedStyle(o,null)||{}).marginRight)),typeof r.style.zoom!="undefined"&&(r.innerHTML="",r.style.cssText=u+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=r.offsetWidth===3,r.style.display="block",r.style.overflow="visible",r.innerHTML="
",r.firstChild.style.width="5px",t.shrinkWrapBlocks=r.offsetWidth!==3,n.style.zoom=1),a.removeChild(n),n=r=s=o=null}),a.removeChild(p),n=r=s=o=u=a=p=null,t}();var D=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;v.extend({cache:{},deletedIds:[],uuid:0,expando:"jQuery"+(v.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?v.cache[e[v.expando]]:e[v.expando],!!e&&!B(e)},data:function(e,n,r,i){if(!v.acceptData(e))return;var s,o,u=v.expando,a=typeof n=="string",f=e.nodeType,l=f?v.cache:e,c=f?e[u]:e[u]&&u;if((!c||!l[c]||!i&&!l[c].data)&&a&&r===t)return;c||(f?e[u]=c=v.deletedIds.pop()||v.guid++:c=u),l[c]||(l[c]={},f||(l[c].toJSON=v.noop));if(typeof n=="object"||typeof n=="function")i?l[c]=v.extend(l[c],n):l[c].data=v.extend(l[c].data,n);return s=l[c],i||(s.data||(s.data={}),s=s.data),r!==t&&(s[v.camelCase(n)]=r),a?(o=s[n],o==null&&(o=s[v.camelCase(n)])):o=s,o},removeData:function(e,t,n){if(!v.acceptData(e))return;var r,i,s,o=e.nodeType,u=o?v.cache:e,a=o?e[v.expando]:v.expando;if(!u[a])return;if(t){r=n?u[a]:u[a].data;if(r){v.isArray(t)||(t in r?t=[t]:(t=v.camelCase(t),t in r?t=[t]:t=t.split(" ")));for(i=0,s=t.length;i1,null,!1))},removeData:function(e){return this.each(function(){v.removeData(this,e)})}}),v.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=v._data(e,t),n&&(!r||v.isArray(n)?r=v._data(e,t,v.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=v.queue(e,t),r=n.length,i=n.shift(),s=v._queueHooks(e,t),o=function(){v.dequeue(e,t)};i==="inprogress"&&(i=n.shift(),r--),i&&(t==="fx"&&n.unshift("inprogress"),delete s.stop,i.call(e,o,s)),!r&&s&&s.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return v._data(e,n)||v._data(e,n,{empty:v.Callbacks("once memory").add(function(){v.removeData(e,t+"queue",!0),v.removeData(e,n,!0)})})}}),v.fn.extend({queue:function(e,n){var r=2;return typeof e!="string"&&(n=e,e="fx",r--),arguments.length1)},removeAttr:function(e){return this.each(function(){v.removeAttr(this,e)})},prop:function(e,t){return v.access(this,v.prop,e,t,arguments.length>1)},removeProp:function(e){return e=v.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,s,o,u;if(v.isFunction(e))return this.each(function(t){v(this).addClass(e.call(this,t,this.className))});if(e&&typeof e=="string"){t=e.split(y);for(n=0,r=this.length;n=0)r=r.replace(" "+n[s]+" "," ");i.className=e?v.trim(r):""}}}return this},toggleClass:function(e,t){var n=typeof e,r=typeof t=="boolean";return v.isFunction(e)?this.each(function(n){v(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if(n==="string"){var i,s=0,o=v(this),u=t,a=e.split(y);while(i=a[s++])u=r?u:!o.hasClass(i),o[u?"addClass":"removeClass"](i)}else if(n==="undefined"||n==="boolean")this.className&&v._data(this,"__className__",this.className),this.className=this.className||e===!1?"":v._data(this,"__className__")||""})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;n=0)return!0;return!1},val:function(e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}}),v.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,s=e.type==="select-one"||i<0,o=s?null:[],u=s?i+1:r.length,a=i<0?u:s?i:0;for(;a=0}),n.length||(e.selectedIndex=-1),n}}},attrFn:{},attr:function(e,n,r,i){var s,o,u,a=e.nodeType;if(!e||a===3||a===8||a===2)return;if(i&&v.isFunction(v.fn[n]))return v(e)[n](r);if(typeof e.getAttribute=="undefined")return v.prop(e,n,r);u=a!==1||!v.isXMLDoc(e),u&&(n=n.toLowerCase(),o=v.attrHooks[n]||(X.test(n)?F:j));if(r!==t){if(r===null){v.removeAttr(e,n);return}return o&&"set"in o&&u&&(s=o.set(e,r,n))!==t?s:(e.setAttribute(n,r+""),r)}return o&&"get"in o&&u&&(s=o.get(e,n))!==null?s:(s=e.getAttribute(n),s===null?t:s)},removeAttr:function(e,t){var n,r,i,s,o=0;if(t&&e.nodeType===1){r=t.split(y);for(;o=0}})});var $=/^(?:textarea|input|select)$/i,J=/^([^\.]*|)(?:\.(.+)|)$/,K=/(?:^|\s)hover(\.\S+|)\b/,Q=/^key/,G=/^(?:mouse|contextmenu)|click/,Y=/^(?:focusinfocus|focusoutblur)$/,Z=function(e){return v.event.special.hover?e:e.replace(K,"mouseenter$1 mouseleave$1")};v.event={add:function(e,n,r,i,s){var o,u,a,f,l,c,h,p,d,m,g;if(e.nodeType===3||e.nodeType===8||!n||!r||!(o=v._data(e)))return;r.handler&&(d=r,r=d.handler,s=d.selector),r.guid||(r.guid=v.guid++),a=o.events,a||(o.events=a={}),u=o.handle,u||(o.handle=u=function(e){return typeof v=="undefined"||!!e&&v.event.triggered===e.type?t:v.event.dispatch.apply(u.elem,arguments)},u.elem=e),n=v.trim(Z(n)).split(" ");for(f=0;f=0&&(y=y.slice(0,-1),a=!0),y.indexOf(".")>=0&&(b=y.split("."),y=b.shift(),b.sort());if((!s||v.event.customEvent[y])&&!v.event.global[y])return;n=typeof n=="object"?n[v.expando]?n:new v.Event(y,n):new v.Event(y),n.type=y,n.isTrigger=!0,n.exclusive=a,n.namespace=b.join("."),n.namespace_re=n.namespace?new RegExp("(^|\\.)"+b.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,h=y.indexOf(":")<0?"on"+y:"";if(!s){u=v.cache;for(f in u)u[f].events&&u[f].events[y]&&v.event.trigger(n,r,u[f].handle.elem,!0);return}n.result=t,n.target||(n.target=s),r=r!=null?v.makeArray(r):[],r.unshift(n),p=v.event.special[y]||{};if(p.trigger&&p.trigger.apply(s,r)===!1)return;m=[[s,p.bindType||y]];if(!o&&!p.noBubble&&!v.isWindow(s)){g=p.delegateType||y,l=Y.test(g+y)?s:s.parentNode;for(c=s;l;l=l.parentNode)m.push([l,g]),c=l;c===(s.ownerDocument||i)&&m.push([c.defaultView||c.parentWindow||e,g])}for(f=0;f=0:v.find(h,this,null,[s]).length),u[h]&&f.push(c);f.length&&w.push({elem:s,matches:f})}d.length>m&&w.push({elem:this,matches:d.slice(m)});for(r=0;r0?this.on(t,null,e,n):this.trigger(t)},Q.test(t)&&(v.event.fixHooks[t]=v.event.keyHooks),G.test(t)&&(v.event.fixHooks[t]=v.event.mouseHooks)}),function(e,t){function nt(e,t,n,r){n=n||[],t=t||g;var i,s,a,f,l=t.nodeType;if(!e||typeof e!="string")return n;if(l!==1&&l!==9)return[];a=o(t);if(!a&&!r)if(i=R.exec(e))if(f=i[1]){if(l===9){s=t.getElementById(f);if(!s||!s.parentNode)return n;if(s.id===f)return n.push(s),n}else if(t.ownerDocument&&(s=t.ownerDocument.getElementById(f))&&u(t,s)&&s.id===f)return n.push(s),n}else{if(i[2])return S.apply(n,x.call(t.getElementsByTagName(e),0)),n;if((f=i[3])&&Z&&t.getElementsByClassName)return S.apply(n,x.call(t.getElementsByClassName(f),0)),n}return vt(e.replace(j,"$1"),t,n,r,a)}function rt(e){return function(t){var n=t.nodeName.toLowerCase();return n==="input"&&t.type===e}}function it(e){return function(t){var n=t.nodeName.toLowerCase();return(n==="input"||n==="button")&&t.type===e}}function st(e){return N(function(t){return t=+t,N(function(n,r){var i,s=e([],n.length,t),o=s.length;while(o--)n[i=s[o]]&&(n[i]=!(r[i]=n[i]))})})}function ot(e,t,n){if(e===t)return n;var r=e.nextSibling;while(r){if(r===t)return-1;r=r.nextSibling}return 1}function ut(e,t){var n,r,s,o,u,a,f,l=L[d][e+" "];if(l)return t?0:l.slice(0);u=e,a=[],f=i.preFilter;while(u){if(!n||(r=F.exec(u)))r&&(u=u.slice(r[0].length)||u),a.push(s=[]);n=!1;if(r=I.exec(u))s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=r[0].replace(j," ");for(o in i.filter)(r=J[o].exec(u))&&(!f[o]||(r=f[o](r)))&&(s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=o,n.matches=r);if(!n)break}return t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=r&&t.dir==="parentNode",o=w++;return t.first?function(t,n,r){while(t=t[i])if(s||t.nodeType===1)return e(t,n,r)}:function(t,r,u){if(!u){var a,f=b+" "+o+" ",l=f+n;while(t=t[i])if(s||t.nodeType===1){if((a=t[d])===l)return t.sizset;if(typeof a=="string"&&a.indexOf(f)===0){if(t.sizset)return t}else{t[d]=l;if(e(t,r,u))return t.sizset=!0,t;t.sizset=!1}}}else while(t=t[i])if(s||t.nodeType===1)if(e(t,r,u))return t}}function ft(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function lt(e,t,n,r,i){var s,o=[],u=0,a=e.length,f=t!=null;for(;u-1&&(s[f]=!(o[f]=c))}}else g=lt(g===o?g.splice(d,g.length):g),i?i(null,o,g,a):S.apply(o,g)})}function ht(e){var t,n,r,s=e.length,o=i.relative[e[0].type],u=o||i.relative[" "],a=o?1:0,f=at(function(e){return e===t},u,!0),l=at(function(e){return T.call(t,e)>-1},u,!0),h=[function(e,n,r){return!o&&(r||n!==c)||((t=n).nodeType?f(e,n,r):l(e,n,r))}];for(;a1&&ft(h),a>1&&e.slice(0,a-1).join("").replace(j,"$1"),n,a0,s=e.length>0,o=function(u,a,f,l,h){var p,d,v,m=[],y=0,w="0",x=u&&[],T=h!=null,N=c,C=u||s&&i.find.TAG("*",h&&a.parentNode||a),k=b+=N==null?1:Math.E;T&&(c=a!==g&&a,n=o.el);for(;(p=C[w])!=null;w++){if(s&&p){for(d=0;v=e[d];d++)if(v(p,a,f)){l.push(p);break}T&&(b=k,n=++o.el)}r&&((p=!v&&p)&&y--,u&&x.push(p))}y+=w;if(r&&w!==y){for(d=0;v=t[d];d++)v(x,m,a,f);if(u){if(y>0)while(w--)!x[w]&&!m[w]&&(m[w]=E.call(l));m=lt(m)}S.apply(l,m),T&&!u&&m.length>0&&y+t.length>1&&nt.uniqueSort(l)}return T&&(b=k,c=N),x};return o.el=0,r?N(o):o}function dt(e,t,n){var r=0,i=t.length;for(;r2&&(f=u[0]).type==="ID"&&t.nodeType===9&&!s&&i.relative[u[1].type]){t=i.find.ID(f.matches[0].replace($,""),t,s)[0];if(!t)return n;e=e.slice(u.shift().length)}for(o=J.POS.test(e)?-1:u.length-1;o>=0;o--){f=u[o];if(i.relative[l=f.type])break;if(c=i.find[l])if(r=c(f.matches[0].replace($,""),z.test(u[0].type)&&t.parentNode||t,s)){u.splice(o,1),e=r.length&&u.join("");if(!e)return S.apply(n,x.call(r,0)),n;break}}}return a(e,h)(r,t,s,n,z.test(e)),n}function mt(){}var n,r,i,s,o,u,a,f,l,c,h=!0,p="undefined",d=("sizcache"+Math.random()).replace(".",""),m=String,g=e.document,y=g.documentElement,b=0,w=0,E=[].pop,S=[].push,x=[].slice,T=[].indexOf||function(e){var t=0,n=this.length;for(;ti.cacheLength&&delete e[t.shift()],e[n+" "]=r},e)},k=C(),L=C(),A=C(),O="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[-\\w]|[^\\x00-\\xa0])+",_=M.replace("w","w#"),D="([*^$|!~]?=)",P="\\["+O+"*("+M+")"+O+"*(?:"+D+O+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+_+")|)|)"+O+"*\\]",H=":("+M+")(?:\\((?:(['\"])((?:\\\\.|[^\\\\])*?)\\2|([^()[\\]]*|(?:(?:"+P+")|[^:]|\\\\.)*|.*))\\)|)",B=":(even|odd|eq|gt|lt|nth|first|last)(?:\\("+O+"*((?:-\\d)?\\d*)"+O+"*\\)|)(?=[^-]|$)",j=new RegExp("^"+O+"+|((?:^|[^\\\\])(?:\\\\.)*)"+O+"+$","g"),F=new RegExp("^"+O+"*,"+O+"*"),I=new RegExp("^"+O+"*([\\x20\\t\\r\\n\\f>+~])"+O+"*"),q=new RegExp(H),R=/^(?:#([\w\-]+)|(\w+)|\.([\w\-]+))$/,U=/^:not/,z=/[\x20\t\r\n\f]*[+~]/,W=/:not\($/,X=/h\d/i,V=/input|select|textarea|button/i,$=/\\(?!\\)/g,J={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),NAME:new RegExp("^\\[name=['\"]?("+M+")['\"]?\\]"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+H),POS:new RegExp(B,"i"),CHILD:new RegExp("^:(only|nth|first|last)-child(?:\\("+O+"*(even|odd|(([+-]|)(\\d*)n|)"+O+"*(?:([+-]|)"+O+"*(\\d+)|))"+O+"*\\)|)","i"),needsContext:new RegExp("^"+O+"*[>+~]|"+B,"i")},K=function(e){var t=g.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}},Q=K(function(e){return e.appendChild(g.createComment("")),!e.getElementsByTagName("*").length}),G=K(function(e){return e.innerHTML="",e.firstChild&&typeof e.firstChild.getAttribute!==p&&e.firstChild.getAttribute("href")==="#"}),Y=K(function(e){e.innerHTML="";var t=typeof e.lastChild.getAttribute("multiple");return t!=="boolean"&&t!=="string"}),Z=K(function(e){return e.innerHTML="",!e.getElementsByClassName||!e.getElementsByClassName("e").length?!1:(e.lastChild.className="e",e.getElementsByClassName("e").length===2)}),et=K(function(e){e.id=d+0,e.innerHTML="
",y.insertBefore(e,y.firstChild);var t=g.getElementsByName&&g.getElementsByName(d).length===2+g.getElementsByName(d+0).length;return r=!g.getElementById(d),y.removeChild(e),t});try{x.call(y.childNodes,0)[0].nodeType}catch(tt){x=function(e){var t,n=[];for(;t=this[e];e++)n.push(t);return n}}nt.matches=function(e,t){return nt(e,null,null,t)},nt.matchesSelector=function(e,t){return nt(t,null,null,[e]).length>0},s=nt.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(i===1||i===9||i===11){if(typeof e.textContent=="string")return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=s(e)}else if(i===3||i===4)return e.nodeValue}else for(;t=e[r];r++)n+=s(t);return n},o=nt.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?t.nodeName!=="HTML":!1},u=nt.contains=y.contains?function(e,t){var n=e.nodeType===9?e.documentElement:e,r=t&&t.parentNode;return e===r||!!(r&&r.nodeType===1&&n.contains&&n.contains(r))}:y.compareDocumentPosition?function(e,t){return t&&!!(e.compareDocumentPosition(t)&16)}:function(e,t){while(t=t.parentNode)if(t===e)return!0;return!1},nt.attr=function(e,t){var n,r=o(e);return r||(t=t.toLowerCase()),(n=i.attrHandle[t])?n(e):r||Y?e.getAttribute(t):(n=e.getAttributeNode(t),n?typeof e[t]=="boolean"?e[t]?t:null:n.specified?n.value:null:null)},i=nt.selectors={cacheLength:50,createPseudo:N,match:J,attrHandle:G?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},find:{ID:r?function(e,t,n){if(typeof t.getElementById!==p&&!n){var r=t.getElementById(e);return r&&r.parentNode?[r]:[]}}:function(e,n,r){if(typeof n.getElementById!==p&&!r){var i=n.getElementById(e);return i?i.id===e||typeof i.getAttributeNode!==p&&i.getAttributeNode("id").value===e?[i]:t:[]}},TAG:Q?function(e,t){if(typeof t.getElementsByTagName!==p)return t.getElementsByTagName(e)}:function(e,t){var n=t.getElementsByTagName(e);if(e==="*"){var r,i=[],s=0;for(;r=n[s];s++)r.nodeType===1&&i.push(r);return i}return n},NAME:et&&function(e,t){if(typeof t.getElementsByName!==p)return t.getElementsByName(name)},CLASS:Z&&function(e,t,n){if(typeof t.getElementsByClassName!==p&&!n)return t.getElementsByClassName(e)}},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace($,""),e[3]=(e[4]||e[5]||"").replace($,""),e[2]==="~="&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),e[1]==="nth"?(e[2]||nt.error(e[0]),e[3]=+(e[3]?e[4]+(e[5]||1):2*(e[2]==="even"||e[2]==="odd")),e[4]=+(e[6]+e[7]||e[2]==="odd")):e[2]&&nt.error(e[0]),e},PSEUDO:function(e){var t,n;if(J.CHILD.test(e[0]))return null;if(e[3])e[2]=e[3];else if(t=e[4])q.test(t)&&(n=ut(t,!0))&&(n=t.indexOf(")",t.length-n)-t.length)&&(t=t.slice(0,n),e[0]=e[0].slice(0,n)),e[2]=t;return e.slice(0,3)}},filter:{ID:r?function(e){return e=e.replace($,""),function(t){return t.getAttribute("id")===e}}:function(e){return e=e.replace($,""),function(t){var n=typeof t.getAttributeNode!==p&&t.getAttributeNode("id");return n&&n.value===e}},TAG:function(e){return e==="*"?function(){return!0}:(e=e.replace($,"").toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=k[d][e+" "];return t||(t=new RegExp("(^|"+O+")"+e+"("+O+"|$)"))&&k(e,function(e){return t.test(e.className||typeof e.getAttribute!==p&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r,i){var s=nt.attr(r,e);return s==null?t==="!=":t?(s+="",t==="="?s===n:t==="!="?s!==n:t==="^="?n&&s.indexOf(n)===0:t==="*="?n&&s.indexOf(n)>-1:t==="$="?n&&s.substr(s.length-n.length)===n:t==="~="?(" "+s+" ").indexOf(n)>-1:t==="|="?s===n||s.substr(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r){return e==="nth"?function(e){var t,i,s=e.parentNode;if(n===1&&r===0)return!0;if(s){i=0;for(t=s.firstChild;t;t=t.nextSibling)if(t.nodeType===1){i++;if(e===t)break}}return i-=r,i===n||i%n===0&&i/n>=0}:function(t){var n=t;switch(e){case"only":case"first":while(n=n.previousSibling)if(n.nodeType===1)return!1;if(e==="first")return!0;n=t;case"last":while(n=n.nextSibling)if(n.nodeType===1)return!1;return!0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||nt.error("unsupported pseudo: "+e);return r[d]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?N(function(e,n){var i,s=r(e,t),o=s.length;while(o--)i=T.call(e,s[o]),e[i]=!(n[i]=s[o])}):function(e){return r(e,0,n)}):r}},pseudos:{not:N(function(e){var t=[],n=[],r=a(e.replace(j,"$1"));return r[d]?N(function(e,t,n,i){var s,o=r(e,null,i,[]),u=e.length;while(u--)if(s=o[u])e[u]=!(t[u]=s)}):function(e,i,s){return t[0]=e,r(t,null,s,n),!n.pop()}}),has:N(function(e){return function(t){return nt(e,t).length>0}}),contains:N(function(e){return function(t){return(t.textContent||t.innerText||s(t)).indexOf(e)>-1}}),enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&!!e.checked||t==="option"&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},parent:function(e){return!i.pseudos.empty(e)},empty:function(e){var t;e=e.firstChild;while(e){if(e.nodeName>"@"||(t=e.nodeType)===3||t===4)return!1;e=e.nextSibling}return!0},header:function(e){return X.test(e.nodeName)},text:function(e){var t,n;return e.nodeName.toLowerCase()==="input"&&(t=e.type)==="text"&&((n=e.getAttribute("type"))==null||n.toLowerCase()===t)},radio:rt("radio"),checkbox:rt("checkbox"),file:rt("file"),password:rt("password"),image:rt("image"),submit:it("submit"),reset:it("reset"),button:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&e.type==="button"||t==="button"},input:function(e){return V.test(e.nodeName)},focus:function(e){var t=e.ownerDocument;return e===t.activeElement&&(!t.hasFocus||t.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},active:function(e){return e===e.ownerDocument.activeElement},first:st(function(){return[0]}),last:st(function(e,t){return[t-1]}),eq:st(function(e,t,n){return[n<0?n+t:n]}),even:st(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:st(function(e,t,n){for(var r=n<0?n+t:n;++r",e.querySelectorAll("[selected]").length||i.push("\\["+O+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||i.push(":checked")}),K(function(e){e.innerHTML="

",e.querySelectorAll("[test^='']").length&&i.push("[*^$]="+O+"*(?:\"\"|'')"),e.innerHTML="",e.querySelectorAll(":enabled").length||i.push(":enabled",":disabled")}),i=new RegExp(i.join("|")),vt=function(e,r,s,o,u){if(!o&&!u&&!i.test(e)){var a,f,l=!0,c=d,h=r,p=r.nodeType===9&&e;if(r.nodeType===1&&r.nodeName.toLowerCase()!=="object"){a=ut(e),(l=r.getAttribute("id"))?c=l.replace(n,"\\$&"):r.setAttribute("id",c),c="[id='"+c+"'] ",f=a.length;while(f--)a[f]=c+a[f].join("");h=z.test(e)&&r.parentNode||r,p=a.join(",")}if(p)try{return S.apply(s,x.call(h.querySelectorAll(p),0)),s}catch(v){}finally{l||r.removeAttribute("id")}}return t(e,r,s,o,u)},u&&(K(function(t){e=u.call(t,"div");try{u.call(t,"[test!='']:sizzle"),s.push("!=",H)}catch(n){}}),s=new RegExp(s.join("|")),nt.matchesSelector=function(t,n){n=n.replace(r,"='$1']");if(!o(t)&&!s.test(n)&&!i.test(n))try{var a=u.call(t,n);if(a||e||t.document&&t.document.nodeType!==11)return a}catch(f){}return nt(n,null,null,[t]).length>0})}(),i.pseudos.nth=i.pseudos.eq,i.filters=mt.prototype=i.pseudos,i.setFilters=new mt,nt.attr=v.attr,v.find=nt,v.expr=nt.selectors,v.expr[":"]=v.expr.pseudos,v.unique=nt.uniqueSort,v.text=nt.getText,v.isXMLDoc=nt.isXML,v.contains=nt.contains}(e);var nt=/Until$/,rt=/^(?:parents|prev(?:Until|All))/,it=/^.[^:#\[\.,]*$/,st=v.expr.match.needsContext,ot={children:!0,contents:!0,next:!0,prev:!0};v.fn.extend({find:function(e){var t,n,r,i,s,o,u=this;if(typeof e!="string")return v(e).filter(function(){for(t=0,n=u.length;t0)for(i=r;i=0:v.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){var n,r=0,i=this.length,s=[],o=st.test(e)||typeof e!="string"?v(e,t||this.context):0;for(;r-1:v.find.matchesSelector(n,e)){s.push(n);break}n=n.parentNode}}return s=s.length>1?v.unique(s):s,this.pushStack(s,"closest",e)},index:function(e){return e?typeof e=="string"?v.inArray(this[0],v(e)):v.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.prevAll().length:-1},add:function(e,t){var n=typeof e=="string"?v(e,t):v.makeArray(e&&e.nodeType?[e]:e),r=v.merge(this.get(),n);return this.pushStack(ut(n[0])||ut(r[0])?r:v.unique(r))},addBack:function(e){return this.add(e==null?this.prevObject:this.prevObject.filter(e))}}),v.fn.andSelf=v.fn.addBack,v.each({parent:function(e){var t=e.parentNode;return t&&t.nodeType!==11?t:null},parents:function(e){return v.dir(e,"parentNode")},parentsUntil:function(e,t,n){return v.dir(e,"parentNode",n)},next:function(e){return at(e,"nextSibling")},prev:function(e){return at(e,"previousSibling")},nextAll:function(e){return v.dir(e,"nextSibling")},prevAll:function(e){return v.dir(e,"previousSibling")},nextUntil:function(e,t,n){return v.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return v.dir(e,"previousSibling",n)},siblings:function(e){return v.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return v.sibling(e.firstChild)},contents:function(e){return v.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:v.merge([],e.childNodes)}},function(e,t){v.fn[e]=function(n,r){var i=v.map(this,t,n);return nt.test(e)||(r=n),r&&typeof r=="string"&&(i=v.filter(r,i)),i=this.length>1&&!ot[e]?v.unique(i):i,this.length>1&&rt.test(e)&&(i=i.reverse()),this.pushStack(i,e,l.call(arguments).join(","))}}),v.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),t.length===1?v.find.matchesSelector(t[0],e)?[t[0]]:[]:v.find.matches(e,t)},dir:function(e,n,r){var i=[],s=e[n];while(s&&s.nodeType!==9&&(r===t||s.nodeType!==1||!v(s).is(r)))s.nodeType===1&&i.push(s),s=s[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)e.nodeType===1&&e!==t&&n.push(e);return n}});var ct="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",ht=/ jQuery\d+="(?:null|\d+)"/g,pt=/^\s+/,dt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,vt=/<([\w:]+)/,mt=/]","i"),Et=/^(?:checkbox|radio)$/,St=/checked\s*(?:[^=]|=\s*.checked.)/i,xt=/\/(java|ecma)script/i,Tt=/^\s*\s*$/g,Nt={option:[1,""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},Ct=lt(i),kt=Ct.appendChild(i.createElement("div"));Nt.optgroup=Nt.option,Nt.tbody=Nt.tfoot=Nt.colgroup=Nt.caption=Nt.thead,Nt.th=Nt.td,v.support.htmlSerialize||(Nt._default=[1,"X
","
"]),v.fn.extend({text:function(e){return v.access(this,function(e){return e===t?v.text(this):this.empty().append((this[0]&&this[0].ownerDocument||i).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(v.isFunction(e))return this.each(function(t){v(this).wrapAll(e.call(this,t))});if(this[0]){var t=v(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&e.firstChild.nodeType===1)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return v.isFunction(e)?this.each(function(t){v(this).wrapInner(e.call(this,t))}):this.each(function(){var t=v(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=v.isFunction(e);return this.each(function(n){v(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){v.nodeName(this,"body")||v(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.insertBefore(e,this.firstChild)})},before:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(e,this),"before",this.selector)}},after:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this.nextSibling)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(this,e),"after",this.selector)}},remove:function(e,t){var n,r=0;for(;(n=this[r])!=null;r++)if(!e||v.filter(e,[n]).length)!t&&n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),v.cleanData([n])),n.parentNode&&n.parentNode.removeChild(n);return this},empty:function(){var e,t=0;for(;(e=this[t])!=null;t++){e.nodeType===1&&v.cleanData(e.getElementsByTagName("*"));while(e.firstChild)e.removeChild(e.firstChild)}return this},clone:function(e,t){return e=e==null?!1:e,t=t==null?e:t,this.map(function(){return v.clone(this,e,t)})},html:function(e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1>");try{for(;r1&&typeof f=="string"&&St.test(f))return this.each(function(){v(this).domManip(e,n,r)});if(v.isFunction(f))return this.each(function(i){var s=v(this);e[0]=f.call(this,i,n?s.html():t),s.domManip(e,n,r)});if(this[0]){i=v.buildFragment(e,this,l),o=i.fragment,s=o.firstChild,o.childNodes.length===1&&(o=s);if(s){n=n&&v.nodeName(s,"tr");for(u=i.cacheable||c-1;a0?this.clone(!0):this).get(),v(o[i])[t](r),s=s.concat(r);return this.pushStack(s,e,o.selector)}}),v.extend({clone:function(e,t,n){var r,i,s,o;v.support.html5Clone||v.isXMLDoc(e)||!wt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(kt.innerHTML=e.outerHTML,kt.removeChild(o=kt.firstChild));if((!v.support.noCloneEvent||!v.support.noCloneChecked)&&(e.nodeType===1||e.nodeType===11)&&!v.isXMLDoc(e)){Ot(e,o),r=Mt(e),i=Mt(o);for(s=0;r[s];++s)i[s]&&Ot(r[s],i[s])}if(t){At(e,o);if(n){r=Mt(e),i=Mt(o);for(s=0;r[s];++s)At(r[s],i[s])}}return r=i=null,o},clean:function(e,t,n,r){var s,o,u,a,f,l,c,h,p,d,m,g,y=t===i&&Ct,b=[];if(!t||typeof t.createDocumentFragment=="undefined")t=i;for(s=0;(u=e[s])!=null;s++){typeof u=="number"&&(u+="");if(!u)continue;if(typeof u=="string")if(!gt.test(u))u=t.createTextNode(u);else{y=y||lt(t),c=t.createElement("div"),y.appendChild(c),u=u.replace(dt,"<$1>"),a=(vt.exec(u)||["",""])[1].toLowerCase(),f=Nt[a]||Nt._default,l=f[0],c.innerHTML=f[1]+u+f[2];while(l--)c=c.lastChild;if(!v.support.tbody){h=mt.test(u),p=a==="table"&&!h?c.firstChild&&c.firstChild.childNodes:f[1]===""&&!h?c.childNodes:[];for(o=p.length-1;o>=0;--o)v.nodeName(p[o],"tbody")&&!p[o].childNodes.length&&p[o].parentNode.removeChild(p[o])}!v.support.leadingWhitespace&&pt.test(u)&&c.insertBefore(t.createTextNode(pt.exec(u)[0]),c.firstChild),u=c.childNodes,c.parentNode.removeChild(c)}u.nodeType?b.push(u):v.merge(b,u)}c&&(u=c=y=null);if(!v.support.appendChecked)for(s=0;(u=b[s])!=null;s++)v.nodeName(u,"input")?_t(u):typeof u.getElementsByTagName!="undefined"&&v.grep(u.getElementsByTagName("input"),_t);if(n){m=function(e){if(!e.type||xt.test(e.type))return r?r.push(e.parentNode?e.parentNode.removeChild(e):e):n.appendChild(e)};for(s=0;(u=b[s])!=null;s++)if(!v.nodeName(u,"script")||!m(u))n.appendChild(u),typeof u.getElementsByTagName!="undefined"&&(g=v.grep(v.merge([],u.getElementsByTagName("script")),m),b.splice.apply(b,[s+1,0].concat(g)),s+=g.length)}return b},cleanData:function(e,t){var n,r,i,s,o=0,u=v.expando,a=v.cache,f=v.support.deleteExpando,l=v.event.special;for(;(i=e[o])!=null;o++)if(t||v.acceptData(i)){r=i[u],n=r&&a[r];if(n){if(n.events)for(s in n.events)l[s]?v.event.remove(i,s):v.removeEvent(i,s,n.handle);a[r]&&(delete a[r],f?delete i[u]:i.removeAttribute?i.removeAttribute(u):i[u]=null,v.deletedIds.push(r))}}}}),function(){var e,t;v.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e=v.uaMatch(o.userAgent),t={},e.browser&&(t[e.browser]=!0,t.version=e.version),t.chrome?t.webkit=!0:t.webkit&&(t.safari=!0),v.browser=t,v.sub=function(){function e(t,n){return new e.fn.init(t,n)}v.extend(!0,e,this),e.superclass=this,e.fn=e.prototype=this(),e.fn.constructor=e,e.sub=this.sub,e.fn.init=function(r,i){return i&&i instanceof v&&!(i instanceof e)&&(i=e(i)),v.fn.init.call(this,r,i,t)},e.fn.init.prototype=e.fn;var t=e(i);return e}}();var Dt,Pt,Ht,Bt=/alpha\([^)]*\)/i,jt=/opacity=([^)]*)/,Ft=/^(top|right|bottom|left)$/,It=/^(none|table(?!-c[ea]).+)/,qt=/^margin/,Rt=new RegExp("^("+m+")(.*)$","i"),Ut=new RegExp("^("+m+")(?!px)[a-z%]+$","i"),zt=new RegExp("^([-+])=("+m+")","i"),Wt={BODY:"block"},Xt={position:"absolute",visibility:"hidden",display:"block"},Vt={letterSpacing:0,fontWeight:400},$t=["Top","Right","Bottom","Left"],Jt=["Webkit","O","Moz","ms"],Kt=v.fn.toggle;v.fn.extend({css:function(e,n){return v.access(this,function(e,n,r){return r!==t?v.style(e,n,r):v.css(e,n)},e,n,arguments.length>1)},show:function(){return Yt(this,!0)},hide:function(){return Yt(this)},toggle:function(e,t){var n=typeof e=="boolean";return v.isFunction(e)&&v.isFunction(t)?Kt.apply(this,arguments):this.each(function(){(n?e:Gt(this))?v(this).show():v(this).hide()})}}),v.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Dt(e,"opacity");return n===""?"1":n}}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":v.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(!e||e.nodeType===3||e.nodeType===8||!e.style)return;var s,o,u,a=v.camelCase(n),f=e.style;n=v.cssProps[a]||(v.cssProps[a]=Qt(f,a)),u=v.cssHooks[n]||v.cssHooks[a];if(r===t)return u&&"get"in u&&(s=u.get(e,!1,i))!==t?s:f[n];o=typeof r,o==="string"&&(s=zt.exec(r))&&(r=(s[1]+1)*s[2]+parseFloat(v.css(e,n)),o="number");if(r==null||o==="number"&&isNaN(r))return;o==="number"&&!v.cssNumber[a]&&(r+="px");if(!u||!("set"in u)||(r=u.set(e,r,i))!==t)try{f[n]=r}catch(l){}},css:function(e,n,r,i){var s,o,u,a=v.camelCase(n);return n=v.cssProps[a]||(v.cssProps[a]=Qt(e.style,a)),u=v.cssHooks[n]||v.cssHooks[a],u&&"get"in u&&(s=u.get(e,!0,i)),s===t&&(s=Dt(e,n)),s==="normal"&&n in Vt&&(s=Vt[n]),r||i!==t?(o=parseFloat(s),r||v.isNumeric(o)?o||0:s):s},swap:function(e,t,n){var r,i,s={};for(i in t)s[i]=e.style[i],e.style[i]=t[i];r=n.call(e);for(i in t)e.style[i]=s[i];return r}}),e.getComputedStyle?Dt=function(t,n){var r,i,s,o,u=e.getComputedStyle(t,null),a=t.style;return u&&(r=u.getPropertyValue(n)||u[n],r===""&&!v.contains(t.ownerDocument,t)&&(r=v.style(t,n)),Ut.test(r)&&qt.test(n)&&(i=a.width,s=a.minWidth,o=a.maxWidth,a.minWidth=a.maxWidth=a.width=r,r=u.width,a.width=i,a.minWidth=s,a.maxWidth=o)),r}:i.documentElement.currentStyle&&(Dt=function(e,t){var n,r,i=e.currentStyle&&e.currentStyle[t],s=e.style;return i==null&&s&&s[t]&&(i=s[t]),Ut.test(i)&&!Ft.test(t)&&(n=s.left,r=e.runtimeStyle&&e.runtimeStyle.left,r&&(e.runtimeStyle.left=e.currentStyle.left),s.left=t==="fontSize"?"1em":i,i=s.pixelLeft+"px",s.left=n,r&&(e.runtimeStyle.left=r)),i===""?"auto":i}),v.each(["height","width"],function(e,t){v.cssHooks[t]={get:function(e,n,r){if(n)return e.offsetWidth===0&&It.test(Dt(e,"display"))?v.swap(e,Xt,function(){return tn(e,t,r)}):tn(e,t,r)},set:function(e,n,r){return Zt(e,n,r?en(e,t,r,v.support.boxSizing&&v.css(e,"boxSizing")==="border-box"):0)}}}),v.support.opacity||(v.cssHooks.opacity={get:function(e,t){return jt.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=v.isNumeric(t)?"alpha(opacity="+t*100+")":"",s=r&&r.filter||n.filter||"";n.zoom=1;if(t>=1&&v.trim(s.replace(Bt,""))===""&&n.removeAttribute){n.removeAttribute("filter");if(r&&!r.filter)return}n.filter=Bt.test(s)?s.replace(Bt,i):s+" "+i}}),v(function(){v.support.reliableMarginRight||(v.cssHooks.marginRight={get:function(e,t){return v.swap(e,{display:"inline-block"},function(){if(t)return Dt(e,"marginRight")})}}),!v.support.pixelPosition&&v.fn.position&&v.each(["top","left"],function(e,t){v.cssHooks[t]={get:function(e,n){if(n){var r=Dt(e,t);return Ut.test(r)?v(e).position()[t]+"px":r}}}})}),v.expr&&v.expr.filters&&(v.expr.filters.hidden=function(e){return e.offsetWidth===0&&e.offsetHeight===0||!v.support.reliableHiddenOffsets&&(e.style&&e.style.display||Dt(e,"display"))==="none"},v.expr.filters.visible=function(e){return!v.expr.filters.hidden(e)}),v.each({margin:"",padding:"",border:"Width"},function(e,t){v.cssHooks[e+t]={expand:function(n){var r,i=typeof n=="string"?n.split(" "):[n],s={};for(r=0;r<4;r++)s[e+$t[r]+t]=i[r]||i[r-2]||i[0];return s}},qt.test(e)||(v.cssHooks[e+t].set=Zt)});var rn=/%20/g,sn=/\[\]$/,on=/\r?\n/g,un=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,an=/^(?:select|textarea)/i;v.fn.extend({serialize:function(){return v.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?v.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||an.test(this.nodeName)||un.test(this.type))}).map(function(e,t){var n=v(this).val();return n==null?null:v.isArray(n)?v.map(n,function(e,n){return{name:t.name,value:e.replace(on,"\r\n")}}):{name:t.name,value:n.replace(on,"\r\n")}}).get()}}),v.param=function(e,n){var r,i=[],s=function(e,t){t=v.isFunction(t)?t():t==null?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};n===t&&(n=v.ajaxSettings&&v.ajaxSettings.traditional);if(v.isArray(e)||e.jquery&&!v.isPlainObject(e))v.each(e,function(){s(this.name,this.value)});else for(r in e)fn(r,e[r],n,s);return i.join("&").replace(rn,"+")};var ln,cn,hn=/#.*$/,pn=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,dn=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,vn=/^(?:GET|HEAD)$/,mn=/^\/\//,gn=/\?/,yn=/)<[^<]*)*<\/script>/gi,bn=/([?&])_=[^&]*/,wn=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,En=v.fn.load,Sn={},xn={},Tn=["*/"]+["*"];try{cn=s.href}catch(Nn){cn=i.createElement("a"),cn.href="",cn=cn.href}ln=wn.exec(cn.toLowerCase())||[],v.fn.load=function(e,n,r){if(typeof e!="string"&&En)return En.apply(this,arguments);if(!this.length)return this;var i,s,o,u=this,a=e.indexOf(" ");return a>=0&&(i=e.slice(a,e.length),e=e.slice(0,a)),v.isFunction(n)?(r=n,n=t):n&&typeof n=="object"&&(s="POST"),v.ajax({url:e,type:s,dataType:"html",data:n,complete:function(e,t){r&&u.each(r,o||[e.responseText,t,e])}}).done(function(e){o=arguments,u.html(i?v("
").append(e.replace(yn,"")).find(i):e)}),this},v.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(e,t){v.fn[t]=function(e){return this.on(t,e)}}),v.each(["get","post"],function(e,n){v[n]=function(e,r,i,s){return v.isFunction(r)&&(s=s||i,i=r,r=t),v.ajax({type:n,url:e,data:r,success:i,dataType:s})}}),v.extend({getScript:function(e,n){return v.get(e,t,n,"script")},getJSON:function(e,t,n){return v.get(e,t,n,"json")},ajaxSetup:function(e,t){return t?Ln(e,v.ajaxSettings):(t=e,e=v.ajaxSettings),Ln(e,t),e},ajaxSettings:{url:cn,isLocal:dn.test(ln[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":Tn},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":v.parseJSON,"text xml":v.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:Cn(Sn),ajaxTransport:Cn(xn),ajax:function(e,n){function T(e,n,s,a){var l,y,b,w,S,T=n;if(E===2)return;E=2,u&&clearTimeout(u),o=t,i=a||"",x.readyState=e>0?4:0,s&&(w=An(c,x,s));if(e>=200&&e<300||e===304)c.ifModified&&(S=x.getResponseHeader("Last-Modified"),S&&(v.lastModified[r]=S),S=x.getResponseHeader("Etag"),S&&(v.etag[r]=S)),e===304?(T="notmodified",l=!0):(l=On(c,w),T=l.state,y=l.data,b=l.error,l=!b);else{b=T;if(!T||e)T="error",e<0&&(e=0)}x.status=e,x.statusText=(n||T)+"",l?d.resolveWith(h,[y,T,x]):d.rejectWith(h,[x,T,b]),x.statusCode(g),g=t,f&&p.trigger("ajax"+(l?"Success":"Error"),[x,c,l?y:b]),m.fireWith(h,[x,T]),f&&(p.trigger("ajaxComplete",[x,c]),--v.active||v.event.trigger("ajaxStop"))}typeof e=="object"&&(n=e,e=t),n=n||{};var r,i,s,o,u,a,f,l,c=v.ajaxSetup({},n),h=c.context||c,p=h!==c&&(h.nodeType||h instanceof v)?v(h):v.event,d=v.Deferred(),m=v.Callbacks("once memory"),g=c.statusCode||{},b={},w={},E=0,S="canceled",x={readyState:0,setRequestHeader:function(e,t){if(!E){var n=e.toLowerCase();e=w[n]=w[n]||e,b[e]=t}return this},getAllResponseHeaders:function(){return E===2?i:null},getResponseHeader:function(e){var n;if(E===2){if(!s){s={};while(n=pn.exec(i))s[n[1].toLowerCase()]=n[2]}n=s[e.toLowerCase()]}return n===t?null:n},overrideMimeType:function(e){return E||(c.mimeType=e),this},abort:function(e){return e=e||S,o&&o.abort(e),T(0,e),this}};d.promise(x),x.success=x.done,x.error=x.fail,x.complete=m.add,x.statusCode=function(e){if(e){var t;if(E<2)for(t in e)g[t]=[g[t],e[t]];else t=e[x.status],x.always(t)}return this},c.url=((e||c.url)+"").replace(hn,"").replace(mn,ln[1]+"//"),c.dataTypes=v.trim(c.dataType||"*").toLowerCase().split(y),c.crossDomain==null&&(a=wn.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===ln[1]&&a[2]===ln[2]&&(a[3]||(a[1]==="http:"?80:443))==(ln[3]||(ln[1]==="http:"?80:443)))),c.data&&c.processData&&typeof c.data!="string"&&(c.data=v.param(c.data,c.traditional)),kn(Sn,c,n,x);if(E===2)return x;f=c.global,c.type=c.type.toUpperCase(),c.hasContent=!vn.test(c.type),f&&v.active++===0&&v.event.trigger("ajaxStart");if(!c.hasContent){c.data&&(c.url+=(gn.test(c.url)?"&":"?")+c.data,delete c.data),r=c.url;if(c.cache===!1){var N=v.now(),C=c.url.replace(bn,"$1_="+N);c.url=C+(C===c.url?(gn.test(c.url)?"&":"?")+"_="+N:"")}}(c.data&&c.hasContent&&c.contentType!==!1||n.contentType)&&x.setRequestHeader("Content-Type",c.contentType),c.ifModified&&(r=r||c.url,v.lastModified[r]&&x.setRequestHeader("If-Modified-Since",v.lastModified[r]),v.etag[r]&&x.setRequestHeader("If-None-Match",v.etag[r])),x.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+(c.dataTypes[0]!=="*"?", "+Tn+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)x.setRequestHeader(l,c.headers[l]);if(!c.beforeSend||c.beforeSend.call(h,x,c)!==!1&&E!==2){S="abort";for(l in{success:1,error:1,complete:1})x[l](c[l]);o=kn(xn,c,n,x);if(!o)T(-1,"No Transport");else{x.readyState=1,f&&p.trigger("ajaxSend",[x,c]),c.async&&c.timeout>0&&(u=setTimeout(function(){x.abort("timeout")},c.timeout));try{E=1,o.send(b,T)}catch(k){if(!(E<2))throw k;T(-1,k)}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var Mn=[],_n=/\?/,Dn=/(=)\?(?=&|$)|\?\?/,Pn=v.now();v.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Mn.pop()||v.expando+"_"+Pn++;return this[e]=!0,e}}),v.ajaxPrefilter("json jsonp",function(n,r,i){var s,o,u,a=n.data,f=n.url,l=n.jsonp!==!1,c=l&&Dn.test(f),h=l&&!c&&typeof a=="string"&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Dn.test(a);if(n.dataTypes[0]==="jsonp"||c||h)return s=n.jsonpCallback=v.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,o=e[s],c?n.url=f.replace(Dn,"$1"+s):h?n.data=a.replace(Dn,"$1"+s):l&&(n.url+=(_n.test(f)?"&":"?")+n.jsonp+"="+s),n.converters["script json"]=function(){return u||v.error(s+" was not called"),u[0]},n.dataTypes[0]="json",e[s]=function(){u=arguments},i.always(function(){e[s]=o,n[s]&&(n.jsonpCallback=r.jsonpCallback,Mn.push(s)),u&&v.isFunction(o)&&o(u[0]),u=o=t}),"script"}),v.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(e){return v.globalEval(e),e}}}),v.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),v.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=i.head||i.getElementsByTagName("head")[0]||i.documentElement;return{send:function(s,o){n=i.createElement("script"),n.async="async",e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,i){if(i||!n.readyState||/loaded|complete/.test(n.readyState))n.onload=n.onreadystatechange=null,r&&n.parentNode&&r.removeChild(n),n=t,i||o(200,"success")},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(0,1)}}}});var Hn,Bn=e.ActiveXObject?function(){for(var e in Hn)Hn[e](0,1)}:!1,jn=0;v.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&Fn()||In()}:Fn,function(e){v.extend(v.support,{ajax:!!e,cors:!!e&&"withCredentials"in e})}(v.ajaxSettings.xhr()),v.support.ajax&&v.ajaxTransport(function(n){if(!n.crossDomain||v.support.cors){var r;return{send:function(i,s){var o,u,a=n.xhr();n.username?a.open(n.type,n.url,n.async,n.username,n.password):a.open(n.type,n.url,n.async);if(n.xhrFields)for(u in n.xhrFields)a[u]=n.xhrFields[u];n.mimeType&&a.overrideMimeType&&a.overrideMimeType(n.mimeType),!n.crossDomain&&!i["X-Requested-With"]&&(i["X-Requested-With"]="XMLHttpRequest");try{for(u in i)a.setRequestHeader(u,i[u])}catch(f){}a.send(n.hasContent&&n.data||null),r=function(e,i){var u,f,l,c,h;try{if(r&&(i||a.readyState===4)){r=t,o&&(a.onreadystatechange=v.noop,Bn&&delete Hn[o]);if(i)a.readyState!==4&&a.abort();else{u=a.status,l=a.getAllResponseHeaders(),c={},h=a.responseXML,h&&h.documentElement&&(c.xml=h);try{c.text=a.responseText}catch(p){}try{f=a.statusText}catch(p){f=""}!u&&n.isLocal&&!n.crossDomain?u=c.text?200:404:u===1223&&(u=204)}}}catch(d){i||s(-1,d)}c&&s(u,f,c,l)},n.async?a.readyState===4?setTimeout(r,0):(o=++jn,Bn&&(Hn||(Hn={},v(e).unload(Bn)),Hn[o]=r),a.onreadystatechange=r):r()},abort:function(){r&&r(0,1)}}}});var qn,Rn,Un=/^(?:toggle|show|hide)$/,zn=new RegExp("^(?:([-+])=|)("+m+")([a-z%]*)$","i"),Wn=/queueHooks$/,Xn=[Gn],Vn={"*":[function(e,t){var n,r,i=this.createTween(e,t),s=zn.exec(t),o=i.cur(),u=+o||0,a=1,f=20;if(s){n=+s[2],r=s[3]||(v.cssNumber[e]?"":"px");if(r!=="px"&&u){u=v.css(i.elem,e,!0)||n||1;do a=a||".5",u/=a,v.style(i.elem,e,u+r);while(a!==(a=i.cur()/o)&&a!==1&&--f)}i.unit=r,i.start=u,i.end=s[1]?u+(s[1]+1)*n:n}return i}]};v.Animation=v.extend(Kn,{tweener:function(e,t){v.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;r-1,f={},l={},c,h;a?(l=i.position(),c=l.top,h=l.left):(c=parseFloat(o)||0,h=parseFloat(u)||0),v.isFunction(t)&&(t=t.call(e,n,s)),t.top!=null&&(f.top=t.top-s.top+c),t.left!=null&&(f.left=t.left-s.left+h),"using"in t?t.using.call(e,f):i.css(f)}},v.fn.extend({position:function(){if(!this[0])return;var e=this[0],t=this.offsetParent(),n=this.offset(),r=er.test(t[0].nodeName)?{top:0,left:0}:t.offset();return n.top-=parseFloat(v.css(e,"marginTop"))||0,n.left-=parseFloat(v.css(e,"marginLeft"))||0,r.top+=parseFloat(v.css(t[0],"borderTopWidth"))||0,r.left+=parseFloat(v.css(t[0],"borderLeftWidth"))||0,{top:n.top-r.top,left:n.left-r.left}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||i.body;while(e&&!er.test(e.nodeName)&&v.css(e,"position")==="static")e=e.offsetParent;return e||i.body})}}),v.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);v.fn[e]=function(i){return v.access(this,function(e,i,s){var o=tr(e);if(s===t)return o?n in o?o[n]:o.document.documentElement[i]:e[i];o?o.scrollTo(r?v(o).scrollLeft():s,r?s:v(o).scrollTop()):e[i]=s},e,i,arguments.length,null)}}),v.each({Height:"height",Width:"width"},function(e,n){v.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){v.fn[i]=function(i,s){var o=arguments.length&&(r||typeof i!="boolean"),u=r||(i===!0||s===!0?"margin":"border");return v.access(this,function(n,r,i){var s;return v.isWindow(n)?n.document.documentElement["client"+e]:n.nodeType===9?(s=n.documentElement,Math.max(n.body["scroll"+e],s["scroll"+e],n.body["offset"+e],s["offset"+e],s["client"+e])):i===t?v.css(n,r,i,u):v.style(n,r,i,u)},n,o?i:t,o,null)}})}),e.jQuery=e.$=v,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return v})})(window); 3 | -------------------------------------------------------------------------------- /public/scripts/p5.dom.js: -------------------------------------------------------------------------------- 1 | /*! p5.dom.js v0.2.2 May 30, 2015 */ 2 | /** 3 | *

The web is much more than just canvas and p5.dom makes it easy to interact 4 | * with other HTML5 objects, including text, hyperlink, image, input, video, 5 | * audio, and webcam.

6 | *

There is a set of creation methods, DOM manipulation methods, and 7 | * an extended p5.Element that supports a range of HTML elements. See the 8 | * 9 | * beyond the canvas tutorial for a full overview of how this addon works. 10 | * 11 | *

Methods and properties shown in black are part of the p5.js core, items in 12 | * blue are part of the p5.dom library. You will need to include an extra file 13 | * in order to access the blue functions. See the 14 | * using a library 15 | * section for information on how to include this library. p5.dom comes with 16 | * p5 complete or you can download the single file 17 | * 18 | * here.

19 | *

See tutorial: beyond the canvas] 20 | * for more info on how to use this libary. 21 | * 22 | * @module p5.dom 23 | * @submodule p5.dom 24 | * @for p5.dom 25 | * @main 26 | */ 27 | 28 | (function (root, factory) { 29 | if (typeof define === 'function' && define.amd) 30 | define('p5.dom', ['p5'], function (p5) { (factory(p5));}); 31 | else if (typeof exports === 'object') 32 | factory(require('../p5')); 33 | else 34 | factory(root['p5']); 35 | }(this, function (p5) { 36 | // ============================================================================= 37 | // p5 additions 38 | // ============================================================================= 39 | 40 | /** 41 | * Searches the page for an element with the given ID, class, or tag name (using the '#' or '.' 42 | * prefixes to specify an ID or class respectively, and none for a tag) and returns it as 43 | * a p5.Element. If a class or tag name is given with more than 1 element, 44 | * only the first element will be returned. 45 | * The DOM node itself can be accessed with .elt. 46 | * Returns null if none found. 47 | * 48 | * @method select 49 | * @param {String} name id, class, or tag name of element to search for 50 | * @return {Object/p5.Element|Null} p5.Element containing node found 51 | */ 52 | p5.prototype.select = function (e) { 53 | var res; 54 | var str; 55 | if (e[0] === '.'){ 56 | str = e.slice(1); 57 | res = document.getElementsByClassName(str); 58 | if (res) { 59 | return wrapElement(res[0]); 60 | }else { 61 | return null; 62 | } 63 | }else if (e[0] === '#'){ 64 | str = e.slice(1); 65 | res = document.getElementById(str); 66 | if (res) { 67 | return wrapElement(res); 68 | }else { 69 | return null; 70 | } 71 | }else{ 72 | res = document.getElementsByTagName(e); 73 | if (res) { 74 | return wrapElement(res[0]); 75 | }else { 76 | return null; 77 | } 78 | } 79 | }; 80 | 81 | /** 82 | * Searches the page for elements with the given class or tag name (using the '.' prefix 83 | * to specify a class and no prefix for a tag) and returns them as p5.Elements 84 | * in an array. 85 | * The DOM node itself can be accessed with .elt. 86 | * Returns null if none found. 87 | * 88 | * @method selectAll 89 | * @param {String} name class or tag name of elements to search for 90 | * @return {Array} Array of p5.Elements containing nodes found 91 | */ 92 | p5.prototype.selectAll = function (e) { 93 | var arr = []; 94 | var res; 95 | var str; 96 | if (e[0] === '.'){ 97 | str = e.slice(1); 98 | res = document.getElementsByClassName(str); 99 | }else { 100 | res = document.getElementsByTagName(e); 101 | } 102 | if (res) { 103 | for (var j = 0; j < res.length; j++) { 104 | var obj = wrapElement(res[j]); 105 | arr.push(obj); 106 | } 107 | } 108 | return arr; 109 | }; 110 | 111 | /** 112 | * Helper function for getElement and getElements. 113 | */ 114 | function wrapElement(elt) { 115 | if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") { 116 | return new p5.MediaElement(elt); 117 | } else { 118 | return new p5.Element(elt); 119 | } 120 | } 121 | 122 | /** 123 | * Removes all elements created by p5, except any canvas / graphics 124 | * elements created by createCanvas or createGraphics. 125 | * Event handlers are removed, and element is removed from the DOM. 126 | * @method removeElements 127 | * @example 128 | *

129 | * function setup() { 130 | * createCanvas(100, 100); 131 | * createDiv('this is some text'); 132 | * createP('this is a paragraph'); 133 | * } 134 | * function mousePressed() { 135 | * removeElements(); // this will remove the div and p, not canvas 136 | * } 137 | *
138 | * 139 | */ 140 | p5.prototype.removeElements = function (e) { 141 | for (var i=0; i 1 && typeof args[1] === 'string'){ 225 | elt.alt = args[1]; 226 | } 227 | if (elt.complete){ 228 | setAttrs(); 229 | }else{ 230 | elt.onload = function(){ 231 | setAttrs(); 232 | } 233 | } 234 | self = addElement(elt, this); 235 | return self; 236 | }; 237 | 238 | /** 239 | * Creates an <a></a> element in the DOM for including a hyperlink. 240 | * Appends to the container node if one is specified, otherwise 241 | * appends to body. 242 | * 243 | * @method createA 244 | * @param {String} href url of page to link to 245 | * @param {String} html inner html of link element to display 246 | * @param {String} [target] target where new link should open, 247 | * could be _blank, _self, _parent, _top. 248 | * @return {Object/p5.Element} pointer to p5.Element holding created node 249 | */ 250 | p5.prototype.createA = function(href, html, target) { 251 | var elt = document.createElement('a'); 252 | elt.href = href; 253 | elt.innerHTML = html; 254 | if (target) elt.target = target; 255 | return addElement(elt, this); 256 | }; 257 | 258 | /** INPUT **/ 259 | 260 | 261 | /** 262 | * Creates a slider <input></input> element in the DOM. 263 | * Use .size() to set the display length of the slider. 264 | * Appends to the container node if one is specified, otherwise 265 | * appends to body. 266 | * 267 | * @method createSlider 268 | * @param {Number} min minimum value of the slider 269 | * @param {Number} max maximum value of the slider 270 | * @param {Number} [value] default value of the slider 271 | * @return {Object/p5.Element} pointer to p5.Element holding created node 272 | */ 273 | p5.prototype.createSlider = function(min, max, value, step) { 274 | var elt = document.createElement('input'); 275 | elt.type = 'range'; 276 | elt.min = min; 277 | elt.max = max; 278 | if (step) elt.step = step; 279 | if (value) elt.value = value; 280 | return addElement(elt, this); 281 | }; 282 | 283 | /** 284 | * Creates a <button></button> element in the DOM. 285 | * Use .size() to set the display size of the button. 286 | * Use .mousePressed() to specify behavior on press. 287 | * Appends to the container node if one is specified, otherwise 288 | * appends to body. 289 | * 290 | * @method createButton 291 | * @param {String} label label displayed on the button 292 | * @param {String} [value] value of the button 293 | * @return {Object/p5.Element} pointer to p5.Element holding created node 294 | */ 295 | p5.prototype.createButton = function(label, value) { 296 | var elt = document.createElement('button'); 297 | elt.innerHTML = label; 298 | elt.value = value; 299 | if (value) elt.value = value; 300 | return addElement(elt, this); 301 | }; 302 | 303 | /** 304 | * Creates a checkbox <input></input> element in the DOM. 305 | * 306 | * @method createCheckbox 307 | * @param {String} [label] label displayed after checkbox 308 | * @param {boolean} [value] value of the checkbox; checked is true, unchecked is false. Unchecked if no value given 309 | * @return {Object/p5.Element} pointer to p5.Element holding created node 310 | */ 311 | p5.prototype.createCheckbox = function() { 312 | var elt = document.createElement('input'); 313 | elt.type = 'checkbox'; 314 | //checkbox must be wrapped in p5.Element before label so that label appears after 315 | var self = addElement(elt, this); 316 | self.checked = function(){ 317 | if (arguments.length === 0){ 318 | return self.elt.checked; 319 | }else if(arguments[0]){ 320 | self.elt.checked = true; 321 | }else{ 322 | self.elt.checked = false; 323 | } 324 | return self; 325 | }; 326 | this.value = function(val){ 327 | self.value = val; 328 | return this; 329 | }; 330 | if (arguments[0]){ 331 | var ran = Math.random().toString(36).slice(2); 332 | var label = document.createElement('label'); 333 | elt.setAttribute('id', ran); 334 | label.htmlFor = ran; 335 | self.value(arguments[0]); 336 | label.appendChild(document.createTextNode(arguments[0])); 337 | addElement(label, this); 338 | } 339 | if (arguments[1]){ 340 | elt.checked = true; 341 | } 342 | return self; 343 | }; 344 | 345 | /** 346 | * Creates a dropdown menu <select></select> element in the DOM. 347 | * @method createSelect 348 | * @param {boolean} [multiple] [true if dropdown should support multiple selections] 349 | * @return {Object/p5.Element} pointer to p5.Element holding created node 350 | */ 351 | p5.prototype.createSelect = function(mult) { 352 | var elt = document.createElement('select'); 353 | if (mult){ 354 | elt.setAttribute('multiple', 'true'); 355 | } 356 | var self = addElement(elt, this); 357 | self.option = function(name, value){ 358 | var opt = document.createElement('option'); 359 | opt.innerHTML = name; 360 | if (arguments.length > 1) 361 | opt.value = value; 362 | else 363 | opt.value = name; 364 | elt.appendChild(opt); 365 | }; 366 | self.selected = function(value){ 367 | var arr = []; 368 | if (arguments.length > 0){ 369 | for (var i = 0; i < this.elt.length; i++){ 370 | if (value.toString() === this.elt[i].value){ 371 | this.elt.selectedIndex = i; 372 | } 373 | } 374 | return this; 375 | }else{ 376 | if (mult){ 377 | for (var i = 0; i < this.elt.selectedOptions.length; i++){ 378 | arr.push(this.elt.selectedOptions[i].value); 379 | } 380 | return arr; 381 | }else{ 382 | return this.elt.value; 383 | } 384 | } 385 | }; 386 | return self; 387 | }; 388 | 389 | /** 390 | * Creates an <input></input> element in the DOM for text input. 391 | * Use .size() to set the display length of the box. 392 | * Appends to the container node if one is specified, otherwise 393 | * appends to body. 394 | * 395 | * @method createInput 396 | * @param {Number} [value] default value of the input box 397 | * @return {Object/p5.Element} pointer to p5.Element holding created node 398 | */ 399 | p5.prototype.createInput = function(value) { 400 | var elt = document.createElement('input'); 401 | elt.type = 'text'; 402 | if (value) elt.value = value; 403 | return addElement(elt, this); 404 | }; 405 | 406 | /** 407 | * Creates an <input></input> element in the DOM of type 'file'. 408 | * This allows users to select local files for use in a sketch. 409 | * 410 | * @method createFileInput 411 | * @param {Function} [callback] callback function for when a file loaded 412 | * @param {String} [multiple] optional to allow multiple files selected 413 | * @return {Object/p5.Element} pointer to p5.Element holding created DOM element 414 | */ 415 | p5.prototype.createFileInput = function(callback, multiple) { 416 | 417 | // Is the file stuff supported? 418 | if (window.File && window.FileReader && window.FileList && window.Blob) { 419 | // Yup, we're ok and make an input file selector 420 | var elt = document.createElement('input'); 421 | elt.type = 'file'; 422 | 423 | // If we get a second argument that evaluates to true 424 | // then we are looking for multiple files 425 | if (multiple) { 426 | // Anything gets the job done 427 | elt.multiple = 'multiple'; 428 | } 429 | 430 | // Now let's handle when a file was selected 431 | elt.addEventListener('change', handleFileSelect, false); 432 | 433 | // Function to handle when a file is selected 434 | // We're simplifying life and assuming that we always 435 | // want to load every selected file 436 | function handleFileSelect(evt) { 437 | // These are the files 438 | var files = evt.target.files; 439 | // Load each one and trigger a callback 440 | for (var i = 0; i < files.length; i++) { 441 | var f = files[i]; 442 | var reader = new FileReader(); 443 | reader.onload = makeLoader(f); 444 | function makeLoader(theFile) { 445 | // Making a p5.File object 446 | var p5file = new p5.File(theFile); 447 | return function(e) { 448 | p5file.data = e.target.result; 449 | callback(p5file); 450 | }; 451 | }; 452 | 453 | // Text of data? 454 | // This should likely be improved 455 | if (f.type === 'text') { 456 | reader.readAsText(f); 457 | } else { 458 | reader.readAsDataURL(f); 459 | } 460 | } 461 | } 462 | return addElement(elt, this); 463 | } else { 464 | console.log('The File APIs are not fully supported in this browser. Cannot create element.'); 465 | } 466 | }; 467 | 468 | 469 | /** VIDEO STUFF **/ 470 | 471 | function createMedia(pInst, type, src, callback) { 472 | var elt = document.createElement(type); 473 | if (typeof src === 'string') { 474 | src = [src]; 475 | } 476 | for (var i=0; i
732 | *
733 | * var div0 = createDiv('this is the parent'); 734 | * var div1 = createDiv('this is the child'); 735 | * div1.id('apples'); 736 | * div0.child('apples'); // use id 737 | *
738 | *
739 | * var div0 = createDiv('this is the parent'); 740 | * var elt = document.getElementById('myChildDiv'); 741 | * div0.child(elt); // use element from page 742 | *
743 | */ 744 | p5.Element.prototype.child = function(c) { 745 | if (typeof c === 'string') { 746 | c = document.getElementById(c); 747 | } else if (c instanceof p5.Element) { 748 | c = c.elt; 749 | } 750 | this.elt.appendChild(c); 751 | return this; 752 | }; 753 | 754 | 755 | /** 756 | * 757 | * If an argument is given, sets the inner HTML of the element, 758 | * replacing any existing html. If no arguments are given, returns 759 | * the inner HTML of the element. 760 | * 761 | * @for p5.Element 762 | * @method html 763 | * @param {String} [html] the HTML to be placed inside the element 764 | * @return {Object/p5.Element|String} 765 | */ 766 | p5.Element.prototype.html = function(html) { 767 | if (typeof html !== 'undefined') { 768 | this.elt.innerHTML = html; 769 | return this; 770 | } else { 771 | return this.elt.innerHTML; 772 | } 773 | }; 774 | 775 | /** 776 | * 777 | * Sets the position of the element relative to (0, 0) of the 778 | * window. Essentially, sets position:absolute and left and top 779 | * properties of style. If no arguments given returns the x and y position 780 | * of the element in an object. 781 | * 782 | * @method position 783 | * @param {Number} [x] x-position relative to upper left of window 784 | * @param {Number} [y] y-position relative to upper left of window 785 | * @return {Object/p5.Element} 786 | * @example 787 | *
788 | * function setup() { 789 | * var cnv = createCanvas(100, 100); 790 | * // positions canvas 50px to the right and 100px 791 | * // below upper left corner of the window 792 | * cnv.position(50, 100); 793 | * } 794 | *
795 | */ 796 | p5.Element.prototype.position = function() { 797 | if (arguments.length === 0){ 798 | return { 'x' : this.elt.offsetLeft , 'y' : this.elt.offsetTop }; 799 | }else{ 800 | this.elt.style.position = 'absolute'; 801 | this.elt.style.left = arguments[0]+'px'; 802 | this.elt.style.top = arguments[1]+'px'; 803 | this.x = arguments[0]; 804 | this.y = arguments[1]; 805 | return this; 806 | } 807 | }; 808 | 809 | /** 810 | * Translates an element with css transforms in either 2d (if 2 arguments given) 811 | * or 3d (if 3 arguments given) space. 812 | * @method translate 813 | * @param {Number} x x-position in px 814 | * @param {Number} y y-position in px 815 | * @param {Number} [z] z-position in px 816 | * @param {Number} [perspective] sets the perspective of the parent element in px, 817 | * default value set to 1000px 818 | * @return {Object/p5.Element} 819 | * @example 820 | *
821 | * function setup() { 822 | * createCanvas(100,100); 823 | * //translates canvas 50px down 824 | * select('canvas').translate(0,50); 825 | * } 826 | *
827 | */ 828 | p5.Element.prototype.translate = function(){ 829 | this.elt.style.position = 'absolute'; 830 | if (arguments.length === 2){ 831 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, ''); 832 | style = style.replace(/translate[X-Z]?\(.*\)/g, ''); 833 | this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)'; 834 | this.elt.style.transform += style; 835 | }else if (arguments.length === 3){ 836 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, ''); 837 | style = style.replace(/translate[X-Z]?\(.*\)/g, ''); 838 | this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)'; 839 | this.elt.style.transform += style; 840 | this.elt.parentElement.style.perspective = '1000px'; 841 | }else if (arguments.length === 4){ 842 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, ''); 843 | style = style.replace(/translate[X-Z]?\(.*\)/g, ''); 844 | this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)'; 845 | this.elt.style.transform += style; 846 | this.elt.parentElement.style.perspective = arguments[3]+'px'; 847 | } 848 | return this; 849 | }; 850 | 851 | /** 852 | * Rotates an element with css transforms in either 2d (if 2 arguments given) 853 | * or 3d (if 3 arguments given) space. 854 | * @method rotate 855 | * @param {Number} x amount of degrees to rotate the element along the x-axis in deg 856 | * @param {Number} [y] amount of degrees to rotate the element along the y-axis in deg 857 | * @param {Number} [z] amount of degrees to rotate the element along the z-axis in deg 858 | * @return {Object/p5.Element} 859 | * @example 860 | *
861 | * var x = 0, 862 | * y = 0, 863 | * z = 0; 864 | * function setup(){ 865 | * createCanvas(100,100); 866 | * } 867 | * function draw(){ 868 | * x+=.5 % 360; 869 | * y+=.5 % 360; 870 | * z+=.5 % 360; 871 | * //rotates the canvas .5deg (degrees) on every axis each frame. 872 | * select('canvas').rotate(x,y,z); 873 | * } 874 | *
875 | */ 876 | p5.Element.prototype.rotate = function(){ 877 | if (arguments.length === 1){ 878 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, ''); 879 | style = style.replace(/rotate[X-Z]?\(.*\)/g, ''); 880 | this.elt.style.transform = 'rotate('+arguments[0]+'deg)'; 881 | this.elt.style.transform += style; 882 | }else if (arguments.length === 2){ 883 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, ''); 884 | style = style.replace(/rotate[X-Z]?\(.*\)/g, ''); 885 | this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)'; 886 | this.elt.style.transform += style; 887 | }else if (arguments.length === 3){ 888 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, ''); 889 | style = style.replace(/rotate[X-Z]?\(.*\)/g, ''); 890 | this.elt.style.transform = 'rotateX('+arguments[0]+'deg)'; 891 | this.elt.style.transform += 'rotateY('+arguments[1]+'deg)'; 892 | this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)'; 893 | this.elt.style.transform += style; 894 | } 895 | return this; 896 | }; 897 | 898 | /** 899 | * Sets the given style (css) property of the element with the given value. 900 | * If no value is specified, returns the value of the given property, 901 | * or undefined if the property is not. 902 | * 903 | * @method style 904 | * @param {String} property property to be set 905 | * @param {String} [value] value to assign to property 906 | * @return {String|Object/p5.Element} value of property, if no value is specified 907 | * or p5.Element 908 | * @example 909 | *
910 | * var myDiv = createDiv("I like pandas."); 911 | * myDiv.style("color", "#ff0000"); 912 | * myDiv.style("font-size", "18px"); 913 | *
914 | */ 915 | p5.Element.prototype.style = function(prop, val) { 916 | if (typeof val === 'undefined') { 917 | var attrs = prop.split(';'); 918 | for (var i=0; i 948 | * var myDiv = createDiv("I like pandas."); 949 | *myDiv.attribute("align", "center"); 950 | * 951 | */ 952 | p5.Element.prototype.attribute = function(attr, value) { 953 | if (typeof value === 'undefined') { 954 | return this.elt.getAttribute(attr); 955 | } else { 956 | this.elt.setAttribute(attr, value); 957 | return this; 958 | } 959 | }; 960 | 961 | 962 | /** 963 | * Either returns the value of the element if no arguments 964 | * given, or sets the value of the element. 965 | * 966 | * @method value 967 | * @param {String|Number} [value] 968 | * @return {String|Object/p5.Element} value of element if no value is specified or p5.Element 969 | */ 970 | p5.Element.prototype.value = function() { 971 | if (arguments.length > 0) { 972 | this.elt.value = arguments[0]; 973 | return this; 974 | } else { 975 | if (this.elt.type === 'range') { 976 | return parseFloat(this.elt.value); 977 | } 978 | else return this.elt.value; 979 | } 980 | }; 981 | 982 | /** 983 | * 984 | * Shows the current element. Essentially, setting display:block for the style. 985 | * 986 | * @method show 987 | * @return {Object/p5.Element} 988 | */ 989 | p5.Element.prototype.show = function() { 990 | this.elt.style.display = 'block'; 991 | return this; 992 | }; 993 | 994 | /** 995 | * Hides the current element. Essentially, setting display:none for the style. 996 | * 997 | * @method hide 998 | * @return {Object/p5.Element} 999 | */ 1000 | p5.Element.prototype.hide = function() { 1001 | this.elt.style.display = 'none'; 1002 | return this; 1003 | }; 1004 | 1005 | /** 1006 | * 1007 | * Sets the width and height of the element. AUTO can be used to 1008 | * only adjust one dimension. If no arguments given returns the width and height 1009 | * of the element in an object. 1010 | * 1011 | * @method size 1012 | * @param {Number} [w] width of the element 1013 | * @param {Number} [h] height of the element 1014 | * @return {Object/p5.Element} 1015 | */ 1016 | p5.Element.prototype.size = function(w, h) { 1017 | if (arguments.length === 0){ 1018 | return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight }; 1019 | }else{ 1020 | var aW = w; 1021 | var aH = h; 1022 | var AUTO = p5.prototype.AUTO; 1023 | if (aW !== AUTO || aH !== AUTO) { 1024 | if (aW === AUTO) { 1025 | aW = h * this.width / this.height; 1026 | } else if (aH === AUTO) { 1027 | aH = w * this.height / this.width; 1028 | } 1029 | // set diff for cnv vs normal div 1030 | if (this.elt instanceof HTMLCanvasElement) { 1031 | var j = {}; 1032 | var k = this.elt.getContext('2d'); 1033 | for (var prop in k) { 1034 | j[prop] = k[prop]; 1035 | } 1036 | this.elt.setAttribute('width', aW * this._pInst._pixelDensity); 1037 | this.elt.setAttribute('height', aH * this._pInst._pixelDensity); 1038 | this.elt.setAttribute('style', 'width:' + aW + 'px; height:' + aH + 'px'); 1039 | this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity); 1040 | for (var prop in j) { 1041 | this.elt.getContext('2d')[prop] = j[prop]; 1042 | } 1043 | } else { 1044 | this.elt.style.width = aW+'px'; 1045 | this.elt.style.height = aH+'px'; 1046 | this.elt.width = aW; 1047 | this.elt.height = aH; 1048 | this.width = aW; 1049 | this.height = aH; 1050 | } 1051 | this.elt.style.overflow = 'hidden'; 1052 | this.width = this.elt.offsetWidth; 1053 | this.height = this.elt.offsetHeight; 1054 | 1055 | if (this._pInst) { // main canvas associated with p5 instance 1056 | if (this._pInst._curElement.elt === this.elt) { 1057 | this._pInst._setProperty('width', this.elt.offsetWidth); 1058 | this._pInst._setProperty('height', this.elt.offsetHeight); 1059 | } 1060 | } 1061 | } 1062 | return this; 1063 | } 1064 | }; 1065 | 1066 | /** 1067 | * Removes the element and deregisters all listeners. 1068 | * @method remove 1069 | * @example 1070 | *
1071 | * var myDiv = createDiv('this is some text'); 1072 | * myDiv.remove(); 1073 | *
1074 | */ 1075 | p5.Element.prototype.remove = function() { 1076 | // deregister events 1077 | for (var ev in this._events) { 1078 | this.elt.removeEventListener(ev, this._events[ev]); 1079 | } 1080 | if (this.elt.parentNode) { 1081 | this.elt.parentNode.removeChild(this.elt); 1082 | } 1083 | delete(this); 1084 | }; 1085 | 1086 | 1087 | 1088 | // ============================================================================= 1089 | // p5.MediaElement additions 1090 | // ============================================================================= 1091 | 1092 | 1093 | /** 1094 | * Extends p5.Element to handle audio and video. In addition to the methods 1095 | * of p5.Element, it also contains methods for controlling media. It is not 1096 | * called directly, but p5.MediaElements are created by calling createVideo, 1097 | * createAudio, and createCapture. 1098 | * 1099 | * @class p5.MediaElement 1100 | * @constructor 1101 | * @param {String} elt DOM node that is wrapped 1102 | * @param {Object} [pInst] pointer to p5 instance 1103 | */ 1104 | p5.MediaElement = function(elt, pInst) { 1105 | p5.Element.call(this, elt, pInst); 1106 | 1107 | 1108 | this._prevTime = 0; 1109 | this._cueIDCounter = 0; 1110 | this._cues = []; 1111 | this.pixelDensity = 1; 1112 | 1113 | }; 1114 | p5.MediaElement.prototype = Object.create(p5.Element.prototype); 1115 | 1116 | 1117 | 1118 | 1119 | /** 1120 | * Play an HTML5 media element. 1121 | * 1122 | * @method play 1123 | * @return {Object/p5.Element} 1124 | */ 1125 | p5.MediaElement.prototype.play = function() { 1126 | if (this.elt.currentTime === this.elt.duration) { 1127 | this.elt.currentTime = 0; 1128 | } 1129 | 1130 | if (this.elt.readyState > 1) { 1131 | this.elt.play(); 1132 | } else { 1133 | // in Chrome, playback cannot resume after being stopped and must reload 1134 | this.elt.load(); 1135 | this.elt.play(); 1136 | } 1137 | return this; 1138 | }; 1139 | 1140 | /** 1141 | * Stops an HTML5 media element (sets current time to zero). 1142 | * 1143 | * @method stop 1144 | * @return {Object/p5.Element} 1145 | */ 1146 | p5.MediaElement.prototype.stop = function() { 1147 | this.elt.pause(); 1148 | this.elt.currentTime = 0; 1149 | return this; 1150 | }; 1151 | 1152 | /** 1153 | * Pauses an HTML5 media element. 1154 | * 1155 | * @method pause 1156 | * @return {Object/p5.Element} 1157 | */ 1158 | p5.MediaElement.prototype.pause = function() { 1159 | this.elt.pause(); 1160 | return this; 1161 | }; 1162 | 1163 | /** 1164 | * Set 'loop' to true for an HTML5 media element, and starts playing. 1165 | * 1166 | * @method loop 1167 | * @return {Object/p5.Element} 1168 | */ 1169 | p5.MediaElement.prototype.loop = function() { 1170 | this.elt.setAttribute('loop', true); 1171 | this.play(); 1172 | return this; 1173 | }; 1174 | /** 1175 | * Set 'loop' to false for an HTML5 media element. Element will stop 1176 | * when it reaches the end. 1177 | * 1178 | * @method noLoop 1179 | * @return {Object/p5.Element} 1180 | */ 1181 | p5.MediaElement.prototype.noLoop = function() { 1182 | this.elt.setAttribute('loop', false); 1183 | return this; 1184 | }; 1185 | 1186 | 1187 | /** 1188 | * Set HTML5 media element to autoplay or not. 1189 | * 1190 | * @method autoplay 1191 | * @param {Boolean} autoplay whether the element should autoplay 1192 | * @return {Object/p5.Element} 1193 | */ 1194 | p5.MediaElement.prototype.autoplay = function(val) { 1195 | this.elt.setAttribute('autoplay', val); 1196 | return this; 1197 | }; 1198 | 1199 | /** 1200 | * Sets volume for this HTML5 media element. If no argument is given, 1201 | * returns the current volume. 1202 | * 1203 | * @param {Number} [val] volume between 0.0 and 1.0 1204 | * @return {Number|p5.MediaElement} current volume or p5.MediaElement 1205 | * @method volume 1206 | */ 1207 | p5.MediaElement.prototype.volume = function(val) { 1208 | if (typeof val === 'undefined') { 1209 | return this.elt.volume; 1210 | } else { 1211 | this.elt.volume = val; 1212 | } 1213 | }; 1214 | 1215 | /** 1216 | * If no arguments are given, returns the current time of the elmeent. 1217 | * If an argument is given the current time of the element is set to it. 1218 | * 1219 | * @method time 1220 | * @param {Number} [time] time to jump to (in seconds) 1221 | * @return {Number|Object/p5.MediaElement} current time (in seconds) 1222 | * or p5.MediaElement 1223 | */ 1224 | p5.MediaElement.prototype.time = function(val) { 1225 | if (typeof val === 'undefined') { 1226 | return this.elt.currentTime; 1227 | } else { 1228 | this.elt.currentTime = val; 1229 | } 1230 | }; 1231 | 1232 | /** 1233 | * Returns the duration of the HTML5 media element. 1234 | * 1235 | * @method duration 1236 | * @return {Number} duration 1237 | */ 1238 | p5.MediaElement.prototype.duration = function() { 1239 | return this.elt.duration; 1240 | }; 1241 | p5.MediaElement.prototype.pixels = []; 1242 | p5.MediaElement.prototype.loadPixels = function() { 1243 | if (this.loadedmetadata) { // wait for metadata for w/h 1244 | if (!this.canvas) { 1245 | this.canvas = document.createElement('canvas'); 1246 | this.canvas.width = this.width; 1247 | this.canvas.height = this.height; 1248 | this.drawingContext = this.canvas.getContext('2d'); 1249 | } 1250 | this.drawingContext.drawImage(this.elt, 0, 0, this.width, this.height); 1251 | p5.Renderer2D.prototype.loadPixels.call(this); 1252 | } 1253 | return this; 1254 | } 1255 | p5.MediaElement.prototype.updatePixels = function(x, y, w, h){ 1256 | if (this.loadedmetadata) { // wait for metadata 1257 | p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h); 1258 | } 1259 | return this; 1260 | } 1261 | p5.MediaElement.prototype.get = function(x, y, w, h){ 1262 | if (this.loadedmetadata) { // wait for metadata 1263 | return p5.Renderer2D.prototype.get.call(this, x, y, w, h); 1264 | } else return [0, 0, 0, 255]; 1265 | }; 1266 | p5.MediaElement.prototype.set = function(x, y, imgOrCol){ 1267 | if (this.loadedmetadata) { // wait for metadata 1268 | p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol); 1269 | } 1270 | }; 1271 | 1272 | /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/ 1273 | 1274 | /** 1275 | * Send the audio output of this element to a specified audioNode or 1276 | * p5.sound object. If no element is provided, connects to p5's master 1277 | * output. That connection is established when this method is first called. 1278 | * All connections are removed by the .disconnect() method. 1279 | * 1280 | * This method is meant to be used with the p5.sound.js addon library. 1281 | * 1282 | * @method connect 1283 | * @param {AudioNode|p5.sound object} audioNode AudioNode from the Web Audio API, 1284 | * or an object from the p5.sound library 1285 | */ 1286 | p5.MediaElement.prototype.connect = function(obj) { 1287 | var audioContext, masterOutput; 1288 | 1289 | // if p5.sound exists, same audio context 1290 | if (typeof p5.prototype.getAudioContext === 'function') { 1291 | audioContext = p5.prototype.getAudioContext(); 1292 | masterOutput = p5.soundOut.input; 1293 | } else { 1294 | try { 1295 | audioContext = obj.context; 1296 | masterOutput = audioContext.destination 1297 | } catch(e) { 1298 | throw 'connect() is meant to be used with Web Audio API or p5.sound.js' 1299 | } 1300 | } 1301 | 1302 | // create a Web Audio MediaElementAudioSourceNode if none already exists 1303 | if (!this.audioSourceNode) { 1304 | this.audioSourceNode = audioContext.createMediaElementSource(this.elt); 1305 | 1306 | // connect to master output when this method is first called 1307 | this.audioSourceNode.connect(masterOutput); 1308 | } 1309 | 1310 | // connect to object if provided 1311 | if (obj) { 1312 | if (obj.input) { 1313 | this.audioSourceNode.connect(obj.input); 1314 | } else { 1315 | this.audioSourceNode.connect(obj); 1316 | } 1317 | } 1318 | 1319 | // otherwise connect to master output of p5.sound / AudioContext 1320 | else { 1321 | this.audioSourceNode.connect(masterOutput); 1322 | } 1323 | 1324 | }; 1325 | 1326 | /** 1327 | * Disconnect all Web Audio routing, including to master output. 1328 | * This is useful if you want to re-route the output through 1329 | * audio effects, for example. 1330 | * 1331 | * @method disconnect 1332 | */ 1333 | p5.MediaElement.prototype.disconnect = function() { 1334 | if (this.audioSourceNode) { 1335 | this.audioSourceNode.disconnect(); 1336 | } else { 1337 | throw 'nothing to disconnect'; 1338 | } 1339 | }; 1340 | 1341 | 1342 | /*** SHOW / HIDE CONTROLS ***/ 1343 | 1344 | /** 1345 | * Show the default MediaElement controls, as determined by the web browser. 1346 | * 1347 | * @method showControls 1348 | */ 1349 | p5.MediaElement.prototype.showControls = function() { 1350 | // must set style for the element to show on the page 1351 | this.elt.style['text-align'] = 'inherit'; 1352 | this.elt.controls = true; 1353 | }; 1354 | 1355 | /** 1356 | * Hide the default mediaElement controls. 1357 | * 1358 | * @method hideControls 1359 | */ 1360 | p5.MediaElement.prototype.hideControls = function() { 1361 | this.elt.controls = false; 1362 | }; 1363 | 1364 | 1365 | /*** SCHEDULE EVENTS ***/ 1366 | 1367 | /** 1368 | * Schedule events to trigger every time a MediaElement 1369 | * (audio/video) reaches a playback cue point. 1370 | * 1371 | * Accepts a callback function, a time (in seconds) at which to trigger 1372 | * the callback, and an optional parameter for the callback. 1373 | * 1374 | * Time will be passed as the first parameter to the callback function, 1375 | * and param will be the second parameter. 1376 | * 1377 | * 1378 | * @method addCue 1379 | * @param {Number} time Time in seconds, relative to this media 1380 | * element's playback. For example, to trigger 1381 | * an event every time playback reaches two 1382 | * seconds, pass in the number 2. This will be 1383 | * passed as the first parameter to 1384 | * the callback function. 1385 | * @param {Function} callback Name of a function that will be 1386 | * called at the given time. The callback will 1387 | * receive time and (optionally) param as its 1388 | * two parameters. 1389 | * @param {Object} [value] An object to be passed as the 1390 | * second parameter to the 1391 | * callback function. 1392 | * @return {Number} id ID of this cue, 1393 | * useful for removeCue(id) 1394 | * @example 1395 | *
1396 | * function setup() { 1397 | * background(255,255,255); 1398 | * 1399 | * audioEl = createAudio('assets/beat.mp3'); 1400 | * audioEl.showControls(); 1401 | * 1402 | * // schedule three calls to changeBackground 1403 | * audioEl.addCue(0.5, changeBackground, color(255,0,0) ); 1404 | * audioEl.addCue(1.0, changeBackground, color(0,255,0) ); 1405 | * audioEl.addCue(2.5, changeBackground, color(0,0,255) ); 1406 | * audioEl.addCue(3.0, changeBackground, color(0,255,255) ); 1407 | * audioEl.addCue(4.2, changeBackground, color(255,255,0) ); 1408 | * audioEl.addCue(5.0, changeBackground, color(255,255,0) ); 1409 | * } 1410 | * 1411 | * function changeBackground(val) { 1412 | * background(val); 1413 | * } 1414 | *
1415 | */ 1416 | p5.MediaElement.prototype.addCue = function(time, callback, val) { 1417 | var id = this._cueIDCounter++; 1418 | 1419 | var cue = new Cue(callback, time, id, val); 1420 | this._cues.push(cue); 1421 | 1422 | if (!this.elt.ontimeupdate) { 1423 | this.elt.ontimeupdate = this._onTimeUpdate.bind(this); 1424 | } 1425 | 1426 | return id; 1427 | }; 1428 | 1429 | /** 1430 | * Remove a callback based on its ID. The ID is returned by the 1431 | * addCue method. 1432 | * 1433 | * @method removeCue 1434 | * @param {Number} id ID of the cue, as returned by addCue 1435 | */ 1436 | p5.MediaElement.prototype.removeCue = function(id) { 1437 | for (var i = 0; i < this._cues.length; i++) { 1438 | var cue = this._cues[i]; 1439 | if (cue.id === id) { 1440 | this.cues.splice(i, 1); 1441 | } 1442 | } 1443 | 1444 | if (this._cues.length === 0) { 1445 | this.elt.ontimeupdate = null 1446 | } 1447 | }; 1448 | 1449 | /** 1450 | * Remove all of the callbacks that had originally been scheduled 1451 | * via the addCue method. 1452 | * 1453 | * @method clearCues 1454 | */ 1455 | p5.MediaElement.prototype.clearCues = function() { 1456 | this._cues = []; 1457 | this.elt.ontimeupdate = null; 1458 | }; 1459 | 1460 | // private method that checks for cues to be fired if events 1461 | // have been scheduled using addCue(callback, time). 1462 | p5.MediaElement.prototype._onTimeUpdate = function() { 1463 | var playbackTime = this.time(); 1464 | 1465 | for (var i = 0 ; i < this._cues.length; i++) { 1466 | var callbackTime = this._cues[i].time; 1467 | var val = this._cues[i].val; 1468 | 1469 | 1470 | if (this._prevTime < callbackTime && callbackTime <= playbackTime) { 1471 | 1472 | // pass the scheduled callbackTime as parameter to the callback 1473 | this._cues[i].callback(val); 1474 | } 1475 | 1476 | } 1477 | 1478 | this._prevTime = playbackTime; 1479 | }; 1480 | 1481 | 1482 | // Cue inspired by JavaScript setTimeout, and the 1483 | // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org 1484 | var Cue = function(callback, time, id, val) { 1485 | this.callback = callback; 1486 | this.time = time; 1487 | this.id = id; 1488 | this.val = val; 1489 | }; 1490 | 1491 | // ============================================================================= 1492 | // p5.File 1493 | // ============================================================================= 1494 | 1495 | 1496 | /** 1497 | * Base class for a file 1498 | * Using this for createFileInput 1499 | * 1500 | * @class p5.File 1501 | * @constructor 1502 | * @param {File} file File that is wrapped 1503 | * @param {Object} [pInst] pointer to p5 instance 1504 | */ 1505 | p5.File = function(file, pInst) { 1506 | /** 1507 | * Underlying File object. All normal File methods can be called on this. 1508 | * 1509 | * @property file 1510 | */ 1511 | this.file = file; 1512 | 1513 | this._pInst = pInst; 1514 | 1515 | // Splitting out the file type into two components 1516 | // This makes determining if image or text etc simpler 1517 | var typeList = file.type.split('/'); 1518 | /** 1519 | * File type (image, text, etc.) 1520 | * 1521 | * @property type 1522 | */ 1523 | this.type = typeList[0]; 1524 | /** 1525 | * File subtype (usually the file extension jpg, png, xml, etc.) 1526 | * 1527 | * @property subtype 1528 | */ 1529 | this.subtype = typeList[1]; 1530 | /** 1531 | * File name 1532 | * 1533 | * @property name 1534 | */ 1535 | this.name = file.name; 1536 | /** 1537 | * File size 1538 | * 1539 | * @property size 1540 | */ 1541 | this.size = file.size; 1542 | 1543 | // Data not loaded yet 1544 | this.data = undefined; 1545 | }; 1546 | 1547 | })); -------------------------------------------------------------------------------- /public/style/circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matamalaortiz/Pong-ML/e6ddac2ffb35ed9410d4f39b8b1f67b89e2bdafe/public/style/circles.png -------------------------------------------------------------------------------- /public/style/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: apercu; 3 | src: url(./fonts/Apercu.ttf); 4 | } 5 | @font-face { 6 | font-family: Lars; 7 | src: url(./fonts/Lars-Regular.otf); 8 | } 9 | 10 | body { 11 | background-color: #f6dd95; 12 | background-size: cover; 13 | position: fixed; 14 | margin: 0; 15 | height: 100%; 16 | font-family: Lars; 17 | letter-spacing: 0.2px; 18 | } 19 | 20 | #loading { 21 | font-size: 90px; 22 | position: fixed; 23 | height: 100%; 24 | width: 100%; 25 | color: white; 26 | background-color: orange; 27 | padding: 10%; 28 | padding-left: 40%; 29 | padding-top: 25%; 30 | margin-top: 0%; 31 | animation: fadeINTERVAL 1s infinite; 32 | } 33 | 34 | #title { 35 | color: white; 36 | background: #231f21; 37 | margin: 0; 38 | padding: 10px; 39 | padding-left: 9px; 40 | text-align: left; 41 | font-size: 10px; 42 | letter-spacing: 1px; 43 | } 44 | 45 | .sidebar { 46 | margin: 0; 47 | background: white; 48 | box-shadow: 5px 1px 4px 0px #17171794; 49 | box-shadow: antiquewhite; 50 | width: 17%; 51 | height: 100%; 52 | position: absolute; 53 | overflow-y: scroll; 54 | z-index: 3; 55 | } 56 | 57 | #videoContainer{ 58 | background-color: #f9d526; 59 | height: 205px; 60 | position: sticky; 61 | top: 0; 62 | z-index: 30; 63 | } 64 | 65 | div#center { 66 | text-align: center; 67 | font-size: 25px; 68 | font-family: apercu; 69 | color: white; 70 | } 71 | 72 | #my-video { 73 | display: none; 74 | } 75 | 76 | #video { 77 | width: 126vw; 78 | height: 114vh; 79 | display: block; 80 | margin-left: 0vh; 81 | margin-top: 0%; 82 | position: initial; 83 | filter: grayscale(1); 84 | mix-blend-mode: multiply; 85 | mix-blend-mode: multiply; 86 | transform: rotateY(180deg); 87 | -webkit-transform: rotateY(180deg); 88 | -moz-transform: rotateY(180deg); 89 | } 90 | 91 | #videoLive { 92 | height: 100%; 93 | width: 100%; 94 | background-color: #f9d528; 95 | background-image: url(./circles.png); 96 | background-size: cover; 97 | } 98 | 99 | #videoShowRef { 100 | width: 100%; 101 | height: 100%; 102 | filter: grayscale(1); 103 | mix-blend-mode: multiply; 104 | opacity: 0; 105 | } 106 | 107 | #videoText { 108 | position: absolute; 109 | font-size: 10px; 110 | color: #292222; 111 | padding-top: 25%; 112 | padding-left: 5%; 113 | opacity: 1; 114 | } 115 | 116 | #model { 117 | background: white; 118 | padding: 15px; 119 | margin: 1% 0% 0 89%; 120 | position: absolute; 121 | display: none; 122 | } 123 | 124 | ul { 125 | list-style-type: none; 126 | margin: 0; 127 | padding: 0; 128 | } 129 | 130 | li { 131 | font-size: 12px; 132 | margin-top: 1px; 133 | border-bottom: 1px solid #e4c466; 134 | color: black; 135 | padding-left: 20px; 136 | padding: 28px; 137 | background-color: #f7f1e3; 138 | text-transform: uppercase; 139 | } 140 | 141 | li:hover { 142 | cursor: cell; 143 | background-color: #e6e0d3; 144 | 145 | } 146 | 147 | canvas { 148 | vertical-align: top; 149 | width: 21.4vw !important; 150 | height: 205px !important; 151 | } 152 | 153 | canvas#defaultCanvas { 154 | position: absolute; 155 | top: 3.45vh; 156 | z-index: 10; 157 | left: 0; 158 | /*box-shadow: 5px 1px 4px 0px #17171794; 159 | box-shadow: antiquewhite;*/ 160 | } 161 | 162 | span#emoji { 163 | font-size: 30px; 164 | float: left; 165 | margin-right: 4%; 166 | } 167 | 168 | p#emojiStatus { 169 | float: inherit; 170 | margin: 0; 171 | padding: 12px; 172 | } 173 | 174 | #log { 175 | width: 100%; 176 | height: 80px; 177 | background-color: #f9d526; 178 | position: sticky; 179 | bottom: 0px; 180 | text-align: center; 181 | font-size: 45px; 182 | padding-top: 25px; 183 | } 184 | 185 | 186 | #listing { 187 | overflow-y: scroll; 188 | overflow-x: hidden; 189 | height: 63%; 190 | border-top: 1px solid #e4c466; 191 | } 192 | 193 | 194 | .sidebar::-webkit-scrollbar { 195 | display: none; 196 | } 197 | 198 | #listing::-webkit-scrollbar { 199 | width: 12px; 200 | } 201 | 202 | #listing::-webkit-scrollbar { 203 | background-color: #efe5d1; 204 | } 205 | 206 | #listing::-webkit-scrollbar-thumb { 207 | /*background-color: #3a330d;*/ 208 | } 209 | 210 | @media screen and (max-width: 990px) { 211 | span#emoji { 212 | font-size: 22px; 213 | } 214 | li { 215 | font-size: 9px; 216 | } 217 | #title { 218 | font-size: 7px; 219 | } 220 | 221 | } 222 | 223 | @media screen and (min-width: 1580px) { 224 | #loading { 225 | font-size: 200px; 226 | padding-left: 35%; 227 | padding-top: 20%; 228 | } 229 | 230 | } 231 | 232 | 233 | *::selection { 234 | background:transparent; 235 | } 236 | 237 | *::-moz-selection { 238 | background:transparent; 239 | } 240 | 241 | *::-webkit-selection { 242 | background:transparent; 243 | } 244 | 245 | @keyframes fadeIN { 246 | from {opacity: 0;} 247 | to {opacity: 1;} 248 | } 249 | @keyframes fadeOUT { 250 | from {opacity: 1;} 251 | to {opacity: 0;} 252 | } 253 | 254 | @keyframes fadeINTERVAL { 255 | 0% {opacity: 0;} 256 | 50% {opacity: 1;} 257 | 100% {opacity: 0;} 258 | } 259 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | 4 | Alejandro Matamala 5 | @matamalaortiz 6 | 7 | 2017 8 | */ 9 | 10 | "use strict"; 11 | 12 | // DEPENDENCIES 13 | 14 | const fs = require('fs'); 15 | // const credentials = { 16 | // key: fs.readFileSync('./private/localhost-key.pem'), 17 | // cert: fs.readFileSync('./private/localhost.pem') 18 | // }; 19 | 20 | const credentials = { 21 | key: fs.readFileSync('./private/my-key.pem'), 22 | cert: fs.readFileSync('./private/my-cert.pem') 23 | }; 24 | 25 | const express = require('express'); 26 | const app = express(); 27 | // const server = require('http').Server(app); 28 | const server = require('https').Server(credentials, app); 29 | // const io = require('socket.io').listen(server); 30 | const path = require('path'); 31 | const mustacheExpress = require('mustache-express'); 32 | 33 | 34 | 35 | const bodyParser = require('body-parser'); 36 | const PORT = process.env.PORT || 3000; 37 | // const PORT = process.env.PORT || 443; 38 | 39 | 40 | // MIDDLEWARE 41 | app.use(bodyParser.json()); 42 | app.use(bodyParser.urlencoded({ 43 | extended: true 44 | })) 45 | 46 | // ENGINE AND PATH 47 | app.engine('mustache', mustacheExpress()); 48 | app.set('view engine', 'mustache'); 49 | app.set('views', '../views'); 50 | app.use(express.static(path.join('../public'))); 51 | 52 | // ROUTES 53 | app.get('/', function(req, res) { 54 | res.render("index.mustache") 55 | }); 56 | 57 | app.get('/client', function(req, res) { 58 | res.render("client.mustache") 59 | }); 60 | 61 | app.get('/pong', function(req, res) { 62 | res.render("pong.mustache") 63 | }); 64 | 65 | // io.sockets.on('connection', 66 | // // We are given a websocket object in our function 67 | // function (socket) { 68 | // 69 | // console.log("We have a new client: " + socket.id); 70 | // 71 | // // When this user emits, client side: socket.emit('otherevent',some data); 72 | // socket.on('position', function(data) { 73 | // console.log("Received: 'position' " + data); 74 | // io.sockets.emit('position_from_server', data); 75 | // }); 76 | // 77 | // socket.on('controller_button', function(data) { 78 | // console.log("From Controller: 'Button Pressed : ' " + data); 79 | // io.sockets.emit('controller_from_server', data); 80 | // }); 81 | // 82 | // } 83 | // ); 84 | 85 | 86 | // SERVER OPEN IN PORT 3000 87 | server.listen(PORT, () => { 88 | var port = server.address().port; 89 | console.log('running at ' + port); 90 | }); 91 | -------------------------------------------------------------------------------- /views/index.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ML EMOJI PONG 😎 10 | 11 | 12 | 13 |

TRAINING

14 | 15 |
16 |

 ML EMOJI PONG

17 | 18 |
19 |

Play Here

20 | 21 |
22 |
23 |
24 |
    25 |
  • 🙂

    Train ↝ Normal State

    • 26 |
  • ☝

    Train ↝ Paddle Left UP

    • 27 |
  • ✋

    Train ↝ Paddle Left DOWN

    • 28 |
  • ✌

    Train ↝ Paddle Right UP

    • 29 |
  • ✊

    Train ↝ Paddle Right Down

    • 30 |
  • 😛

    Train ↝ Reset Game

    • 31 | 32 | 33 |
34 |
35 |
36 |
37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | --------------------------------------------------------------------------------