0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 6d 61 74 68 20 3d 20 72 65 71 75 69 72 et math = requir
0020: 65 28 27 2e 2e 2f 75 74 69 6c 2f 6d 61 74 68 27 e('../util/math'
0030: 29 3b 0a 6c 65 74 20 73 76 67 20 3d 20 72 65 71 );.let svg = req
0040: 75 69 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 uire('../util/sv
0050: 67 27 29 3b 0a 6c 65 74 20 49 6e 74 65 72 66 61 g');.let Interfa
0060: 63 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e ce = require('..
0070: 2f 63 6f 72 65 2f 69 6e 74 65 72 66 61 63 65 27 /core/interface'
0080: 29 3b 0a 0a 2f 2a 2a 0a 2a 20 54 69 6c 74 0a 2a );../**.* Tilt.*
0090: 0a 2a 20 40 64 65 73 63 72 69 70 74 69 6f 6e 20 .* @description
00a0: 44 65 76 69 63 65 20 74 69 6c 74 20 73 65 6e 73 Device tilt sens
00b0: 6f 72 20 77 69 74 68 20 32 20 6f 72 20 33 20 61 or with 2 or 3 a
00c0: 78 65 73 20 28 64 65 70 65 6e 64 69 6e 67 20 6f xes (depending o
00d0: 6e 20 79 6f 75 72 20 64 65 76 69 63 65 20 61 6e n your device an
00e0: 64 20 62 72 6f 77 73 65 72 29 2e 0a 2a 0a 2a 20 d browser)..*.*
00f0: 40 64 65 6d 6f 20 3c 73 70 61 6e 20 6e 65 78 75 @demo <span nexu
0100: 73 2d 75 69 3d 27 74 69 6c 74 27 3e 3c 2f 73 70 s-ui='tilt'></sp
0110: 61 6e 3e 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 an>.*.* @example
0120: 0a 2a 20 76 61 72 20 74 69 6c 74 20 3d 20 6e 65 .* var tilt = ne
0130: 77 20 4e 65 78 75 73 2e 54 69 6c 74 28 27 23 74 w Nexus.Tilt('#t
0140: 61 72 67 65 74 27 29 0a 2a 0a 2a 20 40 6f 75 74 arget').*.* @out
0150: 70 75 74 0a 2a 20 63 68 61 6e 67 65 0a 2a 20 46 put.* change.* F
0160: 69 72 65 73 20 61 74 20 61 20 72 65 67 75 6c 61 ires at a regula
0170: 72 20 69 6e 74 65 72 76 61 6c 2c 20 61 73 20 6c r interval, as l
0180: 6f 6e 67 20 61 73 20 74 68 69 73 20 69 6e 74 65 ong as this inte
0190: 72 66 61 63 65 20 69 73 20 61 63 74 69 76 65 20 rface is active
01a0: 28 73 65 65 20 74 68 65 20 69 6e 74 65 72 66 61 (see the interfa
01b0: 63 65 27 73 20 3c 69 3e 2e 61 63 74 69 76 65 3c ce's <i>.active<
01c0: 2f 69 3e 20 70 72 6f 70 65 72 74 79 29 3c 62 72 /i> property)<br
01d0: 3e 0a 2a 20 54 68 65 20 65 76 65 6e 74 20 64 61 >.* The event da
01e0: 74 61 20 69 73 20 61 6e 20 3c 69 3e 6f 62 6a 65 ta is an <i>obje
01f0: 63 74 3c 2f 69 3e 20 63 6f 6e 74 61 69 6e 69 6e ct</i> containin
0200: 67 20 78 20 28 6e 75 6d 62 65 72 29 20 61 6e 64 g x (number) and
0210: 20 79 20 28 6e 75 6d 62 65 72 29 20 70 72 6f 70 y (number) prop
0220: 65 72 74 69 65 73 20 77 68 69 63 68 20 72 65 70 erties which rep
0230: 72 65 73 65 6e 74 20 74 68 65 20 63 75 72 72 65 resent the curre
0240: 6e 74 20 74 69 6c 74 20 73 74 61 74 65 20 6f 66 nt tilt state of
0250: 20 74 68 65 20 64 65 76 69 63 65 2e 0a 2a 0a 2a the device..*.*
0260: 20 40 6f 75 74 70 75 74 65 78 61 6d 70 6c 65 0a @outputexample.
0270: 2a 20 74 69 6c 74 2e 6f 6e 28 27 63 68 61 6e 67 * tilt.on('chang
0280: 65 27 2c 66 75 6e 63 74 69 6f 6e 28 76 29 20 7b e',function(v) {
0290: 0a 2a 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 .* console.log
02a0: 28 76 29 3b 0a 2a 20 7d 29 0a 2a 0a 2a 0a 2a 2f (v);.* }).*.*.*/
02b0: 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75 6c 74 ..export default
02c0: 20 63 6c 61 73 73 20 54 69 6c 74 20 65 78 74 65 class Tilt exte
02d0: 6e 64 73 20 49 6e 74 65 72 66 61 63 65 20 7b 0a nds Interface {.
02e0: 0a 20 20 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 . constructor()
02f0: 20 7b 0a 0a 20 20 20 20 6c 65 74 20 6f 70 74 69 {.. let opti
0300: 6f 6e 73 20 3d 20 5b 27 76 61 6c 75 65 27 5d 3b ons = ['value'];
0310: 0a 0a 20 20 20 20 6c 65 74 20 64 65 66 61 75 6c .. let defaul
0320: 74 73 20 3d 20 7b 0a 20 20 20 20 20 20 27 73 69 ts = {. 'si
0330: 7a 65 27 3a 20 5b 38 30 2c 38 30 5d 0a 20 20 20 ze': [80,80].
0340: 20 7d 3b 0a 0a 20 20 20 20 73 75 70 65 72 28 61 };.. super(a
0350: 72 67 75 6d 65 6e 74 73 2c 6f 70 74 69 6f 6e 73 rguments,options
0360: 2c 64 65 66 61 75 6c 74 73 29 3b 0a 0a 20 20 20 ,defaults);..
0370: 20 74 68 69 73 2e 5f 61 63 74 69 76 65 20 3d 20 this._active =
0380: 74 72 75 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e true;.. this.
0390: 69 6e 69 74 28 29 3b 0a 0a 20 20 20 20 2f 2f 20 init();.. //
03a0: 61 64 64 20 65 76 65 6e 74 20 6c 69 73 74 65 6e add event listen
03b0: 65 72 20 66 6f 72 20 64 65 76 69 63 65 20 6f 72 er for device or
03c0: 69 65 6e 74 61 74 69 6f 6e 0a 0a 20 20 09 74 68 ientation.. .th
03d0: 69 73 2e 62 6f 75 6e 64 55 70 64 61 74 65 20 3d is.boundUpdate =
03e0: 20 74 68 69 73 2e 75 70 64 61 74 65 2e 62 69 6e this.update.bin
03f0: 64 28 74 68 69 73 29 3b 0a 20 20 2f 2f 09 74 68 d(this);. //.th
0400: 69 73 2e 62 6f 75 6e 64 4d 6f 7a 54 69 6c 74 20 is.boundMozTilt
0410: 3d 20 74 68 69 73 2e 6d 6f 7a 54 69 6c 74 2e 62 = this.mozTilt.b
0420: 69 6e 64 28 74 68 69 73 29 0a 0a 20 20 09 69 66 ind(this).. .if
0430: 20 28 77 69 6e 64 6f 77 2e 44 65 76 69 63 65 4f (window.DeviceO
0440: 72 69 65 6e 74 61 74 69 6f 6e 45 76 65 6e 74 29 rientationEvent)
0450: 20 7b 0a 20 20 09 09 74 68 69 73 2e 6f 72 69 65 {. ..this.orie
0460: 6e 74 61 74 69 6f 6e 4c 69 73 74 65 6e 65 72 20 ntationListener
0470: 3d 20 77 69 6e 64 6f 77 2e 61 64 64 45 76 65 6e = window.addEven
0480: 74 4c 69 73 74 65 6e 65 72 28 27 64 65 76 69 63 tListener('devic
0490: 65 6f 72 69 65 6e 74 61 74 69 6f 6e 27 2c 20 74 eorientation', t
04a0: 68 69 73 2e 62 6f 75 6e 64 55 70 64 61 74 65 2c his.boundUpdate,
04b0: 20 66 61 6c 73 65 29 3b 0a 20 20 09 7d 20 65 6c false);. .} el
04c0: 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e se {. this.
04d0: 5f 61 63 74 69 76 65 20 3d 20 66 61 6c 73 65 3b _active = false;
04e0: 0a 20 20 20 20 20 20 74 68 69 73 2e 63 6f 6c 6f . this.colo
04f0: 72 49 6e 74 65 72 66 61 63 65 28 29 3b 0a 20 20 rInterface();.
0500: 20 20 7d 0a 0a 0a 0a 20 20 20 20 20 20 2f 2a 65 }.... /*e
0510: 6c 73 65 20 69 66 20 28 77 69 6e 64 6f 77 2e 4f lse if (window.O
0520: 72 69 65 6e 74 61 74 69 6f 6e 45 76 65 6e 74 29 rientationEvent)
0530: 20 7b 0a 20 20 2f 2f 09 20 20 09 77 69 6e 64 6f {. //. .windo
0540: 77 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 65 6e w.addEventListen
0550: 65 72 28 27 4d 6f 7a 4f 72 69 65 6e 74 61 74 69 er('MozOrientati
0560: 6f 6e 27 2c 20 74 68 69 73 2e 62 6f 75 6e 64 4d on', this.boundM
0570: 6f 7a 54 69 6c 74 2c 20 66 61 6c 73 65 29 3b 0a ozTilt, false);.
0580: 20 20 09 7d 20 65 6c 73 65 20 7b 0a 20 20 09 20 .} else {. .
0590: 20 09 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 4e .console.log('N
05a0: 6f 74 20 73 75 70 70 6f 72 74 65 64 20 6f 6e 20 ot supported on
05b0: 79 6f 75 72 20 64 65 76 69 63 65 20 6f 72 20 62 your device or b
05c0: 72 6f 77 73 65 72 2e 27 29 3b 0a 20 20 09 7d 20 rowser.');. .}
05d0: 2a 2f 0a 0a 0a 20 20 7d 0a 0a 0a 20 20 62 75 69 */... }... bui
05e0: 6c 64 49 6e 74 65 72 66 61 63 65 28 29 20 7b 0a ldInterface() {.
05f0: 0a 20 20 20 20 74 68 69 73 2e 74 69 74 6c 65 20 . this.title
0600: 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 74 65 = svg.create('te
0610: 78 74 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 63 xt');. this.c
0620: 69 72 63 6c 65 58 20 3d 20 73 76 67 2e 63 72 65 ircleX = svg.cre
0630: 61 74 65 28 27 63 69 72 63 6c 65 27 29 3b 0a 20 ate('circle');.
0640: 20 20 20 74 68 69 73 2e 63 69 72 63 6c 65 59 20 this.circleY
0650: 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 63 69 = svg.create('ci
0660: 72 63 6c 65 27 29 3b 0a 20 20 20 20 74 68 69 73 rcle');. this
0670: 2e 63 69 72 63 6c 65 5a 20 3d 20 73 76 67 2e 63 .circleZ = svg.c
0680: 72 65 61 74 65 28 27 63 69 72 63 6c 65 27 29 3b reate('circle');
0690: 0a 0a 20 20 20 20 74 68 69 73 2e 62 61 72 58 20 .. this.barX
06a0: 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 70 61 = svg.create('pa
06b0: 74 68 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 th');. this.b
06c0: 61 72 59 20 3d 20 73 76 67 2e 63 72 65 61 74 65 arY = svg.create
06d0: 28 27 70 61 74 68 27 29 3b 0a 20 20 20 20 74 68 ('path');. th
06e0: 69 73 2e 62 61 72 5a 20 3d 20 73 76 67 2e 63 72 is.barZ = svg.cr
06f0: 65 61 74 65 28 27 70 61 74 68 27 29 3b 0a 0a 20 eate('path');..
0700: 20 20 20 74 68 69 73 2e 62 61 72 58 32 20 3d 20 this.barX2 =
0710: 73 76 67 2e 63 72 65 61 74 65 28 27 70 61 74 68 svg.create('path
0720: 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 ');. this.bar
0730: 59 32 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 Y2 = svg.create(
0740: 27 70 61 74 68 27 29 3b 0a 20 20 20 20 74 68 69 'path');. thi
0750: 73 2e 62 61 72 5a 32 20 3d 20 73 76 67 2e 63 72 s.barZ2 = svg.cr
0760: 65 61 74 65 28 27 70 61 74 68 27 29 3b 0a 0a 20 eate('path');..
0770: 20 20 20 74 68 69 73 2e 62 61 72 58 2e 73 65 74 this.barX.set
0780: 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 63 69 Attribute('opaci
0790: 74 79 27 2c 27 30 2e 38 27 29 3b 0a 20 20 20 20 ty','0.8');.
07a0: 74 68 69 73 2e 62 61 72 59 2e 73 65 74 41 74 74 this.barY.setAtt
07b0: 72 69 62 75 74 65 28 27 6f 70 61 63 69 74 79 27 ribute('opacity'
07c0: 2c 27 30 2e 38 27 29 3b 0a 20 20 20 20 74 68 69 ,'0.8');. thi
07d0: 73 2e 62 61 72 5a 2e 73 65 74 41 74 74 72 69 62 s.barZ.setAttrib
07e0: 75 74 65 28 27 6f 70 61 63 69 74 79 27 2c 27 30 ute('opacity','0
07f0: 2e 38 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 .8');. this.b
0800: 61 72 58 32 2e 73 65 74 41 74 74 72 69 62 75 74 arX2.setAttribut
0810: 65 28 27 6f 70 61 63 69 74 79 27 2c 27 30 2e 38 e('opacity','0.8
0820: 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 ');. this.bar
0830: 59 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 Y2.setAttribute(
0840: 27 6f 70 61 63 69 74 79 27 2c 27 30 2e 38 27 29 'opacity','0.8')
0850: 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 5a 32 ;. this.barZ2
0860: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 6f .setAttribute('o
0870: 70 61 63 69 74 79 27 2c 27 30 2e 38 27 29 3b 0a pacity','0.8');.
0880: 0a 20 20 20 20 74 68 69 73 2e 63 69 72 63 6c 65 . this.circle
0890: 58 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 X.setAttribute('
08a0: 63 78 27 2c 74 68 69 73 2e 77 69 64 74 68 2a 33 cx',this.width*3
08b0: 2f 31 32 29 3b 0a 20 20 20 20 74 68 69 73 2e 63 /12);. this.c
08c0: 69 72 63 6c 65 58 2e 73 65 74 41 74 74 72 69 62 ircleX.setAttrib
08d0: 75 74 65 28 27 63 79 27 2c 74 68 69 73 2e 68 65 ute('cy',this.he
08e0: 69 67 68 74 2a 33 2f 34 29 3b 0a 20 20 20 20 74 ight*3/4);. t
08f0: 68 69 73 2e 63 69 72 63 6c 65 58 2e 73 65 74 41 his.circleX.setA
0900: 74 74 72 69 62 75 74 65 28 27 72 27 2c 74 68 69 ttribute('r',thi
0910: 73 2e 68 65 69 67 68 74 2f 31 30 29 3b 0a 20 20 s.height/10);.
0920: 20 20 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 73 this.circleX.s
0930: 65 74 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 etAttribute('opa
0940: 63 69 74 79 27 2c 27 30 2e 34 27 29 3b 0a 0a 20 city','0.4');..
0950: 20 20 20 74 68 69 73 2e 63 69 72 63 6c 65 59 2e this.circleY.
0960: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 63 78 setAttribute('cx
0970: 27 2c 74 68 69 73 2e 77 69 64 74 68 2a 36 2f 31 ',this.width*6/1
0980: 32 29 3b 0a 20 20 20 20 74 68 69 73 2e 63 69 72 2);. this.cir
0990: 63 6c 65 59 2e 73 65 74 41 74 74 72 69 62 75 74 cleY.setAttribut
09a0: 65 28 27 63 79 27 2c 74 68 69 73 2e 68 65 69 67 e('cy',this.heig
09b0: 68 74 2a 33 2f 34 29 3b 0a 20 20 20 20 74 68 69 ht*3/4);. thi
09c0: 73 2e 63 69 72 63 6c 65 59 2e 73 65 74 41 74 74 s.circleY.setAtt
09d0: 72 69 62 75 74 65 28 27 72 27 2c 74 68 69 73 2e ribute('r',this.
09e0: 68 65 69 67 68 74 2f 31 30 29 3b 0a 20 20 20 20 height/10);.
09f0: 74 68 69 73 2e 63 69 72 63 6c 65 59 2e 73 65 74 this.circleY.set
0a00: 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 63 69 Attribute('opaci
0a10: 74 79 27 2c 27 30 2e 34 27 29 3b 0a 0a 20 20 20 ty','0.4');..
0a20: 20 74 68 69 73 2e 63 69 72 63 6c 65 5a 2e 73 65 this.circleZ.se
0a30: 74 41 74 74 72 69 62 75 74 65 28 27 63 78 27 2c tAttribute('cx',
0a40: 74 68 69 73 2e 77 69 64 74 68 2a 39 2f 31 32 29 this.width*9/12)
0a50: 3b 0a 20 20 20 20 74 68 69 73 2e 63 69 72 63 6c ;. this.circl
0a60: 65 5a 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 eZ.setAttribute(
0a70: 27 63 79 27 2c 74 68 69 73 2e 68 65 69 67 68 74 'cy',this.height
0a80: 2a 33 2f 34 29 3b 0a 20 20 20 20 74 68 69 73 2e *3/4);. this.
0a90: 63 69 72 63 6c 65 5a 2e 73 65 74 41 74 74 72 69 circleZ.setAttri
0aa0: 62 75 74 65 28 27 72 27 2c 74 68 69 73 2e 68 65 bute('r',this.he
0ab0: 69 67 68 74 2f 31 30 29 3b 0a 20 20 20 20 74 68 ight/10);. th
0ac0: 69 73 2e 63 69 72 63 6c 65 5a 2e 73 65 74 41 74 is.circleZ.setAt
0ad0: 74 72 69 62 75 74 65 28 27 6f 70 61 63 69 74 79 tribute('opacity
0ae0: 27 2c 27 30 2e 34 27 29 3b 0a 0a 0a 20 20 20 20 ','0.4');...
0af0: 74 68 69 73 2e 62 61 72 58 2e 73 65 74 41 74 74 this.barX.setAtt
0b00: 72 69 62 75 74 65 28 27 73 74 72 6f 6b 65 2d 77 ribute('stroke-w
0b10: 69 64 74 68 27 2c 4d 61 74 68 2e 72 6f 75 6e 64 idth',Math.round
0b20: 28 74 68 69 73 2e 68 65 69 67 68 74 2f 33 30 29 (this.height/30)
0b30: 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 59 );. this.barY
0b40: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 .setAttribute('s
0b50: 74 72 6f 6b 65 2d 77 69 64 74 68 27 2c 4d 61 74 troke-width',Mat
0b60: 68 2e 72 6f 75 6e 64 28 74 68 69 73 2e 68 65 69 h.round(this.hei
0b70: 67 68 74 2f 33 30 29 29 3b 0a 20 20 20 20 74 68 ght/30));. th
0b80: 69 73 2e 62 61 72 5a 2e 73 65 74 41 74 74 72 69 is.barZ.setAttri
0b90: 62 75 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 64 bute('stroke-wid
0ba0: 74 68 27 2c 4d 61 74 68 2e 72 6f 75 6e 64 28 74 th',Math.round(t
0bb0: 68 69 73 2e 68 65 69 67 68 74 2f 33 30 29 29 3b his.height/30));
0bc0: 0a 0a 20 20 20 20 74 68 69 73 2e 62 61 72 58 2e .. this.barX.
0bd0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 setAttribute('fi
0be0: 6c 6c 27 2c 20 27 6e 6f 6e 65 27 29 3b 0a 20 20 ll', 'none');.
0bf0: 20 20 74 68 69 73 2e 62 61 72 59 2e 73 65 74 41 this.barY.setA
0c00: 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c ttribute('fill',
0c10: 20 27 6e 6f 6e 65 27 29 3b 0a 20 20 20 20 74 68 'none');. th
0c20: 69 73 2e 62 61 72 5a 2e 73 65 74 41 74 74 72 69 is.barZ.setAttri
0c30: 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 27 6e 6f bute('fill', 'no
0c40: 6e 65 27 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e ne');.. this.
0c50: 62 61 72 58 32 2e 73 65 74 41 74 74 72 69 62 75 barX2.setAttribu
0c60: 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 64 74 68 te('stroke-width
0c70: 27 2c 4d 61 74 68 2e 72 6f 75 6e 64 28 74 68 69 ',Math.round(thi
0c80: 73 2e 68 65 69 67 68 74 2f 33 30 29 29 3b 0a 20 s.height/30));.
0c90: 20 20 20 74 68 69 73 2e 62 61 72 59 32 2e 73 65 this.barY2.se
0ca0: 74 41 74 74 72 69 62 75 74 65 28 27 73 74 72 6f tAttribute('stro
0cb0: 6b 65 2d 77 69 64 74 68 27 2c 4d 61 74 68 2e 72 ke-width',Math.r
0cc0: 6f 75 6e 64 28 74 68 69 73 2e 68 65 69 67 68 74 ound(this.height
0cd0: 2f 33 30 29 29 3b 0a 20 20 20 20 74 68 69 73 2e /30));. this.
0ce0: 62 61 72 5a 32 2e 73 65 74 41 74 74 72 69 62 75 barZ2.setAttribu
0cf0: 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 64 74 68 te('stroke-width
0d00: 27 2c 4d 61 74 68 2e 72 6f 75 6e 64 28 74 68 69 ',Math.round(thi
0d10: 73 2e 68 65 69 67 68 74 2f 33 30 29 29 3b 0a 0a s.height/30));..
0d20: 20 20 20 20 74 68 69 73 2e 62 61 72 58 32 2e 73 this.barX2.s
0d30: 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 6c etAttribute('fil
0d40: 6c 27 2c 20 27 6e 6f 6e 65 27 29 3b 0a 20 20 20 l', 'none');.
0d50: 20 74 68 69 73 2e 62 61 72 59 32 2e 73 65 74 41 this.barY2.setA
0d60: 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c ttribute('fill',
0d70: 20 27 6e 6f 6e 65 27 29 3b 0a 20 20 20 20 74 68 'none');. th
0d80: 69 73 2e 62 61 72 5a 32 2e 73 65 74 41 74 74 72 is.barZ2.setAttr
0d90: 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 27 6e ibute('fill', 'n
0da0: 6f 6e 65 27 29 3b 0a 0a 0a 20 20 20 20 74 68 69 one');... thi
0db0: 73 2e 74 69 74 6c 65 2e 73 65 74 41 74 74 72 69 s.title.setAttri
0dc0: 62 75 74 65 28 27 78 27 2c 74 68 69 73 2e 77 69 bute('x',this.wi
0dd0: 64 74 68 2f 32 29 3b 0a 20 20 20 20 74 68 69 73 dth/2);. this
0de0: 2e 74 69 74 6c 65 2e 73 65 74 41 74 74 72 69 62 .title.setAttrib
0df0: 75 74 65 28 27 79 27 2c 74 68 69 73 2e 68 65 69 ute('y',this.hei
0e00: 67 68 74 2f 33 2b 37 29 3b 0a 20 20 20 20 74 68 ght/3+7);. th
0e10: 69 73 2e 74 69 74 6c 65 2e 73 65 74 41 74 74 72 is.title.setAttr
0e20: 69 62 75 74 65 28 27 66 6f 6e 74 2d 73 69 7a 65 ibute('font-size
0e30: 27 2c 27 31 35 70 78 27 29 3b 0a 20 20 20 20 74 ','15px');. t
0e40: 68 69 73 2e 74 69 74 6c 65 2e 73 65 74 41 74 74 his.title.setAtt
0e50: 72 69 62 75 74 65 28 27 66 6f 6e 74 2d 77 65 69 ribute('font-wei
0e60: 67 68 74 27 2c 27 62 6f 6c 64 27 29 3b 0a 20 20 ght','bold');.
0e70: 20 20 74 68 69 73 2e 74 69 74 6c 65 2e 73 65 74 this.title.set
0e80: 41 74 74 72 69 62 75 74 65 28 27 6c 65 74 74 65 Attribute('lette
0e90: 72 2d 73 70 61 63 69 6e 67 27 2c 27 32 70 78 27 r-spacing','2px'
0ea0: 29 3b 0a 20 20 20 20 74 68 69 73 2e 74 69 74 6c );. this.titl
0eb0: 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 e.setAttribute('
0ec0: 6f 70 61 63 69 74 79 27 2c 27 30 2e 37 27 29 3b opacity','0.7');
0ed0: 0a 20 20 20 20 74 68 69 73 2e 74 69 74 6c 65 2e . this.title.
0ee0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 74 65 setAttribute('te
0ef0: 78 74 2d 61 6e 63 68 6f 72 27 2c 27 6d 69 64 64 xt-anchor','midd
0f00: 6c 65 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 74 le');. this.t
0f10: 69 74 6c 65 2e 74 65 78 74 43 6f 6e 74 65 6e 74 itle.textContent
0f20: 20 3d 20 27 54 49 4c 54 27 3b 0a 0a 0a 20 20 20 = 'TILT';...
0f30: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 this.element.ap
0f40: 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 63 pendChild(this.c
0f50: 69 72 63 6c 65 58 29 3b 0a 20 20 20 20 74 68 69 ircleX);. thi
0f60: 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 s.element.append
0f70: 43 68 69 6c 64 28 74 68 69 73 2e 63 69 72 63 6c Child(this.circl
0f80: 65 59 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c eY);. this.el
0f90: 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c ement.appendChil
0fa0: 64 28 74 68 69 73 2e 63 69 72 63 6c 65 5a 29 3b d(this.circleZ);
0fb0: 0a 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 .. this.eleme
0fc0: 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 nt.appendChild(t
0fd0: 68 69 73 2e 62 61 72 58 29 3b 0a 20 20 20 20 74 his.barX);. t
0fe0: 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 his.element.appe
0ff0: 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 62 61 72 ndChild(this.bar
1000: 59 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 Y);. this.ele
1010: 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 ment.appendChild
1020: 28 74 68 69 73 2e 62 61 72 5a 29 3b 0a 0a 20 20 (this.barZ);..
1030: 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 this.element.a
1040: 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e ppendChild(this.
1050: 62 61 72 58 32 29 3b 0a 20 20 20 20 74 68 69 73 barX2);. this
1060: 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 .element.appendC
1070: 68 69 6c 64 28 74 68 69 73 2e 62 61 72 59 32 29 hild(this.barY2)
1080: 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 ;. this.eleme
1090: 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 nt.appendChild(t
10a0: 68 69 73 2e 62 61 72 5a 32 29 3b 0a 0a 20 20 20 his.barZ2);..
10b0: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 this.element.ap
10c0: 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 74 pendChild(this.t
10d0: 69 74 6c 65 29 3b 0a 0a 20 20 7d 0a 0a 20 20 63 itle);.. }.. c
10e0: 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28 29 20 olorInterface()
10f0: 7b 0a 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e {.. if (this.
1100: 5f 61 63 74 69 76 65 29 20 7b 0a 20 20 20 20 20 _active) {.
1110: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 this.element.st
1120: 79 6c 65 2e 62 61 63 6b 67 72 6f 75 6e 64 43 6f yle.backgroundCo
1130: 6c 6f 72 20 3d 20 74 68 69 73 2e 63 6f 6c 6f 72 lor = this.color
1140: 73 2e 61 63 63 65 6e 74 3b 0a 20 20 20 20 20 20 s.accent;.
1150: 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 73 65 74 this.circleX.set
1160: 41 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 Attribute('fill'
1170: 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 67 ,this.colors.lig
1180: 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e ht);. this.
1190: 63 69 72 63 6c 65 59 2e 73 65 74 41 74 74 72 69 circleY.setAttri
11a0: 62 75 74 65 28 27 66 69 6c 6c 27 2c 74 68 69 73 bute('fill',this
11b0: 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 29 3b 0a .colors.light);.
11c0: 20 20 20 20 20 20 74 68 69 73 2e 63 69 72 63 6c this.circl
11d0: 65 5a 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 eZ.setAttribute(
11e0: 27 66 69 6c 6c 27 2c 74 68 69 73 2e 63 6f 6c 6f 'fill',this.colo
11f0: 72 73 2e 6c 69 67 68 74 29 3b 0a 20 20 20 20 20 rs.light);.
1200: 20 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 73 65 this.circleX.se
1210: 74 41 74 74 72 69 62 75 74 65 28 27 73 74 72 6f tAttribute('stro
1220: 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e ke',this.colors.
1230: 6c 69 67 68 74 29 3b 0a 20 20 20 20 20 20 74 68 light);. th
1240: 69 73 2e 63 69 72 63 6c 65 59 2e 73 65 74 41 74 is.circleY.setAt
1250: 74 72 69 62 75 74 65 28 27 73 74 72 6f 6b 65 27 tribute('stroke'
1260: 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 67 ,this.colors.lig
1270: 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e ht);. this.
1280: 63 69 72 63 6c 65 5a 2e 73 65 74 41 74 74 72 69 circleZ.setAttri
1290: 62 75 74 65 28 27 73 74 72 6f 6b 65 27 2c 74 68 bute('stroke',th
12a0: 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 29 is.colors.light)
12b0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 ;. this.bar
12c0: 58 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 X.setAttribute('
12d0: 73 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c stroke',this.col
12e0: 6f 72 73 2e 6c 69 67 68 74 29 3b 0a 20 20 20 20 ors.light);.
12f0: 20 20 74 68 69 73 2e 62 61 72 59 2e 73 65 74 41 this.barY.setA
1300: 74 74 72 69 62 75 74 65 28 27 73 74 72 6f 6b 65 ttribute('stroke
1310: 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 ',this.colors.li
1320: 67 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 ght);. this
1330: 2e 62 61 72 5a 2e 73 65 74 41 74 74 72 69 62 75 .barZ.setAttribu
1340: 74 65 28 27 73 74 72 6f 6b 65 27 2c 74 68 69 73 te('stroke',this
1350: 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 29 3b 0a .colors.light);.
1360: 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 58 32 this.barX2
1370: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 .setAttribute('s
1380: 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f troke',this.colo
1390: 72 73 2e 6c 69 67 68 74 29 3b 0a 20 20 20 20 20 rs.light);.
13a0: 20 74 68 69 73 2e 62 61 72 59 32 2e 73 65 74 41 this.barY2.setA
13b0: 74 74 72 69 62 75 74 65 28 27 73 74 72 6f 6b 65 ttribute('stroke
13c0: 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6c 69 ',this.colors.li
13d0: 67 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 ght);. this
13e0: 2e 62 61 72 5a 32 2e 73 65 74 41 74 74 72 69 62 .barZ2.setAttrib
13f0: 75 74 65 28 27 73 74 72 6f 6b 65 27 2c 74 68 69 ute('stroke',thi
1400: 73 2e 63 6f 6c 6f 72 73 2e 6c 69 67 68 74 29 3b s.colors.light);
1410: 0a 20 20 20 20 20 20 74 68 69 73 2e 74 69 74 6c . this.titl
1420: 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 e.setAttribute('
1430: 66 69 6c 6c 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 fill',this.color
1440: 73 2e 6c 69 67 68 74 29 3b 0a 20 20 20 20 7d 20 s.light);. }
1450: 65 6c 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 else {. thi
1460: 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 2e s.element.style.
1470: 62 61 63 6b 67 72 6f 75 6e 64 43 6f 6c 6f 72 20 backgroundColor
1480: 3d 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 = this.colors.fi
1490: 6c 6c 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 63 ll;. this.c
14a0: 69 72 63 6c 65 58 2e 73 65 74 41 74 74 72 69 62 ircleX.setAttrib
14b0: 75 74 65 28 27 66 69 6c 6c 27 2c 74 68 69 73 2e ute('fill',this.
14c0: 63 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 67 colors.mediumLig
14d0: 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e ht);. this.
14e0: 63 69 72 63 6c 65 59 2e 73 65 74 41 74 74 72 69 circleY.setAttri
14f0: 62 75 74 65 28 27 66 69 6c 6c 27 2c 74 68 69 73 bute('fill',this
1500: 2e 63 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 .colors.mediumLi
1510: 67 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 73 ght);. this
1520: 2e 63 69 72 63 6c 65 5a 2e 73 65 74 41 74 74 72 .circleZ.setAttr
1530: 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 74 68 69 ibute('fill',thi
1540: 73 2e 63 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d 4c s.colors.mediumL
1550: 69 67 68 74 29 3b 0a 20 20 20 20 20 20 74 68 69 ight);. thi
1560: 73 2e 63 69 72 63 6c 65 58 2e 73 65 74 41 74 74 s.circleX.setAtt
1570: 72 69 62 75 74 65 28 27 73 74 72 6f 6b 65 27 2c ribute('stroke',
1580: 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6d 65 64 69 this.colors.medi
1590: 75 6d 4c 69 67 68 74 29 3b 0a 20 20 20 20 20 20 umLight);.
15a0: 74 68 69 73 2e 63 69 72 63 6c 65 59 2e 73 65 74 this.circleY.set
15b0: 41 74 74 72 69 62 75 74 65 28 27 73 74 72 6f 6b Attribute('strok
15c0: 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6d e',this.colors.m
15d0: 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a 20 20 20 ediumLight);.
15e0: 20 20 20 74 68 69 73 2e 63 69 72 63 6c 65 5a 2e this.circleZ.
15f0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
1600: 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 roke',this.color
1610: 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a s.mediumLight);.
1620: 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 58 2e this.barX.
1630: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
1640: 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 roke',this.color
1650: 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a s.mediumLight);.
1660: 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 59 2e this.barY.
1670: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
1680: 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 roke',this.color
1690: 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a s.mediumLight);.
16a0: 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 5a 2e this.barZ.
16b0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
16c0: 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f 72 roke',this.color
16d0: 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a s.mediumLight);.
16e0: 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 58 32 this.barX2
16f0: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 .setAttribute('s
1700: 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c 6f troke',this.colo
1710: 72 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b rs.mediumLight);
1720: 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 59 . this.barY
1730: 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 2.setAttribute('
1740: 73 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c stroke',this.col
1750: 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 ors.mediumLight)
1760: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 ;. this.bar
1770: 5a 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 Z2.setAttribute(
1780: 27 73 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 'stroke',this.co
1790: 6c 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 lors.mediumLight
17a0: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 74 69 );. this.ti
17b0: 74 6c 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 tle.setAttribute
17c0: 28 27 66 69 6c 6c 27 2c 74 68 69 73 2e 63 6f 6c ('fill',this.col
17d0: 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 29 ors.mediumLight)
17e0: 3b 0a 20 20 20 20 7d 0a 0a 20 20 7d 0a 0a 20 20 ;. }.. }..
17f0: 75 70 64 61 74 65 28 76 29 20 7b 0a 20 20 20 20 update(v) {.
1800: 69 66 20 28 74 68 69 73 2e 5f 61 63 74 69 76 65 if (this._active
1810: 29 7b 0a 0a 20 20 20 20 20 20 6c 65 74 20 79 20 ){.. let y
1820: 3d 20 76 2e 62 65 74 61 3b 0a 20 20 20 20 20 20 = v.beta;.
1830: 6c 65 74 20 78 20 3d 20 76 2e 67 61 6d 6d 61 3b let x = v.gamma;
1840: 0a 20 20 20 20 20 20 6c 65 74 20 7a 20 3d 20 76 . let z = v
1850: 2e 61 6c 70 68 61 3b 0a 0a 20 20 20 20 20 20 2f .alpha;.. /
1860: 2f 20 74 61 6b 65 20 74 68 65 20 6f 72 69 67 69 / take the origi
1870: 6e 61 6c 20 2d 39 30 20 74 6f 20 39 30 20 73 63 nal -90 to 90 sc
1880: 61 6c 65 20 61 6e 64 20 6e 6f 72 6d 61 6c 69 7a ale and normaliz
1890: 65 20 69 74 20 30 2d 31 0a 20 20 20 20 20 20 78 e it 0-1. x
18a0: 20 3d 20 6d 61 74 68 2e 73 63 61 6c 65 28 78 2c = math.scale(x,
18b0: 2d 39 30 2c 39 30 2c 30 2c 31 29 3b 0a 20 20 20 -90,90,0,1);.
18c0: 20 20 20 79 20 3d 20 6d 61 74 68 2e 73 63 61 6c y = math.scal
18d0: 65 28 79 2c 2d 39 30 2c 39 30 2c 30 2c 31 29 3b e(y,-90,90,0,1);
18e0: 0a 20 20 20 20 20 20 7a 20 3d 20 6d 61 74 68 2e . z = math.
18f0: 73 63 61 6c 65 28 7a 2c 30 2c 33 36 30 2c 30 2c scale(z,0,360,0,
1900: 31 29 3b 0a 0a 0a 20 20 20 20 20 20 6c 65 74 20 1);... let
1910: 68 61 6e 64 6c 65 50 6f 69 6e 74 73 20 3d 20 7b handlePoints = {
1920: 0a 20 20 20 20 20 20 20 20 73 74 61 72 74 3a 20 . start:
1930: 4d 61 74 68 2e 50 49 2a 31 2e 35 2c 0a 20 20 20 Math.PI*1.5,.
1940: 20 20 20 20 20 65 6e 64 3a 20 6d 61 74 68 2e 63 end: math.c
1950: 6c 69 70 28 20 6d 61 74 68 2e 73 63 61 6c 65 28 lip( math.scale(
1960: 78 2c 30 2c 30 2e 35 2c 4d 61 74 68 2e 50 49 2a x,0,0.5,Math.PI*
1970: 31 2e 35 2c 4d 61 74 68 2e 50 49 2a 30 2e 35 29 1.5,Math.PI*0.5)
1980: 20 2c 20 4d 61 74 68 2e 50 49 2a 30 2e 35 2c 20 , Math.PI*0.5,
1990: 4d 61 74 68 2e 50 49 2a 31 2e 35 20 29 0a 20 20 Math.PI*1.5 ).
19a0: 20 20 20 20 7d 3b 0a 20 20 20 20 20 20 6c 65 74 };. let
19b0: 20 68 61 6e 64 6c 65 32 50 6f 69 6e 74 73 20 3d handle2Points =
19c0: 20 7b 0a 20 20 20 20 20 20 20 20 73 74 61 72 74 {. start
19d0: 3a 20 4d 61 74 68 2e 50 49 2a 32 2e 35 2c 0a 20 : Math.PI*2.5,.
19e0: 20 20 20 20 20 20 20 65 6e 64 3a 20 6d 61 74 68 end: math
19f0: 2e 63 6c 69 70 28 20 6d 61 74 68 2e 73 63 61 6c .clip( math.scal
1a00: 65 28 78 2c 30 2e 35 2c 31 2c 4d 61 74 68 2e 50 e(x,0.5,1,Math.P
1a10: 49 2a 32 2e 35 2c 4d 61 74 68 2e 50 49 2a 31 2e I*2.5,Math.PI*1.
1a20: 35 29 20 2c 20 4d 61 74 68 2e 50 49 2a 31 2e 35 5) , Math.PI*1.5
1a30: 2c 20 4d 61 74 68 2e 50 49 2a 32 2e 35 20 29 0a , Math.PI*2.5 ).
1a40: 20 20 20 20 20 20 7d 3b 0a 0a 20 20 20 20 20 20 };..
1a50: 6c 65 74 20 68 61 6e 64 6c 65 50 61 74 68 20 3d let handlePath =
1a60: 20 73 76 67 2e 61 72 63 28 74 68 69 73 2e 63 69 svg.arc(this.ci
1a70: 72 63 6c 65 58 2e 63 78 2e 62 61 73 65 56 61 6c rcleX.cx.baseVal
1a80: 2e 76 61 6c 75 65 2c 20 74 68 69 73 2e 63 69 72 .value, this.cir
1a90: 63 6c 65 58 2e 63 79 2e 62 61 73 65 56 61 6c 2e cleX.cy.baseVal.
1aa0: 76 61 6c 75 65 2c 20 74 68 69 73 2e 63 69 72 63 value, this.circ
1ab0: 6c 65 58 2e 72 2e 62 61 73 65 56 61 6c 2e 76 61 leX.r.baseVal.va
1ac0: 6c 75 65 2c 20 68 61 6e 64 6c 65 50 6f 69 6e 74 lue, handlePoint
1ad0: 73 2e 73 74 61 72 74 2c 20 68 61 6e 64 6c 65 50 s.start, handleP
1ae0: 6f 69 6e 74 73 2e 65 6e 64 29 3b 0a 20 20 20 20 oints.end);.
1af0: 20 20 6c 65 74 20 68 61 6e 64 6c 65 32 50 61 74 let handle2Pat
1b00: 68 20 3d 20 73 76 67 2e 61 72 63 28 74 68 69 73 h = svg.arc(this
1b10: 2e 63 69 72 63 6c 65 58 2e 63 78 2e 62 61 73 65 .circleX.cx.base
1b20: 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 73 2e Val.value, this.
1b30: 63 69 72 63 6c 65 58 2e 63 79 2e 62 61 73 65 56 circleX.cy.baseV
1b40: 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 73 2e 63 al.value, this.c
1b50: 69 72 63 6c 65 58 2e 72 2e 62 61 73 65 56 61 6c ircleX.r.baseVal
1b60: 2e 76 61 6c 75 65 2c 20 68 61 6e 64 6c 65 32 50 .value, handle2P
1b70: 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 68 61 6e oints.start, han
1b80: 64 6c 65 32 50 6f 69 6e 74 73 2e 65 6e 64 29 3b dle2Points.end);
1b90: 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 .. this.bar
1ba0: 58 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 X.setAttribute('
1bb0: 64 27 2c 20 68 61 6e 64 6c 65 50 61 74 68 29 3b d', handlePath);
1bc0: 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 58 . this.barX
1bd0: 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 2.setAttribute('
1be0: 64 27 2c 20 68 61 6e 64 6c 65 32 50 61 74 68 29 d', handle2Path)
1bf0: 3b 0a 0a 0a 0a 0a 0a 20 20 20 20 20 20 68 61 6e ;...... han
1c00: 64 6c 65 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 20 dlePoints = {.
1c10: 20 20 20 20 20 20 73 74 61 72 74 3a 20 4d 61 74 start: Mat
1c20: 68 2e 50 49 2a 31 2e 35 2c 0a 20 20 20 20 20 20 h.PI*1.5,.
1c30: 20 20 65 6e 64 3a 20 6d 61 74 68 2e 63 6c 69 70 end: math.clip
1c40: 28 20 6d 61 74 68 2e 73 63 61 6c 65 28 79 2c 30 ( math.scale(y,0
1c50: 2c 30 2e 35 2c 4d 61 74 68 2e 50 49 2a 31 2e 35 ,0.5,Math.PI*1.5
1c60: 2c 4d 61 74 68 2e 50 49 2a 30 2e 35 29 20 2c 20 ,Math.PI*0.5) ,
1c70: 4d 61 74 68 2e 50 49 2a 30 2e 35 2c 20 4d 61 74 Math.PI*0.5, Mat
1c80: 68 2e 50 49 2a 31 2e 35 20 29 0a 20 20 20 20 20 h.PI*1.5 ).
1c90: 20 7d 3b 0a 20 20 20 20 20 20 68 61 6e 64 6c 65 };. handle
1ca0: 32 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 20 20 20 2Points = {.
1cb0: 20 20 20 20 73 74 61 72 74 3a 20 4d 61 74 68 2e start: Math.
1cc0: 50 49 2a 32 2e 35 2c 0a 20 20 20 20 20 20 20 20 PI*2.5,.
1cd0: 65 6e 64 3a 20 6d 61 74 68 2e 63 6c 69 70 28 20 end: math.clip(
1ce0: 6d 61 74 68 2e 73 63 61 6c 65 28 79 2c 30 2e 35 math.scale(y,0.5
1cf0: 2c 31 2c 4d 61 74 68 2e 50 49 2a 32 2e 35 2c 4d ,1,Math.PI*2.5,M
1d00: 61 74 68 2e 50 49 2a 31 2e 35 29 20 2c 20 4d 61 ath.PI*1.5) , Ma
1d10: 74 68 2e 50 49 2a 31 2e 35 2c 20 4d 61 74 68 2e th.PI*1.5, Math.
1d20: 50 49 2a 32 2e 35 20 29 0a 20 20 20 20 20 20 7d PI*2.5 ). }
1d30: 3b 0a 0a 20 20 20 20 20 20 68 61 6e 64 6c 65 50 ;.. handleP
1d40: 61 74 68 20 3d 20 73 76 67 2e 61 72 63 28 74 68 ath = svg.arc(th
1d50: 69 73 2e 63 69 72 63 6c 65 59 2e 63 78 2e 62 61 is.circleY.cx.ba
1d60: 73 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 seVal.value, thi
1d70: 73 2e 63 69 72 63 6c 65 59 2e 63 79 2e 62 61 73 s.circleY.cy.bas
1d80: 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 73 eVal.value, this
1d90: 2e 63 69 72 63 6c 65 59 2e 72 2e 62 61 73 65 56 .circleY.r.baseV
1da0: 61 6c 2e 76 61 6c 75 65 2c 20 68 61 6e 64 6c 65 al.value, handle
1db0: 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 68 61 Points.start, ha
1dc0: 6e 64 6c 65 50 6f 69 6e 74 73 2e 65 6e 64 29 3b ndlePoints.end);
1dd0: 0a 20 20 20 20 20 20 68 61 6e 64 6c 65 32 50 61 . handle2Pa
1de0: 74 68 20 3d 20 73 76 67 2e 61 72 63 28 74 68 69 th = svg.arc(thi
1df0: 73 2e 63 69 72 63 6c 65 59 2e 63 78 2e 62 61 73 s.circleY.cx.bas
1e00: 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 73 eVal.value, this
1e10: 2e 63 69 72 63 6c 65 59 2e 63 79 2e 62 61 73 65 .circleY.cy.base
1e20: 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 73 2e Val.value, this.
1e30: 63 69 72 63 6c 65 59 2e 72 2e 62 61 73 65 56 61 circleY.r.baseVa
1e40: 6c 2e 76 61 6c 75 65 2c 20 68 61 6e 64 6c 65 32 l.value, handle2
1e50: 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 68 61 Points.start, ha
1e60: 6e 64 6c 65 32 50 6f 69 6e 74 73 2e 65 6e 64 29 ndle2Points.end)
1e70: 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 ;.. this.ba
1e80: 72 59 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 rY.setAttribute(
1e90: 27 64 27 2c 20 68 61 6e 64 6c 65 50 61 74 68 29 'd', handlePath)
1ea0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 62 61 72 ;. this.bar
1eb0: 59 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 Y2.setAttribute(
1ec0: 27 64 27 2c 20 68 61 6e 64 6c 65 32 50 61 74 68 'd', handle2Path
1ed0: 29 3b 0a 0a 0a 0a 0a 0a 0a 20 20 20 20 20 20 68 );....... h
1ee0: 61 6e 64 6c 65 50 6f 69 6e 74 73 20 3d 20 7b 0a andlePoints = {.
1ef0: 20 20 20 20 20 20 20 20 73 74 61 72 74 3a 20 4d start: M
1f00: 61 74 68 2e 50 49 2a 31 2e 35 2c 0a 20 20 20 20 ath.PI*1.5,.
1f10: 20 20 20 20 65 6e 64 3a 20 6d 61 74 68 2e 63 6c end: math.cl
1f20: 69 70 28 20 6d 61 74 68 2e 73 63 61 6c 65 28 7a ip( math.scale(z
1f30: 2c 30 2c 30 2e 35 2c 4d 61 74 68 2e 50 49 2a 31 ,0,0.5,Math.PI*1
1f40: 2e 35 2c 4d 61 74 68 2e 50 49 2a 30 2e 35 29 20 .5,Math.PI*0.5)
1f50: 2c 20 4d 61 74 68 2e 50 49 2a 30 2e 35 2c 20 4d , Math.PI*0.5, M
1f60: 61 74 68 2e 50 49 2a 31 2e 35 20 29 0a 20 20 20 ath.PI*1.5 ).
1f70: 20 20 20 7d 3b 0a 20 20 20 20 20 20 68 61 6e 64 };. hand
1f80: 6c 65 32 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 20 le2Points = {.
1f90: 20 20 20 20 20 20 73 74 61 72 74 3a 20 4d 61 74 start: Mat
1fa0: 68 2e 50 49 2a 32 2e 35 2c 0a 20 20 20 20 20 20 h.PI*2.5,.
1fb0: 20 20 65 6e 64 3a 20 6d 61 74 68 2e 63 6c 69 70 end: math.clip
1fc0: 28 20 6d 61 74 68 2e 73 63 61 6c 65 28 7a 2c 30 ( math.scale(z,0
1fd0: 2e 35 2c 31 2c 4d 61 74 68 2e 50 49 2a 32 2e 35 .5,1,Math.PI*2.5
1fe0: 2c 4d 61 74 68 2e 50 49 2a 31 2e 35 29 20 2c 20 ,Math.PI*1.5) ,
1ff0: 4d 61 74 68 2e 50 49 2a 31 2e 35 2c 20 4d 61 74 Math.PI*1.5, Mat
2000: 68 2e 50 49 2a 32 2e 35 20 29 0a 20 20 20 20 20 h.PI*2.5 ).
2010: 20 7d 3b 0a 0a 20 20 20 20 20 20 68 61 6e 64 6c };.. handl
2020: 65 50 61 74 68 20 3d 20 73 76 67 2e 61 72 63 28 ePath = svg.arc(
2030: 74 68 69 73 2e 63 69 72 63 6c 65 5a 2e 63 78 2e this.circleZ.cx.
2040: 62 61 73 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 baseVal.value, t
2050: 68 69 73 2e 63 69 72 63 6c 65 5a 2e 63 79 2e 62 his.circleZ.cy.b
2060: 61 73 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 aseVal.value, th
2070: 69 73 2e 63 69 72 63 6c 65 5a 2e 72 2e 62 61 73 is.circleZ.r.bas
2080: 65 56 61 6c 2e 76 61 6c 75 65 2c 20 68 61 6e 64 eVal.value, hand
2090: 6c 65 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 lePoints.start,
20a0: 68 61 6e 64 6c 65 50 6f 69 6e 74 73 2e 65 6e 64 handlePoints.end
20b0: 29 3b 0a 20 20 20 20 20 20 68 61 6e 64 6c 65 32 );. handle2
20c0: 50 61 74 68 20 3d 20 73 76 67 2e 61 72 63 28 74 Path = svg.arc(t
20d0: 68 69 73 2e 63 69 72 63 6c 65 5a 2e 63 78 2e 62 his.circleZ.cx.b
20e0: 61 73 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 aseVal.value, th
20f0: 69 73 2e 63 69 72 63 6c 65 5a 2e 63 79 2e 62 61 is.circleZ.cy.ba
2100: 73 65 56 61 6c 2e 76 61 6c 75 65 2c 20 74 68 69 seVal.value, thi
2110: 73 2e 63 69 72 63 6c 65 5a 2e 72 2e 62 61 73 65 s.circleZ.r.base
2120: 56 61 6c 2e 76 61 6c 75 65 2c 20 68 61 6e 64 6c Val.value, handl
2130: 65 32 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 e2Points.start,
2140: 68 61 6e 64 6c 65 32 50 6f 69 6e 74 73 2e 65 6e handle2Points.en
2150: 64 29 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e d);.. this.
2160: 62 61 72 5a 2e 73 65 74 41 74 74 72 69 62 75 74 barZ.setAttribut
2170: 65 28 27 64 27 2c 20 68 61 6e 64 6c 65 50 61 74 e('d', handlePat
2180: 68 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 62 h);. this.b
2190: 61 72 5a 32 2e 73 65 74 41 74 74 72 69 62 75 74 arZ2.setAttribut
21a0: 65 28 27 64 27 2c 20 68 61 6e 64 6c 65 32 50 61 e('d', handle2Pa
21b0: 74 68 29 3b 0a 0a 0a 20 20 20 20 20 20 2f 2a 0a th);... /*.
21c0: 0a 20 20 20 20 20 20 6c 65 74 20 70 6f 69 6e 74 . let point
21d0: 73 58 20 3d 20 7b 0a 20 20 20 20 20 20 20 20 73 sX = {. s
21e0: 74 61 72 74 3a 20 30 2c 0a 20 20 20 20 20 20 20 tart: 0,.
21f0: 20 65 6e 64 3a 20 6d 61 74 68 2e 73 63 61 6c 65 end: math.scale
2200: 28 20 78 2c 20 30 2c 20 31 2c 20 30 2c 20 4d 61 ( x, 0, 1, 0, Ma
2210: 74 68 2e 50 49 2a 32 20 29 0a 20 20 20 20 20 20 th.PI*2 ).
2220: 7d 3b 0a 0a 20 20 20 20 2f 2f 20 20 63 6f 6e 73 };.. // cons
2230: 6f 6c 65 2e 6c 6f 67 28 74 68 69 73 2e 63 69 72 ole.log(this.cir
2240: 63 6c 65 58 2e 63 78 2e 62 61 73 65 56 61 6c 2e cleX.cx.baseVal.
2250: 76 61 6c 75 65 29 3b 0a 0a 20 20 20 20 20 20 6c value);.. l
2260: 65 74 20 70 61 74 68 58 20 3d 20 73 76 67 2e 61 et pathX = svg.a
2270: 72 63 28 74 68 69 73 2e 63 69 72 63 6c 65 58 2e rc(this.circleX.
2280: 63 78 2e 62 61 73 65 56 61 6c 2e 76 61 6c 75 65 cx.baseVal.value
2290: 2c 20 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 63 , this.circleX.c
22a0: 79 2e 62 61 73 65 56 61 6c 2e 76 61 6c 75 65 2c y.baseVal.value,
22b0: 20 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 72 2e this.circleX.r.
22c0: 62 61 73 65 56 61 6c 2e 76 61 6c 75 65 2a 32 2c baseVal.value*2,
22d0: 20 70 6f 69 6e 74 73 58 2e 73 74 61 72 74 2c 20 pointsX.start,
22e0: 70 6f 69 6e 74 73 58 2e 65 6e 64 29 3b 0a 0a 20 pointsX.end);..
22f0: 20 20 20 20 20 74 68 69 73 2e 62 61 72 58 2e 73 this.barX.s
2300: 65 74 41 74 74 72 69 62 75 74 65 28 27 64 27 2c etAttribute('d',
2310: 70 61 74 68 58 29 3b 20 2a 2f 0a 0a 20 20 20 20 pathX); */..
2320: 20 20 2f 2f 74 68 69 73 2e 74 65 78 74 48 2e 74 //this.textH.t
2330: 65 78 74 43 6f 6e 74 65 6e 74 20 3d 20 6d 61 74 extContent = mat
2340: 68 2e 70 72 75 6e 65 28 78 2c 32 29 3b 0a 20 20 h.prune(x,2);.
2350: 20 20 20 20 2f 2f 74 68 69 73 2e 74 65 78 74 56 //this.textV
2360: 2e 74 65 78 74 43 6f 6e 74 65 6e 74 20 3d 20 6d .textContent = m
2370: 61 74 68 2e 70 72 75 6e 65 28 79 2c 32 29 3b 0a ath.prune(y,2);.
2380: 20 20 20 20 20 20 2f 2f 0a 20 20 20 20 2f 2f 20 //. //
2390: 20 74 68 69 73 2e 63 69 72 63 6c 65 58 2e 73 65 this.circleX.se
23a0: 74 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 63 tAttribute('opac
23b0: 69 74 79 27 2c 78 29 3b 0a 20 20 20 20 2f 2f 20 ity',x);. //
23c0: 20 74 68 69 73 2e 63 69 72 63 6c 65 59 2e 73 65 this.circleY.se
23d0: 74 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 63 tAttribute('opac
23e0: 69 74 79 27 2c 79 29 3b 0a 20 20 20 20 2f 2f 20 ity',y);. //
23f0: 20 74 68 69 73 2e 63 69 72 63 6c 65 5a 2e 73 65 this.circleZ.se
2400: 74 41 74 74 72 69 62 75 74 65 28 27 6f 70 61 63 tAttribute('opac
2410: 69 74 79 27 2c 7a 29 3b 0a 0a 20 20 20 20 20 20 ity',z);..
2420: 74 68 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 this.emit('chang
2430: 65 27 2c 20 7b 0a 20 20 20 20 20 20 20 20 78 3a e', {. x:
2440: 20 78 2c 0a 20 20 20 20 20 20 20 20 79 3a 20 79 x,. y: y
2450: 2c 0a 20 20 20 20 20 20 20 20 7a 3a 20 7a 0a 20 ,. z: z.
2460: 20 20 20 20 20 7d 29 3b 0a 0a 20 20 20 20 7d 0a });.. }.
2470: 0a 20 20 7d 0a 0a 20 20 63 6c 69 63 6b 28 29 20 . }.. click()
2480: 7b 0a 20 20 20 20 69 66 20 28 77 69 6e 64 6f 77 {. if (window
2490: 2e 44 65 76 69 63 65 4f 72 69 65 6e 74 61 74 69 .DeviceOrientati
24a0: 6f 6e 45 76 65 6e 74 29 20 7b 0a 20 20 20 20 20 onEvent) {.
24b0: 20 74 68 69 73 2e 61 63 74 69 76 65 20 3d 20 21 this.active = !
24c0: 74 68 69 73 2e 61 63 74 69 76 65 3b 0a 20 20 20 this.active;.
24d0: 20 7d 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 }. }.. /**.
24e0: 57 68 65 74 68 65 72 20 74 68 65 20 69 6e 74 65 Whether the inte
24f0: 72 66 61 63 65 20 69 73 20 6f 6e 20 28 65 6d 69 rface is on (emi
2500: 74 74 69 6e 67 20 76 61 6c 75 65 73 29 20 6f 72 tting values) or
2510: 20 6f 66 66 20 28 70 61 75 73 65 64 20 26 20 6e off (paused & n
2520: 6f 74 20 65 6d 69 74 74 69 6e 67 20 76 61 6c 75 ot emitting valu
2530: 65 73 29 2e 20 53 65 74 74 69 6e 67 20 74 68 69 es). Setting thi
2540: 73 20 70 72 6f 70 65 72 74 79 20 77 69 6c 6c 20 s property will
2550: 75 70 64 61 74 65 20 69 74 2e 0a 20 20 40 74 79 update it.. @ty
2560: 70 65 20 7b 62 6f 6f 6c 65 61 6e 7d 0a 20 20 2a pe {boolean}. *
2570: 2f 0a 0a 20 20 67 65 74 20 61 63 74 69 76 65 28 /.. get active(
2580: 29 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 ) {. return t
2590: 68 69 73 2e 5f 61 63 74 69 76 65 3b 0a 20 20 7d his._active;. }
25a0: 0a 0a 20 20 73 65 74 20 61 63 74 69 76 65 28 6f .. set active(o
25b0: 6e 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 5f 61 n) {. this._a
25c0: 63 74 69 76 65 20 3d 20 6f 6e 3b 0a 20 20 20 20 ctive = on;.
25d0: 74 68 69 73 2e 63 6f 6c 6f 72 49 6e 74 65 72 66 this.colorInterf
25e0: 61 63 65 28 29 3b 0a 20 20 7d 0a 0a 20 20 63 75 ace();. }.. cu
25f0: 73 74 6f 6d 44 65 73 74 72 6f 79 28 29 20 7b 0a stomDestroy() {.
2600: 20 20 20 20 77 69 6e 64 6f 77 2e 72 65 6d 6f 76 window.remov
2610: 65 45 76 65 6e 74 4c 69 73 74 65 6e 65 72 28 27 eEventListener('
2620: 64 65 76 69 63 65 6f 72 69 65 6e 74 61 74 69 6f deviceorientatio
2630: 6e 27 2c 20 74 68 69 73 2e 62 6f 75 6e 64 55 70 n', this.boundUp
2640: 64 61 74 65 2c 20 66 61 6c 73 65 29 3b 0a 20 20 date, false);.
2650: 7d 0a 0a 7d 0a }..}.