Git Product home page Git Product logo

djvu-html5's Introduction

djvu-html5

DjVu file viewer working as pure HTML5. Browse DjVu files without any additional tools or plugins!

Based on the DjVu viewer implementation for Java by LizardTech, Inc. http://sourceforge.net/projects/javadjvu/

Adapted and optimized for GWT framework by Mateusz Matela.

Released under the GNU General Public License version 2, see the LICENSE file for details.

Live demo

Click here to open the viewer with a sample DjVu file

Getting started

Download and unpack the latest version. Open the Djvu_html5.html file in a web browser to see the viewer with a sample document opened (this works best in Firefox, Chrome needs to be started with parameter --allow-file-access-from-files for this to work). This html file can be used directly or as an example of how to invoke the viewer: reference the required stylesheet and javascript and add a <div id="djvuContainer"> element that the viewer can attach to. For best experience on mobile devices, it's recommended to disable page scaling with proper <meta name="viewport" ...> tag - otherwise a user may end up with resized view, not able to restore it as all touch input is intercepted by the djvu canvas.

The location of the DjVu document that should be opened can be defined in one of three ways:

  • An attribute for the div element:file="document.djvu"
  • A parameter in the URL: ?file=document.djvu
  • A property in a DJVU_CONTEXT object created in JavaScript before the page loading finishes:
	var DJVU_CONTEXT = {
		file: "document.djvu"
	};

Other settings that can be defined in the DJVU_CONTEXT object are listed here.

It is highly recommended to use Google Chrome - this browser is currently the fastest with the viewer.

Note: the HTML file, the referenced JavaScript file and the DjVu document must all be located on the same host, otherwise the viewer will not work.

Integration with dLibra Digital Libraries Framework

See instructions

Getting involved

The project is prepared with Eclipse and Google Plugin. It can be imprted directly as an Eclipse project or managed with Maven. If you want another tool stack, you're on your own (help with improving this welcome).

Instructions for Eclipse

  1. You'll need Java 8 and Eclipse (from https://www.eclipse.org/downloads/, recommended package is IDE for Jave EE Developers).
  2. Dwonload GWT SDK 2.8.1 from http://www.gwtproject.org/download.html
  3. In Eclipse, go to Help -> Install New Software..., enter update site https://dl.google.com/eclipse/plugin/4.6 (or other version, corresponding to the Eclipse version) and select Google Plugin for Eclipse 4.4/4.5/4.6. Install and restart.
  4. In Preferences -> Google -> Web Toolkit provide the location where GWT SDK was unpacked.
  5. Clone the GIT repository and import project djvu-html5.
  6. There's an error in the project: The GWT SDK JAR gwt-servlet.jar is missing in the WEB-INF/lib directory. In the Markers view, use a quick fix Synchronize <WAR>/WEB-INF/lib with SDK libraries.
  7. Right-click on the project, Run as -> Web Application (GWT Super Dev Mode). The viewer should now be available here: http://127.0.0.1:8888/Djvu_html5.html
  8. To prepare distribution that can be put on an external web server, right-click on the project, Google -> GWT Compile. Select the project and proceed with the compilation. Copy djvu-html5/war to the external server.

Instructions for Maven

The project can be added in Eclipse or IntelliJ. To compile and run from command line:

  1. cd into djvu-html directory and type:

    > mvn clean install
    > mvn gwt:run
    
  2. GWT Development Mode window shows up, wait until the Jetty server starts.

  3. When the terminal shows the message The code server is ready at http://127.0.0.1:9876, the viewer should be available here: http://127.0.0.1:8888/Djvu_html5.html

djvu-html5's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

djvu-html5's Issues

JavaScript files not downloaded when repository cloned

There are two files missing when the repository is cloned:

Repos/djvu-html5/djvu-html5/war/djvu_html5/djvu_html5.nocache.js
Repos/djvu-html5/djvu-html5/war/djvu_html5/180E99CB20CC2E40C16924A6801C89F8.cache.js

The page does not work without these files.

