camera, snapshots, ocr v.1

express-server/public/ocrscan/cam.js

@@ -0,0 +1,35 @@
+$(document).ready(function () {
+
+
+    $(".modal").modal();
+
+    var video = document.getElementById("video");
+    var canvas = document.getElementById("canvas");
+    var context = canvas.getContext("2d");
+
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia  || navigator.mozGetUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia;
+
+    if (navigator.getUserMedia) {
+        navigator.getUserMedia({ video: true }, streamWebcam, throwError);
+    }
+
+    $(".btnsnap").click(function() {
+        snap();
+    });
+    
+});
+
+function streamWebcam(stream) {
+    video.srcObject = stream;
+    video.play();
+}
+
+function throwError(error) {
+    alert(error.name);
+}
+
+function snap() {
+    canvas.width = video.clientWidth;
+    canvas.height = video.clientHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0);
+}

express-server/public/ocrscan/materialize/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2018 Materialize
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

express-server/public/ocrscan/materialize/README.md

@@ -0,0 +1,91 @@
+<p align="center">
+  <a href="http://materializecss.com/">
+    <img src="http://materializecss.com/res/materialize.svg" width="150">
+  </a>
+</p>
+
+<h3 align="center">MaterializeCSS</h3>
+
+<p align="center">
+  Materialize, a CSS Framework based on material design.
+  <br>
+  <a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
+  <br>
+  <br>
+  <a href="https://travis-ci.org/Dogfalo/materialize">
+    <img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
+  </a>
+  <a href="https://badge.fury.io/js/materialize-css">
+    <img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
+  </a>
+  <a href="https://cdnjs.com/libraries/materialize">
+    <img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
+  </a>
+  <a href="https://david-dm.org/Dogfalo/materialize">
+    <img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge">
+    </a>
+  <a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
+    <img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
+  </a>
+  <a href="https://gitter.im/Dogfalo/materialize">
+    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
+  </a>
+</p>
+
+## Table of Contents
+- [Quickstart](#quickstart)
+- [Documentation](#documentation)
+- [Supported Browsers](#supported-browsers)
+- [Changelog](#changelog)
+- [Testing](#testing)
+- [Contributing](#contributing)
+- [Copyright and license](#copyright-and-license)
+
+## Quickstart:
+Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize.
+
+- [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/Dogfalo/materialize/releases/))
+- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` (Beta: `git clone -b v1-dev https://github.com/Dogfalo/materialize.git`)
+- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html). ([Beta](https://cdnjs.com/libraries/materialize/1.0.0-beta))
+- Install with [npm](https://www.npmjs.com): `npm install materialize-css` (Beta: `npm install materialize-css@next`)
+- Install with [Bower](https://bower.io): `bower install materialize` ([DEPRECATED](https://bower.io/blog/2017/how-to-migrate-away-from-bower/))
+- Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize` (Beta: `meteor add materialize:materialize@=1.0.0-beta`)
+
+## Documentation
+The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
+
+### Running documentation locally
+Run these commands to set up the documentation:
+
+```bash
+git clone https://github.com/Dogfalo/materialize
+cd materialize
+npm install
+```
+
+Then run `grunt monitor` to compile the documentation. When it finishes, open a new browser window and navigate to `localhost:8000`. We use [BrowserSync](https://www.browsersync.io/) to display the documentation.
+
+### Documentation for previous releases
+Previous releases and their documentation are available for [download](https://github.com/Dogfalo/materialize/releases).
+
+## Supported Browsers:
+Materialize is compatible with:
+
+- Chrome 35+
+- Firefox 31+
+- Safari 9+
+- Opera
+- Edge
+- IE 11+
+
+## Changelog
+For changelogs, check out [the Releases section of materialize](https://github.com/Dogfalo/materialize/releases) or the [CHANGELOG.md](CHANGELOG.md).
+
+## Testing
+We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](CONTRIBUTING.md#jasmine-testing-guide).
+
+## Contributing
+Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+
+## Copyright and license
+Code Copyright 2018 Materialize. Code released under the MIT license.

express-server/public/ocrscan/ocrscan.js

@@ -0,0 +1,27 @@
+$(document).ready(function() {
+
+        //initialize all modals           
+        $('.modal').modal();
+
+    $(".btnanalyze").click(function() {
+        analyze();
+    });
+});
+
+function analyze() {
+    var img = document.getElementById("canvas").toDataURL();
+
+    Tesseract.recognize(img).progress((progress) => {
+        console.log(progress, "$$$$");
+
+        if (progress.status == "recognizing text") {
+            $(".determinate").css("width", progress.progress * 100 + "%");
+        }
+    }).then((result) => {
+        console.log(result);
+        $(".output").text(result.text);
+        $('.modal').modal("open");
+
+        $(".determinate").css("width", "0%");
+    });
+}

express-server/public/ocrscan/style.css

@@ -0,0 +1,12 @@
+body {
+    background-color: #b3e5fc;
+}
+
+.cont1 {
+    background-color: #424242;
+}
+
+.cont2 {
+    margin-top: 0px;
+}
+

express-server/public/ocrscan/test.js

@@ -0,0 +1 @@
+M.AutoInit();

express-server/routes/index.js

@@ -294,4 +294,8 @@ router.get("/invite/:link", async (req, res) => {
     });
 });
 
+router.get("/scan", (req, res) => {
+  res.render("ocrscan");
+});
+
 module.exports = router;

express-server/views/ocrscan.ejs

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Scan Purchases automatically</title>
+
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src='https://cdn.jsdelivr.net/gh/naptha/tesseract.js@v1.0.14/dist/tesseract.min.js'></script>
+
+    <!-- Compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+    <!-- Compiled and minified JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+
+    <link rel="stylesheet" href="/ocrscan/style.css">
+</head>
+
+<body>
+
+        <div class="container cont1">
+            <div class="row">
+                <div class="col s6">
+                    <center><video id="video"></video></center>
+
+                </div>
+
+                <div class="col s6">
+                    <center><canvas id="canvas"></canvas></center>
+
+                </div>
+
+                <div class="col s12">
+                        <a class="waves-effect waves-light btn-large btnsnap light-blue accent-3"><i class="material-icons left">camera</i>Take Snapshot!</a>
+                        <a class="waves-effect waves-light btn-large btnanalyze green accent-4"><i class="material-icons left">arrow_forward</i>Continue</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="container cont2">
+            <div class="progress grey lighten-1">
+                <div class="determinate green accent-4" style="width: 0%"></div>
+            </div>
+        </div>
+
+
+<!-- Modal Structure -->
+<div id="modal1" class="modal">
+    <div class="modal-content">
+        <h4>Result</h4>
+        <p class="output"></p>
+    </div>
+    <div class="modal-footer">
+        <a class="modal-close waves-effect waves-green btn-flat">Ok</a>
+    </div>
+</div>
+
+    <script src="/ocrscan/cam.js"></script>
+    <script src="/ocrscan/ocrscan.js"></script>
+
+</body>
+
+</html>