Ocr

Gruntfile.js

@@ -25,6 +25,8 @@ module.exports = function (grunt) {
 
         global:
         {
+            bases: [__dirname],
+            hostname: 'localhost',
             minify: 'optimize=none',
             port: '8001'
         },
@@ -360,8 +362,9 @@ module.exports = function (grunt) {
             dev: {
                 options: {
                     port: '<%= global.port %>',
-                    base: '.',
-                    directory: '.',
+                    hostname: '<%= global.hostname %>',
+                    base: '<%= global.bases %>',
+                    directory: '<%= global.bases %>',
                     keepalive: true,
                     open: {
                         target: 'http://localhost:<%= global.port %>/<%= config.directories.examples %>/'

README.md

@@ -1,5 +1,86 @@
-# Universal Viewer
+# Universal Viewer (with OCR module)
 
+This is a fork from Universal Viewer that implements a new OCR module.
+
+## What is the OCR module?
+
+The OCR module render a new right panel where you can find the text extracted from the viewed image, retrieved from a web-annotation service.
+
+## Functionality
+
+OCR module allows to show, in a new right panel, the text extracted from the viewed image by an OCR Software (e.g. Tesseract). 
+Moreover you can highlight the text within the OCR panel finding it on the image. 
+The highlighted text is rendered like searching with the footer panel search.
+
+![Demo Screenshot](http://uvdemo.4science.it/screenShotDemo01.jpg "Demo Screenshot")
+
+## Examples
+
+Try a live demo here : http://uvdemo.4science.it
+
+## How to enable the OCR module
+
+For using the OCR module you need to add a new service in your manifest :
+
+    "service": [
+                ...
+                {
+                  "@context" : "http://www.w3.org/ns/anno.jsonld",
+                  "@id"      : "{ocrservice-id}",
+                  "profile"  : "http://4science.it/api/ocr/0/annotationCollection",
+                  "label"    : "OCR"
+                }
+              ]
+
+See http://uvdemo.4science.it/manifest/hamlet for an example manifest.
+
+## How does it works?
+
+The annotation server respond with an annotation collection described as below : 
+
+    {
+        "@context": [
+            "http://www.w3.org/ns/anno.jsonld"
+        ],
+        "@id": "{ocr-service-id}?q={canvas-id}",
+        "type": "AnnotationCollection",
+        "label": "Page OCR",
+        "total": 184,
+        "first": {
+            "id": "{ocr-service-id}/annotationPage?q={canvas-id}#ltr",
+            "type": "AnnotationPage",
+            "startIndex": 0,
+            "items": [
+                {
+                    "id": "{item-id}#word_1_1",
+                    "type": "Annotation",
+                    "body": {
+                        "type": "TextualBody",
+                        "value": "64",
+                        "format": "text",
+                        "textDirection": "ltr"
+                    },
+                    "target": [
+                        "{canvas-id}#xywh=107,83,16,13",
+                        "{canvas-id}#area=block_1_1",
+                        "{canvas-id}#paragraph=par_1_1",
+                        "{canvas-id}#line=line_1_1"
+                    ]
+                }
+            ]
+        }
+    }
+
+The server response is parsed by the new module and showed as a text rapresentation of the viewed image.
+
+[Next steps]
+
+- Enable editing of each single annotation (eg. single word recognized by the OCR software) from the user interface;
+- Create a new annotation by drawing it over the image. 
+
+# Universal Viewer 
+
+[![Build Status](https://travis-ci.org/UniversalViewer/universalviewer.svg?branch=master)](https://travis-ci.org/UniversalViewer/universalviewer) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/UniversalViewer/universalviewer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Build Status](https://travis-ci.org/UniversalViewer/universalviewer.svg?branch=master)](https://travis-ci.org/UniversalViewer/universalviewer) 
   
 <a href="https://universalviewerinvite.herokuapp.com"><img src="https://worldvectorlogo.com/logos/slack.svg" width="60" /></a>

bower.json

@@ -17,7 +17,7 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "uv-cy-GB-theme": "universalviewer/uv-cy-GB-theme",
-    "uv-en-GB-theme": "universalviewer/uv-en-GB-theme"
+    "uv-cy-GB-theme": "4Science/uv-cy-GB-theme",
+    "uv-en-GB-theme": "4Science/uv-en-GB-theme"
   }
-}
+}

dist/uv-2.0.1/themes/uv-cy-GB-theme/css/uv-mediaelement-extension/theme.css

@@ -2189,6 +2189,13 @@ input[type=range]:focus::-ms-fill-upper {
   cursor: pointer;
   left: 35px;
 }
+#app .rightPanel .top .clearSel {
+  position: absolute;
+  height: 20px;
+  margin-top: 9px;
+  cursor: pointer;
+  right: 5px;
+}
 #app .rightPanel .top .collapseButton {
   position: absolute;
   background: url('../../img/uv-shared-module/arrows_right.png') no-repeat;
@@ -2243,6 +2250,10 @@ input[type=range]:focus::-ms-fill-upper {
   margin-right: 10px;
   margin-bottom: 10px;
 }
+#app .rightPanel .main .wordHighlightDiv {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 #app.browser-Explorer.browser-version-8 .rightPanel .closed .title {
   writing-mode: tb-lr;
 }
@@ -2462,6 +2473,27 @@ input[type=range]:focus::-ms-fill-upper {
   color: #fff;
   text-decoration: none;
 }
+#app .footerPanel .options a.logo {
+  background-image: url('../../img/footer_logo.png');
+  background-repeat: no-repeat;
+  height: 21px;
+  line-height: 21px;
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-position: left center;
+  padding-left: 0;
+  padding-right: 10px;
+  line-height: 22px;
+  position: absolute;
+}
+#app .footerPanel .options a.logo:link,
+#app .footerPanel .options a.logo:visited,
+#app .footerPanel .options a.logo:hover,
+#app .footerPanel .options a.logo:active {
+  color: #fff;
+  text-decoration: none;
+}
 #app .footerPanel .options a.print {
   background-image: url('../../img/uv-shared-module/print.png');
   background-repeat: no-repeat;
@@ -2586,6 +2618,16 @@ input[type=range]:focus::-ms-fill-upper {
   width: 27px;
   padding: 0;
 }
+#app .footerPanel .options.minimiseButtons a.logo {
+  font: 0/0 a;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+  padding: 0;
+}
 #app .footerPanel .options.minimiseButtons a.print {
   font: 0/0 a;
   text-shadow: none;

