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: https://github.com/readium/SDKLauncher-iOS/commit/fa0ddcb6720dc194afb9ecff037f75c857d77dac

OSX fix: https://github.com/readium/SDKLauncher-OSX/commit/df7f8196de5f0ddbe62a299b2846d54757467887

Android fix: https://github.com/readium/SDKLauncher-Android/commit/aabd318db642891b94badf8b893d1669a0bf638d

[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-jsall.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: https://github.com/readium/readium-shared-js/issues/364

[danielweck]

@nimisis undefined e.changedTouches

Thank you for reporting this. Issue filed: https://github.com/readium/readium-shared-js/issues/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 - https://github.com/readium/readium-sdk/commit/153ee285f54fb831c41562b0a4fdf34527be9e12 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/)