Value of getCurrentSelectionCfi() is showing null. How to integrate highlighting feature in ReadiumSDK ?

[danielweck]

Is that with fixed-layout EPUBs? Or reflowable?

Could you please have a look at https://readium.firebaseapp.com/?epub=epub_content%2Faccessible_epub_3 to see how selection highlights work?

[Dchahar]

Your SDK supports only fixed-layout i guess! I'm using your SDK only. For integration of highlight feature do i have to purchase your license? Or is it possible to use highlight feature without purchasing your license? If yes, then please let me know the procedure to use the annotations.

[danielweck]

The Readium SDK (i.e. C++ source code) is available under the following terms: http://readium.org/membership/license-readium-sdk

The code known as "Readium JS" can be used any way you like, under permissive license terms.

[danielweck]

There are issues with selection+highlighting in fixed-layout EPUBs. This feature ; still at experimental stage ; works more reliably in reflowable documents.

Both ReadiumSDK and ReadiumJS share a common library, see the source code in the "readium-shared-js" repository. This is where selection and highlighting is implemented, see this plugin: https://github.com/readium/readium-shared-js/tree/develop/plugins/highlights ...and see how it is integrated in "readium-js-viewer" (keyword search "plugins.highlights"): https://github.com/readium/readium-js-viewer/blob/develop/src/js/EpubReader.js#L824

        // Set handlers for click events
        $(".icon-annotations").on("click", function () {
            readium.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "test-highlight");
        });

            ReadiumSDK.on(ReadiumSDK.Events.PLUGINS_LOADED, function () {
                Globals.logEvent("PLUGINS_LOADED", "ON", "EpubReader.js");

                console.log('PLUGINS INITIALIZED!');

                if (!readium.reader.plugins.highlights) {
                    $('.icon-annotations').css("display", "none");
                } else {

                    readium.reader.plugins.highlights.initialize({
                        annotationCSSUrl: readerOptions.annotationCSSUrl
                    });

                    readium.reader.plugins.highlights.on("annotationClicked", function(type, idref, cfi, id) {
        console.debug("ANNOTATION CLICK: " + id);
                        readium.reader.plugins.highlights.removeHighlight(id);
                    });
                }

            });