From c3067194e42cf0b0e1b6561708857caf8e8553bd Mon Sep 17 00:00:00 2001 From: e7d Date: Mon, 6 Feb 2023 16:51:02 +0100 Subject: [PATCH] multiple and general fixes and improvments --- README.md | 3 + index.html | 2 + js/gamepad.js | 185 ++++++++------------- js/jquery.min.js | 4 +- samples.txt | 9 +- templates/debug/template.css | 2 +- templates/debug/template.html | 16 +- templates/debug/template.js | 162 ++++++++++--------- templates/ds4/template.js | 68 ++++---- templates/telemetry/template.css | 89 +++++----- templates/telemetry/template.html | 18 +-- templates/telemetry/template.js | 259 ++++++++++++++---------------- templates/xbox-one/template.js | 68 ++++---- 13 files changed, 412 insertions(+), 473 deletions(-) diff --git a/README.md b/README.md index 184f4f9..c7cac29 100644 --- a/README.md +++ b/README.md @@ -38,3 +38,6 @@ Please read below or use this video tutorial: https://youtu.be/vHzf_ESseTc - Adjust position and size of the source as you will *: These gamepads work both wired and wireless via Bluetooth + +## Credits +DualShock 4 and Xbox One skins from [gamepadviewer.com](https://gamepadviewer.com/) diff --git a/index.html b/index.html index 489963c..432f01f 100644 --- a/index.html +++ b/index.html @@ -203,6 +203,8 @@

Credits

All information and source code can be found on GitHub at e7d/gamepad-viewer.

+

DualShock 4 and Xbox One skins from gamepadviewer.com.

