akira
/
tesseract.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

simplify

pull/24/head
Guillermo 9 years ago
parent
923d75a047
commit
8527a70b36
3 changed files with 50 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      css/wau.css
  2. 27
      index.html
  3. 55
      main.js

7
css/wau.css
Unescape View File

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

27
index.html
Unescape View File

@ -24,7 +24,7 @@
<div class ="marterial"> <div class ="marterial">
<div class="stickyheader"> <div class="stickyheader">
<a href="#"><img src="img/logowhite.png" class="smalllogo"></a> <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> <a class="headernav" href="https://github.com/naptha/tesseract.js">GitHub</a>
</div> </div>
<div id="logo" class="header"> <div id="logo" class="header">
@ -46,12 +46,11 @@
</b> that can recognize </b> that can recognize
<a class="ltab" href="#eng">English</a>, <a class="ltab" href="#eng">English</a>,
<a class="ltab" href="#chi_sim">Chinese</a>, <a class="ltab" href="#chi_sim">Chinese</a>,
<a class="ltab" href="#rus">Russian</a>, <a class="ltab" href="#rus">Russian</a>, and <a href="#langs">60 other languages</a>.
<a class="ltab" href="#tha">Meme</a>, and <a href="#langs">60 other languages</a>.
</div> </div>
<a href="#get_started"> <a href="https://github.com/naptha/tesseract.js#installation">
<div class="getStarted"> <div class="getStarted">
Get Started Get Started
</div> </div>
@ -60,10 +59,10 @@
</div> </div>
<div class="stretch noheight"> <div class="stretch noheight">
<div id="wow" class="demo"> <div id="wow" class="demo">
<div class="demoheader"> <!-- <div class="demoheader">
</div> </div>
<hr> <hr>
<div class="editor"></div> --> <div class="editor"></div>
<!-- <div class="hint"> <!-- <div class="hint">
Hint: you can, like, edit this code yo Hint: you can, like, edit this code yo
</div> --> </div> -->
@ -75,16 +74,16 @@
<div class="runbutton">Run Code</div> <div class="runbutton">Run Code</div>
</div> </div>
<img src="img/eng.png" class="to_ocr">
<div class='ocroutput'></div> <div class='ocroutput'></div>
<canvas class="display"></canvas> <canvas class="display"></canvas>
<img src="img/eng.png" class="to_ocr">
<div class="demofooter"> <div class="demofooter">
<div class="bookend"></div> <div class="bookend"></div>
<div class="langlabel selected">English </div><div class="vr"></div> <div class="langlabel selected">English </div><div class="vr"></div>
<div class="langlabel">Chinese</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">Russian</div> <div class="vr"></div>
<div class="langlabel">Meme</div> <div class="bookend"></div>
</div> </div>
</div> </div>
</div> </div>
@ -112,9 +111,9 @@
</div> </div>
</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"> <div class="column randombold">
@ -134,7 +133,7 @@
</div> </div>
</div> </div>
</div> </div> -->
<!-- <!--
<script src="https://rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script> <script src="https://rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script>
@ -149,15 +148,15 @@
</div> </div>
</div> </div>
<script src="http://tenso.rs/tesseract.js"></script>
<script src="main.js"></script>
<script src="animation/raf.js"></script> <script src="animation/raf.js"></script>
<script src="animation/mouse.js"></script> <script src="animation/mouse.js"></script>
<script src="animation/dimensions.js"></script> <script src="animation/dimensions.js"></script>
<script src="animation/animate.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> <script src="explorer/explorer.js"></script>
</body> </body>
</html> </html>

55
main.js
Unescape View File

@ -58,12 +58,12 @@ function builddemo(id, val) {
disp.style.width = demo.querySelector('.to_ocr').offsetWidth; disp.style.width = demo.querySelector('.to_ocr').offsetWidth;
disp.style.height = demo.querySelector('.to_ocr').offsetHeight; 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.shadowOffsetX = 0;
dctx.shadowOffsetY = 0; // dctx.shadowOffsetY = 0;
dctx.shadowBlur = 10; // 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) { var m = result.words.map(function (w) {
@ -71,13 +71,14 @@ function builddemo(id, val) {
dctx.font = '20px Times'; dctx.font = '20px Times';
var font = 20 * (b.x1 - b.x0) / dctx.measureText(w.text).width + "px 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 = font;
// dctx.font = '40px Times';
dctx.fillText(w.text, b.x0, w.baseline.y0); 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 font;
}; };
return k;
}); });
var times = 0; var times = 0;
@ -89,12 +90,13 @@ function builddemo(id, val) {
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.fillStyle="rgba(0, 219, 199, "+Math.min(i/100,1)+")"
// dctx.globalAlpha = .1; // dctx.globalAlpha = .1;
dctx.clearRect(0, 0, disp.width, disp.height); 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++) { for (var j = 0; j < Math.min(i, m.length); j++) {
var asdf = Math.min(Math.max(i - j, 0), 100); 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](); m[j]();
}; };
@ -140,14 +142,14 @@ function builddemo(id, val) {
}); });
var sc = demo.querySelector('.demoheader'); var sc = demo.querySelector('.demoheader');
var scdiv = document.createElement('div'); // var scdiv = document.createElement('div');
sc.appendChild(scdiv); // sc.appendChild(scdiv);
scdiv.className = 'CodeMirror cm-s-default'; // scdiv.className = 'CodeMirror cm-s-default';
// scdiv.className = 'cm-s-default' // // scdiv.className = 'cm-s-default'
CodeMirror.runMode('<script src="http://tenso.rs/tesseract.js"></script>', { // CodeMirror.runMode('<script src="http://tenso.rs/tesseract.js"></script>', {
name: 'xml', // name: 'xml',
htmlMode: true // htmlMode: true
}, scdiv); // }, scdiv);
// var scripttag = CodeMirror(,{ // var scripttag = CodeMirror(,{
// mode: {name: 'xml', htmlMode: true}, // mode: {name: 'xml', htmlMode: true},
@ -156,6 +158,7 @@ function builddemo(id, val) {
// }); // });
editor.clear = function () { editor.clear = function () {
dctx.clearRect(0, 0, disp.width, disp.height); dctx.clearRect(0, 0, disp.width, disp.height);
disp.style.height = 0;
document.querySelector('.ocroutput').innerHTML = ''; document.querySelector('.ocroutput').innerHTML = '';
}; };
@ -180,7 +183,13 @@ setTimeout(function () {
document.getElementById('wow').className += ' opaque'; document.getElementById('wow').className += ' opaque';
}, 100); }, 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(); wow.run();
@ -199,9 +208,15 @@ function setlang(i) {
}); });
tabs[i].className = 'langlabel selected'; tabs[i].className = 'langlabel selected';
console.log(tabs[i]); 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.img.src = 'img/' + langs[i] + '.png';
wow.clear(); wow.clear();
wow.run()
} }
ltabs.forEach(function (ltab, i) { ltabs.forEach(function (ltab, i) {

Write Preview
Loading…
Cancel
Save