SDKLauncher-iOS Highlight does not work on IOS

[lwm561]

SDKLauncher-iOS I don't know how to use object-c call javascript(readium-plugin-highlights.js) function，
Is there a way to do highlight in iOS。
Thanks in advance,
Kind regards

[danielweck]

https://github.com/readium/SDKLauncher-iOS/blob/master/Classes/EPubViewController.m#L176

[self executeJavaScript:@"JAVASCRIPT_CODE" completionHandler:nil];

Replace "JAVASCRIPT_CODE" with: ReadiumSDK.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "test-highlight");

Note, that's how it's also done in the cloud reader / Chrome app:
https://github.com/readium/readium-js-viewer/blob/develop/src/js/EpubReader.js#L824

PS: don't forget to npm run build readium-shared-js with the "highlights" plugin enabled in the CSON configuration:
https://github.com/readium/readium-shared-js/blob/develop/plugins/plugins.cson#L1
(then, the contents of the build-output/ folder will contain the Javascript code needed by SDKLauncher-iOS)

[lwm561]

Thank you very much Daniel.
I going to implement step by step according to your reply，but highlight does not work on IOS.

this is the debug code

readium-shared-js/plugins/highlights/manager.js
https://github.com/readium/readium-shared-js/blob/develop/plugins/highlights/manager.js#L143

this.addSelectionHighlight = function(id, type, styles, clearSelection) {
        window.webkit.messageHandlers.readium.postMessage({body: 'addSelectionHighlight'});

        for(var spine in liveAnnotations) {
            var annotationsForView = liveAnnotations[spine];
            if (annotationsForView.getCurrentSelectionCFI()) {
                var annotation = annotationsForView.addSelectionHighlight(
                    id, type, styles, clearSelection);
                return new BookmarkData(spines[spine].idref, annotation.CFI);
            }
        }
        return undefined;
};

the addSelectionHighlight() function cann't execute

Thanks in advance,
Kind regards

[danielweck]

What do you mean by "cannot execute"? Is there an error like "undefined function"? Or is another exception raised?

[lwm561]

Thank you Daniel for your fast response and help
the log print:
[Warning] WARNING! Annotations CSS not supplied. Highlighting might not work. (readium-plugin-highlights.js, line 2000) [Warning] Plugin highlights: Unable to attach to currently loaded content document. (readium-shared-js.js, line 586) Initialize the plugin before loading a content document.

[danielweck]

Ah, sorry, there is a bug in:
https://github.com/readium/SDKLauncher-iOS/blob/develop/Resources/host_app_feedback.js#L199
=>
reader.plugins.annotations should be replaced with reader.plugins.highlights

[lwm561]

Thank you
I just replaced (reader.plugins.annotations replaced with reader.plugins.highlights),
but xcode print:
SDKLauncher-iOS[42000:905612] Error Domain=WKErrorDomain Code=5 "JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type}

[danielweck]

Is the error coming from SDKLauncher-iOS/Resources/host_app_feedback.js?
Which function call? (do you have a stacktrace?)

[danielweck]

Note that the same code is used in the cloud reader / Chrome app:
https://github.com/readium/readium-js-viewer/blob/develop/src/js/EpubReader.js#L1105

iOS:
https://github.com/readium/SDKLauncher-iOS/blob/develop/Resources/host_app_feedback.js#L199

OSX:
https://github.com/readium/SDKLauncher-OSX/blob/develop/LauncherOSX/ReaderScripts/host_app_feedback.js#L196

Android:
https://github.com/readium/SDKLauncher-Android/blob/develop/SDKLauncher-Android/app/src/main/assets/readium-shared-js/host_app_feedback.js#L208

[lwm561]

the host_app_feedback.js file in code:
https://github.com/readium/SDKLauncher-iOS/blob/develop/Resources/host_app_feedback.js#L196
var opts = { needsFixedLayoutScalerWorkAround: true, el: "#viewport", annotationCSSUrl: '/readium_Annotations.css' //prefix + '/css/annotations.css' };
but I cannot found readium_Annotations.css file

Thank you so much Daniel
Kind regards

[danielweck]

The /readium_Annotations.css URL is "special", in the sense that it does not correspond to a real file name. Instead, the iOS app intercepts the HTTP request for this URL, and returns a response with the contents of the real file annotations.css. See:
https://github.com/readium/SDKLauncher-iOS/blob/master/Classes/EPubViewController.m#L141
https://github.com/readium/readium-sdk/blob/develop/Platform/Apple/RDServices/Main/RDPackageResourceConnection.m#L193

[danielweck]

FYI, "plugin.annotations" now renamed to "plugin.highlights".

iOS fix:
fa0ddcb

OSX fix:
readium/SDKLauncher-OSX@df7f819

Android fix:
readium/SDKLauncher-Android@aabd318

[lwm561]

Hi Daniel
I replaced (reader.plugins.annotations replaced with reader.plugins.highlights),
https://github.com/readium/SDKLauncher-iOS/blob/develop/Resources/host_app_feedback.js#L204
but nothing happens.
[Error] TypeError: undefined is not an object (evaluating 'lastTouch.pageX') boundHighlightCallback (readium-plugin-highlights.js:1189) dispatch (readium-external-libs.js:4737) handle (readium-external-libs.js:4549)

[danielweck]

Interesting. This looks like an iOS -specific bug (touch events). @jccr did you come across this?

[lwm561]

It works

ReadiumSDK.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "test-highlight")replaced with ReadiumSDK.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "highlight")

Thank you so much Daniel

[lwm561]

Hi @danielweck
When change the font size，Highlighting dislocation

[dengzhucai]

Hi @danielweck
When change the chapter or into other epub books，ReadiumSDK.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "highlight") does not work.

[nimisis]

On iOS, e.changedTouches on line 16861 of readium-shared-js_all.js is undefined when I touch a highlight. Changing to
var lastTouch = _.last(e.originalEvent.changedTouches);
does then trigger the AnnotationHoverIn event, but there is then an exception on line 117 where
if (!this._events[evt]) return false;
because _events is undefined. Any thoughts on a fix would be greatly appreciated.

[danielweck]

@lwm561
When change the font size，Highlighting dislocation

Thanks for the feedback. Issue filed: readium/readium-shared-js#364

[danielweck]

@nimisis
undefined e.changedTouches

Thank you for reporting this. Issue filed: readium/readium-shared-js#365

[danielweck]

@nimisis I am not able to find references to if (!this._events[evt]) return false;, could you please give me a pointer into the develop branch? Thank you!
Daniel

[nimisis]

@danielweck Sure, it triggered on line 117 of index.js when I was debugging with Safari, but it looks like it's at line 15105 of readium-shared-js_all.js of the single bundle or line 14898 of readium-external-libs.js of the multiple-bundles. Hope that helps!

[danielweck]

oh, this sounds like a bug in an external library then. what revision of Readium are you using? (git commit hash)
also, would you be able to build your own readium-shared-js lib from source? (from the master or develop branch)
and finally, you should be able to use the readium-shared-js sourcemaps with your pre-built (or self-built) lib, so that the web inspector / debugger shows human-friendly code references / breakpoints.

[nimisis]

This one - readium/readium-sdk@153ee28
Happy to try to build my own readium-shared-js lib from source, though if there are some instructions somewhere you might kindly point me to that would be much appreciated.

[danielweck]

@nimisis build instructions in the README: https://github.com/readium/readium-shared-js/blob/develop/README.md#prerequisites
(basically: cd readium-shared-js && npm run prepare && npm run build && ls build-output/)