HTML5 Canvas – Anyone working on such a thing for PD4ML?

#26512

Has anyone done any work (including PD4ML guys) on providing a Canvas that can be used to produce images within PD4ML?

Ideally this would be a development inside PD4ML but it could also be a pre-parser of HTML that perhaps someone else has had a go at.

To my mind, such a tool would do the following;

1. Read the HTML, get all associated JS includes
2. Extract all the JS from the HTML along with some implementation of elements
3. Run the JS with Rhino and the Rhino Canvas implementation
4. Replace the tags in the original HTML with tags that use the 5. Rhino Canvas generated images
6. Push the HTML through PD4ML

Easy…. well maybe not, but definitely possible?

Thoughts?

Steve

#28377

Steve,

the maximum we are ready to add to our product is an API to plug your own processing module. Let’s say it will pass to the module all JS includes and tag content.

But I see (at least) two pitfalls:
1. JS code requires an access to DOM structure of the main document. PD4ML internally does not implement DOM.
2. JS addresses CSS styles of the main document. PD4ML does not implement any standard ways to request CSS properties.

May be there are some other issues I do not know yet.

So as you may see a support implementation is going to be limited and isolated from the main document content. On practice all dynamic image generation parameters would need to be inserted as JS constants to tag, for example.

#28378

I think the plugin idea might well work. I assume that you would also pass to the caller the embedded JS content.

I admit it’s not trivial, but I think that most code used to generate graphics within a canvas (or all the stuff I would be interested in at least) wouldn’t actually interact with the browsers DOM – it would be calling getContext and then writing directly to that using JS so wouldn’t require DOM access.

This mechanism wouldn’t be fool-proof but I think it would be possible to create some “rules” for a JS author that make it easier to parse e.g. Perhaps the tag has to have an attribute called pd4ml_create which points to the JS function that actually creates the Canvas image.

when do you think you might have a version available with the plugin?

Thanks
Steve

#28379

We need some time to estimate efforts. Most probably we’ll introduce an API to plug to any HTML tag (not only to ). From my perspective it is realistic to get the feature implemented in March, may be even sooner.

#28380

Excellent, that’s fine by me – when it arrives I’ll put some effort into implementing a tag replacer and let you know how it goes.

Cheers
Steve

#28381

Steve, we implemented the first version of the feature. It is not available for download yet, so please contact support pd4ml com

Now PD4ML checks if there is PD4CanvasHandler class available in the classpath and invokes its getImage() method for each tag occurrence.

Below is a dummy implementation of the handler class.

[language=java:hg0efl8i]import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Vector;

import javax.imageio.IIOImage;
import javax.imageio.ImageIO;
import javax.imageio.ImageWriteParam;
import javax.imageio.ImageWriter;
import javax.imageio.stream.MemoryCacheImageOutputStream;

import org.zefer.cache.DynamicImageHandler;

public class PD4CanvasHandler extends DynamicImageHandler
{
public byte[] getImage(String tagName, int width, int height, String id, HashMap attributes, String onBodyLoad, Vector scriptSections) throws Exception {

System.out.println(“canvas ID: ” + id);
System.out.println(“onBodyLoad: ” + onBodyLoad);
System.out.println(“attributes: ” + attributes);

if (scriptSections != null) {
Iterator ii = scriptSections.iterator();
while (ii.hasNext()) {
String js = (String)ii.next();
System.out.println(”

---

“);
System.out.println( js );
}
}
System.out.println(”

---

“);

BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_BYTE_INDEXED);
Graphics g = bi.getGraphics();

g.setColor( Color.white );
g.fillRect(0, 0, width, height);
g.setColor( Color.red );
g.drawString(“Canvas handler test”, 30, 30);
g.dispose();

Iterator iter = ImageIO.getImageWritersByFormatName(“png”);
ImageWriter writer = (ImageWriter)iter.next();
ImageWriteParam iwp = writer.getDefaultWriteParam();

ByteArrayOutputStream baos = new ByteArrayOutputStream();
MemoryCacheImageOutputStream output = new MemoryCacheImageOutputStream(baos);
writer.setOutput(output);
IIOImage image = new IIOImage(bi, null, null);
writer.write(null, image, iwp);
writer.dispose();

return baos.toByteArray();
}
}[/language:hg0efl8i]

If your idea with RhinoCanvas works, we’ll add a new method to make possible a canvas output in vector form.

For the time being PD4ML parser is not able to read tags. It needs explicit opening and closing tags: and

#28382

I’ve been snowed under with other work but I’ve now been able to look at this again and have some more info on how this can be achieved.

The major problem is that we can create the canvas content and capture it’s output from a non-browser environment. I’ve discovered the rather lovely envjs library that creates a browser DOM in pure javascript – you can even target different browser implementations. In conjunction with Rhino, it allows you to run browser javascript on the server.

All we need to do now is emulate the canvas context object as a Java object that creates images – I’m tracking down a library as we speak. This means that the following should work;

a) Design a rich HTML page with PD4ML tags within it and Canvas graphics
b) Create a Rhino instance and add to it the envjs and a Canvas context emulator
c) Run the HTML page through Rhino using an HTML parser and capture the resulting cavas images localy
d) Run the HTML through PD4ML using the new canvas hook which returns the appropriate image from step c)

Sounds like a lot, but actually I think this is pretty straightforward from a servlet point of view
Anyone done this yet?

Steve

[Author]

Posts