Tutorial: 03 - Getting a Signature Image

View the Video Tutorial

Now we'll work on getting an image from the device. There are two ways to do this: you can either capture all of the PenDown, PenMove and PenUp events yourself and render the image as you go or you can ask the server to render the image for you when the device's "OK" button is pressed. In this example we'll try the latter:

function tutorial() {
    //Create an image container -- we'll need this when we get an image.
    var img = document.createElement("img");
    document.body.appendChild(img);

    var socket = new WebSocket("ws://localhost:8080");
    socket.onopen = function() {
        console.log("Web Socket Open");
    };
    socket.onclose = function() {
        console.log("Web Socket Closed");
    };
    socket.onmessage = function(evt) {
        var msg = JSON.parse(evt.data);
        if(msg._class==="ConnectionOpen") {
            //We've just connected to the server.
            if(msg.serverInfo.devices.length>0) {
                //Lets open the first available device:
                var device = msg.serverInfo.devices[0];
                console.log("Opening device",device.uuid,": ",device.manufacturer,device.product);
                var obj = {"_class":"DeviceOpenRequest","uuid":device.uuid};
                socket.send(JSON.stringify(obj));
            }
        } else if(msg._class==="DeviceOpenResponse") {
            //We've just connected to the device, lets send our preferred
            //rendering settings
            var obj =   {
                            "_class":"RenderSettingsUpdateRequest",
                            "renderSettings":
                            {
                                "_class":"RenderSettings",
                                "type":"image/png",
                                "scale":2
                            }
                        };
            socket.send(JSON.stringify(obj));
        } else if(msg._class==="RenderedImage") {
            //The server just sent us a signature.
            img.width = msg.width;
            img.height = msg.height;
            img.src = msg.data;
        }
    };
}

That should do it. Now when you sign the digitizer and hit "OK" it should display a rendered image in your browser. You can change the size of the rendered image by changing the scale in the RenderSettings you send. The server will always send a RenderedImage when the "OK" button is pressed. Hitting cancel will just clear the buffer.

Customizing the Rendering Settings

There are several tunable options for image rendering such as pen style, pen color, scaling, cropping and image type. All of these are updated using a RenderSettingsUpdateRequest submitted to the OmniScript server.

Customizing Scaling

You can adjust the scale of a rendered image to make it smaller or larger than the original displayed on the device. The scale is a simple multiplier.

To change the scale to 5x the original size:

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "type": "image/png",
        "scale": 5
    }
}

Customizing Pen Style

There are currently three pen styles to choose from. The "PlainPenStyle" is a simple stroke connecting all points. The "ChiselPenStyle" attempts to emulate a chisel pen and the "InkwellPenStyle" attempts to emulate an inkwell pen.

Sending this object to an OmniScript Instance will update the pen style to "InkwellPenStyle":

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "penStyle": {
            "renderFunction": "InkwellPenStyle"
        },
        "type": "image/png",
        "scale": 2
    }
}

To change the color of the stroke to orange (you can use color names or hex codes):

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "penStyle": {
            "renderFunction": "InkwellPenStyle",
            "options": {"strokeStyle": "orange"}
        },
        "type": "image/png",
        "scale": 2
    }
}

Customizing Cropping

The OmniScript server gives you the option to automatically crop the image to the minimum size needed to store the image. To activate this option:

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "type": "image/png",
        "crop": true,
        "scale": 2
    }
}

Customizing Image Type

Right now the OmniScript server supports two image output format types: Portable Network Graphics (image/png) and Scalable Vector Graphics (image/svg+xml). The former is a raster format with wide software support and the latter is a vector format gaining traction with software vendors. Use PNG if you want a simple image file that can be imported into just about any application. Use SVG if you need the ability to scale the images or if you need to store forensic information.

To change the image type to PNG:

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "type": "image/png",
        "scale": 2
    }
}

To change the image type to SVG:

{"_class": "RenderSettingsUpdateRequest",
    "renderSettings": {
        "_class":"RenderSettings",
        "type": "image/svg+xml",
        "scale": 2
    }
}