Tutorial: 04 - Handling Pen Events

View the Video Tutorial

An alternate way to receive signature information is to handle the pen events yourself. This allows you much greater flexibility and allows you to handle events in real time. Every time the pen hits the glass, the pen moves, or the pen comes off the glass you're notified over the websocket connection. This is also true for buttons. You'll receive button down, button up and button press events when the buttons are pressed, depressed or released (without pressing).

This code shows you how to manage the events to draw a signature onto a canvas in your browser:

function tutorial() {
    //Create a canvas container -- we'll need this to draw on.
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "black";

    var lastPoint = null;

    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 need to size our canvas relative to the size of the screen on the device.
            canvas.width = msg.device.displayInfo.width;
            canvas.height = msg.device.displayInfo.height;
            console.log("Set canvas size to ",canvas.width,"x",canvas.height);
        } else if(msg._class==="PenDown") {
            lastPoint = msg;
        } else if(msg._class==="PenUp" || msg._class=="PenMove") {
            ctx.beginPath();
            ctx.moveTo(lastPoint.x,lastPoint.y);
            ctx.lineTo(msg.x,msg.y);
            ctx.stroke();

            lastPoint = msg;
        } else if(msg._class==="ButtonPress") {
            //A button was pressed, clear the screen.
            ctx.fillStyle="white";
            ctx.fillRect(0,0,canvas.width,canvas.height);

            console.log("The ",msg.label," button was pressed.");
        }
    };
}

If you run this you'll see that now you can see lines appearing on the screen as you draw them. You'll receive PenDown, PenUp and PenMove events as well as ButtonDown, ButtonPress and ButtonUp events. With this information and the information returned to you in the DeviceOpenResponse you can completely customize what gets done with the signature data.