Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android Epub Reader #250

Open
00923319067929 opened this issue Jun 14, 2014 · 5 comments
Open

Android Epub Reader #250

00923319067929 opened this issue Jun 14, 2014 · 5 comments

Comments

@00923319067929
Copy link

I am developing epub reader using monocle in android and want to display on Webview i have added monocle library files in assets i read the book contents using epub reader library and convert to html contents when i want to load to webview using book data object of monocle it does not load contents on webview below is given my code of loading contents.

<title>Dummy</title>
<script type="text/javascript" src="android_asset/src/core/monocle.js"></script> 
<script type="text/javascript" src="android_asset/src/core/factory.js"></script>
<script type="text/javascript" src="android_asset/src/core/events.js"></script>
<script type="text/javascript" src="android_asset/src/core/styles.js"></script>
<script type="text/javascript" src="android_asset/src/core/reader.js"></script>
<script type="text/javascript" src="android_asset/src/core/book.js"></script>
<script type="text/javascript" src="android_asset/src/core/component.js"></script>
<script type="text/javascript" src="android_asset/src/core/place.js"></script>
<script type="text/javascript" src="android_asset/src/framer.js"></script>
<script type="text/javascript" src="android_asset/src/dimensions/columns.js"></script>
<!-- MONOCLE FLIPPERS -->
<script type="text/javascript" src="android_asset/src/controls/panel.js"></script>
<script type="text/javascript" src="android_asset/src/panels/twopane.js"></script>
<script type="text/javascript" src="android_asset/src/dimensions/columns.js"></script>
<script type="text/javascript" src="android_asset/src/flippers/slider.js"></script>
<link rel="stylesheet" type="text/css" href="android_asset/styles/monocore.css" />
<link rel="stylesheet" type="text/css" href="android_asset/styles/monoctrl.css" /> 
<script type="text/javascript">

