Hi,
I worked through my print issues and I wanted to share some demo code on how to address certain things like:
1. Lack of FacetChart & DrawPane printing. I went straight to manually implementing what I needed using HTML5's <canvas> and using its image data for that. If you are able to find DrawPane's <canvas> member, you can save yourself some work by using that for the canvas reference.
2. The FireFox mitering bug. This isn't happening when using canvas' arc method.
3. Requiring the server to do a print preview. Simply opening up another browser page and writing the desired HTML takes care of this.
4. HTML5 Canvas/SmartClient integration. Create your canvas in an HTMLFlow and use both as you normally would.
The sample program below demonstrates all of these in context along with comments.
Two words of warning.
First, although I tested the canvas with IE, Chrome & FireFox, and they all worked, a short while ago, my IE no longer recognized my canvas. I don't know if it's my system, an IE bug, or if it's really picky about how you present a canvas. Please keep this in mind.
Second, I am not a JavaScript or SmartClient expert, so what I have below may not be the best way of doing things. However, since this is for demo purposes only, it should suffice to give you the idea.
I worked through my print issues and I wanted to share some demo code on how to address certain things like:
1. Lack of FacetChart & DrawPane printing. I went straight to manually implementing what I needed using HTML5's <canvas> and using its image data for that. If you are able to find DrawPane's <canvas> member, you can save yourself some work by using that for the canvas reference.
2. The FireFox mitering bug. This isn't happening when using canvas' arc method.
3. Requiring the server to do a print preview. Simply opening up another browser page and writing the desired HTML takes care of this.
4. HTML5 Canvas/SmartClient integration. Create your canvas in an HTMLFlow and use both as you normally would.
The sample program below demonstrates all of these in context along with comments.
Two words of warning.
First, although I tested the canvas with IE, Chrome & FireFox, and they all worked, a short while ago, my IE no longer recognized my canvas. I don't know if it's my system, an IE bug, or if it's really picky about how you present a canvas. Please keep this in mind.
Second, I am not a JavaScript or SmartClient expert, so what I have below may not be the best way of doing things. However, since this is for demo purposes only, it should suffice to give you the idea.
Code:
<HTML>
<HEAD>
<title>Canvas Demo</title>
<SCRIPT>var isomorphicDir="../isomorphic/";</SCRIPT>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Core.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Foundation.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Containers.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Grids.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Forms.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_DataBinding.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Drawing.js"></script>
<SCRIPT SRC="../isomorphic/system/modules/ISC_Charts.js"></script>
<SCRIPT SRC="../isomorphic/skins/BlackOps/load_skin.js"></script>
</HEAD>
<BODY>
<SCRIPT>
// One way of integrating a canvas with SmartClient windows is to create it in an HTMLFlow and
// put that in a Window...
isc.HTMLFlow.create({
ID: 'HTML',
autoDraw: true,
contents: '<canvas id="MyCanvas" width="400" height="400">Canvas not supported!</canvas>'
});
isc.Window.create({
left: 200,
top: 0,
width: 400,
height: 400,
items: [ HTML ]
});
// Draw a simple translucent red rectangle on the canvas
var canvas = document.getElementById('MyCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255, 0, 0, 0.5)';
context.fillRect(0, 0, 100, 100);
// Add a print button to demonstrate print preview support
isc.Button.create({
title: 'Print',
click: function() {
// Manually create a browser window to do print preview without requiring the server
var w = window.open('');
// Boilerplate stuff
w.document.write('<html>');
w.document.write('<body>');
w.document.write('<font face="Arial" size="3">');
w.document.write('<center>');
// I'm adding a header to demo decorating a printout
w.document.write('<h3>Title</h3>');
w.document.write('<hr>');
// Here is how to print the canvas.
// First, get its reference
var canvas = document.getElementById('MyCanvas');
// Now create an image object on the print preview window and get its reference.
w.document.write('<img id="Copy" />');
var image = w.document.getElementById("Copy");
// Now write the canvas image to that object.
image.src = canvas.toDataURL();
// Decorate the footer
w.document.write('<hr>');
w.document.write('A footer');
// Boilerplate
w.document.write('</center>');
w.document.write('</font>');
w.document.write('</body>');
w.document.write('</html>');
}
});
</SCRIPT>
</BODY>
</HTML>
Comment