Viewer fails with documents containing JPEG encoded layers

For http://fbc.pionier.net.pl/view/nnnqbs2 we got multiple errors of this kind:
djvu_html5-0.js:1158 Tue May 17 15:09:05 GMT+200 2016 com.google.gwt.logging.client.LogConfiguration SEVERE: (TypeError) : Cannot read property 'Pb' of nullcom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'Pb' of null at Unknown.JL(djvu_html5-0.js) at Unknown.IL(djvu_html5-0.js) at Unknown.nK(djvu_html5-0.js) at Unknown.td(djvu_html5-0.js) at Unknown.qd(djvu_html5-0.js) at Unknown.Dd(djvu_html5-0.js) at Unknown.yd(djvu_html5-0.js) at Unknown.bd(djvu_html5-0.js) at Unknown.ed(djvu_html5-0.js) at Unknown.eval(djvu_html5-0.js) at Unknown.d(djvu_html5-0.js)

Is OCR planned for HTML5 plugin?

Hello, same question as in the subject.
Will HTML5 support the OCR in future?

Witam,
Wtyczka jest genialna i świetnie działa, umożliwiając ludziom mobilne przeglądanie treści, tylko brakuje w niej bardzo możliwości przeszukiwania tekstu przez OCR. Czy jest w planach wprowadzenie tego bądź jakieś inne rozwiązanie to umożliwiające?

URL parameter to specify which page to open?

Hello, I would like to link to a specific page of a DjVu file on a dLibra website, not the first page. Is this currently possible with the HTML5 viewer? If not, can you consider adding a URL parameter like 'page' to define which page of the file is initially opened? Thank you for this project.

Does not work locally on Chrome even with "--allow-file-access-from-files"

When I run file:///C:/Djvu_html5/Djvu_html5.html in Chrome with --allow-file-access-from-files enabled it fails to load the sample file. Instead it shows the unhappy face and no error in the console. It works just fine in Firefox. It's also broken in Chromium using CefSharp. I also tried it with the --allow-external-pages, --disable-web-security and --allow-file-access-from-files all at the same time with the same result, I verified these flags were enabled by checking chrome://version/.

The whole point is I'm trying to embed DjVu in a C# program and this looks like the easiest solution if it would work.

First impressions

It is great to have this option for displaying DJVU files in a browser. I haven't yet attempted to look at the code, just played with the demo a bit. Here are my first impressions, and ideas for minor improvements.

Not all documents have big margins at the top to accommodate the toolbar overlaying the document. Would be nice to have an option for the toolbar to be positioned separately from the djvuContainer, or in its own space above the graphics area, if within the djvuContainer. The relative sizes of the controls and the document margins also vary depending on the size of the browser window, so what might look fine on a big window might not look so fine on a little one.

Pretty dog-slow on a phone (no surprise, really), but would save data transfer by using DJVU instead of other formats.

Would be nice if the default size were "fit to width" rather than "100%".

The scrollbars seem to overlap the document a bit... not sure they are needed on mobile... default scrolling there is by tap-n-drag, rather than scrollbars... so default scrollbars would have disappeared on mobile, but your custom ones don't. Maybe that should be an option, too... standard vs custom scrollbars.

How can I disable djvu-html5 in my browser (Firefox 51)?

I like to download whole djvu files (merged) which is possible only using DJVu Plugin Viewer. In some cases djvu-html5 loads too fast making it impossible to choose the other viewer. How can I change my viewer or set a default viewer?

error

bonjour
I have this error with firefox 57.0.1 (64 bits):

Error: com.google.gwt.useragent.client.UserAgentAsserter$UserAgentAssertionError: Possible problem with your *.gwt.xml module file. The compile time user.agent value (safari) does not match the runtime user.agent value (gecko1_8). Expect more errors.

81EB501BD7AB47786C30D3175CE1EA2B.cache.js:826:3636
rb

A new release?

I see that the 'changing pages' problem has been fixed, but unfortunately we can't use it without a new release... :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.