interim

css/main.css

@@ -4,6 +4,7 @@ body, html{
 	margin: 0;
 	width: 100%;
 	font-family: Lato;
+	font-weight: 300;
 }
 
 #slogan {
@@ -13,7 +14,7 @@ body, html{
 }
 #splash {
     overflow: hidden;
-    background-color: #668EC3;
+    background-color: #425565;
     // background: linear-gradient(90deg, #eb6b8f, #ffee75);
 }
 
@@ -42,7 +43,7 @@ body, html{
 
 #get-started {
     display: inline-block;
-    color: #668EC3;
+    color: #714d26;
     background: #fff;
     padding: 17px 25px;
     font-size: 30px;
@@ -52,7 +53,7 @@ body, html{
 
 #demo-title {
 	padding: 40px 0;
-	color: #668EC3;
+	color: #714d26;
 	font-size: 30px;
 	text-align: center;
 }
@@ -62,7 +63,7 @@ body, html{
     display: flex;
     justify-content: space-around;
     font-size: 20px;
-    color: #199ff4;
+    color: #714d26;
     padding: 0 15px;
     max-width: 700px;
     margin-left: auto;
@@ -72,11 +73,13 @@ body, html{
 .option {
 	padding: 10px;
 	border-radius: 5px;
+	cursor: pointer;
 }
 
 .option.selected {
 	color: #fff;
-	background: #668EC3;
+	background: #5781a5;
+	font-weight: 400;
 }
 
 #input {
@@ -102,12 +105,13 @@ body, html{
 }
 
 #github path {
-	fill: #668EC3;
+	fill: #826f5c;
 }
 
 #arrow {
 	text-align: center;
-    color: #668ec3;
+    font-size: 30px;
+    color: #826f5c;
 }
 
 #arrow::before {
@@ -121,9 +125,8 @@ body, html{
 }
 
 #footer {
-    color: #fff;
+    color: #826f5c;
-    background-color: #7A8A9F;
+    background-color: #ffffff;
-    // background: linear-gradient(90deg, #eb6b8f, #ffee75);
     text-align: right;
     padding: 0 20px;
 }

demo.js

@@ -5,19 +5,29 @@ var output = document.getElementById('output')
 var octx = output.getContext('2d')
 var language = 'eng'
 var demoStarted = false
+var options = [].slice.call(document.querySelectorAll('.option'))
+var lang_demo_images = {
+	eng: 'img/eng_bw.png',
+	chi_sim: 'img/chi_sim.png',
+	rus: 'img/rus.png',
+}
 
+function setUp(){
+	output.width = input.naturalWidth
+	output.height = input.naturalHeight
 
-output.width = input.naturalWidth
+	output.style.width = input.offsetWidth
-output.height = input.naturalHeight
+	output.style.height = input.offsetHeight
 
-output.style.width = input.offsetWidth
+	input_overlay.width = input.naturalWidth
-output.style.height = input.offsetHeight
+	input_overlay.height = input.naturalHeight
 
-input_overlay.width = input.naturalWidth
+	input_overlay.style.width = input.offsetWidth
-input_overlay.height = input.naturalHeight
+	input_overlay.style.height = input.offsetHeight	
+}
 
-input_overlay.style.width = input.offsetWidth
+setUp()
-input_overlay.style.height = input.offsetHeight
+input.onload = setUp()
 
 
 function isOutputVisible(){
@@ -28,11 +38,17 @@ function startDemoIfVisible(argument) {
 	if(isOutputVisible() && !demoStarted) startDemo();
 }
 
+
+function makeGoodOutputFont(){
+	octx.font = '20px Times';
+	octx.font = .8 * output.width * 20 / octx.measureText('texttexttexttexttexttexttexttexttexttexttext').width + "px Times";
+}
+
+
 function startDemo(){
 	demoStarted = true
     
-	octx.font = '20px Times';
+    makeGoodOutputFont()
-	octx.font = .8 * output.width * 20 / octx.measureText('texttexttexttexttexttexttexttexttexttexttext').width + "px Times";
 
 	Tesseract.recognize(input)
 	.progress(progress)
@@ -54,12 +70,15 @@ function result(res){
 
 	res.words.forEach(function(w){
 		var b = w.bbox;
+
+		ioctx.strokeWidth = 2
+
 		ioctx.strokeStyle = 'red'
 		ioctx.strokeRect(b.x0, b.y0, b.x1-b.x0, b.y1-b.y0)
 		ioctx.beginPath()
 		ioctx.moveTo(w.baseline.x0, w.baseline.y0)
 		ioctx.lineTo(w.baseline.x1, w.baseline.y1)
-		ioctx.strokeStyle = 'yellow'
+		ioctx.strokeStyle = 'green'
 		ioctx.stroke()
 
 
@@ -71,4 +90,39 @@ function result(res){
 
 
 document.addEventListener('scroll', startDemoIfVisible)
-startDemoIfVisible()
+startDemoIfVisible()
+
+
+function clearOverLayAndOutput(){
+	ioctx.clearRect(0,0, input_overlay.width, input_overlay.height)
+	octx.clearRect(0,0,output.width, output.height)
+}
+
+
+function displayPlayButtonFor(lang){
+	makeGoodOutputFont()
+	octx.textAlign = 'center'
+	octx.fillText('Play',output.width/2, output.height/2)
+	output.addEventListener('click', function play(){
+		output.removeEventListener('click', play)
+		
+		Tesseract.recognize(input, lang)
+		.progress( progress )
+		.then( result )
+	})
+}
+
+
+options.forEach(function(option){
+	option.addEventListener('click', function(){
+
+		clearOverLayAndOutput()
+
+		options.forEach(function(option){option.className = 'option'})
+		option.className = 'option selected'
+		if(option.lang in lang_demo_images){
+			input.src = lang_demo_images[option.lang]
+			displayPlayButtonFor(option.lang)
+		}
+	})
+})

index.html

@@ -27,14 +27,14 @@
 	<div id='demo'>
 		<div id='demo-title'>Demo</div>
 		<div id='options'>
-			<div class="option selected">English</div>
+			<div class="option selected" lang='eng'>English</div>
-			<div class="option">Chinese</div>
+			<div class="option" lang='chi_sim'>Chinese</div>
-			<div class="option">Russian</div>
+			<div class="option" lang='rus'>Russian</div>
 		</div>
 		<div id='demo-content'>
 			<div>
 				<canvas id='input-overlay'></canvas>
-				<img id='input' src="img/eng.jpg"/>			
+				<img id='input' src="img/eng_bw.png"/>			
 			</div>
 			<div id='arrow'></div>
 			<div>
@@ -47,7 +47,7 @@
 		<span id="lengle">“Speaking of ways, pet, by the way, <b>there <i>is</i> such a thing as a tesseract</b>.”
 		<br>
 		<br>
-		Made with <img src="img/keyboard.png"> by <a href="https://twitter.com/biject">@biject</a> and <a href="https://twitter.com/antimatter15">@antimatter15</a></span>
+		<!-- Made with <img src="img/keyboard.png"> --> By <a href="https://twitter.com/biject">@biject</a> and <a href="https://twitter.com/antimatter15">@antimatter15</a></span>
 	</div>
 
 	<script src="animation/raf.js"></script>