Dynamic Images in Forms

Dynamic Images in Forms

I had an interesting exchange about this subject on another forum, so I thought I would reproduce it here in another slightly more structured format. The question revolves around the following requirement :

  • In an Oracle Policy Automation project, display a dynamic image – for example, a chart derived from dynamic data such as a D3.js visualisation.
  • From that dynamic chart, get a bitmap copy of the D3 chart
  • Push that image into a Form using BI Publisher.

For the sake of simplicity let’s assume that you are using Word RTF as your basis, although it should also work in PDF templates.

What is the shopping list we need for a prototype dynamic images in Forms:

  1. D3 chart content (as an SVG) can be dynamically displayed (something like the attached sample project)
  2. Get hold of the SVG from D3 and redraw it on a Canvas
  3.  Now convert the Canvas to JPG
  4. The JPG can be served up to BI Publisher using Base64 encoding

In short order, therefore:

We can get the D3 SVG and copy it onto a canvas element :

function paintSvgToCanvas() {
var pbx = document.getElementById("pbx");  //this is the image that will be displaying the SVG copied from D3
var uCanvas = document.getElementById("mycanvas"); // this is the HTML canvas
var uSvg = document.getElementById("mySVG"); // this the D3 SVG
pbx.src = 'data:image/svg+xml;base64;utf-8,' + btoa(unescape(encodeURIComponent(uSvg.outerHTML)));
uCanvas.getContext('2d').drawImage(pbx, uCanvas.width / 2 - pbx.width / 2, uCanvas.height / 2 - pbx.height / 2);

// Now we have a canvas, with the SVG on it

}

In the second step, we can get that SVG on our canvas and turn it into a bitmap:

var imgInitial = canvasTag.toDataURL("image/jpg");
var imgFinal = img2.replace(/^data:image\/(png|jpg);base64,/, ""); // strip off the header, not needed for BI Publisher
var finalImage = document.createElement("img");
finalimage.setAttribute("width", "800");
finalimage.setAttribute("height", "470");
finalimage.setAttribute("id", "finalimage");
finalimage.src = imgInitial ; // display the image using the full toDataURL
document.body.appendChild(finalimage);

interview.setInputValue("myimage", imgFinal ) // push the toDataURL less the header into an attribute for BI Publisher

Finally, in BI Publisher, ensure that you use the same tag structure as the Signature feature to ensure the image is correctly handled:

<fo:instream-foreign-object content-type="image/png" xdofo:alt="An Image" ><?myimage_value?></fo:instream-foreign-object>

And it works. Of course it really should work, since the underlying mechanism is used out of the box to allow signatures to be printed in BI Publisher Forms :

But the as yet immovable issue, is that Text attributes are limited to 32,767 characters, so the dynamic images in Base64 better be simple ones, or we run out of space.  There are a couple of potential workarounds none of which is very appealing – somehow splitting the image across multiple entity instances and concatenating them in BI Publisher code (ugh). Compression is not an option since Base64 compresses so poorly, which is an interesting discussion in itself.

Have fun with some not-too-big images!

Richard Napier

Author: Richard Napier

Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs his Consulting and mentoring company, On Demand Consulting & Education Ltd and has run ODCE since 2010. Owner of intelligent-advisor.com, he also is Co-Founder of the Siebel Hub.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Worldwide
Logo by Southpaw Projects LLC