' +
39 | '{{rainbows}}
' +
40 | '';
41 | var oneColorTpl = '';
42 | var rainbows = '';
43 | $.each([0.75, 0.5, 0.25], $.proxy(function(key, val) {
44 | var i = 0;
45 | var additionalColor = null;
46 | rainbows += '';
47 | if (val == 0.25) additionalColor = this._rgba(0, 0, 0, 1);
48 | if (val == 0.5) additionalColor = this._rgba(150, 150, 150, 1);
49 | if (val == 0.75) additionalColor = this._rgba(255, 255, 255, 1);
50 | rainbows += DrawingBoard.Utils.tpl(oneColorTpl, {color: additionalColor.toString() });
51 | while (i <= 330) {
52 | rainbows += DrawingBoard.Utils.tpl(oneColorTpl, {color: this._hsl2Rgba(this._hsl(i-60, 1, val)).toString() });
53 | i+=30;
54 | }
55 | rainbows += '
';
56 | }, this));
57 |
58 | this.$el.append( $( DrawingBoard.Utils.tpl(tpl, {color: this.board.color, rainbows: rainbows }) ) );
59 | this.$el.find('.drawing-board-control-colors-rainbows').addClass('drawing-board-utils-hidden');
60 | },
61 |
62 | onBoardReset: function(opts) {
63 | this.board.setColor(this.$el.find('.drawing-board-control-colors-current').attr('data-color'));
64 | },
65 |
66 | _rgba: function(r, g, b, a) {
67 | return { r: r, g: g, b: b, a: a, toString: function() { return "rgba(" + r +", " + g + ", " + b + ", " + a + ")"; } };
68 | },
69 |
70 | _hsl: function(h, s, l) {
71 | return { h: h, s: s, l: l, toString: function() { return "hsl(" + h +", " + s*100 + "%, " + l*100 + "%)"; } };
72 | },
73 |
74 | _hex2Rgba: function(hex) {
75 | var num = parseInt(hex.substring(1), 16);
76 | return this._rgba(num >> 16, num >> 8 & 255, num & 255, 1);
77 | },
78 |
79 | //conversion function (modified a bit) taken from http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
80 | _hsl2Rgba: function(hsl) {
81 | var h = hsl.h/360, s = hsl.s, l = hsl.l, r, g, b;
82 | function hue2rgb(p, q, t) {
83 | if(t < 0) t += 1;
84 | if(t > 1) t -= 1;
85 | if(t < 1/6) return p + (q - p) * 6 * t;
86 | if(t < 1/2) return q;
87 | if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
88 | return p;
89 | }
90 | if (s === 0) {
91 | r = g = b = l; // achromatic
92 | } else {
93 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
94 | var p = 2 * l - q;
95 | r = Math.floor( (hue2rgb(p, q, h + 1/3)) * 255);
96 | g = Math.floor( (hue2rgb(p, q, h)) * 255);
97 | b = Math.floor( (hue2rgb(p, q, h - 1/3)) * 255);
98 | }
99 | return this._rgba(r, g, b, 1);
100 | }
101 | });
--------------------------------------------------------------------------------
/js/drawingboard/controls/size.js:
--------------------------------------------------------------------------------
1 | DrawingBoard.Control.Size = DrawingBoard.Control.extend({
2 |
3 | name: 'size',
4 |
5 | defaults: {
6 | type: "auto",
7 | dropdownValues: [1, 3, 6, 10, 20, 30, 40, 50],
8 | min: 1,
9 | max: 50
10 | },
11 |
12 | types: ['dropdown', 'range'],
13 |
14 | initialize: function() {
15 | if (this.opts.type == "auto")
16 | this.opts.type = this._iHasRangeInput() ? 'range' : 'dropdown';
17 | var tpl = $.inArray(this.opts.type, this.types) > -1 ? this['_' + this.opts.type + 'Template']() : false;
18 | if (!tpl) return false;
19 |
20 | this.val = this.board.opts.size;
21 |
22 | this.$el.append( $( tpl ) );
23 | this.$el.attr('data-drawing-board-type', this.opts.type);
24 | this.updateView();
25 |
26 | var that = this;
27 |
28 | if (this.opts.type == "range") {
29 | this.$el.on('change', '.drawing-board-control-size-range-input', function(e) {
30 | that.val = $(this).val();
31 | that.updateView();
32 |
33 | that.board.ev.trigger('size:changed', that.val);
34 |
35 | e.preventDefault();
36 | });
37 | }
38 |
39 | if (this.opts.type == "dropdown") {
40 | this.$el.on('click', '.drawing-board-control-size-dropdown-current', $.proxy(function(e) {
41 | this.$el.find('.drawing-board-control-size-dropdown').toggleClass('drawing-board-utils-hidden');
42 | }, this));
43 |
44 | this.$el.on('click', '[data-size]', function(e) {
45 | that.val = parseInt($(this).attr('data-size'), 0);
46 | that.updateView();
47 |
48 | that.board.ev.trigger('size:changed', that.val);
49 |
50 | e.preventDefault();
51 | });
52 | }
53 | },
54 |
55 | _rangeTemplate: function() {
56 | var tpl = '' +
57 | '' +
58 | '' +
59 | '
';
60 | return DrawingBoard.Utils.tpl(tpl, {
61 | min: this.opts.min,
62 | max: this.opts.max,
63 | size: this.board.opts.size
64 | });
65 | },
66 |
67 | _dropdownTemplate: function() {
68 | var tpl = '' +
69 | '
' +
70 | '
';
71 | $.each(this.opts.dropdownValues, function(i, size) {
72 | tpl += DrawingBoard.Utils.tpl(
73 | '
](https://khan.github.io/KaTeX/) [](https://travis-ci.org/Khan/KaTeX)
2 |
3 | KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
4 |
5 | * **Fast:** KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in [this speed test](http://jsperf.com/katex-vs-mathjax/).
6 | * **Print quality:** KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
7 | * **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources.
8 | * **Server side rendering:** KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.
9 |
10 | KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, and IE 8 - IE 11.
11 |
12 | ## Usage
13 |
14 | You can [download KaTeX](https://github.com/khan/katex/releases) and host it on your server or include the `katex.min.js` and `katex.min.css` files on your page directly from a CDN:
15 |
16 | ```html
17 |
18 |
19 | ```
20 |
21 | #### In-browser rendering
22 |
23 | Call `katex.render` with a TeX expression and a DOM element to render into:
24 |
25 | ```js
26 | katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);
27 | ```
28 |
29 | #### Server side rendering or rendering to a string
30 |
31 | To generate HTML on the server or to generate an HTML string of the rendered math, you can use `katex.renderToString`:
32 |
33 | ```js
34 | var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
35 | // '...'
36 | ```
37 |
38 | Make sure to include the CSS and font files, but there is no need to include the JavaScript.
39 |
40 | #### Rendering options
41 |
42 | You can provide an object of options as the last argument to `katex.render` and `katex.renderToString`. Available options are:
43 |
44 | - `displayMode`: `boolean`. If `true` the math will be rendered in display mode, which will put the math in display style (so `\int` and `\sum` are large, for example), and will center the math on the page on its own line. If `false` the math will be rendered in inline mode. (default: `false`)
45 |
46 | For example:
47 |
48 | ```js
49 | katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { displayMode: true });
50 | ```
51 |
52 | ## Contributing
53 |
54 | See [CONTRIBUTING.md](CONTRIBUTING.md)
55 |
56 | ## License
57 |
58 | KaTeX is licensed under the [MIT License](http://opensource.org/licenses/MIT).
59 |
--------------------------------------------------------------------------------
/js/controls/DeviceOrientationControls.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author richt / http://richt.me
3 | * @author WestLangley / http://github.com/WestLangley
4 | *
5 | * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
6 | */
7 |
8 | THREE.DeviceOrientationControls = function ( object ) {
9 |
10 | var scope = this;
11 |
12 | this.object = object;
13 | this.object.rotation.reorder( "YXZ" );
14 |
15 | this.enabled = true;
16 |
17 | this.deviceOrientation = {};
18 | this.screenOrientation = 0;
19 |
20 | var onDeviceOrientationChangeEvent = function ( event ) {
21 |
22 | scope.deviceOrientation = event;
23 |
24 | };
25 |
26 | var onScreenOrientationChangeEvent = function () {
27 |
28 | scope.screenOrientation = window.orientation || 0;
29 |
30 | };
31 |
32 | // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
33 |
34 | var setObjectQuaternion = function () {
35 |
36 | var zee = new THREE.Vector3( 0, 0, 1 );
37 |
38 | var euler = new THREE.Euler();
39 |
40 | var q0 = new THREE.Quaternion();
41 |
42 | var q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
43 |
44 | return function ( quaternion, alpha, beta, gamma, orient ) {
45 |
46 | euler.set( beta, alpha, - gamma, 'YXZ' ); // 'ZXY' for the device, but 'YXZ' for us
47 |
48 | quaternion.setFromEuler( euler ); // orient the device
49 |
50 | quaternion.multiply( q1 ); // camera looks out the back of the device, not the top
51 |
52 | quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) ); // adjust for screen orientation
53 |
54 | }
55 |
56 | }();
57 |
58 | this.connect = function() {
59 |
60 | onScreenOrientationChangeEvent(); // run once on load
61 |
62 | window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
63 | window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );
64 |
65 | scope.enabled = true;
66 |
67 | };
68 |
69 | this.disconnect = function() {
70 |
71 | window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
72 | window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );
73 |
74 | scope.enabled = false;
75 |
76 | };
77 |
78 | this.update = function () {
79 |
80 | if ( scope.enabled === false ) return;
81 |
82 | var alpha = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) : 0; // Z
83 | var beta = scope.deviceOrientation.beta ? THREE.Math.degToRad( scope.deviceOrientation.beta ) : 0; // X'
84 | var gamma = scope.deviceOrientation.gamma ? THREE.Math.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
85 | var orient = scope.screenOrientation ? THREE.Math.degToRad( scope.screenOrientation ) : 0; // O
86 |
87 | setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
88 |
89 | };
90 |
91 | this.connect();
92 |
93 | };
94 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | }
4 | body {
5 | font-family: Arial;
6 | background-color: #222222;
7 | background: rgb(50,60,70); /* Old browsers */
8 | background: -moz-radial-gradient(center, ellipse cover, rgba(50,60,70,1) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */
9 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(50,60,70,1)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
10 | background: -webkit-radial-gradient(center, ellipse cover, rgba(50,60,70,1) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */
11 | background: -o-radial-gradient(center, ellipse cover, rgba(50,60,70,1) 0%,rgba(20,20,20,1) 100%); /* Opera 12+ */
12 | background: -ms-radial-gradient(center, ellipse cover, rgba(50,60,70,1) 0%,rgba(20,20,20,1) 100%); /* IE10+ */
13 | background: radial-gradient(ellipse at center, rgba(50,60,70,1) 0%,rgba(20,20,20,1) 100%); /* W3C */
14 |
15 | margin: 0;
16 | font-family: Arial;
17 | overflow: hidden;
18 | }
19 | #webgl_container {
20 | z-index: 10;
21 | overflow:hidden;
22 | }
23 | #canvasContainer {
24 | z-index: 50;
25 | opacity: 0.8;
26 | width:282px;
27 | position:absolute;
28 | top: 0px;
29 | right: 0px;
30 | padding:5px;
31 | overflow:hidden;
32 | background: rgb(30,35,40);
33 | }
34 | .board {
35 | width: 282px;
36 | height: 361px;
37 | padding-bottom:10px;
38 | }
39 | .tinyBoard {
40 | margin: 0 auto;
41 | background-color:#000;
42 | width: 28px;
43 | height: 28px;
44 | border: solid thin #ccc;
45 | overflow:hidden;
46 | float:right;
47 |
48 | }
49 | #draw {
50 | color: #fff;
51 | font-size:20px;
52 | text-align:left;
53 | padding: 5px 0;
54 | }
55 | .info {
56 | color: #fff;
57 | font-size:20px;
58 | text-align:right;
59 | float:left;
60 | height:37px;
61 | width:240px;
62 | }
63 | .ans {
64 | font-size: 24px;
65 | color: #fff;
66 | margin: 0 auto;
67 | background-color:#000;
68 | width: 28px;
69 | height: 28px;
70 | border: solid thin #ccc;
71 | float:right;
72 | text-align:center;
73 | }
74 | #infobox {
75 | width:350px;
76 | position:absolute;
77 | bottom:100px;
78 | left:100px;
79 | background-color:#999;
80 | opacity: 0.9;
81 |
82 |
83 | -webkit-transition: opacity 0.5s ease;
84 | -moz-transition: opacity 0.5s ease;
85 | -ms-transition: opacity 0.5s ease;
86 | -o-transition: opacity 0.5s ease;
87 | transition: opacity 0.5s ease;
88 |
89 |
90 | border: thin solid white;
91 | -webkit-user-select: none;
92 | padding: 0;
93 | margin: 0;
94 |
95 | /* box-shadow: 5px 5px 10px #000; */
96 | }
97 | #infobox:hover {
98 | /*visibility: hidden;*/
99 | }
100 | #nodeType {
101 | font-weight: bold;
102 | text-align: center;
103 | background-color: #def;
104 | padding: 5px;
105 | }
106 | #nodeInputContainer {
107 | background-color:#bcd;
108 | padding: 5px;
109 | }
110 | #calcContainer {
111 | background-color:#9ab;
112 | padding: 5px;
113 | }
114 | #nodeOutputContainer {
115 | background-color:#789;
116 | padding: 5px;
117 | }
118 | .label {
119 | float:left;
120 | margin-right: 5px;
121 | }
122 | .math {
123 | margin-top: -2px;
124 | }
--------------------------------------------------------------------------------
/css/main2.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | }
4 | body {
5 | font-family: Arial;
6 | background-color: #222222;
7 | background: rgb(60,100,140); /* Old browsers */
8 | background: -moz-radial-gradient(center, ellipse cover, rgba(60,100,140,1) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */
9 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(60,100,140,1)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
10 | background: -webkit-radial-gradient(center, ellipse cover, rgba(60,100,140,1) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */
11 | background: -o-radial-gradient(center, ellipse cover, rgba(60,100,140,1) 0%,rgba(20,20,20,1) 100%); /* Opera 12+ */
12 | background: -ms-radial-gradient(center, ellipse cover, rgba(60,100,140,1) 0%,rgba(20,20,20,1) 100%); /* IE10+ */
13 | background: radial-gradient(ellipse at center, rgba(60,100,140,1) 0%,rgba(20,20,20,1) 100%); /* W3C */
14 |
15 | margin: 0;
16 | font-family: Arial;
17 | overflow: hidden;
18 | }
19 | #webgl_container {
20 | z-index: 10;
21 | overflow:hidden;
22 | }
23 | #canvasContainer {
24 | z-index: 50;
25 | opacity: 0.8;
26 | width:282px;
27 | position:absolute;
28 | top: 0px;
29 | right: 0px;
30 | padding:5px;
31 | overflow:hidden;
32 | background: rgb(30,35,40);
33 | }
34 | .board {
35 | width: 282px;
36 | height: 361px;
37 | padding-bottom:10px;
38 | }
39 | .tinyBoard {
40 | margin: 0 auto;
41 | background-color:#000;
42 | width: 28px;
43 | height: 28px;
44 | border: solid thin #ccc;
45 | overflow:hidden;
46 | float:right;
47 |
48 | }
49 | #draw {
50 | color: #fff;
51 | font-size:20px;
52 | text-align:left;
53 | padding: 5px 0;
54 | }
55 | .info {
56 | color: #fff;
57 | font-size:20px;
58 | text-align:right;
59 | float:left;
60 | height:37px;
61 | width:240px;
62 | }
63 | .ans {
64 | font-size: 24px;
65 | color: #fff;
66 | margin: 0 auto;
67 | background-color:#000;
68 | width: 28px;
69 | height: 28px;
70 | border: solid thin #ccc;
71 | float:right;
72 | text-align:center;
73 | }
74 | #infobox {
75 | width:350px;
76 | position:absolute;
77 | bottom:100px;
78 | left:100px;
79 | background-color:#999;
80 | opacity: 0.9;
81 |
82 |
83 | -webkit-transition: opacity 0.5s ease;
84 | -moz-transition: opacity 0.5s ease;
85 | -ms-transition: opacity 0.5s ease;
86 | -o-transition: opacity 0.5s ease;
87 | transition: opacity 0.5s ease;
88 |
89 |
90 | border: thin solid white;
91 | -webkit-user-select: none;
92 | padding: 0;
93 | margin: 0;
94 |
95 | /* box-shadow: 5px 5px 10px #000; */
96 | }
97 | #infobox:hover {
98 | /*visibility: hidden;*/
99 | }
100 | #nodeType {
101 | font-weight: bold;
102 | text-align: center;
103 | background-color: #def;
104 | padding: 5px;
105 | }
106 | #nodeInputContainer {
107 | background-color:#bcd;
108 | padding: 5px;
109 | }
110 | #calcContainer {
111 | background-color:#9ab;
112 | padding: 5px;
113 | }
114 | #nodeOutputContainer {
115 | background-color:#789;
116 | padding: 5px;
117 | }
118 | .label {
119 | float:left;
120 | margin-right: 5px;
121 | }
122 | .math {
123 | margin-top: -2px;
124 | }
--------------------------------------------------------------------------------
/js/yepnope.js:
--------------------------------------------------------------------------------
1 | /*yepnope1.5.x|WTFPL*/
2 | (function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f