Browse Source

simplify

pull/24/head
Guillermo 9 years ago
parent
commit
8527a70b36
  1. 7
      css/wau.css
  2. 27
      index.html
  3. 55
      main.js

7
css/wau.css

@ -4,8 +4,6 @@ @@ -4,8 +4,6 @@
min-height: 100%;
}
.stretch {
max-width: 100%
}
@ -26,7 +24,6 @@ @@ -26,7 +24,6 @@
.footer {
width: 100%;
color: #fff;
margin-top: 8%;
background-color: #6A6A6A;
text-align: right;
}
@ -131,7 +128,7 @@ a { @@ -131,7 +128,7 @@ a {
/*font-weight: bold;*/
}
.display {
position: absolute;
// position: absolute;
/*background: rgba(0,0,255,.1);*/
}
svg {
@ -188,7 +185,7 @@ svg { @@ -188,7 +185,7 @@ svg {
}
.prog div{
height: 100%;
background-color: #00DB9D;
background-color: #5BA9F2;
}
.demofooter {

27
index.html

@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
<div class ="marterial">
<div class="stickyheader">
<a href="#"><img src="img/logowhite.png" class="smalllogo"></a>
<a class="headernav" href="#docs">Docs</a>
<a class="headernav" href="https://github.com/naptha/tesseract.js#docs">Docs</a>
<a class="headernav" href="https://github.com/naptha/tesseract.js">GitHub</a>
</div>
<div id="logo" class="header">
@ -46,12 +46,11 @@ @@ -46,12 +46,11 @@
</b> that can recognize
<a class="ltab" href="#eng">English</a>,
<a class="ltab" href="#chi_sim">Chinese</a>,
<a class="ltab" href="#rus">Russian</a>,
<a class="ltab" href="#tha">Meme</a>, and <a href="#langs">60 other languages</a>.
<a class="ltab" href="#rus">Russian</a>, and <a href="#langs">60 other languages</a>.
</div>
<a href="#get_started">
<a href="https://github.com/naptha/tesseract.js#installation">
<div class="getStarted">
Get Started
</div>
@ -60,10 +59,10 @@ @@ -60,10 +59,10 @@
</div>
<div class="stretch noheight">
<div id="wow" class="demo">
<div class="demoheader">
<!-- <div class="demoheader">
</div>
<hr>
<div class="editor"></div>
--> <div class="editor"></div>
<!-- <div class="hint">
Hint: you can, like, edit this code yo
</div> -->
@ -75,16 +74,16 @@ @@ -75,16 +74,16 @@
<div class="runbutton">Run Code</div>
</div>
<img src="img/eng.png" class="to_ocr">
<div class='ocroutput'></div>
<canvas class="display"></canvas>
<img src="img/eng.png" class="to_ocr">
<div class="demofooter">
<div class="bookend"></div>
<div class="langlabel selected">English </div><div class="vr"></div>
<div class="langlabel">Chinese</div> <div class="vr"></div>
<div class="langlabel">Russian</div> <div class="vr"></div>
<div class="langlabel">Meme</div> <div class="bookend"></div>
</div>
</div>
</div>
@ -112,9 +111,9 @@ @@ -112,9 +111,9 @@
</div>
</div>
<div class="columnwrap">
<!-- <div class="columnwrap">
<!-- (and German, Japanese, Spanish, French, Traditional Chinese, Portuguese, Italian, Polish, Turkish, Dutch, Arabic, Czech, Korean, Swedish, Vietnamese, Romanian, Greek, Indonesian, Hungarian, Danish, Bulgarian, Finnish, Norwegian, Ukrainian, Catalan, Croatian, Hebrew, Lithuanian, Slovenian, Hindi, Bengali, Telugu, Tamil, Kannada, Malayalam, Tagalog, Swahili, Azerbaijani, Belarusian, Afrikaans, Albanian, Basque, Esperanto, Estonian, Galician, Icelandic, Latvian, Macedonian, Malay, Maltese, Ancient Greek, Cherokee, English (Old), Esperanto alternative, Frankish, French (Old), Italian (Old), Math, Serbian (Latin), Slovakian, and Old Spanish!) -->
<div class="column randombold">
@ -134,7 +133,7 @@ @@ -134,7 +133,7 @@
</div>
</div>
</div>
</div> -->
<!--
<script src="https://rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script>
@ -149,15 +148,15 @@ @@ -149,15 +148,15 @@
</div>
</div>
<script src="http://tenso.rs/tesseract.js"></script>
<script src="main.js"></script>
<script src="animation/raf.js"></script>
<script src="animation/mouse.js"></script>
<script src="animation/dimensions.js"></script>
<script src="animation/animate.js"></script>
<script src='https://cdn.rawgit.com/naptha/tesseract.js/a01d2a2/dist/tesseract.js'></script>
<script src="main.js"></script>
<script src="explorer/explorer.js"></script>
</body>
</html>

55
main.js

@ -58,12 +58,12 @@ function builddemo(id, val) { @@ -58,12 +58,12 @@ function builddemo(id, val) {
disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
disp.style.height = demo.querySelector('.to_ocr').offsetHeight;
dctx.shadowColor = "rgba(255,255,255,.1)";
dctx.shadowOffsetX = 0;
dctx.shadowOffsetY = 0;
dctx.shadowBlur = 10;
// dctx.shadowColor = "rgba(255,255,255,.1)";
// dctx.shadowOffsetX = 0;
// dctx.shadowOffsetY = 0;
// dctx.shadowBlur = 10;
dctx.fillRect(0, 0, disp.width, disp.height);
// dctx.fillRect(0, 0, disp.width, disp.height);
var m = result.words.map(function (w) {
@ -71,13 +71,14 @@ function builddemo(id, val) { @@ -71,13 +71,14 @@ function builddemo(id, val) {
dctx.font = '20px Times';
var font = 20 * (b.x1 - b.x0) / dctx.measureText(w.text).width + "px Times";
var k = function k() {
return function k() {
dctx.font = font;
// dctx.font = '40px Times';
dctx.fillText(w.text, b.x0, w.baseline.y0);
// dctx.fillStyle='rgba(255,255,255,.3)'
// dctx.fillRect(b.x0, b.y0, b.x1 - b.x0, b.y1 - b.y0);
return font;
};
return k;
});
var times = 0;
@ -89,12 +90,13 @@ function builddemo(id, val) { @@ -89,12 +90,13 @@ function builddemo(id, val) {
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.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 + ")";
dctx.fillStyle = "rgba(0,0,0," + asdf * .01 + ")";
m[j]();
};
@ -140,14 +142,14 @@ function builddemo(id, val) { @@ -140,14 +142,14 @@ function builddemo(id, val) {
});
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://tenso.rs/tesseract.js"></script>', {
name: 'xml',
htmlMode: true
}, scdiv);
// var scdiv = document.createElement('div');
// sc.appendChild(scdiv);
// scdiv.className = 'CodeMirror cm-s-default';
// // scdiv.className = 'cm-s-default'
// CodeMirror.runMode('<script src="http://tenso.rs/tesseract.js"></script>', {
// name: 'xml',
// htmlMode: true
// }, scdiv);
// var scripttag = CodeMirror(,{
// mode: {name: 'xml', htmlMode: true},
@ -156,6 +158,7 @@ function builddemo(id, val) { @@ -156,6 +158,7 @@ function builddemo(id, val) {
// });
editor.clear = function () {
dctx.clearRect(0, 0, disp.width, disp.height);
disp.style.height = 0;
document.querySelector('.ocroutput').innerHTML = '';
};
@ -180,7 +183,13 @@ setTimeout(function () { @@ -180,7 +183,13 @@ 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");
var wow = builddemo('wow',
["var img = demo.querySelector('img.to_ocr')",
"Tesseract",
" .recognize( img )",
" .progress( show_progress )",
" .then( display ) // scroll down for full output",
" // you can edit this code"].join('\n'));
wow.run();
@ -199,9 +208,15 @@ function setlang(i) { @@ -199,9 +208,15 @@ function setlang(i) {
});
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.setValue(["var img = demo.querySelector('img.to_ocr')",
"Tesseract",
" .recognize( img, '"+langs[i]+"' )",
" .progress( show_progress )",
" .then( display ) // scroll down for full output",
" // you can edit this code"].join('\n'));
wow.img.src = 'img/' + langs[i] + '.png';
wow.clear();
wow.run()
}
ltabs.forEach(function (ltab, i) {

Loading…
Cancel
Save