This is a fork from Universal Viewer that implements a new 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.

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.

Try a live demo here : http://uvdemo.4science.it

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.

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.

npm install universalviewer --save

Examples

Google group

Twitter

• Zoomable

  OpenSeadragon image zooming using the IIIF image API

• Embeddable

  YouTube-style embedding with deep links to specific pages/zoom regions.

• Themable

  Fork the UV theme on github to create your own.

• Configurable

  The UV has its own visual configuration editor allowing all settings to be customised.

• Extensible

  Supports "IxIF" out of the box, allowing 3D, audio, video, and pdf viewing experiences.

More about the Universal Viewer

See the GitHub releases page.

The most up-to-date code can usually be found on the dev branch. Please see the wiki for instructions on how to customise the viewer for your own projects.

All command-line operations for building the UV are scripted using Grunt which is based on Node.js. To get set up:

1. Install Node.js, if you haven't already

2. Install the grunt command line interface (if you haven't already); on the command line, run:

    npm install -g grunt-cli
   

3. Install bower (if you haven't already)

    npm install -g bower
   

4. Clone the universalviewer repository and sub modules:

    git clone https://github.com/UniversalViewer/universalviewer.git --recursive
   

5. On the command line, go in to the universalviewer folder

6. Run

    npm install
    bower install
    grunt sync
   

To build the debug version of the viewer, just run (on the command line, in the universalviewer folder):

grunt

This will compile the .less files into .css and .ts files into .js with source maps to aid in debugging.

To build the distribution version of the UV, just run (on the command line, in the universalviewer folder):

grunt build

A versioned uv-major.minor.patch folder along with compressed .zip and .tar files will appear in the /dist folder. Use these in your website, or alternatively use:

npm install universalviewer --save

which will download the distribution folder to node_modules.

To view the examples run:

grunt
grunt examples

The Universal Viewer is released under the MIT license.