Touchscreen navigation of content

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?


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>
    <meta charset="UTF-8">
    <title>PDF Viewer</title>
        #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;
    <div id="pdfContainer">
        <canvas id="pdfViewer"></canvas>
        <div class="arrow left" onclick="previousPage()">&lt;</div>
        <div class="arrow right" onclick="nextPage()">&gt;</div>

    <script src=""></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

        // 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


        // Go to the previous page
        function previousPage() {
            if (currentPage > 1) {

        // Go to the next page
        function nextPage() {
            if (currentPage < totalPages) {

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?


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