Touchscreen navigation of content

Get Help Xibo Player for Android
1

Hello, I have a touchscreen android monitor I am testing on and want to be able to touch the screen (or preferably a forward or back arrow / image) that will take the user to the next PDF / image.

The PDF’s are changed daily and there could be 2-6 individual PDF pages according to the clients requirements.

Is this navigation of previous / next PDF possible?

TIA,
Peter

2

Hi Peter,

I’m not sure how Xibo would communicate directly to a pdf, but i created a webpage and using javascript i have placed arrows on the left and right side for navigation.

Xibo allows you to create a webpackage. Follow those instructions.
edit the html and change the name to your pdf file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PDF Viewer</title>
    <style>
        #pdfContainer {
            position: relative;
        }
        #pdfContainer canvas {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
        }
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            cursor: pointer;
        }
        .arrow.left {
            left: 10px;
        }
        .arrow.right {
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="pdfContainer">
        <canvas id="pdfViewer"></canvas>
        <div class="arrow left" onclick="previousPage()">&lt;</div>
        <div class="arrow right" onclick="nextPage()">&gt;</div>
    </div>

    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
    <script>
        // PDF file URL
        const pdfURL = 'NAME_OF_PDF.pdf';

        // PDF variables
        let pdf;
        let currentPage = 1;
        let totalPages = 0;

        // Get container and viewer canvas elements
        const container = document.getElementById('pdfContainer');
        const canvas = document.getElementById('pdfViewer');

        // Load the PDF document
        pdfjsLib.getDocument(pdfURL).promise.then(function (loadedPdf) {
            pdf = loadedPdf;
            totalPages = pdf.numPages;

            // Display the first page
            renderPage(currentPage);
        });

        // Render a specific page
        function renderPage(pageNumber) {
            pdf.getPage(pageNumber).then(function (page) {
                const viewport = page.getViewport({ scale: 1 });
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                page.render(renderContext);
            });
        }

        // Go to the previous page
        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
            }
        }

        // Go to the next page
        function nextPage() {
            if (currentPage < totalPages) {
                currentPage++;
                renderPage(currentPage);
            }
        }
    </script>
</body>
</html>
3

Hi David,

Thanks for that - I got it working with a local file.

Do you happen to know if this could be used to show multiple PDF’s, one after the other, navigated by using the arrows?

Best,
Peter

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.