Technical FAQs for "PrizmDoc"

Question

In PrizmDoc, my text annotation won’t fit the bounding box as if there is padding on the text. How can I fix this?

Answer

Check to see if there’s any custom styling to the body tags. If you have any sort of padding applied to the “body” element in the CSS, it may affect the text annotation, which is a foreign object with a body tag in it.

Question

What is the absolute bare minimum I need to use PrizmDoc Cloud?

Answer

This will allow you to load a document via a URL using PrizmDoc Cloud. Just include your PrizmDoc Cloud API key in the POST request headers.

Please note: This is purely intended as a proof-of-concept. You should never include your API key in your client-side Javascript.

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- Metadata -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />

    <!-- Title -->
    <title>AccuSample</title>

    <!-- Libraries -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">

    <!-- PrizmDoc CSS -->
    <link rel="stylesheet" href="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/css/viewercontrol.css">
    <link rel="stylesheet" href="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/css/viewer.css">

    <!-- Inline Stylesheet -->
    <style></style>

</head>
<body>

    <!-- #viewer -->
    <div id="viewer" class="pccv pcc-full-screen"></div>

    <!-- Libraries -->
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/jquery-3.4.1.min.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/jquery.hotkeys.min.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/underscore.min.js"></script>

    <!-- PrizmDoc JS -->
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewercontrol.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewer.js"></script>
    <script src="https://raw.githack.com/Accusoft/hello-prizmdoc-viewer-with-nodejs-and-html/master/public/viewer-assets/js/viewerCustomizations.js"></script>

    <!-- Inline Script -->
    <script>

        let viewingSessionId;
        let viewerControl;

        $(document).ready(function() {
            $.ajax({
                "type": "POST",
                "url": "https://api.accusoft.com/prizmdoc/ViewingSession",
                "headers": {
                    "acs-api-key": "4lTamQVZmrkqZhH8cZhdu7L0xyhUa3gorcaCFQpA_zmuowZs4zoF39V4IckpnVW_"
                },
                "data": JSON.stringify({
                    "source": {
                        "type": "url",
                        "url": "https://www.usability.gov/sites/default/files/creating-wireframes.pdf"
                    }
                })
            }).done(function(response) {
                PCCViewer.Ajax.setHeaders({
                    "acs-api-key": "4lTamQVZmrkqZhH8cZhdu7L0xyhUa3gorcaCFQpA_zmuowZs4zoF39V4IckpnVW_"
                });

                viewingSessionId = response["viewingSessionId"];

                // Initialize viewer
                viewerControl = $("#viewer").pccViewer({ 
                    "documentID": viewingSessionId,
                    "imageHandlerUrl": "https://api.accusoft.com/prizmdoc",
                    "language": viewerCustomizations.languages["en-US"],
                    "template": viewerCustomizations.template,
                    "icons": viewerCustomizations.icons,
                    "annotationsMode": "LayeredAnnotations"
                }).viewerControl;

                viewerControl.on("ViewerReady", function() {
                    console.log("Ready!");
                });
            });
        });

    </script>

</body>
</html>
Question

Can I host multiple PrizmDoc viewers on a single page?

Answer

It is possible to host multiple viewers on a single page. The following example leverages Bootstrap’s tab implementation:

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- Metadata -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="" />

    <!-- Title -->
    <title>AccuSample</title>

    <!-- Libraries -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- PrizmCSS -->
    <link rel="stylesheet" href="https://pcc-demos.accusoft.com/static/viewer-latest/css/viewercontrol.css">
    <link rel="stylesheet" href="https://pcc-demos.accusoft.com/static/viewer-latest/css/viewer.css">

    <!-- Inline Stylesheet -->
    <style>
        body {
            overflow-y: hidden;
        }
        #viewer1, #viewer2 {
            height: calc(100vh - 3em);
            width: 100%;
        }
    </style>

</head>
<body>
    <!-- #main -->
    <main class="container">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="viewer1-tab" data-toggle="tab" href="#viewer1">Viewer 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="viewer2-tab" data-toggle="tab" href="#viewer2">Viewer 2</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="viewer1" role="tabpanel">
                <div id="viewer1">
                </div>
            </div>
            <div class="tab-pane fade" id="viewer2" role="tabpanel">
                <div id="viewer2">
                </div>
            </div>
        </div>
    </main>

    <!-- Libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

    <!-- PrizmJS -->
    <script src="https://api.accusoft.com/v1/docstore/viewer/assets/classic/bundle.js"></script>
    <script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/jquery.hotkeys.min.js"></script>
    <script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/viewercontrol.js"></script>
    <script src="https://pcc-demos.accusoft.com/static/viewer-latest/js/viewer.js"></script>

    <!-- Inline Script -->
    <script>
        var viewingSessionId1;
        var viewerControl1;
        var viewingSessionId2;
        var viewerControl2;

        $(document).ready(function() {
            $.ajax({
                "type": "post",
                "url": "https://api.accusoft.com/PAS/V1/ViewingSession",
                "headers": {
                    "acs-api-key": ""
                },
                "data": JSON.stringify({
                    "source": {
                        "type": "url",
                        "url": ""
                    }
                })
            }).done(function(response) {
                viewingSessionId1 = response["viewingSessionId"];

                // Initialize viewer
                viewerControl1 = $("#viewer1").pccViewer({ 
                    documentID: viewingSessionId1,
                    imageHandlerUrl: "https://api.accusoft.com/v2/viewers/proxy",
                    language: languageItems,
                    template: htmlTemplates
                }).viewerControl;
            });

            $.ajax({
                "type": "post",
                "url": "https://api.accusoft.com/PAS/V1/ViewingSession",
                "headers": {
                    "acs-api-key": ""
                },
                "data": JSON.stringify({
                    "source": {
                        "type": "url",
                        "url": ""
                    }
                })
            }).done(function(response) {
                viewingSessionId2 = response["viewingSessionId"];

                // Initialize viewer
                viewerControl2 = $("#viewer2").pccViewer({ 
                    documentID: viewingSessionId2,
                    imageHandlerUrl: "https://api.accusoft.com/v2/viewers/proxy",
                    language: languageItems,
                    template: htmlTemplates
                }).viewerControl;
            });
        });
    </script>
