Remove From My Forums

How to get the event when option changed in print charm by javascript?

Question

Sign in to vote

Sign in to vote

My app will print some pictures by using print charm bar, and needs to be one page one picture.

My solution for this is to set a css property "page-break-before: always;" to break pages by pictures. In addition, I set "max-width: 100%; max-height:100%;" for the picture to fit the page.

However, it does not fit to the page when I change the orientation from Portrait to Landscape. Pages will change from 10 to 12 because some pictures will occupy 2 pages. See screenshot below:

The above picture is normal and fit to page.

These two pictures above show the abnormal picture, which are split to 2 pages.

My code:

default.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Print2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- Print2 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="printBtn" class="hidden noprint">Print</button>
    <span class="noprint">Show Area</span>
    <div id="showArea" class="noprint border"></div>
    <span class="noprint">Print Area</span>
    <div id="printArea" class="hidden noprint"></div>
</body>
</html>

default.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var printTask = null;
    var pageWidth = 0;
    var pageHeight = 0;
    var imgList =
        ['1.bmp', '2.jpg', '3.png', '4.bmp', '5.jpg',
            '6.png', '7.bmp', '8.jpg', '9.jpg', '10.jpg',
            '11.jpg', '12.jpg'
        ];
    var path = '/images/test/';

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.


                // create a html div to contain all rendered img
                // set the div to hide
                // when print, set the div to show under media print mode
                // works

                // currently, the imgs are hard-coded
                // should be replaced by istorage file with mult-selection


                for (var i = 0; i < imgList.length; i++) {
                    // create img elements
                    var imgEle = document.createElement('img');
                    imgEle.src = path + imgList[i];
                    imgEle.style.maxWidth = '300px';
                    imgEle.style.maxHeight = '300px';

                    document.getElementById('showArea').appendChild(imgEle);

                    var imgToPrint = document.createElement('img');
                    imgToPrint.src = path + imgList[i];

                    var imgContainer = document.createElement('div');
                    imgContainer.id = 'imgContainerDiv_' + (i + 1);
                    imgContainer.appendChild(imgToPrint);
                    if (i !== 0) {
                        imgContainer.className = 'page';
                    }
                    var printArea = document.getElementById('printArea');
                    printArea.appendChild(imgContainer);
                    //printArea.style.display = 'block';
                }

                var printBtn = document.getElementById('printBtn');
                printBtn.className = 'show noprint';
                printBtn.onclick = function () {
                    printMultipleImgHandler();
                }

            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };


    function printMultipleImgHandler() {

        // 1.register print event
        registerForPrintContract();
    }

    function registerForPrintContract() {
        var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
        //document.getElementById("alternateContent").setAttribute("media", "print");
        printManager.onprinttaskrequested = onPrintTaskRequested;
        Windows.Graphics.Printing.PrintManager.showPrintUIAsync();

        //printer.onpaginate = setPageLayout;
        //printer.onprinttaskoptionchange = setPageLayout;
    }

    function onPrintTaskRequested(printEvent) {
        // Register print contract with a custom print template
        printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
            args.setSource(MSApp.getHtmlPrintDocumentSource(document));
            var printDetailedOptions = Windows.Graphics.Printing.OptionDetails.PrintTaskOptionDetails.getFromPrintTaskOptions(printTask.options);

            // Choose the printer options to be shown.
            // The order in which the options are appended determines the order in which they appear in the UI
            printDetailedOptions.displayedOptions.clear();

            printDetailedOptions.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.copies);
            printDetailedOptions.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.mediaSize);
            printDetailedOptions.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.orientation);
            printDetailedOptions.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.colorMode);

            printTask.options.mediaSize = Windows.Graphics.Printing.PrintMediaSize.isoA4;

            // Register the handler for option change event
            printDetailedOptions.onoptionchanged = onOptionsChanged;
            var printMediaSizeOptionDetails = printDetailedOptions.options.lookup(Windows.Graphics.Printing.StandardPrintTaskOptions.mediaSize);

        });
    }

    function onOptionsChanged(optionsEvent) {
        var optionId = optionsEvent.optionId;
        var printDetailedOptions = Windows.Graphics.Printing.OptionDetails.PrintTaskOptionDetails.getFromPrintTaskOptions(printTask.options);

    }

    function setPageLayout() {

        if ((pageWidth != printer.pageWidth) || (pageHeight != printer.pageHeight)) {
            // Set the current dimensions based on printer options.
            pageWidth = printer.pageWidth;
            pageHeight = printer.pageHeight;

            for (var i = 0; i < imgList.length; i++) {

                var imgCtnerDiv = document.getElementById('imgContainerDiv_' + (i + 1));
                imgCtnerDiv.style.width = pageWidth + 'px';
                imgCtnerDiv.style.height = pageHeight + 'px';

            }
        }
    }


    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

default.css

body {
    overflow: scroll;
}

#printBtn {
    position:fixed;
    right:0px;
    top:0px;
    z-index:10;

}

.show {
    display: block;
}

.hidden {
    display: none;
}

.border {
    border: solid red 1px;
}

.fly {
    position:fixed;
    left:0px;
    top:0px;
    z-index:-1;
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

@media print {
    .noprint {
        display: none;
    }
    #printArea {
        display:block;
        text-align:center;
        width:100%;
        height:100%;
        position:relative;
    }
    #printArea img{
        max-width: 100%;
        max-height: 100%;
    }
    .page {
        page-break-before: always;
    }
}

Is there any solution?

How to get the event when option changed in print charm by javascript?

sun

Monday, September 3, 2012 7:31 AM

All replies

0

Sign in to vote

any solution?
Sun Bin

Wednesday, September 5, 2012 10:05 AM
0

Sign in to vote

Do you get this event when the user changes from portrait to landscape?

onOptionsChanged

-Jeff
Jeff Sanders (MSFT)

Wednesday, September 5, 2012 12:55 PM

Moderator
0

Sign in to vote

Do you get this event when the user changes from portrait to landscape?

onOptionsChanged

-Jeff

Jeff Sanders (MSFT)

Yes, I can get this event, but how to change the layout when option changed?

For example, I set one image per page. If the orientation changes, the image may occupy two pages. I need to still fit the image into one page.

Sun Bin

Friday, September 14, 2012 2:10 AM
0

Sign in to vote

Yes, I can get this event, but how to change the layout in the page preview in charm bar when option changed?
Sun Bin

Monday, September 17, 2012 3:33 AM