var bookData= { 
        getComponents: function () 
        {
            return [' contents.html ']; 
        },
        getContents: function () 
        { 
            return [ {title: book.getTitle(), src: ' contents.html '},]
        },
        getComponent: function (componentId) 
        {
            return {url:componentId};
        },
        getMetaData: function(key)
        {
            return { title: "Test document",creator: "Aron Woost" }[key];
        }
            }
            Monocle.Events.listen(
                    window,
                    'load',
                    function ()
                    {
                        //window.reader = Monocle.Reader('reader', bookData);
                        // Initialize the reader element.
                        Monocle.Reader('reader', bookData, {}, function (reader) {
                        //reader.moveTo({ page: 3 });
                    }
                );
        </script>
</head>
<body>
<div id="reader" style="width:300px; height:450px;">window.reader</div>"
</body>
</html>

please help me!

@AbhilashThomas
Copy link

Please share your code. Not some gist. You have to use some javascript interface to call the epub reader library in your book-data object.

@00923319067929
Copy link
Author

This is my code i have written android for reading epub book and loading its html contents into webview using monocle.

        wv = (WebView)findViewById(R.id.bookView);
        try
        {
               InputStream epubInputStream = new   FileInputStream(DEFAULT_INITIAL_DIRECTORY);
           book = (new EpubReader()).readEpub(epubInputStream);
           DownloadResource(DEFAULT_INITIAL_DIRECTORY);
               contents = getEntireBook();
         }
        catch(Exception e){
            Log.e("epublib", e.getMessage());
        }
        wv.getSettings().setJavaScriptEnabled(true);
        JSInterface = new JavaScriptInterface(this);
        wv.addJavascriptInterface(JSInterface, "JSInterface"); 

        File file = null;
        try 
        {
            file = new File(Environment.getExternalStorageDirectory() + File.separator + "contents.html");
            if(!file.exists())
                file.createNewFile();
            if(file.exists())
            {
                 OutputStream fo = new FileOutputStream(file);              
                 fo.write(contents.getBytes());
                 fo.close();
            }     
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        wv.loadUrl("file:///android_asset/index.html");
    }
       public class JavaScriptInterface {
        Context mContext;
        /** Instantiate the interface and set the context */
        JavaScriptInterface(Context c) {
            mContext = c;
        }
        public String getContents()
        {
            return contents;
        }
    }
    public String getEntireBook()
    {
        String line, linez = null;
        Spine spine = book.getSpine();
        Resource res;
        List<SpineReference> spineList = spine.getSpineReferences() ;
        int count = spineList.size();
        int start = 0;
        StringBuilder string = new StringBuilder();
        for (int i = start; count > i; i = i +1) 
        {
            res = spine.getResource(i);
            try 
            {
                InputStream is = res.getInputStream();
                BufferedReader reader = new BufferedReader(new InputStreamReader(is));
                try {
                        while ((line = reader.readLine()) != null) {
                        linez =   string.append(line + "\n").toString();
                    }

                } catch (IOException e) {e.printStackTrace();}
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return linez;
    }
    private void DownloadResource(String directory) 
    {
        try
        {
            Resources rst = book.getResources();
            Collection<Resource> clrst = rst.getAll();
            Iterator<Resource> itr = clrst.iterator();
            while (itr.hasNext()) 
            {
                Resource rs = itr.next();
                if ((rs.getMediaType() == MediatypeService.JPG)
                        || (rs.getMediaType() == MediatypeService.PNG)
                        || (rs.getMediaType() == MediatypeService.GIF)) 
                {
                    File oppath1 = new File(directory, "Images/"
                            + rs.getHref().replace("Images/", ""));
                    oppath1.getParentFile().mkdirs();
                    oppath1.createNewFile();
                    FileOutputStream fos1 = new FileOutputStream(oppath1);
                    fos1.write(rs.getData());
                    fos1.close();
               } 
                else if (rs.getMediaType() == MediatypeService.CSS)
                {
                    File oppath = new File(directory, "Styles/"
                            + rs.getHref().replace("Styles/", ""));
                    oppath.getParentFile().mkdirs();
                    oppath.createNewFile();
                    FileOutputStream fos = new FileOutputStream(oppath);
                    fos.write(rs.getData());
                    fos.close();
               }
            }
        } catch (Exception e) {
            Log.v("error", e.getMessage());
        }
    }

@AbhilashThomas
Copy link

Can you show your updated book-data-object where you are calling the interface?

@00923319067929
Copy link
Author

First i read my epub book the code is given below i convert my book to html

       InputStream epubInputStream = new   FileInputStream(DEFAULT_INITIAL_DIRECTORY);
       book = (new EpubReader()).readEpub(epubInputStream);
       DownloadResource(DEFAULT_INITIAL_DIRECTORY);
       contents = getEntireBook();

Then i load these html contents in a file named contents.html code given below

File file = null;
try
{
file = new File(Environment.getExternalStorageDirectory() + File.separator + "contents.html");
if(!file.exists())
file.createNewFile();
if(file.exists())
{
OutputStream fo = new FileOutputStream(file);
fo.write(contents.getBytes());
fo.close();
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Then i have written an index.html file in which i have created book data object and passing contents.html file in this book data code given below

<script type="text/javascript" src="android_asset/src/core/monocle.js"></script> <script type="text/javascript" src="android_asset/src/core/factory.js"></script> <script type="text/javascript" src="android_asset/src/core/events.js"></script> <script type="text/javascript" src="android_asset/src/core/styles.js"></script> <script type="text/javascript" src="android_asset/src/core/reader.js"></script> <script type="text/javascript" src="android_asset/src/core/book.js"></script> <script type="text/javascript" src="android_asset/src/core/component.js"></script> <script type="text/javascript" src="android_asset/src/core/place.js"></script> <script type="text/javascript" src="android_asset/src/framer.js"></script> <script type="text/javascript" src="android_asset/src/dimensions/columns.js"></script> <script type="text/javascript" src="android_asset/src/controls/panel.js"></script> <script type="text/javascript" src="android_asset/src/panels/twopane.js"></script> <script type="text/javascript" src="android_asset/src/dimensions/columns.js"></script> <script type="text/javascript" src="android_asset/src/flippers/slider.js"></script> <script type="text/javascript"> var bookData= { getComponents: function () { return [' contents.html ']; }, getContents: function () { return [ {title: book.getTitle(), src: ' contents.html '},] }, getComponent: function (componentId) { return {url:componentId}; }, getMetaData: function(key) { return { title: "Test document",creator: "Aron Woost" }[key]; } } Monocle.Events.listen( window, 'load', function () { //window.reader = Monocle.Reader('reader', bookData); // Initialize the reader element. Monocle.Reader('reader', bookData, {}, function (reader) { //reader.moveTo({ page: 3 }); } ); </script>
window.reader
"

Then i load this file in my webview code given below
wv.loadUrl("file:///android_asset/index.html");
When this file is loaded window.reader in the div tag is displayed instead of original book contents i do not understand what is actually happening. please solve my problem

@mpadiy
Copy link

mpadiy commented Oct 11, 2016

have u solved this problem ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants