Created tangy-ocr custom element to OCR scan forms.

Added tesseract worker and wasm to angular scripts array/ Added 'start-using-proxy' npm run target when developing behind a proxy like tunnelto or nginx. Updated client dev section in the README Added support for uppy styles in tangy-form to support the tangy-ocr element.
Tangerine-Community · Apr 18, 2023 · ab89efc · ab89efc
1 parent 217c444
commit ab89efc
Show file tree

Hide file tree

Showing 14 changed files with 1,139 additions and 123 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -11,6 +11,8 @@ client/app/node_modules
 client/tangy-forms/node_modules
 client/tangy-forms/bower_components
 server/node_modules
+tangy-form/node_modules
+tangy-form-editor/node_modules
 scripts/generate-csv/node_modules
 scripts/generate-uploads/node_modules
 config.sh
diff --git a/Dockerfile b/Dockerfile
@@ -76,13 +76,13 @@ RUN cd /tangerine/online-survey-app && \
 
 # build client.
 add client /tangerine/client
-run cd /tangerine/client && \
+RUN cd /tangerine/client && \
     ./node_modules/.bin/ng build --base-href "./"
 
 # Build editor.
 ADD editor /tangerine/editor
 RUN cd /tangerine/editor && ./node_modules/.bin/ng build --base-href "./"
-RUN cd /tangerine/editor && ./node_modules/.bin/workbox generate:sw 
+RUN cd /tangerine/editor && ./node_modules/.bin/workbox generate:sw
 
 # Build PWA tools.
 RUN cd /tangerine/client/pwa-tools/updater-app && \
@@ -106,9 +106,8 @@ ADD server /tangerine/server
 RUN cd /tangerine/server && \
     npm link
 
-
 #
-# Wrap up 
+# Wrap up
 #
 
 ADD ./ /tangerine
@@ -118,4 +117,7 @@ RUN mkdir /groups
 RUN echo {} > /paid-worker-state.json
 
 EXPOSE 80
-ENTRYPOINT cd /tangerine/server/ && npm start 
+ENTRYPOINT cd /tangerine/server/ && npm start
+
+## Used for testing...
+#CMD ["/bin/bash"]
diff --git a/README.md b/README.md
@@ -189,6 +189,16 @@ The [Bullet points for Tangerine Development](./docs/developer/development-bulle
 
 Prereqs includes [node](https://nodejs.org/en/). Before setting up your sandbox, see the decide which Content Set you would like to set it up with. Content Sets are configuration and forms for Tangerine that serve as starting places and examples of the different ways Tangerine Client can be used. See the list of Content Sets in the `content-sets` folder and note which one you will be installing with which will be referenced in the commands below.
 
+For Tangerine instances based on a v3.x branch, install phantomjs globally. This is used for running tests.
+```bash
+cd /usr/local/share
+sudo wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2
+sudo tar xjf phantomjs-1.9.8-linux-x86_64.tar.bz2
+sudo ln -s /usr/local/share/phantomjs-1.9.8-linux-x86_64/bin/phantomjs /usr/local/share/phantomjs
+sudo ln -s /usr/local/share/phantomjs-1.9.8-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs
+sudo ln -s /usr/local/share/phantomjs-1.9.8-linux-x86_64/bin/phantomjs /usr/bin/phantomjs
+```
+
 ```bash
 # Install Angular CLI globally. This is useful for using the `ng generate` subcommand for templating out new Components, Modules, etc.
 npm install -g @angular/cli
@@ -206,20 +216,17 @@ cp -r ../content-sets/<your pick>/client src/assets
 cp src/assets/app-config.defaults.json src/assets/app-config.json
 # Copy the latest translations into the Angular Assets folder.
 cp ../translations/translation* src/assets/
+# Workaround for ssl issue in phantomjs: error:0308010C:digital envelope routines::unsupported
+export NODE_OPTIONS=--openssl-legacy-provider
 # Start the Angular development server.
 npm start
 ```
 
 View the app at <http://localhost:4200>.
 
-__Optional__: If you are also developing the form library Tangy Form at the same time, you can symlink that repository into `node_modules` folder. For example...
-
-```bash
-rm -r node_modules/tangy-form
-ln -s /Users/rjsteinert/Git/tangerine-community/tangy-form /Users/rjsteinert/Git/tangerine-community/tangerine/client/node_modules/tangy-form
-```
-It's nice that the Angular webpack dev server will reload your browser when making changes in the symlinked tangy-form folder.
+If using ngrok.io ot tunnelto.dev, add the --disable-host-check flag to the `npm start` command.
 
+It's nice that the Angular webpack dev server will reload your browser when making changes in the tangy-form folder.
 
 
 ## Deprecated Version of Tangerine

diff --git a/client/angular.json b/client/angular.json
@@ -37,7 +37,18 @@
               "./node_modules/material-design-icons/iconfont/material-icons.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              {
+                "input": "../tangy-form/node_modules/tesseract.js/dist/worker.min.js",
+                "inject": true,
+                "bundleName": "worker.min.js"
+              },
+              {
+                "input": "../tangy-form/node_modules/tesseract.js-core/tesseract-core.wasm.js",
+                "inject": true,
+                "bundleName": "tesseract-core.wasm.js"
+              }
+            ]
           },
           "configurations": {
             "production": {
@@ -82,31 +93,6 @@
             "browserTarget": "tangerine-client:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./src/app/core/sync-records/peers/memorystream-standalone.js",
-              "./src/app/core/sync-records/peers/pouchdb.replication-stream.min.js"
-            ],
-            "assets": [
-              "src/libs/bcrypt.min.js",
-              "src/libs/plotly-latest.min.js",
-              "src/logo.png",
-              "src/loading.gif",
-              "src/favicon.ico",
-              "src/shell/index.html",
-              "src/assets"
-            ]
-          }
-        },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
@@ -120,33 +106,6 @@
           }
         }
       }
