Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Canvas.showPrintPreview() ignores HTML5 tags

    Hi Isomorphic,

    I'm trying to make a SmartClient page printable that is using HTML flows that dynamically render to <canvas> tags. When I try to render a print preview, the canvas data is simply ignored.

    Is there any way I can make this work? Ideally, I would like this to save directly to PDF, but a usable print preview might work as well.

    Thank you.

    SmartClient Version: v9.1p_2014-06-26/Pro Development Only (built 2014-06-26)

    Chrome 39.0.2171.65 (64-bit), Firefox 33.1.

    Standalone test case:
    Code:
    <!doctype html>
<html>
<head>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Charts.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
</head>

<body>
		<div id="layout"></div>
	<script>

		isc.HTMLFlow.create({
			ID: "flowContainer",
			height: "400px",
			width: "500px",
			contents: "<canvas id='canvas' width='150' height='150'></canvas>"
		});
		
		isc.Button.create({
			ID: "printButton",
			title: "Print Preview",
			click: function() {
				var printWindowProperties = {
					width: isc.Page.getWidth() - 100,
					height: isc.Page.getHeight() - 100,
					autoCenter: true,
					isModal: true,
					showModalMask: true,
					modalMaskOpacity: 70
				};
				navLayout.showPrintPreview(null, printWindowProperties);
			}
		});
		
		isc.SectionStack.create({
				ID: "basicSection",
				width: "700px",
				height: "400px",
				autoDraw: true,
				sections: [
					{
						items: [flowContainer],
						title: "Test",
						controls: [printButton],
						expanded: true,
						canCollapse: false
					}
				]
		});
		
		isc.Layout.create({
			ID: "navLayout",
			htmlElement: "layout",
			width: 800,
			height: 500,
			redrawOnResize: true,
			autoDraw: true,
			members: [basicSection]
		});


		//src: http://curran.github.io/HTML5Examples/canvas/smileyFace.html
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');
		var centerX = canvas.width / 2;
		var centerY = canvas.height / 2;
		var radius = 70;
		var eyeRadius = 10;
		var eyeXOffset = 25;
		var eyeYOffset = 20;

		// draw the yellow circle
		context.beginPath();
		context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
		context.fillStyle = 'yellow';
		context.fill();
		context.lineWidth = 5;
		context.strokeStyle = 'black';
		context.stroke();

		// draw the eyes
		context.beginPath();
		var eyeX = centerX - eyeXOffset;
		var eyeY = centerY - eyeXOffset;
		context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
		var eyeX = centerX + eyeXOffset;
		context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
		context.fillStyle = 'black';
		context.fill();

		// draw the mouth
		context.beginPath();
		context.arc(centerX, centerY, 50, 0, Math.PI, false);
		context.stroke();
	</script>

</body>
</html>
    Tags: None
    #2
    The print preview is a separate set of DOM elements from what's showing on the screen (by necessity, as it's very different and simplified relative to the HTML for live widgets).

    In this instance the print preview contains what you specified for htmlFlow.contents, but wouldn't know about your programmatic updates that happened after the HTML was rendered into the DOM.

    Two alternate approaches:

    1. use a DrawPane instead, encapsulating your drawing commands as a series of drawItems, since this can be printed

    2. use SVG instead, so your drawing can be expressed as markup you can place in htmlFlow.contents, instead of just programmatic commands

    Comment

      #3
      I am actually using a third party charting library which does draw SVG images, the happy face was just to show the issue. Is there a way I can force print preview to pick up my DOM changes and render my SVGs that were dynamically generated asynchronously targeting a <div> inside an HTML flow?

      In other words: HTMLFlow contents create a <div>, target said div to draw the SVG image, open the print preview window, re-render the chart inside the print window (which may have the same div id).

      Comment

        #4
        As we previously covered:

        2. use SVG instead, so your drawing can be expressed as markup you can place in htmlFlow.contents, instead of just programmatic commands
        If you can retrieve your SVG DOM as a String, just assign it to HTMLFlow.contents and you're done.

        Comment

        Previous template Next
        Working...
        X