</body>
</html>
Question

When specifying the Amazon AWS access keys or IAM Role associated to the S3 bucket, what are the minimum necessary rights that I need to have for licensing to function?

Answer

The security policy associated to the IAM Role or User who has access to the S3 bucket needs to contain specific S3 bucket rights below:

listObjects

  • AWS S3 listObjects docs
  • Requires s3:ListBucket

putObject

  • AWS S3 putObject docs
  • Requires s3:PutObject

deleteObjects

  • AWS S3 deleteObjects docs
  • Requires s3:DeleteObject
Question

What browsers does PrizmDoc support?

Answer

Please refer to our latest documentation for the most up-to-date list of supported browsers:

For documentation on older versions of PrizmDoc, please see our documentation archive.

Question

What operating systems (Windows, Linux, etc.) does PrizmDoc officially support?

Answer

Please refer to our latest documentation for the most up-to-date list of supported operating systems:

For documentation on older versions of PrizmDoc, please see our documentation archive.

Question

What are the absolute essentials for embedding the PrizmDoc Viewer into my web page/application?

Answer

Viewer API (viewercontrol.js)

The Viewer API is the base building block of the Viewer. We ensure that API changes are backward compatible with point releases (for example, PrizmDoc v13.5 → PrizmDoc v13.6) and will not introduce breaking changes unless critical. With major releases we also endeavor to ensure backward compatibility with previous releases of the Viewer API.

HTML Templates (viewerCustomization.js) and CSS (viewercontrol.css, viewer.css)

The Viewer that is shipped with the product will be maintained and enhanced from release to release. The Viewer HTML and CSS markup will change with each release. Once you have begun to modify your markup, it is recommended that you consider subsequent PrizmDoc releases as sample code, in which you would evaluate product changes and choose to incorporate all or parts of those changes into your customization.

JavaScript files (viewer.js)

The Viewer JavaScript that lies above the Viewer API is unobfuscated and open for customization. While we expect many developer needs will be satisfied through configuration parameters and minor HTML or styling changes, some developers will desire to modify viewer.js for more advanced customization. You should carefully consider your development and ongoing maintenance strategy to ensure that future releases of PrizmDoc are easy to integrate into your customizations. We cannot guarantee backward compatibility of viewer.js in future releases as it is central to the functionality of the Viewer.

For information on integrating PrizmDoc Viewer, see the Getting Started section of the documentation.

For more in depth customization, see the PrizmDoc Customization section of the documentation.

Question

My document has Asian characters (CJK, etc.), which are not displaying correctly in PrizmDoc Viewer; what steps can I take to view them?

Answer

In some cases, the reason is due to the fonts not being installed on the operating system. We have outlined some commands to install fonts for select operating systems below:

In CentOS 6 do:

yum groupinstall "Chinese Support"
yum groupinstall "Japanese Support"
yum groupinstall "Korean Support"
yum groupinstall "Kannada Support"
yum groupinstall "Hindi Support"

In CentOS 7 do:

yum groupinstall "fonts"

In Ubuntu do:

sudo apt-get install language-pack-ja
sudo apt-get install japan*
sudo apt-get install language-pack-zh*
sudo apt-get install chinese*
sudo apt-get install language-pack-ko
sudo apt-get install korean*
sudo apt-get install fonts-arphic-ukai fonts-arphic-uming fonts-ipafont-mincho fonts-ipafont-gothic fonts-unfonts-core
Question

Many Microsoft Office files have macros in them. Does PrizmDoc execute macros that are within Office files?

Answer

PrizmDoc does not execute macros within Office documents.

Question

The PrizmDoc Office Conversion Service on my localhost:18681/admin page says it’s “Starting” or has failed to start. What could the issue be?

Answer

This indicates that the license key provided is not licensed for the Microsoft Office Conversion feature.

To fix this, modify the fidelity.msOfficeDocumentsRenderer property in prizm-services-config.yml.

For information on the supported values, see the Fidelity section in the Central Configuration topic.

Question

The http://localhost:3000/servicesConnection returns a 580 error. What could the issue be?

Answer

This indicates that PAS cannot communicate with the backend.

To fix this, verify that the PCCIS connection configuration section of pcc.*.yml is correct and that the backend is healthy and listening.

If the issue persists, check the logs/pas/pas-*.log files for network related issues.

For more information, see the Connection Issues topic.

Question

My legacy MVC and WebForms samples are inaccessible. What could the issue be?

Answer

This indicates an issue related to the IIS configuration.

To fix this, verify that the dependencies (IIS, ASP.NET 4.5, and .NET Extensibility 4.5) have been installed.

If the issue persists, reinstall the client to have the installer perform the auto-configuration of the IIS Websites.