-    },
-    "tangerine-client-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "tangerine-client:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "tangerine-client:serve:production"
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
     }
   },
   "defaultProject": "tangerine-client",

diff --git a/client/package.json b/client/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start-using-proxy": "ng serve --disable-host-check",
     "build": "ng build --base-href \"./\"",
     "test": "ng test",
     "test-ci": "ng test --watch=false",
@@ -84,18 +85,8 @@
     "@angular/cli": "~9.1.4",
     "@angular/compiler-cli": "~9.1.4",
     "@angular/language-service": "~9.1.4",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.8.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~3.8.3"

diff --git a/client/src/polyfills.ts b/client/src/polyfills.ts
@@ -48,6 +48,8 @@ import 'tangy-form/input/tangy-signature.js';
 import 'tangy-form/input/tangy-toggle.js';
 import 'tangy-form/input/tangy-radio-blocks.js';
 import 'tangy-form/input/tangy-video-capture.js';
+import 'tangy-form/input/tangy-ocr.js';
+
 
 import { Loc } from 'tangy-form/util/loc.js';
 (window as any).Loc = Loc

diff --git a/entrypoint-development.sh b/entrypoint-development.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-
+echo "entrypoint-development.sh - starting server"
 cd /tangerine/server 
 npm run start:debug &
 
@@ -8,9 +8,10 @@ if [ "$T_NGROK_AUTH_TOKEN" ]; then
   ./node_modules/.bin/ngrok http -subdomain="$T_NGROK_SUBDOMAIN" 80 &
 fi
 
-
+echo "entrypoint-development.sh - starting client"
 cd /tangerine/client
 ./node_modules/.bin/ng build --watch --poll 100 --base-href ./ --output-path ./dev &
 
+echo "entrypoint-development.sh - starting editor"
 cd /tangerine/editor
 npm run dockerdev
diff --git a/tangy-form/index.js b/tangy-form/index.js
@@ -20,3 +20,4 @@ import './input/tangy-partial-date.js';
 import './input/tangy-toggle.js';
 import './input/tangy-gate.js';
 import './input/tangy-ethio-date.js';
+import './input/tangy-ocr.js';