diff --git a/codemirror/codemirror.css b/codemirror/codemirror.css index ca002b8..9cdc1f9 100644 --- a/codemirror/codemirror.css +++ b/codemirror/codemirror.css @@ -147,7 +147,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} .CodeMirror { position: relative; overflow: hidden; - background: white; + background: transparent; } .CodeMirror-scroll { diff --git a/css/color.css b/css/color.css index 6d1878d..66d181f 100644 --- a/css/color.css +++ b/css/color.css @@ -1,6 +1,4 @@ #wow { - box-shadow: 0px 0px 20px 0px rgba(0,0,0,.2); - background-color: #fff; } #splash { @@ -9,12 +7,13 @@ } .desc { - color: #343E70; /* text-shadow: 0px 0px 2px rgba(0, 131, 255, 0.53); */ } +.headernav { +} + .vr { - border-left: 1px solid #ddd; } /*.ellipsis { @@ -27,101 +26,55 @@ .getStarted { - display: inline-block; - background-color: #2CC7F9; - color: white; - font-size: 40px; - padding: 20px; - padding-left: 50px; - border-radius: 5px; - margin-top: 40; - padding-right: 50px; - cursor: pointer; } .npm { - background-color: rgb(255, 238, 174); - margin-bottom: 0px; - padding-top: 10px; - padding-bottom: 10px; - border-left: 10px solid #303061; - color: rgb(48, 48, 97); - font-size: 19px; - font-family: monospace; } #marterial { /*background: linear-gradient(#27C6F9 80%, #0CB5EB 100%);*/ - background-color: #1E1D31; - background-image: url(../img/stars.jpeg); - background-size: cover; - background-position: bottom; /*background-attachment: fixed;*/ } .demoheader .CodeMirror { - background-color: rgb(243, 243, 243); } .runbutton { - color: #27C6F9; - cursor: pointer; - -webkit-transition: all 0.7s ease; - transition: all 0.7s ease; } -.runbutton:hover { - text-shadow: 0px 0px 10px #27C6F9; -} + .demo { - box-shadow: 0px 0px 20px -2px rgba(0,0,0,.2); - position: relative; - background-color: white; + } .hint { - font-size: 10px; - color: #56607D; + } body { - background-color: rgb(251, 251, 251); } hr { - border: none; - border-top: 1px solid #ddd; - margin: 0px; + } a { - color: #6079D6; } .manyLanguages { /*color: #C8D1F3;*/ - opacity: .3; } button { - color: #FFF; - background: #5A4E60; - border-radius: 5px; - border: solid 1px #fff; + } button:hover { - background: rgba(255,255,255,1); - border: solid 1px #ddd; } @media (max-width: 914px) { - button{ - color: #fff; - background-color: rgba(0,0,0,0) - } button:hover { background: rgba(255,255,255,.3); @@ -133,13 +86,6 @@ button:hover { text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); } - .desc a { - color: #B8EEFF; - } - - .npm { - box-shadow: 0px 0px 20px 4px rgb(180, 146, 150); - } /*#splash { background-color: #27C6F9; diff --git a/css/wau.css b/css/wau.css index 82f299c..e41ff81 100644 --- a/css/wau.css +++ b/css/wau.css @@ -1,294 +1,333 @@ @import 'explorer.css'; - .fullscreen { - width:100%; - min-height: 100%; -} - - -.run, .running { - width: 100%; - height: 42px; - text-align: center; + width: 100%; + min-height: 100%; +} +.stickyheader { + position: fixed; + width: 100%; + z-index: 3; + height: 50px; + vertical-align: middle; + text-align: right; + line-height: 50px; +} +.headernav { + padding-right: 35px; + vertical-align: middle; + color: #fff; +} +.run, +.running { + width: 100%; + height: 42px; + text-align: center; } - .running { - display: none + display: none } - #wow .notrunning { - display: none + display: none } - #wow .running { - display: block + display: block } - .runbutton { - padding-top: 6px; - padding-bottom: 10px; - font-weight: 500; - text-align: center; + padding-top: 9px; + padding-bottom: 10px; + font-weight: 500; + text-align: center; + color: #FFFFFF; + cursor: pointer; + -webkit-transition: all 0.7s ease; + transition: all 0.7s ease; + width: 100px; + margin-left: auto; + margin-right: auto; + background-color: #6A6A6A; + border-radius: 5px; + margin-bottom: 9px; +} +.runbutton:hover { + text-shadow: 0px 0px 10px #27C6F9; } - a { - text-decoration: none; - /*font-weight: bold;*/ + text-decoration: none; + color: #5BA9F2; + /*font-weight: bold;*/ } - .display { - position: absolute; - /*background: rgba(0,0,255,.1);*/ + position: absolute; + /*background: rgba(0,0,255,.1);*/ } - svg { - height: 100% + height: 100% } - #marterial { - position: absolute; - width: 100%; - height: 330px; - z-index: -1; - overflow: hidden; + position: absolute; + width: 100%; + height: 330px; + z-index: -1; + overflow: hidden; + background-color: #00DB9D; + /*background-image: url(../img/stars.jpeg);*/ + background-size: cover; + background-position: bottom; } - .out { - padding: 10px; - padding-bottom: 0px; - text-align: center; - font-family: monospace; + padding: 10px; + padding-bottom: 0px; + text-align: center; + font-family: monospace; } - .hint { - text-align: left; - padding-left: 14px - + text-align: left; + padding-left: 14px; + font-size: 10px; + color: #56607D; } - .langlabel { - display: inline-block; - flex-grow: 1; - height: 40px; - line-height: 40px; + display: inline-block; + flex-grow: 1; + height: 40px; + line-height: 40px; + color: #fff; + background-color: #6A6A6A; } -.bookend { - display: inline-block; + +.selected { + background-color: #00DB9D; + font-weight: bold; } +.bookend { + display: inline-block; +} .prog { - width: 400px; - max-width: 100%; - position: relative; + width: 400px; + max-width: 100%; + position: relative; } - .demofooter { - padding: 10px; - /*padding-top: 0px;*/ - text-align: center; - /*display: flex*/ + padding: 10px; + /*padding-top: 0px;*/ + + text-align: center; + /*display: flex*/ } - #wow .demofooter { - display: flex; - padding: 0px; - justify-content: space-between; - align-items: center; + display: flex; + padding: 0px; + justify-content: space-between; + align-items: center; } - #logo { - text-align: center; - padding-top: 70px; - height: 182px; + text-align: center; + padding-top: 70px; + height: 182px; } - .to_ocr { - width: 100%; + width: 100%; } - #wow { - margin-top: 25px; + margin-top: 25px; } - .demo { - border-radius: 5px; - width:500px; - text-align: left -} + border-radius: 5px; + width: 500px; + max-width: 100%; + text-align: left; + overflow: hidden; + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .2); + position: relative; + background-color: #f3f3f3; +} .demoheader { - overflow: hidden; - border-radius: 5px 5px 0px 0px + overflow: hidden; + border-radius: 5px 5px 0px 0px; + font-size: 8.3px; } - #canvas { - margin-left: auto; - margin-right: auto; - pointer-events:none; - z-index: 0; - background-image: url(../img/logowhite.png); - background-size: cover; + margin-left: auto; + margin-right: auto; + pointer-events: none; + z-index: 0; + background-image: url(../img/logowhite.png); + background-size: cover; } - #splash { - text-align: center; - position: relative; + text-align: center; + position: relative; } - .desc { - text-align: left; - font-size: 18px; + text-align: left; + font-size: 18px; + color: #343E70; } - .vr { - display: inline-block; - height: 40px; + display: inline-block; + height: 40px; + border-left: 1px solid #ddd; +} +.getStarted { + display: inline-block; + background-color: #00DB9D; + color: white; + font-size: 40px; + padding: 20px; + padding-left: 50px; + border-radius: 5px; + margin-top: 40; + padding-right: 50px; + cursor: pointer; } - #notconvinced { - max-width: 960; - - margin-left: auto; - margin-right: auto; - margin-top: 8%; - - + max-width: 960; + margin-left: auto; + margin-right: auto; + margin-top: 8%; } - - .randombold { - font-size: 18px; - /*font-family: Georgia;*/ - letter-spacing: .8px; - line-height: 37px; + font-size: 18px; + /*font-family: Georgia;*/ + + letter-spacing: .8px; + line-height: 37px; } - .rant { - padding-left: 8%; - padding-right: 8%; + padding-left: 8%; + padding-right: 8%; } - .npm { - margin-top: 20px; - padding-left: 15px; + margin-top: 20px; + padding-left: 15px; + background-color: rgb(255, 238, 174); + margin-bottom: 0px; + padding-top: 10px; + padding-bottom: 10px; + border-left: 10px solid #303061; + color: rgb(48, 48, 97); + font-size: 19px; + font-family: monospace; +} +.longasstag { + text-align: left; + white-space: normal; + word-break: break-all; } - -.longasstag{ - text-align: left; - white-space: normal; - word-break: break-all; -} - - #code { - text-align: center; - width: 335px; - border-radius: 5px; - margin-right: 40px; - margin-left: 40px; - margin-top: 120px; - + text-align: center; + width: 335px; + border-radius: 5px; + margin-right: 40px; + margin-left: 40px; + margin-top: 120px; } - .woloasdf { - padding-top: 8%; + padding-top: 8%; } - - -.fork{ - position: absolute; - top: 0; - right: 0; - border: 0; - z-index: 2; +.fork { + position: absolute; + top: 0; + right: 0; + border: 0; + z-index: 2; } - .fork img { - width: 149px; + width: 149px; } - .two { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-around; - max-width: 1100px; - margin-left: auto; - margin-right: auto; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + max-width: 1100px; + margin-left: auto; + margin-right: auto; } - - #two { - margin-bottom: 8%; + margin-bottom: 8%; } - .demoheader .CodeMirror { - padding-bottom: 9px; - padding-top: 9px; - padding-left: 13px; + padding-bottom: 9px; + padding-top: 9px; + padding-left: 13px; + background-color: transparent; +} +hr { + border: none; + border-top: 1px solid #ddd; + margin: 0px; } - - #ocroutput { - position: relative; + position: relative; } - .manyLanguages { - font-size: 7px; - padding-top: 10px; + font-size: 7px; + padding-top: 10px; + opacity: .3; } - - body { - padding: 0px; - margin: 0px; - font-family: Lato;/*, Helvetica, Arial, sans-serif;*/ - font-weight: 300; - + padding: 0px; + margin: 0px; + font-family: Lato; + /*, Helvetica, Arial, sans-serif;*/ + + font-weight: 300; + background-color: white; } - button { - - height: 60px; - width: 240px; - - margin-top: 10px; - - font: inherit; - font-size: 30px; - - -webkit-transition: all 0.7s ease; - transition: all 0.7s ease; - - outline: 0; + height: 60px; + width: 240px; + margin-top: 10px; + font: inherit; + font-size: 30px; + -webkit-transition: all 0.7s ease; + transition: all 0.7s ease; + outline: 0; + color: #FFF; + background: #5A4E60; + border-radius: 5px; + border: solid 1px #fff; } - button:hover { - cursor: pointer; + cursor: pointer; + background: rgba(255, 255, 255, 1); + border: solid 1px #ddd; } - @media (max-width: 914px) { - #logo { - padding-top: 8%; - height: auto; - } - - #marterial { - height: 100%; - } - - .demo { - margin-right: 8%; - margin-left: 8%; - } - - #code { - margin-top: 20px; - margin-bottom: 20px; - width: 400px; - } - - #fork { - width: 28%; - } + button { + color: #fff; + background-color: rgba(0, 0, 0, 0) + } + .desc { + color: #FFFFFF; + text-shadow: 0px 0px 3px rgba(58, 58, 58, 1); + } + .desc a { + color: #B8EEFF; + } + .npm { + box-shadow: 0px 0px 20px 4px rgb(180, 146, 150); + } + #logo { + padding-top: 8%; + height: auto; + } + #marterial { + height: 100%; + } + .demo { + margin-right: 8%; + margin-left: 8%; + } + #code { + margin-top: 20px; + margin-bottom: 20px; + width: 400px; + } + #fork { + width: 28%; + } } \ No newline at end of file diff --git a/explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js b/explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js index 67d8459..35fd6bb 100644 --- a/explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js +++ b/explorer/.module-cache/3f0e760c414349d4f3aef786a00f95e1bbacad28.js @@ -122,11 +122,7 @@ var TextNode = (function (_React$Component2) { { className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand }, node.substring(0, 30) ), - node.length > 30 ? React.createElement( - "span", - { className: "ellipsis" }, - "..." - ) : "" + node.length > 30 ? React.createElement(Ellipsis, null) : "" ); } } @@ -216,7 +212,7 @@ var ListNode = (function (_React$Component5) { "span", { className: "indent" }, array_join(node.map(function (e, i) { - return React.createElement(Node, { node: e }); + return React.createElement(Node, { node: e, key: i }); }), React.createElement(Comma, { br: true })) ), React.createElement("br", null), @@ -278,7 +274,7 @@ var ObjectNode = (function (_React$Component6) { "span", { className: "indent" }, array_join(Object.keys(node).map(function (key) { - return React.createElement(Node, { node: node[key], label: key }); + return React.createElement(Node, { node: node[key], label: key, key: key }); }), React.createElement(Comma, { br: true })) ), React.createElement("br", null), diff --git a/explorer/explorer.js b/explorer/explorer.js index 67d8459..35fd6bb 100644 --- a/explorer/explorer.js +++ b/explorer/explorer.js @@ -122,11 +122,7 @@ var TextNode = (function (_React$Component2) { { className: (html ? "html " : "") + "textNode clickable", onClick: toggleExpand }, node.substring(0, 30) ), - node.length > 30 ? React.createElement( - "span", - { className: "ellipsis" }, - "..." - ) : "" + node.length > 30 ? React.createElement(Ellipsis, null) : "" ); } } @@ -216,7 +212,7 @@ var ListNode = (function (_React$Component5) { "span", { className: "indent" }, array_join(node.map(function (e, i) { - return React.createElement(Node, { node: e }); + return React.createElement(Node, { node: e, key: i }); }), React.createElement(Comma, { br: true })) ), React.createElement("br", null), @@ -278,7 +274,7 @@ var ObjectNode = (function (_React$Component6) { "span", { className: "indent" }, array_join(Object.keys(node).map(function (key) { - return React.createElement(Node, { node: node[key], label: key }); + return React.createElement(Node, { node: node[key], label: key, key: key }); }), React.createElement(Comma, { br: true })) ), React.createElement("br", null), diff --git a/explorer_src/explorer.js b/explorer_src/explorer.js index f0c8ca3..ed2846b 100644 --- a/explorer_src/explorer.js +++ b/explorer_src/explorer.js @@ -66,7 +66,7 @@ class TextNode extends React.Component { else{ return {node.substring(0,30)} - {node.length > 30 ? ... : ''} + {node.length > 30 ? : ''} } } @@ -95,7 +95,7 @@ class ListNode extends React.Component {
{array_join(node.map((e, i) => - + ),)} @@ -122,7 +122,7 @@ class ObjectNode extends React.Component {
{array_join(Object.keys(node).map( - key => + key => ),)}
diff --git a/img/poem.png b/img/poem.png index f42a12c..0d4feaf 100644 Binary files a/img/poem.png and b/img/poem.png differ diff --git a/index.html b/index.html index 63abbc0..fac84d7 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ Wau Demo - @@ -17,8 +16,12 @@ - Fork me on GitHub + +
@@ -132,7 +135,7 @@
-
English
+
English
Chinese
Russian
Meme
@@ -144,8 +147,8 @@
-
+ -->
+
The output of the demo will magically appear here :)
@@ -155,7 +158,7 @@
- +
@@ -163,9 +166,11 @@
npm install tesseract.js
-
<script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.js"></script>
+
<script src="https://cdn.rawgit.com/naptha/tesseract.js/master/lib/Tesseract.2015.07.25.v0.js"></script>
+ +
"Last time I got here, before I even arrived, they had ‘fuck Kanye’ on the motherfuckin’ port-a-potties. But this year, we gon’ piss on ‘em, on they motherfuckin’ port-a-potties. How many of y'all don't give a fuck about what the press say? It's 2014. College Dropout came out 2004. I want y'all to know, every time I go to the studio, every time I do an interview, every time I make a motherfuckin' t-shirt, the thing I do, I give it everything I got. And when I talk that shit, it's so that you can talk that shit. If you a fan of me, you a fan of your motherfuckin' self. You can do something that'll change the world. Look at how they try to make me look. They try to make me look crazy.", @@ -179,7 +184,7 @@ --> - + @@ -190,4 +195,4 @@ - \ No newline at end of file + diff --git a/main.js b/main.js index 711e56a..25f978f 100644 --- a/main.js +++ b/main.js @@ -83,6 +83,8 @@ function builddemo(id, val){ times++ dctx.fillStyle="rgba(30, 29, 49, .8)" + dctx.fillStyle="#00DB9D" + // dctx.globalAlpha = .1; dctx.clearRect(0,0,disp.width, disp.height) dctx.fillRect(0,0,disp.width, disp.height) @@ -138,7 +140,7 @@ function builddemo(id, val){ sc.appendChild(scdiv) scdiv.className = 'CodeMirror cm-s-default' // scdiv.className = 'cm-s-default' - CodeMirror.runMode('', {name: 'xml', htmlMode: true}, scdiv) + CodeMirror.runMode('', {name: 'xml', htmlMode: true}, scdiv) // var scripttag = CodeMirror(,{ // mode: {name: 'xml', htmlMode: true}, @@ -171,6 +173,18 @@ Tesseract\n\ .then( display )") .run() +addEventListener('scroll', function(e){ + //frum jcurry + var doc = document.documentElement; + var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + if(top >= 227) { + document.querySelector('.stickyheader').style['background-color'] = '#00DB9D' + } + else { + document.querySelector('.stickyheader').style['background-color'] = 'rgba(0,0,0,0)' + } +}) + // document.querySelector('.getStarted')[0].onclick = function(){ // location.href = '#' // location.href = '#get_started' @@ -180,4 +194,4 @@ Tesseract\n\ // "var img = demo.querySelector('img.to_ocr')\n\n\ // Tesseract\n\ // .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\ -// .then( display )") \ No newline at end of file +// .then( display )") diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..105be5b --- /dev/null +++ b/src/index.html @@ -0,0 +1,198 @@ + + + Wau Demo + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ +
+
+ Tesseract.js is a pure javascript version of the Tesseract OCR Engine + that can recognize + English, + Chinese, + Russian, + Meme, and 60 other languages. + + +
+ +
+ Get Started +
+
+ +
+ +
+
+
+
+
+
+ Hint: you can, like, edit this code yo +
+
+
Initializing Magic...
+ +
+
+
Run Code
+
+ + + + +
+
+
English
+
Chinese
+
Russian
+
Meme
+
+
+ +
+ +
+
+
+ +
The output of the demo will magically appear here :)
+ + +
+ click stuff to explore the rich creamy Tesseract.js output +
+
+ +
+
+ + +
+
npm install tesseract.js
+ + +
<script src="__tesseractjs__"></script>
+
+ + + + +
+ "Last time I got here, before I even arrived, they had ‘fuck Kanye’ on the motherfuckin’ port-a-potties. But this year, we gon’ piss on ‘em, on they motherfuckin’ port-a-potties. How many of y'all don't give a fuck about what the press say? It's 2014. College Dropout came out 2004. I want y'all to know, every time I go to the studio, every time I do an interview, every time I make a motherfuckin' t-shirt, the thing I do, I give it everything I got. And when I talk that shit, it's so that you can talk that shit. If you a fan of me, you a fan of your motherfuckin' self. You can do something that'll change the world. Look at how they try to make me look. They try to make me look crazy.", + "I need a new cool. What's the new shit out? What's the new shit out with the most commercials at the Super Bowl? Let's just stop the music and play a Bruno Mars song right now, how about that? They told me I would never play at the Super Bowl. They told me I could never play at the Super Bowl. Not until I'm super old. Not until I'm super old... They told me I would never play at the Super Bowl. They told me I would never play at the Super Bowl, at least not until I'm super old. So I think it's time–hold up, f—k that toast.", + "I know people get mad at me when I compare myself, but that's the only way I can explain what my aspirations are. When I'm talkin' 'bout Walt Disney, when I'm talkin' 'bout Howard Hughes, when I'm talkin' 'bout Henry Ford, when I'm talkin' 'bout Beethoven, when I talk about Mozart, when I talk about Shakespeare, and they all had their time on this earth. And I'm only 37. And right now I'm rockin' to 90,000, of y'all motherfuckers right now. So I ain't goin' at anybody on the radio. I'm goin' after Shakespeare. I'm goin' after Walt Disney. I'm going after Howard Hughes. I'm going after David Stern. I'm goin' after Henry Ford. I'm going after Elon Musk. Okay, he is living, but he's my boy.", + +
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..e28208c --- /dev/null +++ b/src/main.js @@ -0,0 +1,197 @@ +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) + } + + 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){ + if (v == 1) { + 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' + } + } + + function display(result) { + + React.render(React.createElement(Node, { node: result, expanded: true, label: "output_of_above_demo"}), document.getElementById("explorer")); + + setrunning(1) + + out.innerText = "Lightning Speeeeeeed" + prog.value = 0 + + console.log(result) + + 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.shadowOffsetX = 0; + dctx.shadowOffsetY = 0; + dctx.shadowBlur = 10; + + dctx.fillRect(0,0,disp.width, disp.height) + + 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 + dctx.fillText(w.text, b.x0, w.baseline.y0); + return font + } + + return k + }) + + var times = 0 + var maxtimes = m.length + 100 + function draw(i){ + + times++ + dctx.fillStyle="rgba(30, 29, 49, .8)" + dctx.fillStyle="#00DB9D" + // dctx.globalAlpha = .1; + 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]() + }; + + if(i', {name: 'xml', htmlMode: true}, scdiv) + + // var scripttag = CodeMirror(,{ + // mode: {name: 'xml', htmlMode: true}, + // readOnly: 'nocursor', + // value: + // }); + + + return { + + run: function(){ + var img = demo.querySelector('.to_ocr') + + if (img.complete) { + run(editor) + } else{ + img.onload = function(){ + run(editor) + } + } + + } + } +} + +builddemo('wow', +"var img = demo.querySelector('img.to_ocr')\n\n\ +Tesseract\n\ + .recognize( img, {progress: show_progress} )\n\ + .then( display )") +.run() + +addEventListener('scroll', function(e){ + //frum jcurry + var doc = document.documentElement; + var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + if(top >= 227) { + document.querySelector('.stickyheader').style['background-color'] = '#00DB9D' + } + else { + document.querySelector('.stickyheader').style['background-color'] = 'rgba(0,0,0,0)' + } +}) + +// document.querySelector('.getStarted')[0].onclick = function(){ +// location.href = '#' +// location.href = '#get_started' +// } + +// builddemo('demo2', +// "var img = demo.querySelector('img.to_ocr')\n\n\ +// Tesseract\n\ +// .recognize( img, {progress: show_progress, lang:'chi_sim'} )\n\ +// .then( display )") \ No newline at end of file