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