• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

Show gif and html file stored in the IFS

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Show gif and html file stored in the IFS

    Hi,

    could you please point me in the right direction in how to show items stored in the IFS:

    - I have a UPS label in the IFS that I would like to open in a new browser window in print mode
    - I have a signature stored in the IFS that I would like to show in a form and grid widget
    - I have a html page that I would like to transform to pdf and open in a new browser window.

    Kind regards, Theo


    Tags: None
  • #2
    Hi Theo,
    • From a button/call RPG program if it returns a document you can set the application to attempt to open/bring up the print dialog.
    • You can show images inside a grid column just need to make sure the folder that contains the images is opened up for the Apache instance. Then you would just set a custom renderer that would return the HTML image tag with the image source URL.

      You can see an example of this from within the example applications "Simple Order Entry".

      We don't currently have a way to show an image in a form however will add this as a feature request.
    • Does this HTML page reside on the IFS?

    Comment

    • #3
      Hi Jonny,

      Thanks for your reply.

      - In what format should I return the label within the MYRPG program? I checked the EXNABBTN example but I do not find a clue in what element I should return the binary data of the gif label.

      - Thanks. That worked.

      - Yes, Its a html file on the IFS, but outside the rootdirectory of the webserver.

      Regards, Theo

      Comment

      • #4
        Hi Theo -

        You should use vvOut_file in your RPG program to return the gif.

        Comment

        • #5
          Theo,

          Creating a PDF from scratch will give you the best results since converting from an HTML page can have its issues. For example, multiple pages, sizing etc.

          Here is something to get you started and you can download it from here. It is a zip containing a folder "htmlToPdf" that has an index.html & index.js. You would just load the index.html passing variables to it and it will attempt to render/capture the page then create the PDF automatically. I still will say creating the PDF manually will give you the best results.

          Parameters:
          • url: The URL of the page you want to be converted
          • title: The title of the pdf
          I added two example pages so you can see it in action after you have placed it on your IFS and of course opened it up in Apache. The path will be based on where you placed it on your IFS and/or what was set up in your Apache config.

          Example One:
          http://IPAddress:Port/htmlToPdf/inde...&title=Invoice
          htmlToPdf Example 1.png


          Example Two:
          http://IPAddress:Port/htmlToPdf/inde...&title=Example
          htmlToPdf Example 2.png

          Below is the source of the two files because sooner than later the dropbox link above will become invalid.

          index.html
          Code:
          <!DOCTYPE HTML>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <title></title>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <style>
        iframe {
            border-top: 1px solid #eee;
            position: absolute;
            top: 0;
            left: 0;
        }

        .hide {
            display: none;
        }

        .lmask {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #000;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            z-index: 9999;
            opacity: 0.4;
        }

        .lmask.fixed {
            position: fixed;
        }

        .lmask:before {
            content: '';
            background-color: rgba(0, 0, 0, 0);
            border: 5px solid rgba(0, 183, 229, 0.9);
            opacity: .9;
            border-right: 5px solid rgba(0, 0, 0, 0);
            border-left: 5px solid rgba(0, 0, 0, 0);
            border-radius: 50px;
            box-shadow: 0 0 35px #2187e7;
            width: 50px;
            height: 50px;
            -moz-animation: spinPulse 1s infinite ease-in-out;
            -webkit-animation: spinPulse 1s infinite linear;
            margin: -25px 0 0 -25px;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .lmask:after {
            content: '';
            background-color: rgba(0, 0, 0, 0);
            border: 5px solid rgba(0, 183, 229, 0.9);
            opacity: .9;
            border-left: 5px solid rgba(0, 0, 0, 0);
            border-right: 5px solid rgba(0, 0, 0, 0);
            border-radius: 50px;
            box-shadow: 0 0 15px #2187e7;
            width: 30px;
            height: 30px;
            -moz-animation: spinoffPulse 1s infinite linear;
            -webkit-animation: spinoffPulse 1s infinite linear;
            margin: -15px 0 0 -15px;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        @-moz-keyframes spinPulse {
            0% {
                -moz-transform: rotate(160deg);
                opacity: 0;
                box-shadow: 0 0 1px #2187e7;
            }
            50% {
                -moz-transform: rotate(145deg);
                opacity: 1;
            }
            100% {
                -moz-transform: rotate(-320deg);
                opacity: 0;
            }
        }

        @-moz-keyframes spinoffPulse {
            0% {
                -moz-transform: rotate(0deg);
            }
            100% {
                -moz-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes spinPulse {
            0% {
                -webkit-transform: rotate(160deg);
                opacity: 0;
                box-shadow: 0 0 1px #2187e7;
            }
            50% {
                -webkit-transform: rotate(145deg);
                opacity: 1;
            }
            100% {
                -webkit-transform: rotate(-320deg);
                opacity: 0;
            }
        }

        @-webkit-keyframes spinoffPulse {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class='lmask' id="loadMask"></div>
<iframe id="urlFrame" width="778px" height="1120px" style="opacity:0;" frameborder="0"></iframe>
<iframe id="pdfFrame" width="100%" height="100%" class="hide" frameborder="0"></iframe>
</body>
</html>
          index.js
          Code:
          /**
 * Using html2canvas & jsPdf to convert HTML to a PDF
 * http://html2canvas.hertzen.com/documentation/
 * https://www.npmjs.com/package/jspdf
 *
 * Params
 *  - url : this is required
 *  - delayConvert : how long till we attempt to convert the page
 *  - containerId : specific id of an element to convert otherwise will be the full document
 *  - title : title of the pdf
 */
var ready = function () {
    var queryString  = window.location.search,
        urlParams    = new URLSearchParams(queryString),
        loadUrl      = urlParams.get('url'),
        delayConvert = urlParams.get('delayConvert'),
        containerId  = urlParams.get('containerId'),
        title        = urlParams.get('title') || ' ',
        frame        = document.querySelector('#urlFrame'),
        pdfFrame     = document.querySelector('#pdfFrame');

    if (!delayConvert) {
        delayConvert = 150;
    }

    if (title) {
        document.title = title;
    }

    if (!loadUrl) {
        console.log('URL not passed.');
        return;
    }

    frame.onload = function () {
        setTimeout(function () {
            var childDoc = frame.contentWindow.document,
                containerElement;

            if (containerId) {
                containerElement = childDoc.querySelector('#' + containerId);
            }

            if (!containerId) {
                containerElement = childDoc.body;
            }

            // convert the page to an image so we can put it in a PDF
            //
            html2canvas(containerElement, {
                scale : 1
            }).then(function (canvas) {
                var width      = canvas.width,
                    height     = canvas.height,
                    baseWidth  = 778,
                    baseHeight = 1120,
                    pdfFrame   = document.querySelector('#pdfFrame'),
                    pdf        = new jsPDF('p', 'pt', 'a4'),
                    srcImg     = canvas,
                    sWidth     = baseWidth,
                    sHeight    = baseHeight,
                    dWidth     = baseWidth,
                    dHeight    = baseHeight,
                    sX, sY, dX, dY, ii, ctx, canvasDataURL, singlePageCanvas;

                // set the pdf title
                //
                pdf.setProperties({
                    title : title
                });

                // set the contents of the PDF and attempt to create multiple pages if needed
                //
                for (ii = 0; ii <= containerElement.clientHeight / 1120; ii++) {
                    sX = 0;
                    sY = 1120 * ii;
                    dX = 0;
                    dY = 0;

                    singlePageCanvas = document.createElement('canvas');
                    singlePageCanvas.setAttribute('width', baseWidth);
                    singlePageCanvas.setAttribute('height', baseHeight);
                    ctx = singlePageCanvas.getContext('2d');

                    ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);

                    canvasDataURL = singlePageCanvas.toDataURL('image/png', 1.0);

                    width  = singlePageCanvas.width;
                    height = singlePageCanvas.clientHeight;

                    if (ii > 0) {
                        pdf.addPage(595, 842);
                    }

                    pdf.setPage(ii + 1);

                    pdf.addImage(canvasDataURL, 'PNG', 0, 0, (width * .72), (height * .71));
                }

                // hide the base URL frame
                //
                frame.classList.add('hide');

                // show the pdf frame
                //
                pdfFrame.classList.remove('hide');

                // load the pdf
                //
                pdfFrame.setAttribute('src', URL.createObjectURL(pdf.output('blob')));
            });
        }, delayConvert);
    };

    pdfFrame.onload = function () {
        var loadMask = document.querySelector('#loadMask');

        //hide the load mask
        //
        loadMask.classList.add('hide');
    };

    frame.setAttribute('src', loadUrl);
};


if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
    ready();
} else {
    document.addEventListener('DOMContentLoaded', ready);
}

          Comment

          • #6
            Thanks Johnny, I'll take a look in both options.

            Comment

            Previous template Next
            Working...
            X