Using Web Viewer to draw or plot using SVG (Mac) or VML (Win)

After a fair amount of Googling, I worked out the technical details to use a real drawing language inside the FileMaker Web Viewer.

This method does not require any external files, web servers, or plug-ins. It uses only FileMaker's built-in web viewer and its ability to render an internally calculated URL using the "data:" protocol.

The HTML or XML is generated by a FileMaker calculation for the Web Viewer to display. The drawing language used is either SVG or VML depending on the platform. SVG is not yet supported by the IE-based Web Viewer on Windows.

The attached file demonstrates the technique to draw circles, ellipses, arcs, lines, rectangles, and rounded rectangles. You can specify the stroke width, stroke color, and fill color.

Also demonstrated is using this technique to make a scatter plot of X, Y values located in a separate table. All points in the table are automatically assigned into JavaScript arrays and plotted.

One feature that is conspicuously absent is a demonstration of writing text into the Viewer. SVG and VML both can draw text, but from what I have read so far, they do so in very different ways. Writing a cross-platform wrapper to the text drawing functions looks to be trickier. For the time being, you will need to code your text drawing manually in SVG or VML or layer the text on the viewer using HTML+CSS.

I have only tested this out so far on

Mac OS 10.5.8 running FMA 10v3

Windows XP SP3 running FMA 10v3.

WebViewer_Drawing_fp7.zip

Edited March 25, 201015 yr by Guest