new progress bar, fixed onload issue, changed to tenso.rs

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules/*
+explorer/.module-cache/*

animation/animate.js

@@ -100,6 +100,7 @@ function init () {
 	requestAnimationFrame(main)
 }
 
+var freeze
 function fixdim() {
 	dimensions.update()
 
@@ -119,17 +120,22 @@ function fixdim() {
 	// }
 	var fadestart = Math.min(rect.height/2, 100)
 
-	header.style['background-color'] = 'rgba(0, 219, 157,'+Math.max(Math.min((-bottom+fadestart),1),0)+')'
+	// header.style['background-color'] = 'rgba(0, 219, 157,'+Math.max(Math.min((-bottom+fadestart),1),0)+')'
+	// header.style['display'] = -bottom+fadestart < 0 ? 'none' : 'initial'
 	header.querySelector('.smalllogo').style.opacity = Math.max(Math.min((-bottom+fadestart)*2/fadestart,1),0)
 	document.getElementById('logo').style.opacity = Math.max(Math.min((bottom-fadestart)/fadestart,1),0)
 
 
+	document.getElementById('logoimg').style.width = displaywidth
 
-	var displayheight = displaywidth * 4/15//dimensions.width > 900 ? 250 : 125
-	canvas.width = displaywidth*window.devicePixelRatio
-	canvas.style.width = displaywidth
+	if(!freeze){
+	var displayheight = displaywidth * 4/15 //dimensions.width > 900 ? 250 : 125
+	canvas.width = displayheight*window.devicePixelRatio
+	canvas.style.width = displayheight
 	canvas.height = displayheight*window.devicePixelRatio
 	canvas.style.height = displayheight
+
+	}
 }
 
 addEventListener('scroll', fixdim)
@@ -176,11 +182,10 @@ function main (time) {
 	var m = tesseractwithrotation(t, t*2, t*3, mouse.x/100    , mouse.y/100, 0)
 
 	drawtesseract(m, {
-		x: as*canvas.width + canvas.width/2, 
-		y: df*canvas.height + canvas.height/2, 
+		x: canvas.width/2, 
+		y: canvas.height/2, 
 		size: gh*canvas.height, 
-		corner_radius: 0,
-		line_width: 2
+		line_width: 2,
 	})
 
 	ctx.beginPath()

css/wau.css

@@ -39,6 +39,10 @@
     vertical-align: middle;
 }
 
+.lengle img {
+    height: .7em;
+}
+
 .shortlang {
     /*background-color: #FFEEAE;*/
 }
