From a49084b82a6e739bfcdb9c37eeeb4b06f1a093fc Mon Sep 17 00:00:00 2001 From: unknown <1371033826@qq.com> Date: Tue, 15 Oct 2024 22:05:26 +0800 Subject: [PATCH] joystick --- js/gauge.min.js | 314 ++++++++++++++++++++++++++++++++++++++++++++- js/joy.js | 335 ------------------------------------------------ 2 files changed, 313 insertions(+), 336 deletions(-) delete mode 100644 js/joy.js diff --git a/js/gauge.min.js b/js/gauge.min.js index 8d476a4..8bbcdae 100644 --- a/js/gauge.min.js +++ b/js/gauge.min.js @@ -1,3 +1,315 @@ !function(e){"use strict";function t(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t1&&(d=1),t&&t(1===d?d:i(d)),s0){for(a=e.toFixed(r).toString().split("."),n=i-a[0].length;o1?(i=~r.indexOf("."),~r.indexOf("-")?"-"+[t.majorTicksInt+t.majorTicksDec+2+(i?1:0)-r.length].join("0")+r.replace("-",""):[t.majorTicksInt+t.majorTicksDec+1+(i?1:0)-r.length].join("0")+r):r}function f(e){return e*Math.PI/180}function v(e,t){return{x:-e*Math.sin(t),y:e*Math.cos(t)}}function m(e,t,r,i){var o=arguments.length<=4||void 0===arguments[4]||arguments[4],n=arguments.length<=5||void 0===arguments[5]?0:arguments[5],a=e.createLinearGradient(o?0:n,o?n:0,o?0:i,o?i:0);return a.addColorStop(0,t),a.addColorStop(1,r),a}function b(e,t){var r=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];if(r)return e.restore(),!0;e.save();var i=t.borderShadowWidth;return i&&(e.shadowBlur=i,e.shadowColor=t.colorBorderShadow),!0}function g(e,t){t.needleShadow&&(e.shadowOffsetX=2,e.shadowOffsetY=2,e.shadowBlur=10,e.shadowColor=t.colorNeedleShadowDown)}function p(e,t,r,i,o,n){if(t.valueBox){var a=t.valueText||h(r,t);e.shadowOffsetX=null,e.shadowOffsetY=null,e.shadowBlur=null,e.shadowColor="",e.strokeStyle=null,e.lineWidth=0,e.save(),e.font=t.fontValueStyle+" "+t.fontValueWeight+" "+t.fontValueSize*(n/200)+"px "+t.fontValue,e.save(),e.beginPath();var l=.12*n,s=parseFloat(t.valueBoxStroke)||0,d=2*n-2*s,u=e.measureText(t.valueText?a:"-"+h(0,t)).width,f=u+.05*n,v=l+.07*n,m=n*t.valueBoxBorderRadius/100,b=(parseFloat(t.valueBoxWidth)||0)/100*d;b>f&&(f=b),f>d&&(f=d);var g=i-f/2,p=o-l-.04*n;m?c(e,g,p,f,v,m):e.rect(g,p,f,v);var w=o-.12*n-.025*n+(.12*n+.045*n)/2;if(t.valueBoxStroke){var y=e.createRadialGradient(i,w,n/10,i,w,n/5);y.addColorStop(0,t.colorValueBoxRect),y.addColorStop(1,t.colorValueBoxRectEnd),e.strokeStyle=y,e.lineWidth=n*t.valueBoxStroke/100,e.stroke()}t.colorValueBoxShadow&&(e.shadowBlur=.012*n,e.shadowColor=t.colorValueBoxShadow),t.colorValueBoxBackground&&(e.fillStyle=t.colorValueBoxBackground,e.fill()),e.closePath(),e.restore(),t.valueTextShadow&&(e.shadowOffsetX=.004*n,e.shadowOffsetY=.004*n,e.shadowBlur=.012*n,e.shadowColor=t.colorValueTextShadow),e.fillStyle=t.colorValueText,e.textAlign="center",e.fillText(a,-i,o),e.restore()}}function w(e,t,r,i,o){r.beginPath(),r.arc(0,0,ue(e),0,2*be,!0),r.lineWidth=t,r.strokeStyle=o?me.linearGradient(r,i,o,e):i,r.stroke(),r.closePath()}function y(e,t){return e.maxRadius||(e.maxRadius=e.max-t.borderShadowWidth-t.borderOuterWidth-t.borderMiddleWidth-t.borderInnerWidth+(t.borderOuterWidth?.5:0)+(t.borderMiddleWidth?.5:0)+(t.borderInnerWidth?.5:0)),e.maxRadius}function x(e,t){var r=t.borderShadowWidth,i=e.max-r-t.borderOuterWidth/2,o=i-t.borderOuterWidth/2-t.borderMiddleWidth/2+.5,n=o-t.borderMiddleWidth/2-t.borderInnerWidth/2+.5,a=y(e,t),l=void 0,s=!1;e.save(),t.borderOuterWidth&&(s=me.drawShadow(e,t,s),w(i,t.borderOuterWidth,e,t.colorBorderOuter,t.colorBorderOuterEnd)),t.borderMiddleWidth&&(s=me.drawShadow(e,t,s),w(o,t.borderMiddleWidth,e,t.colorBorderMiddle,t.colorBorderMiddleEnd)),t.borderInnerWidth&&(s=me.drawShadow(e,t,s),w(n,t.borderInnerWidth,e,t.colorBorderInner,t.colorBorderInnerEnd)),me.drawShadow(e,t,s),e.beginPath(),e.arc(0,0,ue(a),0,2*be,!0),t.colorPlateEnd?(l=e.createRadialGradient(0,0,a/2,0,0,a),l.addColorStop(0,t.colorPlate),l.addColorStop(1,t.colorPlateEnd)):l=t.colorPlate,e.fillStyle=l,e.fill(),e.closePath(),e.restore()}function T(e,t){var r=e.max*(parseFloat(t.highlightsWidth)||0)/100;if(r){var i=ue(S(e,t)-r/2),o=0,n=t.highlights.length,a=(t.maxValue-t.minValue)/t.ticksAngle;for(e.save();on?o:n,n>o,o>n?r:i):a,t>0?me.roundRect(e,r,i,o,n,t):e.rect(r,i,o,n),e.fill(),e.closePath()}function j(e,t,r,i,o,n,a,l,s){e.beginPath(),e.lineWidth=t,e.strokeStyle=s?me.linearGradient(e,l,s,a,!0,o):l,r>0?me.roundRect(e,i,o,n,a,r):e.rect(i,o,n,a),e.stroke(),e.closePath()}function E(e,t,r,i,o,n){e.save();var a=t.borderRadius,l=o-t.borderShadowWidth-t.borderOuterWidth,s=l-t.borderOuterWidth-t.borderMiddleWidth,d=s-t.borderMiddleWidth-t.borderInnerWidth,c=d-t.borderInnerWidth,h=n-t.borderShadowWidth-t.borderOuterWidth,u=h-t.borderOuterWidth-t.borderMiddleWidth,f=u-t.borderMiddleWidth-t.borderInnerWidth,v=f-t.borderInnerWidth,m=r-(s-l)/2,b=m-(d-s)/2,g=b-(c-d)/2,p=i-(u-h)/2,w=p-(f-u)/2,y=w-(v-f)/2,x=0,T=!1;return t.borderOuterWidth&&(T=me.drawShadow(e,t,T),j(e,t.borderOuterWidth,a,r+t.borderOuterWidth/2-x,i+t.borderOuterWidth/2-x,l,h,t.colorBorderOuter,t.colorBorderOuterEnd),x+=.5),t.borderMiddleWidth&&(T=me.drawShadow(e,t,T),j(e,t.borderMiddleWidth,a-=1+2*x,m+t.borderMiddleWidth/2-x,p+t.borderMiddleWidth/2-x,s+2*x,u+2*x,t.colorBorderMiddle,t.colorBorderMiddleEnd),x+=.5),t.borderInnerWidth&&(T=me.drawShadow(e,t,T),j(e,t.borderInnerWidth,a-=1+2*x,b+t.borderInnerWidth/2-x,w+t.borderInnerWidth/2-x,d+2*x,f+2*x,t.colorBorderInner,t.colorBorderInnerEnd),x+=.5),me.drawShadow(e,t,T),C(e,a,g,y,c+2*x,v+2*x,t.colorPlate,t.colorPlateEnd),e.restore(),[g,y,c,v]}function R(e,t,r,i,o,n){var a=se.pixelRatio,l=n>=o,s=l?.85*o:n,d=l?n:o;r=l?he(r+(o-s)/2):r;var c=!!t.title,h=!!t.units,u=!!t.valueBox,f=void 0,v=void 0,m=void 0;l?(v=he(.05*d),f=he(.075*d),m=he(.075*d),c&&(d-=f,i+=f),h&&(d-=v),u&&(d-=m)):(v=f=he(.15*s),c&&(s-=f,i+=f),h&&(s-=v));var b=2*t.barStrokeWidth,g=t.barBeginCircle?he(s*t.barBeginCircle/200-b/2):0,p=he(s*t.barWidth/100-b),w=he(d*t.barLength/100-b),y=he((d-w)/2),x=he(r+(l?s/2:y+g)),T=he(i+(l?d-y-g+b/2:s/2)),k=!l||t.hasLeft&&t.hasRight?0:(t.hasRight?-1:1)*t.ticksWidth/100*s,S=l||t.hasLeft&&t.hasRight?0:(t.hasRight?-1:1)*t.ticksWidth/100*s;return e.barDimensions={isVertical:l,width:s,length:d,barWidth:p,barLength:w,strokeWidth:b,barMargin:y,radius:g,pixelRatio:a,barOffset:null,titleMargin:c?f:0,unitsMargin:h?v:0,get ticksLength(){return this.barLength-this.barOffset-this.strokeWidth},X:r+k,Y:i+S,x0:x+k,y0:T+S,baseX:r,baseY:i,ticksPadding:t.ticksPadding/100},e.barDimensions}function I(e,t,r,i,o,n,a){var l=R(e,t,i,o,n,a),s=l.isVertical,d=l.width,c=l.barWidth,h=l.barLength,u=l.strokeWidth,f=l.barMargin,v=l.radius,m=l.x0,b=l.y0,g=l.X,p=l.Y,w=h;if(e.save(),e.beginPath(),t.barBeginCircle){var y=me.radians(s?270:0),x=Math.asin(c/2/v),T=Math.cos(x),k=Math.sin(x),S=m+(s?v*k:v*T-u/2),W=s?b-v*T:b+v*k,O=ue(s?W-b:S-m);e.barDimensions.barOffset=he(O+v);var M=s?he(m-v*k):S,B=s?W:he(b-v*k);"progress"===r&&(h=e.barDimensions.barOffset+(h-e.barDimensions.barOffset)*(t.value-t.minValue)/(t.maxValue-t.minValue));var P=he(S+h-e.barDimensions.barOffset+u/2),V=he(W-h+e.barDimensions.barOffset-u/2);e.arc(m,b,v,y+x,y-x),s?(e.moveTo(S,B),e.lineTo(S,V),e.lineTo(M,V),e.lineTo(M,B)):(e.moveTo(S,B),e.lineTo(P,B),e.lineTo(P,W),e.lineTo(S,W))}else{var A=he(s?g+(d-c)/2:g+f),N=he(s?p+h+f:p+(d-c)/2);"progress"===r&&(h*=(t.value-t.minValue)/(t.maxValue-t.minValue)),s?e.rect(A,N,c,-h):e.rect(A,N,h,c)}"progress"!==r&&t.barStrokeWidth&&(e.lineWidth=u,e.strokeStyle=t.colorBarStroke,e.stroke()),"progress"!==r&&t.colorBar?(e.fillStyle=t.colorBarEnd?me.linearGradient(e,t.colorBar,t.colorBarEnd,h,s,s?p:g):t.colorBar,e.fill()):"progress"===r&&t.colorBarProgress&&(e.fillStyle=t.colorBarProgressEnd?me.linearGradient(e,t.colorBarProgress,t.colorBarProgressEnd,w,s,s?p:g):t.colorBarProgress,e.fill()),e.closePath(),t.barBeginCircle&&(e.barDimensions.radius+=u),e.barDimensions.barWidth+=u,e.barDimensions.barLength+=u}function D(e,t,r,i,o,n){I(e,t,"",r,i,o,n)}function z(e,t){return t.needleSide!==e||t.tickSide!==e||t.numberSide!==e}function L(e,t,r,i,o,n){t.barProgress&&I(e,t,"progress",r,i,o,n)}function _(e,t){var r=e.barDimensions,i=r.isVertical,o=r.width,n=r.length,a=r.barWidth,l=r.barOffset,s=r.barMargin,d=r.X,c=r.Y,h=r.ticksLength,u=r.ticksPadding,f=o*(parseFloat(t.highlightsWidth)||0)/100;if(t.highlights&&f){var v="right"!==t.tickSide,m="left"!==t.tickSide,b=0,g=t.highlights.length,p=(o-a)/2,w=t.maxValue-t.minValue,y=he(i?d+p:d+s+l),x=f,T=i?c+n-s-l:c+p,k=he((t.ticksWidth/100+u)*o)+(f-t.ticksWidth/100*o),S=he(a+u*o);for(e.save();bn&&(d*=-1),e.moveTo(r-h,i),e.lineTo(r+h,i),e.lineTo(r+h,i+d),e.lineTo(r,n),e.lineTo(r-h,i+d),e.lineTo(r-h,i)):(r>o&&(d*=-1),e.moveTo(r,i-h),e.lineTo(r,i+h),e.lineTo(r+d,i+h),e.lineTo(o,i),e.lineTo(r+d,i-h),e.lineTo(r,i-h)),e.fill(),e.closePath()}function ee(e,t,r,i,o,n,a){e.barDimensions.isVertical&&me.drawValueBox(e,t,r,i+n/2,o+a-40*(n/300),n)}var te=function(){function e(e,t){var r=[],i=!0,o=!1,n=void 0;try{for(var a,l=e[Symbol.iterator]();!(i=(a=l.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){o=!0,n=e}finally{try{!i&&l.return&&l.return()}finally{if(o)throw n}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),re=function e(t,r,i){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,r);if(void 0===o){var n=Object.getPrototypeOf(t);return null===n?void 0:e(n,r,i)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(i)},ie=function(){function e(e,t){for(var r=0;r>>0;if(0===o)return-1;var n=+t||0;if(Math.abs(n)===1/0&&(n=0),n>=o)return-1;for(r=Math.max(n>=0?n:o-Math.abs(n),0);r>>0,i=arguments[1],o=i>>0,n=o<0?Math.max(r+o,0):Math.min(o,r),a=arguments[2],l=void 0===a?r:a>>0,s=l<0?Math.max(r+l,0):Math.min(l,r);n=(7-4*t)/11)return-Math.pow((11-6*t-11*e)/4,2)+Math.pow(r,2)},elastic:function(e){return 1-ne.delastic(1-e)},delastic:function(e){var t=1.5;return Math.pow(2,10*(e-1))*Math.cos(20*Math.PI*t/3*e)}},ae=function(){function t(){var e=arguments.length<=0||void 0===arguments[0]?"linear":arguments[0],r=arguments.length<=1||void 0===arguments[1]?250:arguments[1],i=arguments.length<=2||void 0===arguments[2]?function(){}:arguments[2],n=arguments.length<=3||void 0===arguments[3]?function(){}:arguments[3];if(o(this,t),this.duration=r,this.rule=e,this.draw=i,this.end=n,"function"!=typeof this.draw)throw new TypeError("Invalid animation draw callback:",i);if("function"!=typeof this.end)throw new TypeError("Invalid animation end callback:",n)}return ie(t,[{key:"animate",value:function(t,r){var i=this,o=e.performance&&e.performance.now?e.performance.now():n("animationStartTime")||Date.now();t=t||this.draw,r=r||this.end,this.frame=oe(function(e){return a(e,t,o,ne[i.rule]||i.rule,i.duration,r,i)})}},{key:"destroy",value:function(){if(this.frame){var e=n("cancelAnimationFrame")||function(e){};e(this.frame),this.frame=null}this.draw=null,this.end=null}}]),t}();ae.rules=ne;var le=function(){function t(r,i,n){o(this,t),this.options=r,this.element=i.toLowerCase(),this.type=t.toDashed(n),this.Type=e[n],this.mutationsObserved=!1,this.isObservable=!!e.MutationObserver,t.domReady(this.traverse.bind(this))}return ie(t,[{key:"isValidNode",value:function(e){return!(!e.tagName||e.tagName.toLowerCase()!==this.element||e.getAttribute("data-type")!==this.type)}},{key:"traverse",value:function(){for(var t=document.getElementsByTagName(this.element),r=0,i=t.length;r360&&(e.ticksAngle=360),e.ticksAngle<0&&(e.ticksAngle=0),e.startAngle<0&&(e.startAngle=0),e.startAngle>360&&(e.startAngle=360), r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),ie(t,[{key:"draw",value:function(){try{var e=this.canvas,r=-e.drawX,i=-e.drawY,o=e.drawWidth,n=e.drawHeight,a=this.options;if("needle"===a.animationTarget){if(!e.elementClone.initialized){var l=e.contextClone;l.clearRect(r,i,o,n),l.save(),x(l,a),T(l,a),k(l,a),W(l,a),B(l,a),P(l,a),V(l,a),e.elementClone.initialized=!0}this.canvas.commit(),e.context.clearRect(r,i,o,n),e.context.save(),e.context.drawImage(e.elementClone,r,i,o,n),e.context.save(),N(e.context,a,a.animatedValue?this.options.value:this.value),A(e.context,a)}else{var s=-me.radians((a.value-a.minValue)/(a.maxValue-a.minValue)*a.ticksAngle);if(e.context.clearRect(r,i,o,n),e.context.save(),x(e.context,a),e.context.rotate(s),T(e.context,a),k(e.context,a),W(e.context,a),B(e.context,a),e.context.rotate(-s),e.context.save(),!e.elementClone.initialized){var d=e.contextClone;d.clearRect(r,i,o,n),d.save(),P(d,a),V(d,a),A(d,a),e.elementClone.initialized=!0}e.context.drawImage(e.elementClone,r,i,o,n)}N(e.context,a,a.animatedValue?this.options.value:this.value),re(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"draw",this).call(this)}catch(e){me.verifyError(e)}return this}}]),t}(ve);"undefined"!=typeof e&&(e.RadialGauge=we),ve.initialize("RadialGauge",pe);var ye=Object.assign({},de,{borderRadius:0,barBeginCircle:30,barWidth:20,barStrokeWidth:0,barProgress:!0,colorBarStroke:"#222",colorBar:"#ccc",colorBarEnd:"",colorBarProgress:"#888",colorBarProgressEnd:"",needleWidth:6,tickSide:"both",needleSide:"both",numberSide:"both",ticksWidth:10,ticksWidthMinor:5,ticksPadding:5,barLength:85,fontTitleSize:26,highlightsWidth:10}),xe=function(e){function n(e){return o(this,n),e=Object.assign({},ye,e||{}),e.barStrokeWidth>=e.barWidth&&(e.barStrokeWidth=he(e.barWidth/2)),e.hasLeft=z("right",e),e.hasRight=z("left",e),r(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e))}return i(n,e),ie(n,[{key:"draw",value:function(){try{var e=this.canvas,r=-e.drawX,i=-e.drawY,o=e.drawWidth,a=e.drawHeight,l=this.options;if(!e.elementClone.initialized){var s=e.contextClone;s.clearRect(r,i,o,a),s.save(),this.drawBox=E(s,l,r,i,o,a),D.apply(void 0,[s,l].concat(t(this.drawBox))),e.context.barDimensions=s.barDimensions,_(s,l),F(s,l),Y(s,l),q(s,l),H(s,l),J(s,l),e.elementClone.initialized=!0}this.canvas.commit(),e.context.clearRect(r,i,o,a),e.context.save(),e.context.drawImage(e.elementClone,r,i,o,a),e.context.save(),L.apply(void 0,[e.context,l].concat(t(this.drawBox))),Z(e.context,l),ee.apply(void 0,[e.context,l,l.animatedValue?this.options.value:this.value].concat(t(this.drawBox))),re(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"draw",this).call(this)}catch(e){me.verifyError(e)}return this}}]),n}(ve);"undefined"!=typeof e&&(e.LinearGauge=xe),ve.initialize("LinearGauge",ye),"undefined"!=typeof module&&Object.assign(e,{Collection:l,GenericOptions:de,Animation:ae,BaseGauge:ve,drawings:me,SmartCanvas:se,vendorize:n})}("undefined"!=typeof module?module.exports:window); -var JoyStick=(function(container,parameters){parameters=parameters||{};var title=(typeof parameters.title==="undefined"?"joystick":parameters.title),width=(typeof parameters.width==="undefined"?0:parameters.width),height=(typeof parameters.height==="undefined"?0:parameters.height),internalFillColor=(typeof parameters.internalFillColor==="undefined"?"#B4DCFF":parameters.internalFillColor),internalLineWidth=(typeof parameters.internalLineWidth==="undefined"?2:parameters.internalLineWidth),internalStrokeColor=(typeof parameters.internalStrokeColor==="undefined"?"#4e73df":parameters.internalStrokeColor),externalLineWidth=(typeof parameters.externalLineWidth==="undefined"?8:parameters.externalLineWidth),externalStrokeColor=(typeof parameters.externalStrokeColor==="undefined"?"#4e73df":parameters.externalStrokeColor),autoReturnToCenter=(typeof parameters.autoReturnToCenter==="undefined"?true:parameters.autoReturnToCenter);var objContainer=document.getElementById(container);var canvas=document.createElement("canvas");canvas.id=title;if(width===0){width=objContainer.clientWidth}if(height===0){height=objContainer.clientHeight}canvas.width=width*2;canvas.height=height*2;canvas.style="width:"+width+"px;height:"+height+"px;"objContainer.appendChild(canvas);var context=canvas.getContext("2d");var pressed=0;var circumference=2*Math.PI;var internalRadius=(canvas.width-((canvas.width/2)+30))/2;var maxMoveStick=internalRadius+10;var externalRadius=internalRadius+60;var centerX=canvas.width/2;var centerY=canvas.height/2;var directionHorizontalLimitPos=canvas.width/10;var directionHorizontalLimitNeg=directionHorizontalLimitPos*-1;var directionVerticalLimitPos=canvas.height/10;var directionVerticalLimitNeg=directionVerticalLimitPos*-1;var movedX=centerX;var movedY=centerY;if("ontouchstart"in document.documentElement){canvas.addEventListener("touchstart",onTouchStart,false);canvas.addEventListener("touchmove",onTouchMove,false);canvas.addEventListener("touchend",onTouchEnd,false)}else{canvas.addEventListener("mousedown",onMouseDown,false);canvas.addEventListener("mousemove",onMouseMove,false);canvas.addEventListener("mouseup",onMouseUp,false)}drawExternal();drawInternal();function drawExternal(){context.beginPath();context.arc(centerX,centerY,externalRadius,0,circumference,false);context.lineWidth=externalLineWidth;context.strokeStyle=externalStrokeColor;context.stroke()}function drawInternal(){context.beginPath();if(movedXcanvas.width){movedX=canvas.width-(maxMoveStick)}if(movedYcanvas.height){movedY=canvas.height-(maxMoveStick)}context.arc(movedX,movedY,internalRadius,0,circumference,false);var grd=context.createRadialGradient(centerX,centerY,5,centerX,centerY,200);grd.addColorStop(0,internalFillColor);grd.addColorStop(1,internalStrokeColor);context.fillStyle=grd;context.fill();context.lineWidth=internalLineWidth;context.strokeStyle=internalStrokeColor;context.stroke()}function onTouchStart(event){event.preventDefault();pressed=1;event.stopPropagation()}function onTouchMove(event){event.preventDefault();if(pressed===1&&event.targetTouches[0].target===canvas){movedX=event.targetTouches[0].pageX*2;movedY=event.targetTouches[0].pageY*2;if(canvas.offsetParent.tagName.toUpperCase()==="BODY"){movedX-=canvas.offsetLeft;movedY-=canvas.offsetTop}else{movedX-=$(canvas).offset().left*2;movedY-=$(canvas).offset().top*2}context.clearRect(0,0,canvas.width,canvas.height);drawExternal();drawInternal()}}function onTouchEnd(event){event.preventDefault();pressed=0;if(autoReturnToCenter){movedX=centerX;movedY=centerY}context.clearRect(0,0,canvas.width,canvas.height);drawExternal();drawInternal()}function onMouseDown(event){event.preventDefault();pressed=1}function onMouseMove(event){event.preventDefault();if(pressed===1){movedX=event.offsetX*2;movedY=event.offsetY*2;if(canvas.offsetParent.tagName.toUpperCase()==="BODY"){movedX-=canvas.offsetLeft;movedY-=canvas.offsetTop}else{movedX-=canvas.offsetParent.offsetLeft/2;movedY-=canvas.offsetParent.offsetTop/2}context.clearRect(0,0,canvas.width,canvas.height);drawExternal();drawInternal()}}function onMouseUp(event){event.preventDefault();pressed=0;if(autoReturnToCenter){movedX=centerX;movedY=centerY}context.clearRect(0,0,canvas.width,canvas.height);drawExternal();drawInternal()}this.GetWidth=function(){return canvas.width};this.GetHeight=function(){return canvas.height};this.GetPosX=function(){return movedX};this.GetPosY=function(){return movedY};this.GetX=function(){return(100*((movedX-centerX)/maxMoveStick)).toFixed()};this.GetY=function(){return((100*((movedY-centerY)/maxMoveStick))*-1).toFixed()};this.GetDir=function(){var result="";var orizontal=movedX-centerX;var vertical=movedY-centerY;if(vertical>=directionVerticalLimitNeg&&vertical<=directionVerticalLimitPos){result="C"}if(verticaldirectionVerticalLimitPos){result="S"}if(orizontaldirectionHorizontalLimitPos){if(result==="C"){result="E"}else{result+="E"}}return result}}); +var JoyStick = (function(container, parameters) +{ + parameters = parameters || {}; + var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title), + width = (typeof parameters.width === "undefined" ? 0 : parameters.width), + height = (typeof parameters.height === "undefined" ? 0 : parameters.height), + internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#B4DCFF" : parameters.internalFillColor), + internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth), + internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#4e73df" : parameters.internalStrokeColor), + externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 8 : parameters.externalLineWidth), + externalStrokeColor = (typeof parameters.externalStrokeColor === "undefined" ? "#4e73df" : parameters.externalStrokeColor), + autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter); + + // Create Canvas element and add it in the Container object + var objContainer = document.getElementById(container); + var canvas = document.createElement("canvas"); + canvas.id = title; + if(width === 0) { width = objContainer.clientWidth; } + if(height === 0) { height = objContainer.clientHeight; } + canvas.width = width*2; + canvas.height = height*2; + canvas.style = "width:"+width+"px;height:"+height+"px;" + objContainer.appendChild(canvas); + var context=canvas.getContext("2d"); + + var pressed = 0; // Bool - 1=Yes - 0=No + var circumference = 2 * Math.PI; + var internalRadius = (canvas.width-((canvas.width/2)+30))/2; + var maxMoveStick = internalRadius + 10; + var externalRadius = internalRadius + 60; + var centerX = canvas.width / 2; + var centerY = canvas.height / 2; + var directionHorizontalLimitPos = canvas.width / 10; + var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1; + var directionVerticalLimitPos = canvas.height / 10; + var directionVerticalLimitNeg = directionVerticalLimitPos * -1; + // Used to save current position of stick + var movedX=centerX; + var movedY=centerY; + + // Check if the device support the touch or not + if("ontouchstart" in document.documentElement) + { + canvas.addEventListener("touchstart", onTouchStart, false); + canvas.addEventListener("touchmove", onTouchMove, false); + canvas.addEventListener("touchend", onTouchEnd, false); + } + else + { + canvas.addEventListener("mousedown", onMouseDown, false); + canvas.addEventListener("mousemove", onMouseMove, false); + canvas.addEventListener("mouseup", onMouseUp, false); + } + // Draw the object + drawExternal(); + drawInternal(); + + /****************************************************** + * Private methods + *****************************************************/ + + /** + * @desc Draw the external circle used as reference position + */ + function drawExternal() + { + context.beginPath(); + context.arc(centerX, centerY, externalRadius, 0, circumference, false); + context.lineWidth = externalLineWidth; + context.strokeStyle = externalStrokeColor; + context.stroke(); + } + + /** + * @desc Draw the internal stick in the current position the user have moved it + */ + function drawInternal() + { + context.beginPath(); + if(movedX canvas.width) { movedX = canvas.width-(maxMoveStick); } + if(movedY canvas.height) { movedY = canvas.height-(maxMoveStick); } + context.arc(movedX, movedY, internalRadius, 0, circumference, false); + // create radial gradient + var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); + // Light color + grd.addColorStop(0, internalFillColor); + // Dark color + grd.addColorStop(1, internalStrokeColor); + context.fillStyle = grd; + context.fill(); + context.lineWidth = internalLineWidth; + context.strokeStyle = internalStrokeColor; + context.stroke(); + } + + /** + * @desc Events for manage touch + */ + function onTouchStart(event) + { + event.preventDefault(); + pressed = 1; + event.stopPropagation() + } + + function onTouchMove(event) + { + // Prevent the browser from doing its default thing (scroll, zoom) + event.preventDefault(); + if(pressed === 1 && event.targetTouches[0].target === canvas) + { + movedX = event.targetTouches[0].pageX*2; + movedY = event.targetTouches[0].pageY*2; + // Manage offset + if(canvas.offsetParent.tagName.toUpperCase() === "BODY") + { + movedX -= canvas.offsetLeft; + movedY -= canvas.offsetTop; + } + else + { + movedX -= $(canvas).offset().left*2; + movedY -= $(canvas).offset().top*2; + } + // Delete canvas + context.clearRect(0, 0, canvas.width, canvas.height); + // Redraw object + drawExternal(); + drawInternal(); + } + } + + function onTouchEnd(event) + { + event.preventDefault(); + pressed = 0; + // If required reset position store variable + if(autoReturnToCenter) + { + movedX = centerX; + movedY = centerY; + } + // Delete canvas + context.clearRect(0, 0, canvas.width, canvas.height); + // Redraw object + drawExternal(); + drawInternal(); + //canvas.unbind('touchmove'); + } + + /** + * @desc Events for manage mouse + */ + function onMouseDown(event) + { + event.preventDefault(); + pressed = 1; + } + + function onMouseMove(event) + { + event.preventDefault(); + if(pressed === 1) + { + movedX = event.offsetX*2; + movedY = event.offsetY*2; + // Manage offset + if(canvas.offsetParent.tagName.toUpperCase() === "BODY") + { + movedX -= canvas.offsetLeft; + movedY -= canvas.offsetTop; + } + else + { + movedX -= canvas.offsetParent.offsetLeft/2; + movedY -= canvas.offsetParent.offsetTop/2; + } + // Delete canvas + context.clearRect(0, 0, canvas.width, canvas.height); + // Redraw object + drawExternal(); + drawInternal(); + } + } + + function onMouseUp(event) + { + event.preventDefault(); + pressed = 0; + // If required reset position store variable + if(autoReturnToCenter) + { + movedX = centerX; + movedY = centerY; + } + // Delete canvas + context.clearRect(0, 0, canvas.width, canvas.height); + // Redraw object + drawExternal(); + drawInternal(); + //canvas.unbind('mousemove'); + } + + /****************************************************** + * Public methods + *****************************************************/ + + /** + * @desc The width of canvas + * @return Number of pixel width + */ + this.GetWidth = function () + { + return canvas.width; + }; + + /** + * @desc The height of canvas + * @return Number of pixel height + */ + this.GetHeight = function () + { + return canvas.height; + }; + + /** + * @desc The X position of the cursor relative to the canvas that contains it and to its dimensions + * @return Number that indicate relative position + */ + this.GetPosX = function () + { + return movedX; + }; + + /** + * @desc The Y position of the cursor relative to the canvas that contains it and to its dimensions + * @return Number that indicate relative position + */ + this.GetPosY = function () + { + return movedY; + }; + + /** + * @desc Normalizzed value of X move of stick + * @return Integer from -100 to +100 + */ + this.GetX = function () + { + return (100*((movedX - centerX)/maxMoveStick)).toFixed(); + }; + + /** + * @desc Normalizzed value of Y move of stick + * @return Integer from -100 to +100 + */ + this.GetY = function () + { + return ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); + }; + + /** + * @desc Get the direction of the cursor as a string that indicates the cardinal points where this is oriented + * @return String of cardinal point N, NE, E, SE, S, SW, W, NW and C when it is placed in the center + */ + this.GetDir = function() + { + var result = ""; + var orizontal = movedX - centerX; + var vertical = movedY - centerY; + + if(vertical >= directionVerticalLimitNeg && vertical <= directionVerticalLimitPos) + { + result = "C"; + } + if(vertical < directionVerticalLimitNeg) + { + result = "N"; + } + if(vertical > directionVerticalLimitPos) + { + result = "S"; + } + + if(orizontal < directionHorizontalLimitNeg) + { + if(result === "C") + { + result = "W"; + } + else + { + result += "W"; + } + } + if(orizontal > directionHorizontalLimitPos) + { + if(result === "C") + { + result = "E"; + } + else + { + result += "E"; + } + } + + return result; + }; +}); + diff --git a/js/joy.js b/js/joy.js deleted file mode 100644 index dcd3137..0000000 --- a/js/joy.js +++ /dev/null @@ -1,335 +0,0 @@ -/* - * Name : joy.js - * @author : Roberto D'Amico (Bobboteck) - * Last modified : 09.06.2020 - * Revision : 1.1.6 - * - */ - -/** - * @desc Principal object that draw a joystick, you only need to initialize the object and suggest the HTML container - * @costructor - * @param container {String} - HTML object that contains the Joystick - * @param parameters (optional) - object with following keys: - * title {String} (optional) - The ID of canvas (Default value is 'joystick') - * width {Int} (optional) - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object) - * height {Int} (optional) - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object) - * internalFillColor {String} (optional) - Internal color of Stick (Default value is '#00AA00') - * internalLineWidth {Int} (optional) - Border width of Stick (Default value is 2) - * internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300') - * externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2) - * externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000') - * autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero) - */ -var JoyStick = (function(container, parameters) -{ - parameters = parameters || {}; - var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title), - width = (typeof parameters.width === "undefined" ? 0 : parameters.width), - height = (typeof parameters.height === "undefined" ? 0 : parameters.height), - internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#B4DCFF" : parameters.internalFillColor), - internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth), - internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#4e73df" : parameters.internalStrokeColor), - externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 8 : parameters.externalLineWidth), - externalStrokeColor = (typeof parameters.externalStrokeColor === "undefined" ? "#4e73df" : parameters.externalStrokeColor), - autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter); - - // Create Canvas element and add it in the Container object - var objContainer = document.getElementById(container); - var canvas = document.createElement("canvas"); - canvas.id = title; - if(width === 0) { width = objContainer.clientWidth; } - if(height === 0) { height = objContainer.clientHeight; } - canvas.width = width*2; - canvas.height = height*2; - canvas.style = "width:"+width+"px;height:"+height+"px;" - objContainer.appendChild(canvas); - var context=canvas.getContext("2d"); - - var pressed = 0; // Bool - 1=Yes - 0=No - var circumference = 2 * Math.PI; - var internalRadius = (canvas.width-((canvas.width/2)+30))/2; - var maxMoveStick = internalRadius + 10; - var externalRadius = internalRadius + 60; - var centerX = canvas.width / 2; - var centerY = canvas.height / 2; - var directionHorizontalLimitPos = canvas.width / 10; - var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1; - var directionVerticalLimitPos = canvas.height / 10; - var directionVerticalLimitNeg = directionVerticalLimitPos * -1; - // Used to save current position of stick - var movedX=centerX; - var movedY=centerY; - - // Check if the device support the touch or not - if("ontouchstart" in document.documentElement) - { - canvas.addEventListener("touchstart", onTouchStart, false); - canvas.addEventListener("touchmove", onTouchMove, false); - canvas.addEventListener("touchend", onTouchEnd, false); - } - else - { - canvas.addEventListener("mousedown", onMouseDown, false); - canvas.addEventListener("mousemove", onMouseMove, false); - canvas.addEventListener("mouseup", onMouseUp, false); - } - // Draw the object - drawExternal(); - drawInternal(); - - /****************************************************** - * Private methods - *****************************************************/ - - /** - * @desc Draw the external circle used as reference position - */ - function drawExternal() - { - context.beginPath(); - context.arc(centerX, centerY, externalRadius, 0, circumference, false); - context.lineWidth = externalLineWidth; - context.strokeStyle = externalStrokeColor; - context.stroke(); - } - - /** - * @desc Draw the internal stick in the current position the user have moved it - */ - function drawInternal() - { - context.beginPath(); - if(movedX canvas.width) { movedX = canvas.width-(maxMoveStick); } - if(movedY canvas.height) { movedY = canvas.height-(maxMoveStick); } - context.arc(movedX, movedY, internalRadius, 0, circumference, false); - // create radial gradient - var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200); - // Light color - grd.addColorStop(0, internalFillColor); - // Dark color - grd.addColorStop(1, internalStrokeColor); - context.fillStyle = grd; - context.fill(); - context.lineWidth = internalLineWidth; - context.strokeStyle = internalStrokeColor; - context.stroke(); - } - - /** - * @desc Events for manage touch - */ - function onTouchStart(event) - { - event.preventDefault(); - pressed = 1; - event.stopPropagation() - } - - function onTouchMove(event) - { - // Prevent the browser from doing its default thing (scroll, zoom) - event.preventDefault(); - if(pressed === 1 && event.targetTouches[0].target === canvas) - { - movedX = event.targetTouches[0].pageX*2; - movedY = event.targetTouches[0].pageY*2; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= $(canvas).offset().left*2; - movedY -= $(canvas).offset().top*2; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - } - } - - function onTouchEnd(event) - { - event.preventDefault(); - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - //canvas.unbind('touchmove'); - } - - /** - * @desc Events for manage mouse - */ - function onMouseDown(event) - { - event.preventDefault(); - pressed = 1; - } - - function onMouseMove(event) - { - event.preventDefault(); - if(pressed === 1) - { - movedX = event.offsetX*2; - movedY = event.offsetY*2; - // Manage offset - if(canvas.offsetParent.tagName.toUpperCase() === "BODY") - { - movedX -= canvas.offsetLeft; - movedY -= canvas.offsetTop; - } - else - { - movedX -= canvas.offsetParent.offsetLeft/2; - movedY -= canvas.offsetParent.offsetTop/2; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - } - } - - function onMouseUp(event) - { - event.preventDefault(); - pressed = 0; - // If required reset position store variable - if(autoReturnToCenter) - { - movedX = centerX; - movedY = centerY; - } - // Delete canvas - context.clearRect(0, 0, canvas.width, canvas.height); - // Redraw object - drawExternal(); - drawInternal(); - //canvas.unbind('mousemove'); - } - - /****************************************************** - * Public methods - *****************************************************/ - - /** - * @desc The width of canvas - * @return Number of pixel width - */ - this.GetWidth = function () - { - return canvas.width; - }; - - /** - * @desc The height of canvas - * @return Number of pixel height - */ - this.GetHeight = function () - { - return canvas.height; - }; - - /** - * @desc The X position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosX = function () - { - return movedX; - }; - - /** - * @desc The Y position of the cursor relative to the canvas that contains it and to its dimensions - * @return Number that indicate relative position - */ - this.GetPosY = function () - { - return movedY; - }; - - /** - * @desc Normalizzed value of X move of stick - * @return Integer from -100 to +100 - */ - this.GetX = function () - { - return (100*((movedX - centerX)/maxMoveStick)).toFixed(); - }; - - /** - * @desc Normalizzed value of Y move of stick - * @return Integer from -100 to +100 - */ - this.GetY = function () - { - return ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed(); - }; - - /** - * @desc Get the direction of the cursor as a string that indicates the cardinal points where this is oriented - * @return String of cardinal point N, NE, E, SE, S, SW, W, NW and C when it is placed in the center - */ - this.GetDir = function() - { - var result = ""; - var orizontal = movedX - centerX; - var vertical = movedY - centerY; - - if(vertical >= directionVerticalLimitNeg && vertical <= directionVerticalLimitPos) - { - result = "C"; - } - if(vertical < directionVerticalLimitNeg) - { - result = "N"; - } - if(vertical > directionVerticalLimitPos) - { - result = "S"; - } - - if(orizontal < directionHorizontalLimitNeg) - { - if(result === "C") - { - result = "W"; - } - else - { - result += "W"; - } - } - if(orizontal > directionHorizontalLimitPos) - { - if(result === "C") - { - result = "E"; - } - else - { - result += "E"; - } - } - - return result; - }; -});