diff --git a/js/gamepad.js b/js/gamepad.js index 77e0a47..41b14c6 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -24,6 +24,10 @@ class Gamepad { this.$helpPopout = $('#help-popout'); this.$gamepadList = $('#gamepad-list'); + // ensure the GamePad API is available on this browser + this.assertGamepadAPI(); + + // overlay selectors this.backgroundStyle = [ 'transparent', 'checkered', @@ -42,10 +46,6 @@ class Gamepad { 'black', 'black', ]; - - // ensure the GamePad API is available on this browser - this.assertGamepadAPI(); - this.initOverlaySelectors(); // gamepad collection default values @@ -57,10 +57,11 @@ class Gamepad { name: 'Debug', }, ds4: { - id: /054c|54c|09cc|046d|0810|2563/, // 054c = Sony vendor code, 046d,0810,2563 = PS-like controllers vendor codes + id: /054c|54c|7545|09cc|0104|0ce6|046d|0810|2563/, // 054c,7545 = Sony vendor code, 09cc,0104 = DS4 controllers product codes, 0ce6 = DualSense controller product code, 046d,0810,2563 = PS-like controllers vendor codes name: 'DualShock 4', colors: ['black', 'white', 'red', 'blue'], triggers: true, + zoom: true, }, // gamecube: { // id: /0079/, // 0079 = Nintendo GameCube vendor code @@ -68,7 +69,7 @@ class Gamepad { // colors: ['black', 'purple'], // }, // 'joy-con': { - // id: /200e/, // 0079 = Joy-Con specific product code + // id: /200e/, // 200e = Joy-Con specific product code // name: 'Joy-Con (L+R) Controllers', // colors: ['blue-red', 'grey-grey'], // }, @@ -78,19 +79,21 @@ class Gamepad { // colors: ['black'], // }, // 'switch-pro': { - // id: /057e|20d6/, // 057e = Nintendo Switch vendor code, 20d6 = Switch Pro-like vendor code + // id: /057e|20d6|2009/, // 057e = Nintendo Switch vendor code, 20d6,2009 = Switch Pro-like vendor code // name: 'Switch Pro Controller', // colors: ['black'], // }, + telemetry: { + id: /telemetry/, + name: 'Telemetry', + zoom: true + }, 'xbox-one': { id: /045e|xinput|XInput/, // 045e = Microsoft vendor code, xinput = standard Windows controller name: 'Xbox One', colors: ['black', 'white'], triggers: true, - }, - 'telemetry': { - id: /telemetry/, // 045e = Microsoft vendor code, xinput = standard Windows controller - name: 'Telemetry' + zoom: true, }, }; @@ -122,9 +125,6 @@ class Gamepad { axes: [], }; - // // read hash - // this.hash = this.readHash(); - // listen for gamepad related events this.haveEvents = 'GamepadEvent' in window; if (this.haveEvents) { @@ -306,6 +306,16 @@ class Gamepad { }, this.overlayDelay); } + /** + * Extracts the name, vendor and product from a gamepad identifier + * + * @param {string} id + * @returns {object} + */ + toGamepadInfo(id) { + return /(?.*) \(.*Vendor: (?[0-9a-f]{4}) Product: (?[0-9a-f]{4})\)/.exec(id).groups; + } + /** * Updates the list of connected gamepads in the overlay */ @@ -317,9 +327,9 @@ class Gamepad { if (!gamepad) { continue; } - + const { name, vendor, product } = this.toGamepadInfo(gamepad.id); $options.push( - `'` + `` ); } this.$gamepadSelect.append($options.join('')); @@ -341,7 +351,7 @@ class Gamepad { } const colorOptions = colors.map( - (color) => `` + (color) => `` ); this.$colorSelect.html(colorOptions); this.$colorOverlay.fadeIn(); @@ -539,7 +549,7 @@ class Gamepad { } } - return 'xbox-one'; + return 'debug'; } /** @@ -571,7 +581,8 @@ class Gamepad { // check the parameters for a selected gamepad const gamepadId = this.getUrlParam('gamepad'); if (gamepadId) { - if (gamepad.id === gamepadId) { + const [vendor, product] = gamepadId.split('-'); + if (gamepad.id.includes(vendor) && gamepad.id.includes(product)) { this.map(gamepad.index); return; } @@ -648,7 +659,8 @@ class Gamepad { this.identifier = this.identifiers[this.type]; // update the overlay selectors - this.$gamepadSelect.val(gamepad.id); + const { vendor, product } = this.toGamepadInfo(gamepad.id); + this.$gamepadSelect.val(`${vendor}-${product}`); this.updateColors(); this.updateTriggers(); @@ -658,16 +670,6 @@ class Gamepad { // hide the help before displaying the template this.hideInstructions(); this.hidePlaceholder(); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'map', - eventLabel: 'Map', - eventValue: this.identifier, - }); - } } /** @@ -707,16 +709,6 @@ class Gamepad { this.updateColors(); this.updateTriggers(); this.clearUrlParams(); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'disconnect', - eventLabel: 'Disconnect', - eventValue: this.identifier, - }); - } } /** @@ -733,18 +725,31 @@ class Gamepad { this.$gamepad.html(template); // read for parameters to apply: + const identifier = this.identifiers[this.type]; // - color - this.changeGamepadColor(this.getUrlParam('color')); + if (identifier.colors) { + this.changeGamepadColor(this.getUrlParam('color')); + } else { + this.updateUrlParams({ color: undefined }); + } // - triggers mode - this.toggleTriggersMeter(this.getUrlParam('triggers') === 'meter'); - // - zoom$ - window.setTimeout(() => - this.changeZoom( - this.type === 'debug' - ? 'auto' - : this.getUrlParam('zoom') || 'auto' - ) - ); + if (identifier.triggers) { + this.toggleTriggersMeter(this.getUrlParam('triggers') === 'meter'); + } else { + this.updateUrlParams({ triggers: undefined }); + } + // - zoom + if (identifier.zoom) { + window.setTimeout(() => + this.changeZoom( + this.type === 'debug' + ? 'auto' + : this.getUrlParam('zoom') || 'auto' + ) + ); + } else { + this.updateUrlParams({ zoom: undefined }); + } // save the buttons mapping of this template this.mapping.buttons = []; @@ -773,7 +778,7 @@ class Gamepad { */ pollStatus(force = false) { // ensure that a gamepad is currently active - if (this.index === null) return; + if (this.index === null || this.index === this.disconnectedIndex) return; // enqueue the next refresh window.requestAnimationFrame(this.pollStatus.bind(this)); @@ -786,8 +791,7 @@ class Gamepad { if ( !force && (!activeGamepad || activeGamepad.timestamp === this.lastTimestamp) - ) - return; + ) return; this.lastTimestamp = activeGamepad.timestamp; // actually update the active gamepad graphically @@ -863,9 +867,18 @@ class Gamepad { } } + /** + * Changes the active gamepad + * + * @param {string} gamepadId + */ changeGamepad(gamepadId) { // get the index corresponding to the identifier of the gamepad - const index = this.gamepads.findIndex(g => g && g.id === gamepadId); + const index = this.gamepads.findIndex(g => { + if (!g) return false; + const { vendor, product } = this.toGamepadInfo(g.id); + return `${vendor}-${product}` === gamepadId; + }); // set the selected gamepad this.updateUrlParams({ gamepad: gamepadId !== 'auto' ? gamepadId : undefined }); @@ -919,16 +932,6 @@ class Gamepad { // update current settings this.updateUrlParams({ background: this.backgroundStyleName }); this.$backgroundSelect.val(this.backgroundStyleName); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'change-background-color', - eventLabel: 'Change Background Color', - eventValue: this.backgroundStyleName, - }); - } } /** @@ -975,16 +978,6 @@ class Gamepad { // update current settings this.updateUrlParams({ color: this.colorName }); this.$colorSelect.val(this.colorName); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'change-gamepad-color', - eventLabel: 'Change Gamepad Color', - eventValue: this.colorName, - }); - } } /** @@ -1035,16 +1028,6 @@ class Gamepad { this.updateUrlParams({ zoom: this.zoomMode === 'auto' ? undefined : this.zoomLevel, }); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'change-zoom', - eventLabel: 'Change Zoom', - eventValue: this.zoomLevel, - }); - } } /** @@ -1066,16 +1049,6 @@ class Gamepad { }, 0); this.type = types[++typeIndex >= types.length ? 0 : typeIndex]; - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'toggle-type', - eventLabel: 'Toggle Type', - eventValue: this.type, - }); - } - // update current settings this.updateUrlParams({ type: this.type }); @@ -1093,16 +1066,6 @@ class Gamepad { // update debug value this.debug = debug !== null ? debug : !this.debug; - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'toggle-debug', - eventLabel: 'Toggle Debug', - eventValue: this.debug, - }); - } - // update current settings this.changeSkin(this.debug ? 'debug' : 'auto') } @@ -1118,16 +1081,6 @@ class Gamepad { // display the help popout this.$helpPopout.toggleClass('active'); this.helpVisible = this.$helpPopout.is('.active'); - - // save statistics - if (!!window.ga) { - ga('send', 'event', { - eventCategory: 'Gamepad', - eventAction: 'toggle-help', - eventLabel: 'Toggle Help', - eventValue: this.$helpPopout.is('active'), - }); - } } /** @@ -1152,7 +1105,7 @@ class Gamepad { /** * Reads an URL search parameter * - * @param {*} name + * @param {string} name * @returns {string|boolean|null} */ getUrlParam(name) { @@ -1197,7 +1150,7 @@ class Gamepad { /** * Update url hash with new settings * - * @param {*} newParams + * @param {object} newParams */ updateUrlParams(newParams) { const params = Object.assign(this.getUrlParams(), newParams); diff --git a/js/jquery.min.js b/js/jquery.min.js index b061403..b5329e9 100644 --- a/js/jquery.min.js +++ b/js/jquery.min.js @@ -1,2 +1,2 @@ -/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,S)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&v(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!y||!y.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ve(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=E)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{if(d.cssSupportsSelector&&!CSS.supports("selector(:is("+c+"))"))throw new Error;return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===E&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[E]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ye(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ve(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,S=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.cssSupportsSelector=ce(function(){return CSS.supports("selector(*)")&&C.querySelectorAll(":is(:jqfake)")&&!CSS.supports("selector(:is(*,:jqfake))")}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=E,!C.getElementsByName||!C.getElementsByName(E).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&S){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&S){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&S)return t.getElementsByClassName(e)},s=[],y=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+E+"-]").length||y.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||y.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+E+"+*").length||y.push(".#.+[+~]"),e.querySelectorAll("\\\f"),y.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),d.cssSupportsSelector||y.push(":has"),y=y.length&&new RegExp(y.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),v=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType&&e.documentElement||e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&v(p,e)?-1:t==C||t.ownerDocument==p&&v(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&S&&!N[t+" "]&&(!s||!s.test(t))&&(!y||!y.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:S,!0)),N.test(r[1])&&E.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=S.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,D=E(S);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=S.createDocumentFragment().appendChild(S.createElement("div")),(fe=S.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),v.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",v.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",v.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),S.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;E.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||E.expando+"_"+Ct.guid++;return this[e]=!0,e}}),E.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||E.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?E(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),v.createHTMLDocument=((Ut=S.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(v.createHTMLDocument?((r=(t=S.implementation.createHTMLDocument("")).createElement("base")).href=S.location.href,t.head.appendChild(r)):t=S),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(E.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},E.expr.pseudos.animated=function(t){return E.grep(E.timers,function(e){return t===e.elem}).length},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||re})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return B(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=_e(v.pixelPosition,function(e,t){if(t)return t=Be(e,n),Pe.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return B(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){E.fn[t]=function(e){return this.on(t,e)}}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0
-
+
-
ID
+
Name
+
+
+
+
+
+
Vendor
+
+
+
+
+
+
Product
diff --git a/templates/debug/template.js b/templates/debug/template.js index 70a6b75..f782a04 100644 --- a/templates/debug/template.js +++ b/templates/debug/template.js @@ -1,81 +1,83 @@ -(() => { - $id = $("#info-id .value"); - $timestamp = $("#info-timestamp .value"); - $index = $("#info-index .value"); - $mapping = $("#info-mapping .value"); - $rumble = $("#info-rumble .value"); - $axes = $(".axes .container"); - $buttons = $(".buttons .container"); +function DebugTemplate(gamepad) { + return { + $name: $('#info-name .value'), + $vendor: $('#info-vendor .value'), + $product: $('#info-product .value'), + $timestamp: $('#info-timestamp .value'), + $index: $('#info-index .value'), + $mapping: $('#info-mapping .value'), + $rumble: $('#info-rumble .value'), + $axes: $('.axes .container'), + $buttons: $('.buttons .container'), + activeGamepad: gamepad.getActive(), + init: function () { + if (!this.activeGamepad) { + return; + } + const { name, vendor, product } = gamepad.toGamepadInfo(this.activeGamepad.id); + this.$name.html(name).attr('title', name); + this.$vendor.html(vendor); + this.$product.html(product); + this.updateTimestamp(); + this.$index.html(this.activeGamepad.index); + this.$mapping.html(this.activeGamepad.mapping || 'N/A'); + this.$rumble.html( + this.activeGamepad.vibrationActuator + ? this.activeGamepad.vibrationActuator.type + : 'N/A' + ); + this.initAxes(); + this.initButtons(); + gamepad.updateButton = ($button) => this.updateElem($button); + gamepad.updateAxis = ($axis) => this.updateElem($axis, 6); + }, + initAxes: function () { + for ( + let axisIndex = 0; + axisIndex < this.activeGamepad.axes.length; + axisIndex++ + ) { + this.$axes.append(` +
+
+
Axis ${axisIndex}
+
+
+
+ `); + } + }, + initButtons: function () { + for ( + let buttonIndex = 0; + buttonIndex < this.activeGamepad.buttons.length; + buttonIndex++ + ) { + this.$buttons.append(` +
+
+
B${buttonIndex}
+
+
+
+ `); + } + }, + updateElem: function ($elem, precision = 2) { + this.updateTimestamp(); + let value = parseFloat($elem.attr('data-value'), 10).toFixed(precision); + $elem.html(value); + let color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value)); + $elem.css({ color: `rgb(${color}, ${color}, ${color})` }); + }, + updateTimestamp: function () { + this.activeGamepad = gamepad.getActive(); + if (!this.activeGamepad) { + return; + } + this.$timestamp.html(parseFloat(this.activeGamepad.timestamp).toFixed(3)); + }, + }.init(); +}; - gamepad = window.gamepad; - activeGamepad = gamepad.getActive(); - - if (!activeGamepad) { - return; - } - - $id.html(activeGamepad.id); - updateTimestamp(); - $index.html(activeGamepad.index); - $mapping.html(activeGamepad.mapping || 'N/A'); - $rumble.html( - activeGamepad.vibrationActuator - ? activeGamepad.vibrationActuator.type - : "N/A" - ); - - for ( - let axisIndex = 0; - axisIndex < activeGamepad.axes.length; - axisIndex++ - ) { - $axes.append(` -
-
-
Axis ${axisIndex}
-
-
-
- `); - } - - for ( - let buttonIndex = 0; - buttonIndex < activeGamepad.buttons.length; - buttonIndex++ - ) { - $buttons.append(` -
-
-
B${buttonIndex}
-
-
-
- `); - } - - gamepad.updateButton = function ($button) { - updateElem($button); - }; - - gamepad.updateAxis = function ($axis) { - updateElem($axis, 6); - }; - - function updateElem($elem, precision = 2) { - updateTimestamp(); - - let value = parseFloat($elem.attr("data-value"), 10).toFixed(precision); - $elem.html(value); - let color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value)); - $elem.css({ color: `rgb(${color}, ${color}, ${color})` }); - } - - function updateTimestamp() { - activeGamepad = gamepad.getActive(); - if (!activeGamepad) { - return; - } - $timestamp.html(parseFloat(activeGamepad.timestamp).toFixed(3)); - } -})(); +new DebugTemplate(window.gamepad); diff --git a/templates/ds4/template.js b/templates/ds4/template.js index 505d715..dadcc3e 100644 --- a/templates/ds4/template.js +++ b/templates/ds4/template.js @@ -1,33 +1,37 @@ -gamepad.updateButton = function ($button) { - const value = parseFloat($button.attr("data-value"), 10); - - if ($button.is(".trigger")) { - $button.css( - gamepad.triggersMeter - ? { - opacity: 1, - "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`, - } - : { - opacity: `${value * 100}%`, - "clip-path": "none", - } - ); - } -}; - -gamepad.updateAxis = function ($axis) { - const axisX = $axis.attr("data-value-x"); - const axisY = $axis.attr("data-value-y"); - - if ($axis.is(".stick")) { - $axis.css({ - "margin-top": axisY * 25, - "margin-left": axisX * 25, - transform: `rotateX(${-parseFloat( - axisY * 30, - 8 - )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, - }); - } +function DualShock4Template(gamepad) { + return { + init: function () { + gamepad.updateButton = function ($button) { + const value = parseFloat($button.attr('data-value'), 10); + if ($button.is('.trigger')) { + $button.css( + gamepad.triggersMeter + ? { + opacity: 1, + 'clip-path': `inset(${(1 - value) * 100}% 0px 0px 0pc)`, + } + : { + opacity: `${value * 100}%`, + 'clip-path': 'none', + } + ); + } + }; + gamepad.updateAxis = function ($axis) { + const axisX = $axis.attr('data-value-x'); + const axisY = $axis.attr('data-value-y'); + if ($axis.is('.stick')) { + $axis.css({ + 'margin-top': axisY * 25, + 'margin-left': axisX * 25, + transform: `rotateX(${-parseFloat( + axisY * 30, + 8 + )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, + }); + } + }; + }, + }.init(); }; +new DualShock4Template(window.gamepad); diff --git a/templates/telemetry/template.css b/templates/telemetry/template.css index ae94a73..f7018ca 100644 --- a/templates/telemetry/template.css +++ b/templates/telemetry/template.css @@ -3,18 +3,22 @@ display: flex; width: 650px; height: 120px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; border-top-right-radius: 60px; border-bottom-right-radius: 60px; --black-color: black; --white-color: white; - --grey-color: grey; - --main-bg-color: #444; - --main-component-color: grey; - --meter-idle-color: var(--grey-color); - --clutch-color: blue; - --brake-color: red; - --throttle-color: lime; + --main-bg-color: black; + --main-component-color: #333; + --clutch-color: #2D64B9; + --brake-color: #A52725; + --throttle-color: #0CA818; +} + +#gamepad #telemetry * { + box-sizing: border-box; } #gamepad #telemetry #chart { @@ -22,6 +26,7 @@ margin: 4px; background-color: var(--main-component-color); border: 1px solid var(--black-color); + border-radius: 4px; } #gamepad #telemetry #meters { @@ -31,86 +36,68 @@ } #gamepad #telemetry #meters .meter { - display: flex; - flex-direction: column; + position: relative; flex: 1; margin: 4px 2px; + background-color: var(--main-component-color); + border: 1px solid var(--black-color); + border-radius: 4px; + overflow: hidden; } #gamepad #telemetry #meters .meter .value { - display: flex; - justify-content: center; - align-items: center; + position: absolute; + bottom: 2px; + width: 100%; + text-align: center; font-weight: bold; font-size: 10pt; color: var(--white-color); } #gamepad #telemetry #meters .meter .bar { - display: flex; - align-items: flex-end; - flex: 1; - background-color: var(--main-component-color); - border: 1px solid var(--black-color); -} -#gamepad #telemetry #meters .meter .bar .filler { + position: absolute; + bottom: 0; width: 100%; height: 0%; transition: height 100ms; } -#gamepad #telemetry #meters #clutch.meter .bar .filler { +#gamepad #telemetry #meters #clutch.meter .bar { background-color: var(--clutch-color); } -#gamepad #telemetry #meters #brake.meter .bar .filler { +#gamepad #telemetry #meters #brake.meter .bar { background-color: var(--brake-color); } -#gamepad #telemetry #meters #throttle.meter .bar .filler { +#gamepad #telemetry #meters #throttle.meter .bar { background-color: var(--throttle-color); } #gamepad #telemetry #direction { - display: flex; - justify-content: center; - align-items: center; - width: 120px; - border-radius: 50%; -} - -#gamepad #telemetry #direction #wheel { position: relative; display: flex; justify-content: center; - width: 90%; - height: 90%; - border-radius: 50%; - background-color: var(--black-color); + width: 100px; + height: 100px; + margin: 10px; + border-radius: 50px; + background-color: var(--main-component-color); } -#gamepad #telemetry #direction #wheel #wheel--center { - display: block; +#gamepad #telemetry #direction .center { position: absolute; - top: 10%; - left: 10%; - width: 80%; - height: 80%; + top: 20%; + left: 20%; + width: 60%; + height: 60%; border-radius: 50%; background-color: var(--main-bg-color); } -#gamepad #telemetry #direction #wheel #wheel--indicator { +#gamepad #telemetry #direction .indicator { display: block; - width: 7%; + width: 5%; height: 50%; background-color: var(--white-color); transform-origin: bottom; - transform: rotate(0deg); transition: transform 100ms; } - -#gamepad #telemetry #direction { - display: flex; - justify-content: center; - align-items: center; - width: 120px; - border-radius: 50%; -} diff --git a/templates/telemetry/template.html b/templates/telemetry/template.html index 1ed9524..be47ca7 100644 --- a/templates/telemetry/template.html +++ b/templates/telemetry/template.html @@ -5,28 +5,20 @@
+
0
-
-
-
+
0
-
-
-
+
0
-
-
-
-
-
-
-
+
+
diff --git a/templates/telemetry/template.js b/templates/telemetry/template.js index 67137de..1c3e494 100644 --- a/templates/telemetry/template.js +++ b/templates/telemetry/template.js @@ -1,143 +1,124 @@ -/** - * The Telemetry template class - * - * @class TelemetryTemplate - */ -class TelemetryTemplate { - /** - * Creates an instance of TelemetryTemplate. - */ - constructor() { - this.AXES = ['clutch', 'brake', 'throttle', 'direction']; - - this.frequency = 1000 / 60; - this.historyLength = 5000; - this.length = this.historyLength / this.frequency; - this.index = 0; - - this.$clutchValue = document.querySelector('#clutch .value'); - this.$clutchBar = document.querySelector('#clutch .bar .filler'); - this.$brakeValue = document.querySelector('#brake .value'); - this.$brakeBar = document.querySelector('#brake .bar .filler'); - this.$throttleValue = document.querySelector('#throttle .value'); - this.$throttleBar = document.querySelector('#throttle .bar .filler'); - this.$directionIndicator = document.querySelector('#direction #wheel--indicator'); - - this.init(); - } - - toPercentage(value, min, max) { - // debugger; - return value !== undefined - ? Math.round((value - min) * (100 / (max - min))) - : 0; - } - - toDegrees(value, min, max) { - const percentage = this.toPercentage(value, min, max); - return (this.directionDegrees) * (percentage - 50) / 100; - } - - toAxisValue(gamepad, axis) { - const { [`${axis}Type`]: type, [`${axis}Index`]: index, [`${axis}Min`]: min, [`${axis}Max`]: max } = this[axis]; - const value = type === 'button' ? gamepad.buttons[index].value : gamepad.axes[index]; - return axis === 'direction' ? this.toDegrees(value, min, max) : this.toPercentage(value, min, max); - } - - loadAxes() { - this.AXES.forEach((axis) => { - this[axis] = { - [`${axis}Type`]: (window.gamepad.getUrlParam(`${axis}Type`) || 'axis').replace('axis', 'axe'), - [`${axis}Index`]: window.gamepad.getUrlParam(`${axis}Index`), - [`${axis}Min`]: window.gamepad.getUrlParam(`${axis}Min`) || -1, - [`${axis}Max`]: window.gamepad.getUrlParam(`${axis}Max`) || 1, - } - }); - this.directionDegrees = window.gamepad.getUrlParam('directionDegrees') || 360; - } - - init() { - this.loadAxes(); - - if (!window.google) { - window.setTimeout(this.init.bind(this), 100); - return; - } - - google.charts.load('current', { - packages: ['corechart', 'line'], - }); - google.charts.setOnLoadCallback(this.drawChart.bind(this)); - } - - drawChart() { - this.initialData = [['Time', 'Clutch', 'Brake', 'Throttle']]; - for (this.index = 0; this.index < this.length; this.index++) { - this.initialData.push([this.index, 0, 0, 0]); - } - this.data = google.visualization.arrayToDataTable(this.initialData); - this.options = { - backgroundColor: 'transparent', - chartArea: { - left: 0, - top: 0, - width: '100%', - height: '100%', - backgroundColor: 'transparent', - }, - hAxis: { - textPosition: 'none', - gridlines: { - color: 'transparent', +function TelemetryTemplate(gamepad) { + return { + $clutchBar: document.querySelector('#clutch .bar'), + $clutchValue: document.querySelector('#clutch .value'), + $brakeBar: document.querySelector('#brake .bar'), + $brakeValue: document.querySelector('#brake .value'), + $throttleBar: document.querySelector('#throttle .bar'), + $throttleValue: document.querySelector('#throttle .value'), + $directionIndicator: document.querySelector('#direction .indicator'), + AXES: ['clutch', 'brake', 'throttle', 'direction'], + frequency: gamepad.getUrlParam('fps') || 60, + historyLength: gamepad.getUrlParam('history') || 5000, + index: 0, + init: function () { + this.interval = 1000 / this.frequency; + this.length = this.historyLength / this.interval; + this.loadAxes(); + this.initChart(); + }, + toPercentage: function (value, min, max) { + return value !== undefined + ? Math.round((value - min) * (100 / (max - min))) + : 0; + }, + toDegrees: function (value, min, max) { + const percentage = this.toPercentage(value, min, max); + return (this.directionDegrees) * (percentage - 50) / 100; + }, + toAxisValue: function (gamepad, axis) { + const { [`${axis}Type`]: type, [`${axis}Index`]: index, [`${axis}Min`]: min, [`${axis}Max`]: max } = this[axis]; + const value = type === 'button' ? gamepad.buttons[index].value : gamepad.axes[index]; + return axis === 'direction' ? this.toDegrees(value, min, max) : this.toPercentage(value, min, max); + }, + loadAxes: function () { + this.AXES.forEach((axis) => { + this[axis] = { + [`${axis}Type`]: (gamepad.getUrlParam(`${axis}Type`) || 'axis').replace('axis', 'axe'), + [`${axis}Index`]: gamepad.getUrlParam(`${axis}Index`), + [`${axis}Min`]: gamepad.getUrlParam(`${axis}Min`) || -1, + [`${axis}Max`]: gamepad.getUrlParam(`${axis}Max`) || 1, } - }, - vAxis: { - textPosition: 'none', - gridlines: { - color: 'transparent', - }, - minValue: 0, - maxValue: 100, - }, - colors: ['blue', 'red', 'lime'], - legend: 'none' - }; - this.chart = new google.visualization.LineChart(document.querySelector('#chart')); - this.chart.draw(this.data, this.options); - - this.update(); - } - - update() { - const gamepad = window.gamepad.getActive(); - if (!gamepad) return; - - const [clutch, brake, throttle, direction] = this.AXES.map((axis) => this.toAxisValue(gamepad, axis)); - - this.updateChart(clutch, brake, throttle); - this.updateMeters(clutch, brake, throttle, direction); - window.setTimeout(this.update.bind(this), this.frequency); - } - - updateChart(clutch, brake, throttle) { - if (this.data.getNumberOfRows() > this.length) { - this.data.removeRows(0, this.data.getNumberOfRows() - this.length); - } - this.data.addRow([this.index, clutch, brake, throttle]); - this.chart.draw(this.data, this.options); - this.index++; - } - - updateMeters(clutch, brake, throttle, direction) { - Object.entries({ clutch, brake, throttle, direction }).forEach(([axis, value]) => { - if (axis === 'direction') { - this.$directionIndicator.style.transform = `rotate(${value}deg)`; + }); + this.directionDegrees = gamepad.getUrlParam('directionDegrees') || 360; + }, + initChart: function () { + if (!window.google) { + window.setTimeout(this.loadGoogleCharts.bind(this), 100); return; } - this[`$${axis}Value`].innerHTML = value; - this[`$${axis}Bar`].style.height = `${value}%`; - }); - }; -} + this.drawChart(); + }, + loadGoogleCharts: function () { + google.charts.load('current', { packages: ['corechart', 'line'], }); + google.charts.setOnLoadCallback(this.drawChart.bind(this)); + }, + drawChart: function () { + this.initialData = [['time', 'clutch', 'brake', 'throttle']]; + for (this.index = 0; this.index < this.length; this.index++) { + this.initialData.push([this.index, 0, 0, 0]); + } + this.data = google.visualization.arrayToDataTable(this.initialData); + this.options = { + backgroundColor: 'transparent', + chartArea: { + left: 0, + top: 0, + width: '100%', + height: '100%', + backgroundColor: 'transparent', + }, + hAxis: { + textPosition: 'none', + gridlines: { + color: 'transparent', + } + }, + vAxis: { + textPosition: 'none', + gridlines: { + color: 'transparent', + }, + minValue: 0, + maxValue: 100, + viewWindow: { + min: 2, + max: 102, + } + }, + colors: ['#2D64B9', '#A52725', '#0CA818'], + legend: 'none' + }; + this.chart = new google.visualization.LineChart(document.querySelector('#chart')); + this.chart.draw(this.data, this.options); + this.update(); + }, + update: function () { + const activeGamepad = gamepad.getActive(); + if (!activeGamepad) return; + const [clutch, brake, throttle, direction] = this.AXES.map((axis) => this.toAxisValue(activeGamepad, axis)); + this.updateChart(clutch, brake, throttle); + this.updateMeters(clutch, brake, throttle, direction); + window.setTimeout(this.update.bind(this), this.interval); + }, + updateChart: function (clutch, brake, throttle) { + this.data.removeRows(0, 1); + this.data.addRow([this.index, clutch, brake, throttle]); + this.chart.draw(this.data, this.options); + this.index++; + }, + updateMeters: function (clutch, brake, throttle, direction) { + Object.entries({ clutch, brake, throttle, direction }).forEach(([axis, value]) => { + if (axis === 'direction') { + this.$directionIndicator.style.transform = `rotate(${value}deg)`; + return; + } + this[`$${axis}Value`].innerHTML = value; + this[`$${axis}Value`].style.opacity = `${Math.round(33 + (value / 1.5))}%`; + this[`$${axis}Bar`].style.height = `${value}%`; + }); + } + }.init(); +}; -window.telemetryTemplate = new TelemetryTemplate(); +new TelemetryTemplate(window.gamepad); diff --git a/templates/xbox-one/template.js b/templates/xbox-one/template.js index 505d715..dfd8130 100644 --- a/templates/xbox-one/template.js +++ b/templates/xbox-one/template.js @@ -1,33 +1,37 @@ -gamepad.updateButton = function ($button) { - const value = parseFloat($button.attr("data-value"), 10); - - if ($button.is(".trigger")) { - $button.css( - gamepad.triggersMeter - ? { - opacity: 1, - "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`, - } - : { - opacity: `${value * 100}%`, - "clip-path": "none", - } - ); - } -}; - -gamepad.updateAxis = function ($axis) { - const axisX = $axis.attr("data-value-x"); - const axisY = $axis.attr("data-value-y"); - - if ($axis.is(".stick")) { - $axis.css({ - "margin-top": axisY * 25, - "margin-left": axisX * 25, - transform: `rotateX(${-parseFloat( - axisY * 30, - 8 - )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, - }); - } +function XboxOneTemplate(gamepad) { + return { + init: function () { + gamepad.updateButton = function ($button) { + const value = parseFloat($button.attr('data-value'), 10); + if ($button.is('.trigger')) { + $button.css( + gamepad.triggersMeter + ? { + opacity: 1, + 'clip-path': `inset(${(1 - value) * 100}% 0px 0px 0pc)`, + } + : { + opacity: `${value * 100}%`, + 'clip-path': 'none', + } + ); + } + }; + gamepad.updateAxis = function ($axis) { + const axisX = $axis.attr('data-value-x'); + const axisY = $axis.attr('data-value-y'); + if ($axis.is('.stick')) { + $axis.css({ + 'margin-top': axisY * 25, + 'margin-left': axisX * 25, + transform: `rotateX(${-parseFloat( + axisY * 30, + 8 + )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`, + }); + } + }; + }, + }.init(); }; +new XboxOneTemplate(window.gamepad);