@@ -76,12 +80,11 @@
     opacity: 0;
 }
 .stickyheader {
-    position: fixed;
+    position: absolute;
     width: 100%;
     z-index: 3;
     text-align: right;
     line-height: 50px;
-    background-color: #00DB9D;
 }
 .headernav {
     padding-right: 3%;
@@ -92,6 +95,7 @@
     width: 100%;
     height: 47px;
     text-align: center;
+    position: relative;
 }
 .running {
     display: none
@@ -176,10 +180,17 @@ svg {
     display: inline-block;
 }
 .prog {
-    width: 400px;
-    max-width: 100%;
-    position: relative;
+    height: 4px;
+    width: 100%;
+    position: absolute;
+    bottom:0;
+    background-color: #6a6a6a;
+}
+.prog div{
+    height: 100%;
+    background-color: #00DB9D;
 }
+
 .demofooter {
     padding: 10px;
     /*padding-top: 0px;*/
@@ -199,8 +210,8 @@ svg {
 }
 #logo {
     text-align: center;
-    margin-top: 8%;
-    margin-bottom: 8%;
+    margin-top: 6%;
+    margin-bottom: 6%;
     height: 182px;
     position: relative;
     /*z-index: 4;*/
@@ -243,9 +254,10 @@ svg {
     margin-right: auto;
     pointer-events: none;
     z-index: 0;
-    background-image: url(../img/logowhite.png);
+    position: absolute;
+/*    background-image: url(../img/logowhite.png);
     background-size: cover;
-}
+*/}
 
 .desc {
     text-align: left;

explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js

@@ -1,393 +0,0 @@
-"use strict";
-
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
-
-function array_join(array, glue) {
-	var new_array = [];
-	for (var i = 0; i < array.length; i++) {
-		new_array.push(array[i]);
-		if (i != array.length - 1) new_array.push(glue);
-	}
-	return new_array;
-}
-
-var Node = (function (_React$Component) {
-	function Node(props) {
-		var _this = this;
-
-		_classCallCheck(this, Node);
-
-		_get(Object.getPrototypeOf(Node.prototype), "constructor", this).call(this, props);
-
-		this.toggleExpand = function (e) {
-			_this.setState({ expanded: !_this.state.expanded });
-		};
-
-		this.state = {
-			expanded: props.expanded
-		};
-	}
-
-	_inherits(Node, _React$Component);
-
-	_createClass(Node, [{
-		key: "render",
-		value: function render() {
-			var _props = this.props;
-			var node = _props.node;
-			var label = _props.label;
-			var expanded = this.state.expanded;
-
-			var rep;
-			if (typeof node === "string") {
-				rep = React.createElement(TextNode, { html: label === "html", node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
-			} else if (typeof node === "boolean") {
-				rep = React.createElement(BooleanNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
-			} else if (typeof node === "number") {
-				rep = React.createElement(NumberNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
-			} else if (Array.isArray(node)) {
-				rep = React.createElement(ListNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
-			} else {
-				rep = React.createElement(ObjectNode, { node: node, className: "clickable", onClick: this.toggleExpand, toggleExpand: this.toggleExpand, expanded: expanded });
-			}
-
-			if (!label) {
-				return rep;
-			}
-
-			return React.createElement(
-				"span",
-				null,
-				React.createElement(
-					"span",
-					{ className: "label clickable", onClick: this.toggleExpand },
-					label
-				),
-				": ",
-				rep
-			);
-		}
-	}]);
-
-	return Node;
-})(React.Component);
-
-var TextNode = (function (_React$Component2) {
-	function TextNode() {
-		_classCallCheck(this, TextNode);
-
-		_get(Object.getPrototypeOf(TextNode.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(TextNode, _React$Component2);
-
-	_createClass(TextNode, [{
-		key: "render",
-		value: function render() {
-			var _props2 = this.props;
-			var node = _props2.node;
-			var expanded = _props2.expanded;
-			var html = _props2.html;
-			var toggleExpand = _props2.toggleExpand;
-
-			if (expanded) {
-				var content = node;
-				if (html) {
-					var content = [];
-					CodeMirror.runMode(node, { name: "xml", htmlMode: true }, function (text, className) {
-						content.push(React.createElement(
-							"span",
-							{ className: "cm-" + className },
-							text
-						));
-					});
-				}
-				return React.createElement(
-					"span",
-					{ className: (html ? "cm-s-default html " : "") + "textNode expanded clickable", onClick: toggleExpand },
-					content
-				);
-			} else {
-				return React.createElement(
-					"span",
-					null,
-					React.createElement(
-						"span",
-						{ className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand },
-						node.substring(0, 30)
-					),
-					node.length > 30 ? React.createElement(Ellipsis, null) : ""
-				);
-			}
-		}
-	}]);
-
-	return TextNode;
-})(React.Component);
-
-var BooleanNode = (function (_React$Component3) {
-	function BooleanNode() {
-		_classCallCheck(this, BooleanNode);
-
-		_get(Object.getPrototypeOf(BooleanNode.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(BooleanNode, _React$Component3);
-
-	_createClass(BooleanNode, [{
-		key: "render",
-		value: function render() {
-			var node = this.props.node;
-
-			return React.createElement(
-				"span",
-				{ className: "booleanNode" },
-				JSON.stringify(node)
-			);
-		}
-	}]);
-
-	return BooleanNode;
-})(React.Component);
-
-var NumberNode = (function (_React$Component4) {
-	function NumberNode() {
-		_classCallCheck(this, NumberNode);
-
-		_get(Object.getPrototypeOf(NumberNode.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(NumberNode, _React$Component4);
-
-	_createClass(NumberNode, [{
-		key: "render",
-		value: function render() {
-			var node = this.props.node;
-
-			return React.createElement(
-				"span",
-				{ className: "numberNode" },
-				JSON.stringify(node)
-			);
-		}
-	}]);
-
-	return NumberNode;
-})(React.Component);
-
-var ListNode = (function (_React$Component5) {
-	function ListNode() {
-		_classCallCheck(this, ListNode);
-
-		_get(Object.getPrototypeOf(ListNode.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(ListNode, _React$Component5);
-
-	_createClass(ListNode, [{
-		key: "render",
-		value: function render() {
-			var _props3 = this.props;
-			var node = _props3.node;
-			var expanded = _props3.expanded;
-			var toggleExpand = _props3.toggleExpand;
-
-			if (expanded) {
-				return React.createElement(
-					"span",
-					{ className: "listNode expanded" },
-					React.createElement(
-						"span",
-						{ className: "clickable", onClick: toggleExpand },
-						"["
-					),
-					React.createElement("br", null),
-					React.createElement(
-						"span",
-						{ className: "indent" },
-						array_join(node.map(function (e, i) {
-							return React.createElement(Node, { node: e, key: i });
-						}), React.createElement(Comma, { br: true }))
-					),
-					React.createElement("br", null),
-					React.createElement(
-						"span",
-						{ onClick: toggleExpand },
-						"]"
-					)
-				);
-			} else {
-				return React.createElement(
-					"span",
-					{ className: "listNode clickable", onClick: toggleExpand },
-					"[",
-					node.length,
-					"]"
-				);
-			}
-		}
-	}]);
-
-	return ListNode;
-})(React.Component);
-
-var ObjectNode = (function (_React$Component6) {
-	function ObjectNode() {
-		_classCallCheck(this, ObjectNode);
-
-		_get(Object.getPrototypeOf(ObjectNode.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(ObjectNode, _React$Component6);
-
-	_createClass(ObjectNode, [{
-		key: "render",
-		value: function render() {
-			var _props4 = this.props;
-			var node = _props4.node;
-			var expanded = _props4.expanded;
-			var toggleExpand = _props4.toggleExpand;
-
-			if (null === node) {
-				return React.createElement(
-					"span",
-					{ className: "nullNode" },
-					"null"
-				);
-			} else if (expanded) {
-				return React.createElement(
-					"span",
-					{ className: "objectNode expanded" },
-					React.createElement(
-						"span",
-						{ className: "clickable", onClick: toggleExpand },
-						"{"
-					),
-					React.createElement("br", null),
-					React.createElement(
-						"span",
-						{ className: "indent" },
-						array_join(Object.keys(node).map(function (key) {
-							return React.createElement(Node, { node: node[key], label: key, key: key });
-						}), React.createElement(Comma, { br: true }))
-					),
-					React.createElement("br", null),
-					React.createElement(
-						"span",
-						{ onClick: toggleExpand },
-						"}"
-					)
-				);
-			} else {
-				var keys = Object.keys(node),
-				    toolong = false;
-				if (keys.length > 4) {
-					keys = keys.slice(0, 4);
-					toolong = true;
-				}
-				var contents = array_join(keys.map(function (k) {
-					return React.createElement(
-						"span",
-						{ className: "label" },
-						k
-					);
-				}), React.createElement(Comma, null));
-				return React.createElement(
-					"span",
-					{ className: "objectNode clickable", onClick: toggleExpand },
-					"{",
-					contents,
-					toolong ? React.createElement(Ellipsis, null) : "",
-					"}"
-				);
-			}
-		}
-	}]);
-
-	return ObjectNode;
-})(React.Component);
-
-var Comma = (function (_React$Component7) {
-	function Comma() {
-		_classCallCheck(this, Comma);
-
-		_get(Object.getPrototypeOf(Comma.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(Comma, _React$Component7);
-
-	_createClass(Comma, [{
-		key: "render",
-		value: function render() {
-			var br = this.props.br;
-
-			return React.createElement(
-				"span",
-				{ className: "comma" },
-				", ",
-				br ? React.createElement("br", null) : ""
-			);
-		}
-	}]);
-
-	return Comma;
-})(React.Component);
-
-var Ellipsis = (function (_React$Component8) {
-	function Ellipsis() {
-		_classCallCheck(this, Ellipsis);
-
-		_get(Object.getPrototypeOf(Ellipsis.prototype), "constructor", this).apply(this, arguments);
-	}
-
-	_inherits(Ellipsis, _React$Component8);
-
-	_createClass(Ellipsis, [{
-		key: "render",
-		value: function render() {
-			return React.createElement(
-				"span",
-				{ className: "ellipsis" },
-				"..."
-			);
-		}
-	}]);
-
-	return Ellipsis;
-})(React.Component);
-
-var simplething = {
-	hello: 42,
-	derp: 324,
-	wumbo: [1, 2, 3, 4, "hello", {
-		blah: 32,
-		asdf: [],
-		walp: 32,
-		strings: "asdfsd"
-	}],
-	merp: {
-		blah: 32,
-		asdf: [],
-		walp: 32,
-		strings: "asdfsd"
-	},
-	strings: "asdfsd",
-	asdoijfo: {
-		strings: "asdfsd",
-		adfds: {
-			asdf: {
-				asdfadsf: {},
-				merp: 32
-			}
-		}
-	}
-}
-
-// React.render(<Node node={simplething} />, document.getElementById('explorer'))
-;

explorer/.module-cache/a833cdc804f637f590c1fdf859f154ba446f4d50.js

@@ -1,33 +0,0 @@
-class Dora extends Component {
-	
-	constructor(props){
-		super(props)
-		this.state = {
-			expanded: false
-		}
-	}
-
-	render(){
-
-		var {node} = this.props;
-		var {expanded} = this.state;
-
-		if(Array.isArray(node)){
-			return node.map(x => React.createElement(Dora, {node: x}))
-		}else if(typeof node == "number" || "boolean" || "string"){
-			return React.createElement("span", null, JSON.stringify(node))
-		}else{
-			if(expanded){
-				return Object.keys(node).map(key => {
-					return React.createElement("div", null, React.createElement(Dora, {node: key}), ": ", React.createElement(Dora, {node: node[key]}), ",")
-				})	
-			}else{
-				return React.createElement("span", {onClick: e => this.setState({expanded: true})}, "click me to expand")
-			}
-			
-		}
-	}
-}
-
-
-React.render(React.createElement(Dora, {node: window}), document.getElementById('explorer'))

explorer/.module-cache/dca5af936ce0fef1e04b7ffc040275e21f24f20b.js

@@ -1,33 +0,0 @@
-class Dora extends React.Component {
-	
-	constructor(props){
-		super(props)
-		this.state = {
-			expanded: false
-		}
-	}
-
-	render(){
-
-		var {node} = this.props;
-		var {expanded} = this.state;
-
-		if(Array.isArray(node)){
-			return node.map(x => React.createElement(Dora, {node: x}))
-		}else if(typeof node == "number" || "boolean" || "string"){
-			return React.createElement("span", null, JSON.stringify(node))
-		}else{
-			if(expanded){
-				return Object.keys(node).map(key => {
-					return React.createElement("div", null, React.createElement(Dora, {node: key}), ": ", React.createElement(Dora, {node: node[key]}), ",")
-				})	
-			}else{
-				return React.createElement("span", {onClick: e => this.setState({expanded: true})}, "click me to expand")
-			}
-			
-		}
-	}
-}
-
-
-React.render(React.createElement(Dora, {node: window}), document.getElementById('explorer'))

explorer/.module-cache/manifest/11df343c069ebf0a9691a0f47695eea12a3246f2.json

@@ -1 +0,0 @@
-{".js":"11df343c069ebf0a9691a0f47695eea12a3246f2.js"}

explorer/.module-cache/manifest/3f0e760c414349d4f3aef786a00f95e1bbacad28.json

@@ -1 +0,0 @@
-{".js":"3f0e760c414349d4f3aef786a00f95e1bbacad28.js"}

explorer/.module-cache/manifest/a833cdc804f637f590c1fdf859f154ba446f4d50.json

@@ -1 +0,0 @@
-{".js":"a833cdc804f637f590c1fdf859f154ba446f4d50.js"}

explorer/.module-cache/manifest/dca5af936ce0fef1e04b7ffc040275e21f24f20b.json

@@ -1 +0,0 @@
-{".js":"dca5af936ce0fef1e04b7ffc040275e21f24f20b.js"}

explorer/explorer.js

@@ -6,7 +6,7 @@ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_ag
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 function array_join(array, glue) {
 	var new_array = [];
@@ -18,6 +18,8 @@ function array_join(array, glue) {
 }
 
 var Node = (function (_React$Component) {
+	_inherits(Node, _React$Component);
+
 	function Node(props) {
 		var _this = this;
 
@@ -34,8 +36,6 @@ var Node = (function (_React$Component) {
 		};
 	}
 
-	_inherits(Node, _React$Component);
-
 	_createClass(Node, [{
 		key: "render",
 		value: function render() {
@@ -79,14 +79,14 @@ var Node = (function (_React$Component) {
 })(React.Component);
 
 var TextNode = (function (_React$Component2) {
+	_inherits(TextNode, _React$Component2);
+
 	function TextNode() {
 		_classCallCheck(this, TextNode);
 
 		_get(Object.getPrototypeOf(TextNode.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(TextNode, _React$Component2);
-
 	_createClass(TextNode, [{
 		key: "render",
 		value: function render() {
@@ -100,7 +100,7 @@ var TextNode = (function (_React$Component2) {
 				var content = node;
 				if (html) {
 					var content = [];
-					CodeMirror.runMode(node, { name: "xml", htmlMode: true }, function (text, className) {
+					CodeMirror.runMode(node, { name: 'xml', htmlMode: true }, function (text, className) {
 						content.push(React.createElement(
 							"span",
 							{ className: "cm-" + className },
@@ -122,7 +122,7 @@ var TextNode = (function (_React$Component2) {
 						{ className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand },
 						node.substring(0, 30)
 					),
-					node.length > 30 ? React.createElement(Ellipsis, null) : ""
+					node.length > 30 ? React.createElement(Ellipsis, null) : ''
 				);
 			}
 		}
@@ -132,14 +132,14 @@ var TextNode = (function (_React$Component2) {
 })(React.Component);
 
 var BooleanNode = (function (_React$Component3) {
+	_inherits(BooleanNode, _React$Component3);
+
 	function BooleanNode() {
 		_classCallCheck(this, BooleanNode);
 
 		_get(Object.getPrototypeOf(BooleanNode.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(BooleanNode, _React$Component3);
-
 	_createClass(BooleanNode, [{
 		key: "render",
 		value: function render() {
@@ -157,14 +157,14 @@ var BooleanNode = (function (_React$Component3) {
 })(React.Component);
 
 var NumberNode = (function (_React$Component4) {
+	_inherits(NumberNode, _React$Component4);
+
 	function NumberNode() {
 		_classCallCheck(this, NumberNode);
 
 		_get(Object.getPrototypeOf(NumberNode.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(NumberNode, _React$Component4);
-
 	_createClass(NumberNode, [{
 		key: "render",
 		value: function render() {
@@ -182,14 +182,14 @@ var NumberNode = (function (_React$Component4) {
 })(React.Component);
 
 var ListNode = (function (_React$Component5) {
+	_inherits(ListNode, _React$Component5);
+
 	function ListNode() {
 		_classCallCheck(this, ListNode);
 
 		_get(Object.getPrototypeOf(ListNode.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(ListNode, _React$Component5);
-
 	_createClass(ListNode, [{
 		key: "render",
 		value: function render() {
@@ -238,14 +238,14 @@ var ListNode = (function (_React$Component5) {
 })(React.Component);
 
 var ObjectNode = (function (_React$Component6) {
+	_inherits(ObjectNode, _React$Component6);
+
 	function ObjectNode() {
 		_classCallCheck(this, ObjectNode);
 
 		_get(Object.getPrototypeOf(ObjectNode.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(ObjectNode, _React$Component6);
-
 	_createClass(ObjectNode, [{
 		key: "render",
 		value: function render() {
@@ -303,7 +303,7 @@ var ObjectNode = (function (_React$Component6) {
 					{ className: "objectNode clickable", onClick: toggleExpand },
 					"{",
 					contents,
-					toolong ? React.createElement(Ellipsis, null) : "",
+					toolong ? React.createElement(Ellipsis, null) : '',
 					"}"
 				);
 			}
@@ -314,14 +314,14 @@ var ObjectNode = (function (_React$Component6) {
 })(React.Component);
 
 var Comma = (function (_React$Component7) {
+	_inherits(Comma, _React$Component7);
+
 	function Comma() {
 		_classCallCheck(this, Comma);
 
 		_get(Object.getPrototypeOf(Comma.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(Comma, _React$Component7);
-
 	_createClass(Comma, [{
 		key: "render",
 		value: function render() {
@@ -331,7 +331,7 @@ var Comma = (function (_React$Component7) {
 				"span",
 				{ className: "comma" },
 				", ",
-				br ? React.createElement("br", null) : ""
+				br ? React.createElement("br", null) : ''
 			);
 		}
 	}]);
@@ -340,14 +340,14 @@ var Comma = (function (_React$Component7) {
 })(React.Component);
 
 var Ellipsis = (function (_React$Component8) {
+	_inherits(Ellipsis, _React$Component8);
+
 	function Ellipsis() {
 		_classCallCheck(this, Ellipsis);
 
 		_get(Object.getPrototypeOf(Ellipsis.prototype), "constructor", this).apply(this, arguments);
 	}
 
-	_inherits(Ellipsis, _React$Component8);
-
 	_createClass(Ellipsis, [{
 		key: "render",
 		value: function render() {
@@ -387,7 +387,6 @@ var simplething = {
 			}
 		}
 	}
-}
+};
 
 // React.render(<Node node={simplething} />, document.getElementById('explorer'))
-;

index.html

@@ -29,6 +29,7 @@
 	</div>
 	<div id="logo" class="header">
 		<canvas id="canvas"></canvas>
+		<img src="img/logowhite.png" id="logoimg">
 	</div>
 
 	</div>
@@ -63,12 +64,12 @@
 						</div>
 						<hr>
 						<div class="editor"></div>
-						<div class="hint">
+						<!-- <div class="hint">
 								Hint: you can, like, edit this code yo
-						</div>
+						</div> -->
 						<div class="running">
 							<div class="out">Initializing Magic...</div>
-							<progress class="prog" value="0" max="1"></progress>
+							<div class="prog"><div></div></div>
 						</div>
 						<div class="notrunning">
 							<div class="runbutton">Run Code</div>
@@ -121,7 +122,7 @@
 			<h2 id="get_started">Installation</h2>
 			<div class="npm" >npm install tesseract.js</div>
 		
-			<div class="npm longasstag">&lt;script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.2015.07.26.js"&gt;&lt;/script&gt;</div>
+			<div class="npm longasstag">&lt;script src="http://tenso.rs/tesseract.js"&gt;&lt;/script&gt;</div>
 			<h2>Methods</h2>
 			<h3>Tesseract.recognize( img [, callback(err,result)] )</h3>
 			Go Kevin! You can write this!
@@ -141,12 +142,14 @@
 <div class='footer'>
 	<div class="columnwrap">
 		<div class="column">
-			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.” </span>
+			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.”
+			<br>
+			Made with <img src="img/keyboard.png"> by <a href="https://antimatter15.com/">antimatter15</a> and <a href="http://omrelli.ug/">omrelli.ug</a></span>
 		</div>
 	</div>
 </div>
 
- 	<script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.2015.07.26.js"></script>
+ 	<script src="http://tenso.rs/tesseract.js"></script>
 
 	<script src="main.js"></script>
 

index_dev.html

@@ -29,6 +29,7 @@
 	</div>
 	<div id="logo" class="header">
 		<canvas id="canvas"></canvas>
+		<img src="img/logowhite.png" id="logoimg">
 	</div>
 
 	</div>
@@ -63,12 +64,12 @@
 						</div>
 						<hr>
 						<div class="editor"></div>
-						<div class="hint">
+						<!-- <div class="hint">
 								Hint: you can, like, edit this code yo
-						</div>
+						</div> -->
 						<div class="running">
 							<div class="out">Initializing Magic...</div>
-							<progress class="prog" value="0" max="1"></progress>
+							<div class="prog"><div></div></div>
 						</div>
 						<div class="notrunning">
 							<div class="runbutton">Run Code</div>
@@ -141,7 +142,9 @@
 <div class='footer'>
 	<div class="columnwrap">
 		<div class="column">
-			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.” </span>
+			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.”
+			<br>
+			Made with <img src="img/keyboard.png"> by <a href="https://antimatter15.com/">antimatter15</a> and <a href="http://omrelli.ug/">omrelli.ug</a></span>
 		</div>
 	</div>
 </div>

main.js

@@ -1,226 +1,220 @@
-function builddemo(id, val){
-    var demo = document.getElementById(id)
-    var prog = demo.querySelector('.prog')
-    var out = demo.querySelector('.out')
-
-    var disp = demo.querySelector('.display')
-    var dctx = disp.getContext('2d')
-    disp.width = 0
-    disp.height = 0
-
-    demo.querySelector('.runbutton').onclick = function(){
-        setrunning(0)
-        run(editor)
+'use strict';
+
+function builddemo(id, val) {
+    var demo = document.getElementById(id);
+    var prog = demo.querySelector('.prog');
+    var out = demo.querySelector('.out');
+
+    var disp = demo.querySelector('.display');
+    var dctx = disp.getContext('2d');
+    disp.width = 0;
+    disp.height = 0;
+
+    demo.querySelector('.runbutton').onclick = function () {
+        setrunning(0);
+        run(editor);
+        editor.clear();
+        prog.setValue(0);
+    };
+
+    prog.setValue = function (v) {
+        prog.querySelector('div').style.width = v * 100 + '%';
+    };
+
+    function show_progress(p) {
+
+        setrunning(0);
+        console.log(p);
+        if (p.loaded_lang_model) prog.setValue(p.loaded_lang_model);
+        if (p.recognized) prog.setValue(p.recognized);
+        out.innerText = JSON.stringify(p);
     }
 
-    function show_progress(p){
-
-        setrunning(0)
-        console.log(p)
-        if(p.loaded_lang_model) prog.value = p.loaded_lang_model
-        if(p.recognized) prog.value = p.recognized
-        out.innerText = JSON.stringify(p)
-        out.innerText = JSON.stringify(p)
-
-    }
-
-    function setrunning(v){
+    function setrunning(v) {
         if (v == 1) {
-            demo.querySelector('.running').style.display = 'none'
-            demo.querySelector('.notrunning').style.display = 'block'
+            demo.querySelector('.running').style.display = 'none';
+            demo.querySelector('.notrunning').style.display = 'block';
             // out.style.visibility = 'hidden'
-        }
-        else {
-            demo.querySelector('.running').style.display = 'block'
-            demo.querySelector('.notrunning').style.display = 'none'
-        }
+        } else {
+                demo.querySelector('.running').style.display = 'block';
+                demo.querySelector('.notrunning').style.display = 'none';
+            }
     }
 
     function display(result) {
 
-        React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff"}), document.getElementById("explorer"));
-
-        setrunning(1)
+        React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff" }), document.getElementById("explorer"));
 
-        out.innerText = "Lightning Speeeeeeed"
-        prog.value = 0
+        setrunning(1);
 
-        console.log(result)
+        out.innerText = "Lightning Speeeeeeed";
+        prog.value = 0;
 
-        disp.width = demo.querySelector('.to_ocr').naturalWidth
-        disp.height = demo.querySelector('.to_ocr').naturalHeight
+        console.log(result);
 
-        disp.style.width = demo.querySelector('.to_ocr').offsetWidth
-        disp.style.height = demo.querySelector('.to_ocr').offsetHeight
+        disp.width = demo.querySelector('.to_ocr').naturalWidth;
+        disp.height = demo.querySelector('.to_ocr').naturalHeight;
 
+        disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
+        disp.style.height = demo.querySelector('.to_ocr').offsetHeight;
 
-        dctx.shadowColor = "rgba(255,255,255,.1)"
+        dctx.shadowColor = "rgba(255,255,255,.1)";
         dctx.shadowOffsetX = 0;
         dctx.shadowOffsetY = 0;
         dctx.shadowBlur = 10;
 
-        dctx.fillRect(0,0,disp.width, disp.height)
-
-        var m  = result.words.map(function(w){
+        dctx.fillRect(0, 0, disp.width, disp.height);
 
-            var b = w.bbox
-            dctx.font = '20px Times'
-            var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times"
+        var m = result.words.map(function (w) {
 
+            var b = w.bbox;
+            dctx.font = '20px Times';
+            var font = 20 * (b.x1 - b.x0) / dctx.measureText(w.text).width + "px Times";
 
-            var k = function(){
-                dctx.font = font
+            var k = function k() {
+                dctx.font = font;
                 dctx.fillText(w.text, b.x0, w.baseline.y0);
-                return font
-            }
+                return font;
+            };
 
-            return k
-        })
+            return k;
+        });
 
-        var times = 0
-        var maxtimes = m.length + 100
-        function draw(i){
+        var times = 0;
+        var maxtimes = m.length + 100;
+        function draw(i) {
 
-            times++
+            times++;
             // dctx.fillStyle="rgba(30, 29, 49, .8)"
-            dctx.fillStyle="rgba(0, 219, 157, "+Math.min(i/100,1)+")"
+            dctx.fillStyle = "rgba(0, 219, 157, " + Math.min(i / 100, 1) + ")";
+            // dctx.fillStyle="rgba(0, 219, 199, "+Math.min(i/100,1)+")"
             // dctx.globalAlpha = .1;
-            dctx.clearRect(0,0,disp.width, disp.height)
-            dctx.fillRect(0,0,disp.width, disp.height)
+            dctx.clearRect(0, 0, disp.width, disp.height);
+            dctx.fillRect(0, 0, disp.width, disp.height);
 
-            for (var j = 0; j < Math.min(i,m.length); j++) {
-                var asdf = Math.min(Math.max(i - j,0), 100)
-                dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")"
-                m[j]()
+            for (var j = 0; j < Math.min(i, m.length); j++) {
+                var asdf = Math.min(Math.max(i - j, 0), 100);
+                dctx.fillStyle = "rgba(255,255,255," + asdf * .01 + ")";
+                m[j]();
             };
 
-            if(i<maxtimes){
-                setTimeout(function(){
-                    draw(i+1)
-                },10)                   
-            }
-            else{
-                console.log('done')
+            if (i < maxtimes) {
+                setTimeout(function () {
+                    draw(i + 1);
+                }, 10);
+            } else {
+                console.log('done');
             }
         }
-        draw(0)
-        result.words.forEach(function(word, index){
-            var wdiv = document.createElement('div')
-            wdiv.innerText = word.text+' '
-            wdiv.style['font-family'] = "Times"
-            wdiv.style.position = 'absolute'
-            var to_ocr = document.querySelector('.to_ocr')
-            var scale = to_ocr.offsetHeight / to_ocr.naturalHeight
-            wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale
-            wdiv.style.color = "rgba(0,0,0,0)"
-            wdiv.style.top = word.bbox.y0 * scale
-            wdiv.style.left = word.bbox.x0 * scale
-            wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale
-            wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale
-            document.querySelector('.ocroutput').appendChild(wdiv)
-        })
+        draw(0);
+        result.words.forEach(function (word, index) {
+            var wdiv = document.createElement('div');
+            wdiv.innerText = word.text + ' ';
+            wdiv.style['font-family'] = "Times";
+            wdiv.style.position = 'absolute';
+            var to_ocr = document.querySelector('.to_ocr');
+            var scale = to_ocr.offsetHeight / to_ocr.naturalHeight;
+            wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale;
+            wdiv.style.color = "rgba(0,0,0,0)";
+            wdiv.style.top = word.bbox.y0 * scale;
+            wdiv.style.left = word.bbox.x0 * scale;
+            wdiv.style.height = (word.bbox.y1 - word.bbox.y0) * scale;
+            wdiv.style.width = (word.bbox.x1 - word.bbox.x0) * scale;
+            document.querySelector('.ocroutput').appendChild(wdiv);
+        });
     }
 
-    window.addEventListener('resize', function() {
-        disp.style.width = demo.querySelector('.to_ocr').offsetWidth
-        disp.style.height = demo.querySelector('.to_ocr').offsetHeight
-    })
+    window.addEventListener('resize', function () {
+        disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
+        disp.style.height = demo.querySelector('.to_ocr').offsetHeight;
+    });
 
-    function run(c){
-        eval(c.getValue())
+    function run(c) {
+        eval(c.getValue());
     }
 
-    var editor = CodeMirror(demo.querySelector('.editor'),{
+    var editor = CodeMirror(demo.querySelector('.editor'), {
         // lineNumbers: true,
         viewportMargin: Infinity,
         value: val
     });
 
-    var sc = demo.querySelector('.demoheader')
-    var scdiv = document.createElement('div')
-    sc.appendChild(scdiv)
-    scdiv.className = 'CodeMirror cm-s-default'
+    var sc = demo.querySelector('.demoheader');
+    var scdiv = document.createElement('div');
+    sc.appendChild(scdiv);
+    scdiv.className = 'CodeMirror cm-s-default';
     // scdiv.className = 'cm-s-default'
-    CodeMirror.runMode('<script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.2015.07.26.js"></script>', {
+    CodeMirror.runMode('<script src="http://tenso.rs/tesseract.js"></script>', {
         name: 'xml',
         htmlMode: true
-    }, scdiv)
+    }, scdiv);
 
     // var scripttag = CodeMirror(,{
     //  mode: {name: 'xml', htmlMode: true},
     //  readOnly: 'nocursor',
     //  value:
     // });
-    editor.clear = function(){
-        dctx.clearRect(0,0,disp.width, disp.height)
-        document.querySelector('.ocroutput').innerHTML = ''
-
-    }
+    editor.clear = function () {
+        dctx.clearRect(0, 0, disp.width, disp.height);
+        document.querySelector('.ocroutput').innerHTML = '';
+    };
 
-    editor.img = demo.querySelector('.to_ocr')
+    editor.img = demo.querySelector('.to_ocr');
 
-    editor.run = function(){
+    editor.run = function () {
 
         if (editor.img.complete) {
-            run(editor)
-        } else{
-            editor.img.onload = function(){
-                run(editor)
-            }
+            run(editor);
+        } else {
+            editor.img.onload = function () {
+                run(editor);
+                editor.img.onload = function () {};
+            };
         }
-    }
+    };
 
-    return editor
+    return editor;
 }
 
-setTimeout(function(){
-    document.getElementById('wow').className += ' opaque'
-}, 100) 
-
-var wow = builddemo('wow', 
-"var img = demo.querySelector('img.to_ocr')\n\n\
-Tesseract\n\
-  .recognize( img, {\n\
-    progress: show_progress} )\n\
-  .then( display ) // scroll down for full output ")
-
-wow.run()
-
-
-var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'))
-var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'))
-var langs = ['eng', 'chi_sim', 'rus', 'meme']
-
-function setlang(i){
-    tabs.forEach(function(t){
-        t.className = 'langlabel'
-    })
-    tabs[i].className = 'langlabel selected'
-    console.log(tabs[i])
-    wow.setValue( 
-         "var img = demo.querySelector('img.to_ocr')\n\n" 
-        +"Tesseract\n" 
-        +"  .recognize( img, {\n"
-        +"    progress: show_progress, lang: '"+langs[i]+"'} )\n" 
-        +"  .then( display ) // scroll down for full output ")
-    wow.img.src = 'img/'+langs[i]+'.png'
-    wow.clear()
+setTimeout(function () {
+    document.getElementById('wow').className += ' opaque';
+}, 100);
 
-}
+var wow = builddemo('wow', "var img = demo.querySelector('img.to_ocr')\n\n" + "Tesseract\n" + "  .recognize( img, {\n" + "    progress: show_progress} )\n" + "  .then( display ) // scroll down for full output\n" + "                   // you can edit this code");
 
+wow.run();
 
-ltabs.forEach(function(ltab,i){
-    ltab.onclick = function(){
-        setlang(i)
-    }
-})
+var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'));
+var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'));
+var langs = ['eng', 'chi_sim', 'rus', 'meme'];
+var langims = langs.map(function (lang) {
+    var limg = new Image();
+    limg.src = 'img/' + lang + '.png';
+    return limg;
+});
 
+function setlang(i) {
+    tabs.forEach(function (t) {
+        t.className = 'langlabel';
+    });
+    tabs[i].className = 'langlabel selected';
+    console.log(tabs[i]);
+    wow.setValue("var img = demo.querySelector('img.to_ocr')\n\n" + "Tesseract\n" + "  .recognize( img, {\n" + "    progress: show_progress, lang: '" + langs[i] + "'} )\n" + "  .then( display ) // scroll down for full output\n" + "                   // you can edit this code");
+    wow.img.src = 'img/' + langs[i] + '.png';
+    wow.clear();
+}
 
-tabs.forEach(function(tab,i){
-    tab.onclick = function(){
-       setlang(i)
-    }
-})
+ltabs.forEach(function (ltab, i) {
+    ltab.onclick = function () {
+        setlang(i);
+    };
+});
+
+tabs.forEach(function (tab, i) {
+    tab.onclick = function () {
+        setlang(i);
+    };
+});
 // document.querySelector('.getStarted')[0].onclick = function(){
 //  location.href = '#'
 //  location.href = '#get_started'

main_dev.js

@@ -1,226 +1,220 @@
-function builddemo(id, val){
-    var demo = document.getElementById(id)
-    var prog = demo.querySelector('.prog')
-    var out = demo.querySelector('.out')
-
-    var disp = demo.querySelector('.display')
-    var dctx = disp.getContext('2d')
-    disp.width = 0
-    disp.height = 0
-
-    demo.querySelector('.runbutton').onclick = function(){
-        setrunning(0)
-        run(editor)
+'use strict';
+
+function builddemo(id, val) {
+    var demo = document.getElementById(id);
+    var prog = demo.querySelector('.prog');
+    var out = demo.querySelector('.out');
+
+    var disp = demo.querySelector('.display');
+    var dctx = disp.getContext('2d');
+    disp.width = 0;
+    disp.height = 0;
+
+    demo.querySelector('.runbutton').onclick = function () {
+        setrunning(0);
+        run(editor);
+        editor.clear();
+        prog.setValue(0);
+    };
+
+    prog.setValue = function (v) {
+        prog.querySelector('div').style.width = v * 100 + '%';
+    };
+
+    function show_progress(p) {
+
+        setrunning(0);
+        console.log(p);
+        if (p.loaded_lang_model) prog.setValue(p.loaded_lang_model);
+        if (p.recognized) prog.setValue(p.recognized);
+        out.innerText = JSON.stringify(p);
     }
 
-    function show_progress(p){
-
-        setrunning(0)
-        console.log(p)
-        if(p.loaded_lang_model) prog.value = p.loaded_lang_model
-        if(p.recognized) prog.value = p.recognized
-        out.innerText = JSON.stringify(p)
-        out.innerText = JSON.stringify(p)
-
-    }
-
-    function setrunning(v){
+    function setrunning(v) {
         if (v == 1) {
-            demo.querySelector('.running').style.display = 'none'
-            demo.querySelector('.notrunning').style.display = 'block'
+            demo.querySelector('.running').style.display = 'none';
+            demo.querySelector('.notrunning').style.display = 'block';
             // out.style.visibility = 'hidden'
-        }
-        else {
-            demo.querySelector('.running').style.display = 'block'
-            demo.querySelector('.notrunning').style.display = 'none'
-        }
+        } else {
+                demo.querySelector('.running').style.display = 'block';
+                demo.querySelector('.notrunning').style.display = 'none';
+            }
     }
 
     function display(result) {
 
-        React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff"}), document.getElementById("explorer"));
-
-        setrunning(1)
+        React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo_plz_click_stuff" }), document.getElementById("explorer"));
 
-        out.innerText = "Lightning Speeeeeeed"
-        prog.value = 0
+        setrunning(1);
 
-        console.log(result)
+        out.innerText = "Lightning Speeeeeeed";
+        prog.value = 0;
 
-        disp.width = demo.querySelector('.to_ocr').naturalWidth
-        disp.height = demo.querySelector('.to_ocr').naturalHeight
+        console.log(result);
 
-        disp.style.width = demo.querySelector('.to_ocr').offsetWidth
-        disp.style.height = demo.querySelector('.to_ocr').offsetHeight
+        disp.width = demo.querySelector('.to_ocr').naturalWidth;
+        disp.height = demo.querySelector('.to_ocr').naturalHeight;
 
+        disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
+        disp.style.height = demo.querySelector('.to_ocr').offsetHeight;
 
-        dctx.shadowColor = "rgba(255,255,255,.1)"
+        dctx.shadowColor = "rgba(255,255,255,.1)";
         dctx.shadowOffsetX = 0;
         dctx.shadowOffsetY = 0;
         dctx.shadowBlur = 10;
 
-        dctx.fillRect(0,0,disp.width, disp.height)
-
-        var m  = result.words.map(function(w){
+        dctx.fillRect(0, 0, disp.width, disp.height);
 
-            var b = w.bbox
-            dctx.font = '20px Times'
-            var font = 20*(b.x1-b.x0)/dctx.measureText(w.text).width+"px Times"
+        var m = result.words.map(function (w) {
 
+            var b = w.bbox;
+            dctx.font = '20px Times';
+            var font = 20 * (b.x1 - b.x0) / dctx.measureText(w.text).width + "px Times";
 
-            var k = function(){
-                dctx.font = font
+            var k = function k() {
+                dctx.font = font;
                 dctx.fillText(w.text, b.x0, w.baseline.y0);
-                return font
-            }
+                return font;
+            };
 
-            return k
-        })
+            return k;
+        });
 
-        var times = 0
-        var maxtimes = m.length + 100
-        function draw(i){
+        var times = 0;
+        var maxtimes = m.length + 100;
+        function draw(i) {
 
-            times++
+            times++;
             // dctx.fillStyle="rgba(30, 29, 49, .8)"
-            dctx.fillStyle="rgba(0, 219, 157, "+Math.min(i/100,1)+")"
+            dctx.fillStyle = "rgba(0, 219, 157, " + Math.min(i / 100, 1) + ")";
+            // dctx.fillStyle="rgba(0, 219, 199, "+Math.min(i/100,1)+")"
             // dctx.globalAlpha = .1;
-            dctx.clearRect(0,0,disp.width, disp.height)
-            dctx.fillRect(0,0,disp.width, disp.height)
+            dctx.clearRect(0, 0, disp.width, disp.height);
+            dctx.fillRect(0, 0, disp.width, disp.height);
 
-            for (var j = 0; j < Math.min(i,m.length); j++) {
-                var asdf = Math.min(Math.max(i - j,0), 100)
-                dctx.fillStyle = "rgba(255,255,255,"+asdf*.01+")"
-                m[j]()
+            for (var j = 0; j < Math.min(i, m.length); j++) {
+                var asdf = Math.min(Math.max(i - j, 0), 100);
+                dctx.fillStyle = "rgba(255,255,255," + asdf * .01 + ")";
+                m[j]();
             };
 
-            if(i<maxtimes){
-                setTimeout(function(){
-                    draw(i+1)
-                },10)                   
-            }
-            else{
-                console.log('done')
+            if (i < maxtimes) {
+                setTimeout(function () {
+                    draw(i + 1);
+                }, 10);
+            } else {
+                console.log('done');
             }
         }
-        draw(0)
-        result.words.forEach(function(word, index){
-            var wdiv = document.createElement('div')
-            wdiv.innerText = word.text+' '
-            wdiv.style['font-family'] = "Times"
-            wdiv.style.position = 'absolute'
-            var to_ocr = document.querySelector('.to_ocr')
-            var scale = to_ocr.offsetHeight / to_ocr.naturalHeight
-            wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale
-            wdiv.style.color = "rgba(0,0,0,0)"
-            wdiv.style.top = word.bbox.y0 * scale
-            wdiv.style.left = word.bbox.x0 * scale
-            wdiv.style.height = (word.bbox.y1 - word.bbox.y0)*scale
-            wdiv.style.width = (word.bbox.x1 - word.bbox.x0)*scale
-            document.querySelector('.ocroutput').appendChild(wdiv)
-        })
+        draw(0);
+        result.words.forEach(function (word, index) {
+            var wdiv = document.createElement('div');
+            wdiv.innerText = word.text + ' ';
+            wdiv.style['font-family'] = "Times";
+            wdiv.style.position = 'absolute';
+            var to_ocr = document.querySelector('.to_ocr');
+            var scale = to_ocr.offsetHeight / to_ocr.naturalHeight;
+            wdiv.style['font-size'] = parseFloat(m[index]().split('px')[0]) * scale;
+            wdiv.style.color = "rgba(0,0,0,0)";
+            wdiv.style.top = word.bbox.y0 * scale;
+            wdiv.style.left = word.bbox.x0 * scale;
+            wdiv.style.height = (word.bbox.y1 - word.bbox.y0) * scale;
+            wdiv.style.width = (word.bbox.x1 - word.bbox.x0) * scale;
+            document.querySelector('.ocroutput').appendChild(wdiv);
+        });
     }
 
-    window.addEventListener('resize', function() {
-        disp.style.width = demo.querySelector('.to_ocr').offsetWidth
-        disp.style.height = demo.querySelector('.to_ocr').offsetHeight
-    })
+    window.addEventListener('resize', function () {
+        disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
+        disp.style.height = demo.querySelector('.to_ocr').offsetHeight;
+    });
 
-    function run(c){
-        eval(c.getValue())
+    function run(c) {
+        eval(c.getValue());
     }
 
-    var editor = CodeMirror(demo.querySelector('.editor'),{
+    var editor = CodeMirror(demo.querySelector('.editor'), {
         // lineNumbers: true,
         viewportMargin: Infinity,
         value: val
     });
 
-    var sc = demo.querySelector('.demoheader')
-    var scdiv = document.createElement('div')
-    sc.appendChild(scdiv)
-    scdiv.className = 'CodeMirror cm-s-default'
+    var sc = demo.querySelector('.demoheader');
+    var scdiv = document.createElement('div');
+    sc.appendChild(scdiv);
+    scdiv.className = 'CodeMirror cm-s-default';
     // scdiv.className = 'cm-s-default'
     CodeMirror.runMode('<script src="http://localhost:1234/master/lib/Tesseract_dev.js"></script>', {
         name: 'xml',
         htmlMode: true
-    }, scdiv)
+    }, scdiv);
 
     // var scripttag = CodeMirror(,{
     //  mode: {name: 'xml', htmlMode: true},
     //  readOnly: 'nocursor',
     //  value:
     // });
-    editor.clear = function(){
-        dctx.clearRect(0,0,disp.width, disp.height)
-        document.querySelector('.ocroutput').innerHTML = ''
-
-    }
+    editor.clear = function () {
+        dctx.clearRect(0, 0, disp.width, disp.height);
+        document.querySelector('.ocroutput').innerHTML = '';
+    };
 
-    editor.img = demo.querySelector('.to_ocr')
+    editor.img = demo.querySelector('.to_ocr');
 
-    editor.run = function(){
+    editor.run = function () {
 
         if (editor.img.complete) {
-            run(editor)
-        } else{
-            editor.img.onload = function(){
-                run(editor)
-            }
+            run(editor);
+        } else {
+            editor.img.onload = function () {
+                run(editor);
+                editor.img.onload = function () {};
+            };
         }
-    }
+    };
 
-    return editor
+    return editor;
 }
 
-setTimeout(function(){
-    document.getElementById('wow').className += ' opaque'
-}, 100) 
-
-var wow = builddemo('wow', 
-"var img = demo.querySelector('img.to_ocr')\n\n\
-Tesseract\n\
-  .recognize( img, {\n\
-    progress: show_progress} )\n\
-  .then( display ) // scroll down for full output ")
-
-wow.run()
-
-
-var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'))
-var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'))
-var langs = ['eng', 'chi_sim', 'rus', 'meme']
-
-function setlang(i){
-    tabs.forEach(function(t){
-        t.className = 'langlabel'
-    })
-    tabs[i].className = 'langlabel selected'
-    console.log(tabs[i])
-    wow.setValue( 
-         "var img = demo.querySelector('img.to_ocr')\n\n" 
-        +"Tesseract\n" 
-        +"  .recognize( img, {\n"
-        +"    progress: show_progress, lang: '"+langs[i]+"'} )\n" 
-        +"  .then( display ) // scroll down for full output ")
-    wow.img.src = 'img/'+langs[i]+'.png'
-    wow.clear()
+setTimeout(function () {
+    document.getElementById('wow').className += ' opaque';
+}, 100);
 
-}
+var wow = builddemo('wow', "var img = demo.querySelector('img.to_ocr')\n\n" + "Tesseract\n" + "  .recognize( img, {\n" + "    progress: show_progress} )\n" + "  .then( display ) // scroll down for full output\n" + "                   // you can edit this code");
 
+wow.run();
 
-ltabs.forEach(function(ltab,i){
-    ltab.onclick = function(){
-        setlang(i)
-    }
-})
+var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'));
+var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'));
+var langs = ['eng', 'chi_sim', 'rus', 'meme'];
+var langims = langs.map(function (lang) {
+    var limg = new Image();
+    limg.src = 'img/' + lang + '.png';
+    return limg;
+});
 
+function setlang(i) {
+    tabs.forEach(function (t) {
+        t.className = 'langlabel';
+    });
+    tabs[i].className = 'langlabel selected';
+    console.log(tabs[i]);
+    wow.setValue("var img = demo.querySelector('img.to_ocr')\n\n" + "Tesseract\n" + "  .recognize( img, {\n" + "    progress: show_progress, lang: '" + langs[i] + "'} )\n" + "  .then( display ) // scroll down for full output\n" + "                   // you can edit this code");
+    wow.img.src = 'img/' + langs[i] + '.png';
+    wow.clear();
+}
 
-tabs.forEach(function(tab,i){
-    tab.onclick = function(){
-       setlang(i)
-    }
-})
+ltabs.forEach(function (ltab, i) {
+    ltab.onclick = function () {
+        setlang(i);
+    };
+});
+
+tabs.forEach(function (tab, i) {
+    tab.onclick = function () {
+        setlang(i);
+    };
+});
 // document.querySelector('.getStarted')[0].onclick = function(){
 //  location.href = '#'
 //  location.href = '#get_started'

src/index.html

@@ -29,6 +29,7 @@
 	</div>
 	<div id="logo" class="header">
 		<canvas id="canvas"></canvas>
+		<img src="img/logowhite.png" id="logoimg">
 	</div>
 
 	</div>
@@ -63,12 +64,12 @@
 						</div>
 						<hr>
 						<div class="editor"></div>
-						<div class="hint">
+						<!-- <div class="hint">
 								Hint: you can, like, edit this code yo
-						</div>
+						</div> -->
 						<div class="running">
 							<div class="out">Initializing Magic...</div>
-							<progress class="prog" value="0" max="1"></progress>
+							<div class="prog"><div></div></div>
 						</div>
 						<div class="notrunning">
 							<div class="runbutton">Run Code</div>
@@ -141,7 +142,9 @@
 <div class='footer'>
 	<div class="columnwrap">
 		<div class="column">
-			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.” </span>
+			<span class="lengle">“Speaking of ways, pet, by the way, <b>there is such a thing as a tesseract</b>.”
+			<br>
+			Made with <img src="img/keyboard.png"> by <a href="https://antimatter15.com/">antimatter15</a> and <a href="http://omrelli.ug/">omrelli.ug</a></span>
 		</div>
 	</div>
 </div>

src/main.js

@@ -11,15 +11,20 @@ function builddemo(id, val){
     demo.querySelector('.runbutton').onclick = function(){
         setrunning(0)
         run(editor)
+        editor.clear()
+        prog.setValue(0)
+    }
+
+    prog.setValue = function(v){
+        prog.querySelector('div').style.width = v*100+'%'
     }
 
     function show_progress(p){
 
         setrunning(0)
         console.log(p)
-        if(p.loaded_lang_model) prog.value = p.loaded_lang_model
-        if(p.recognized) prog.value = p.recognized
-        out.innerText = JSON.stringify(p)
+        if(p.loaded_lang_model) prog.setValue(p.loaded_lang_model)
+        if(p.recognized) prog.setValue(p.recognized)
         out.innerText = JSON.stringify(p)
 
     }
@@ -84,6 +89,7 @@ function builddemo(id, val){
             times++
             // dctx.fillStyle="rgba(30, 29, 49, .8)"
             dctx.fillStyle="rgba(0, 219, 157, "+Math.min(i/100,1)+")"
+            // dctx.fillStyle="rgba(0, 219, 199, "+Math.min(i/100,1)+")"
             // dctx.globalAlpha = .1;
             dctx.clearRect(0,0,disp.width, disp.height)
             dctx.fillRect(0,0,disp.width, disp.height)
@@ -166,6 +172,7 @@ function builddemo(id, val){
         } else{
             editor.img.onload = function(){
                 run(editor)
+                editor.img.onload = function(){}
             }
         }
     }
@@ -178,11 +185,12 @@ setTimeout(function(){
 }, 100) 
 
 var wow = builddemo('wow', 
-"var img = demo.querySelector('img.to_ocr')\n\n\
-Tesseract\n\
-  .recognize( img, {\n\
-    progress: show_progress} )\n\
-  .then( display ) // scroll down for full output ")
+"var img = demo.querySelector('img.to_ocr')\n\n"
++"Tesseract\n"
++"  .recognize( img, {\n"
++"    progress: show_progress} )\n"
++"  .then( display ) // scroll down for full output\n"
++"                   // you can edit this code")
 
 wow.run()
 
@@ -190,6 +198,11 @@ wow.run()
 var tabs = Array.prototype.slice.call(document.querySelectorAll('.langlabel'))
 var ltabs = Array.prototype.slice.call(document.querySelectorAll('.ltab'))
 var langs = ['eng', 'chi_sim', 'rus', 'meme']
+var langims = langs.map(lang => {
+    var limg = new Image()
+    limg.src = 'img/'+lang+'.png'
+    return limg
+})
 
 function setlang(i){
     tabs.forEach(function(t){
@@ -202,7 +215,8 @@ function setlang(i){
         +"Tesseract\n" 
         +"  .recognize( img, {\n"
         +"    progress: show_progress, lang: '"+langs[i]+"'} )\n" 
-        +"  .then( display ) // scroll down for full output ")
+        +"  .then( display ) // scroll down for full output\n"
+        +"                   // you can edit this code")
     wow.img.src = 'img/'+langs[i]+'.png'
     wow.clear()