Want to capture the start and end time for loading a document with/without annotation in WebViewer

Question

After reviewing the following link : 1 - https://www.pdftron.com/documentation/web/guides/wv-events/ -> A guide showing how to interact with WebViewer events in general 2 - https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#toc99__anchor -> List of all events triggered by the document viewer. I believe all events you need are there.

I do the following coding sample but could not get the correct result at all.

        <h:outputScript library="js" name="WebViewer/webviewer.js" target="head"/>

          <script type="text/javascript">
          
            var myWebViewer;

            $(document).ready(function() {                  
                $("#viewer").width(#{dmsAnnotationBean.viewWidth});
                $("#viewer").height(#{dmsAnnotationBean.viewHeight});
                var viewerElement = document.getElementById("viewer");
                console.log("before initial");
                myWebViewer = new PDFTron.WebViewer({
                    l: "Agency(xxx.hk/en):ENTERP:SFO Viewer::B:AMS(20190308):BB6765701FF77AD00333527820613FFDFBFB3A4B9DF54DC2549540B604F431F5C7",
                    path: "#{dmsAnnotationBean.webviewerJsPath}",
                    type: "html5",
                    documentType: "pdf",
                    enableAnnotations: true,
                    enableReadOnlyMode: #{dmsAnnotationBean.readOnly},
                    serverUrl: "#{dmsAnnotationBean.servletUrl}/WebViewerAnnotationServlet",
                    annotationUser: "#{dmsAnnotationBean.userName}",
                    annotationAdmin: false,
                    documentId: "#{dmsAnnotationBean.did}",
                    config: "#{dmsAnnotationBean.webviewerJsPath}/config.js", 
                    fullAPI: true,
                    ui: 'legacy'
                }, viewerElement);
                
                $("#viewer").on('ready', () => {
                    console.log("on #viewer ready");
                    loadDoc();
                    timeLogA();

// timeLogA( [{ name : 'timelogP1', value : 'on #viewer Ready'}] ); console.log("end on #viewer ready"); });

                $("#viewer").on('documentLoaded', () => {                       
                    console.log("on #viewer documentLoaded");
                    timeLogA( [{ name : 'timelogP1', value : 'on #viewer ready'}] );
                    console.log("end #viewer documentLoaded");
                    //updateUserDropDown();
                });

                $("#viewer").on('beginRendering', () => {
                    console.log("on #viewer begin rendering");
                    timeLogA( [{ name : 'timelogP1', value : 'on #viewer begin rendering'}] );
                    console.log("end #viewer begin rendering");
                });
                

                myWebViewer.getInstance().docViewer.on('finishedRendering', function(event) {
                    console.log("on #viewer finish rendering");
                    timeLogA( [{ name : 'timelogP1', value : 'on #viewer finish rendering'}] );
                });

            });

        </script>   


        <h:form id="pdfAnnotationForm" >
            <p:remoteCommand name="timeLogA" actionListener="#{dmsAnnotationBean.logTime}" />

...

Result are as below :

Only on ready event could write the log for time successfully via timeLogA function
Other events, like documentLoaded, beginRendering, finishRendering could not be called successfully. ie. could not show any event message in console log and the server log.

Please give me some samples if I use the wrong method or coding to record the time log.

Thank you ! Steve

score 1 · Answer 1 · answered Oct 26 '20 at 16:51

You could do something like this framework-agnostic code snippet:

let start = 0;

Webviewer(...).then(instance => {
  const { docViewer } = instance;
  const readyEnd = performance.now();

  console.log('Ready', readyEnd - start);

  start = readyEnd;

  docViewer.on('documentLoaded', () => {
    const end = performance.now();

    console.log('Document Loaded', end - start);

    start = end;
  });

  docViewer.on('annotationsLoaded', () => {
    const end = performance.now();

    console.log('Annotations Loaded', end - start);

    start = end;
  });
});

Want to capture the start and end time for loading a document with/without annotation in WebViewer

1 Answers1