dist/uv-2.0.1/themes/uv-cy-GB-theme/css/uv-pdf-extension/theme.css

@@ -3045,6 +3045,13 @@ input[type=range]:focus::-ms-fill-upper {
   cursor: pointer;
   left: 35px;
 }
+#app .rightPanel .top .clearSel {
+  position: absolute;
+  height: 20px;
+  margin-top: 9px;
+  cursor: pointer;
+  right: 5px;
+}
 #app .rightPanel .top .collapseButton {
   position: absolute;
   background: url('../../img/uv-shared-module/arrows_right.png') no-repeat;
@@ -3099,6 +3106,10 @@ input[type=range]:focus::-ms-fill-upper {
   margin-right: 10px;
   margin-bottom: 10px;
 }
+#app .rightPanel .main .wordHighlightDiv {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 #app.browser-Explorer.browser-version-8 .rightPanel .closed .title {
   writing-mode: tb-lr;
 }
@@ -3318,6 +3329,27 @@ input[type=range]:focus::-ms-fill-upper {
   color: #fff;
   text-decoration: none;
 }
+#app .footerPanel .options a.logo {
+  background-image: url('../../img/footer_logo.png');
+  background-repeat: no-repeat;
+  height: 21px;
+  line-height: 21px;
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-position: left center;
+  padding-left: 0;
+  padding-right: 10px;
+  line-height: 22px;
+  position: absolute;
+}
+#app .footerPanel .options a.logo:link,
+#app .footerPanel .options a.logo:visited,
+#app .footerPanel .options a.logo:hover,
+#app .footerPanel .options a.logo:active {
+  color: #fff;
+  text-decoration: none;
+}
 #app .footerPanel .options a.print {
   background-image: url('../../img/uv-shared-module/print.png');
   background-repeat: no-repeat;
@@ -3442,6 +3474,16 @@ input[type=range]:focus::-ms-fill-upper {
   width: 27px;
   padding: 0;
 }
+#app .footerPanel .options.minimiseButtons a.logo {
+  font: 0/0 a;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+  padding: 0;
+}
 #app .footerPanel .options.minimiseButtons a.print {
   font: 0/0 a;
   text-shadow: none;

dist/uv-2.0.1/themes/uv-cy-GB-theme/css/uv-seadragon-extension/theme.css

@@ -2075,6 +2075,13 @@ input[type=range]:focus::-ms-fill-upper {
   cursor: pointer;
   left: 35px;
 }
+#app .rightPanel .top .clearSel {
+  position: absolute;
+  height: 20px;
+  margin-top: 9px;
+  cursor: pointer;
+  right: 5px;
+}
 #app .rightPanel .top .collapseButton {
   position: absolute;
   background: url('../../img/uv-shared-module/arrows_right.png') no-repeat;
@@ -2129,6 +2136,10 @@ input[type=range]:focus::-ms-fill-upper {
   margin-right: 10px;
   margin-bottom: 10px;
 }
+#app .rightPanel .main .wordHighlightDiv {
+  padding-left: 5px;
+  padding-right: 5px;
+}
 #app.browser-Explorer.browser-version-8 .rightPanel .closed .title {
   writing-mode: tb-lr;
 }
@@ -2348,6 +2359,27 @@ input[type=range]:focus::-ms-fill-upper {
   color: #fff;
   text-decoration: none;
 }
+#app .footerPanel .options a.logo {
+  background-image: url('../../img/footer_logo.png');
+  background-repeat: no-repeat;
+  height: 21px;
+  line-height: 21px;
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-position: left center;
+  padding-left: 0;
+  padding-right: 10px;
+  line-height: 22px;
+  position: absolute;
+}
+#app .footerPanel .options a.logo:link,
+#app .footerPanel .options a.logo:visited,
+#app .footerPanel .options a.logo:hover,
+#app .footerPanel .options a.logo:active {
+  color: #fff;
+  text-decoration: none;
+}
 #app .footerPanel .options a.print {
   background-image: url('../../img/uv-shared-module/print.png');
   background-repeat: no-repeat;
@@ -2472,6 +2504,16 @@ input[type=range]:focus::-ms-fill-upper {
   width: 27px;
   padding: 0;
 }
+#app .footerPanel .options.minimiseButtons a.logo {
+  font: 0/0 a;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+  padding: 0;
+}
 #app .footerPanel .options.minimiseButtons a.print {
   font: 0/0 a;
   text-shadow: none;