Skip to main content


class %ZEN.ComponentEx.scribbleArea extends %ZEN.Component.control

Free pen input control.
This input control is intended for capturing free pen gestures such as signatures and "initial here" marks

Property Inventory

Method Inventory


Inherited description: The default css class used for the main element within this control. This is overridden by subclasses.
parameter INCLUDEFILES = zenCSLM.js;
Inherited description: CSV list of additional include files (either .js or .css) that should be included when this component is used on a page.
By default, the file extension (.js or .css) is used to determine whether an item in the list is a script include or a style include. You can override this behavior by adding the terms "script:" or "style:" to the beginning of the file name or names. This prefix is not used as part of the include filename.


property controlClass as %ZEN.Datatype.cssClass [ InitialExpression = "scribbleArea" ];
Inherited description: Optional CSS class used for the primary HTML element displayed for this control.
Property methods: controlClassDisplayToLogical(), controlClassGet(), controlClassIsValid(), controlClassLogicalToDisplay(), controlClassLogicalToOdbc(), controlClassNormalize(), controlClassSet()
property culling as %ZEN.Datatype.integer [ InitialExpression = 0 ];
The level of post processing culling to apply to the input curve. A setting of zero indicates that all non-colinear data points should be retained. Higher values allow the system to cull additional points based on how much information they actually contain (information in this case being a function of change in slope of the curve at the given point) Raising the culling level reduces the memory requirements for the control's value but does so at the risk of exaggerating cusps and jitter.
Property methods: cullingDisplayToLogical(), cullingGet(), cullingIsValid(), cullingLogicalToDisplay(), cullingLogicalToOdbc(), cullingNormalize(), cullingSet()
property nib as %ZEN.Datatype.integer [ InitialExpression = 2 ];
The thickness of the virtual pen point. The higher the nib number the bolder the input curve will appear.
Property methods: nibDisplayToLogical(), nibGet(), nibIsValid(), nibLogicalToDisplay(), nibLogicalToOdbc(), nibNormalize(), nibSet()
property smoothness as %ZEN.Datatype.integer [ InitialExpression = 1 ];
The level of post processing smoothing to apply to the input curve. A setting of zero indicate no smoothing. Smoothing is achieved by applying weighted averages to the sampled data points in an effort to reduce jitter resulting from certain input devices. When set to a small value (1 or 2) this can help curves entered with a bulky device (such as an optical mouse) more closely approximate those of a more precise input device (such as a tablet). This is, however, only an approximation and the original data is lost in the conversion.
Property methods: smoothnessDisplayToLogical(), smoothnessGet(), smoothnessIsValid(), smoothnessLogicalToDisplay(), smoothnessLogicalToOdbc(), smoothnessNormalize(), smoothnessSet()


method %DrawHTML()
Inherited description: Static HTML display method: draw the BODY of this component as HTML.
Subclasses implement this in order to render the static HTML contents of a component.
classmethod Export(fileName As %ZEN.Datatype.string, vector As %ZEN.Datatype.string) as %ZEN.Datatype.integer [ ZenMethod ]
Export the vector description of the scribble to an external file The data stream, vector, may be either a JSON string (as returned from exportSignature() or in the internal format returned by exportAsPath(). The provided filename should be a fully qualified path-filename where the directory is either the temp directory for the instance or one of the custom whitelisted directories given in ^%SYS("ZEN","fsDirectoryWhitelist")
classmethod ValidateDataStream(vector As %ZEN.Datatype.string) as %Boolean
classmethod ValidateDestination(fileName As %ZEN.Datatype.string) as %Boolean
clientmethod addLine(sx, sy, ex, ey) [ Language = javascript ]
Add a line segment to the drawing area
clientmethod addStroke(c, x, y) [ Language = javascript ]
Start or extend a given stroke for the current curve
clientmethod clear() [ Language = javascript ]
clientmethod clearCanvas() [ Language = javascript ]
clientmethod exportAsPath(s, smoothingLevel, compressionLevel, showSize) [ Language = javascript ]
Return the structure of the given curve, s, as a turtle graphics-ish path string where data points take the form of penCommand x y. The penCommand is either moveTo (m) or lineTo (l). The x value is measured with respect to the left-most side of the control's bounds and increases to the right. The y value is measured with respect to the top edge of the control and increases down the screen. This format is also used as the nominal value of the control.
clientmethod exportSignature(s, smoothingLevel, compressionLevel) [ Language = javascript ]
Return the structure of the given curve, s, as a JSON object
clientmethod extractInkColor(div) [ Language = javascript ]
clientmethod getProperty(property, key) as %String [ Language = javascript ]
Override to get current value of control.
clientmethod initialize() [ Language = javascript ]
clientmethod onRefreshContents() [ Language = javascript ]
Inherited description: This client callback is called just from refreshContents just after the new HTML is delivered from the server.
clientmethod onloadHandler() [ Language = javascript ]
Inherited description: This client event, if present, is fired when the page is loaded.
clientmethod parseValue() [ Language = javascript ]
Parse a new nominal value into the graphical context
clientmethod renderSignature(s, smoothingLevel, compressionLevel) [ Language = javascript ]
Render the given curve, s, in the drawing area
clientmethod renderSignatureCVS(s) [ Language = javascript ]
Render the given curve using HTML 5 canvas tag methods
clientmethod renderSignatureVML(s) [ Language = javascript ]
Render the given curve using IE's VML technology
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod showSource() [ Language = javascript ]
clientmethod smoothSignature(s) [ Language = javascript ]
clientmethod supportsCanvasAPI() [ Language = javascript ]
clientmethod touchEnd(node, event) [ Language = javascript ]
Commit the latest gesture to the signature curve
clientmethod touchMove(node, event) [ Language = javascript ]
Track touch gestures and generate curve data for mobile devices
clientmethod touchStart(node, event) [ Language = javascript ]
clientmethod track(who, event) [ Language = javascript ]
Track pointer gestures and generate curve data
clientmethod trimSignature(s, cull) [ Language = javascript ]
clientmethod updateControlValue() [ Language = javascript ]
Extract current rendering information and abstract it into the nominal value of this control

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab