Tutorial: 10 - Drawing Text on the Screen

While working with regions you'll notice that the only way to draw text to the screen is with buttons and the button captions are limited to a small number of characters. For rich workflows it may be desireable to draw more text to the screen. This can be accomplished by using the image drawing mechanism exposed by OmniScript. There are two separate ways to do this.

Using TrueType Fonts

Truetype fonts are built into most modern operating systems. By leveraging these fonts clientside you can send images containing these fonts directly a Scriptel ScripTouch signature pad. This option provides you the most flexibility in terms of style (for example bold/italics) but with monochrome displays the fonts may look excessively pixilated.

See below for an example of drawing a Truetype string to a display:

function tutorial() {
    var socket = new WebSocket("ws://localhost:8080");
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    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") {
            console.log("Successfully opened device!");

            canvas.width = msg.device.displayInfo.width;
            canvas.height = msg.device.displayInfo.height;

            //We need to fill the canvas, since transparent comes out black.
            ctx.fillStyle = "white";
            ctx.fillRect(0,0,canvas.width,canvas.height);

            ctx.fillStyle = "black";
            ctx.font = "italic bold 20pt Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText("TrueType Font",msg.device.displayInfo.width/2,msg.device.displayInfo.height/2);

            //Push the canvas to the device.
            var obj = {
                    "_class":"PushBitmapRequest",
                    "x":0,
                    "y":0,
                    "data":canvas.toDataURL("image/png"),
                    "bitDepth":4
                };
                socket.send(JSON.stringify(obj));
        } else {
            console.log("Server sent a message: ",msg);
        }
    };
}

Using Scriptel's Block Font

For monochrome devices or devices that require a very tiny font Scriptel provides a block font implementation that will not use any antialiasing. This provides a small, crisp font that has the ability to be justified and size-limited.

See below for an example of drawing a string to a display using Scriptel's Block Font:

function tutorial() {
    var socket = new WebSocket("ws://localhost:8080");

    //Add the script to the document.
    var script = document.createElement("script");
    script.setAttribute("type","application/javascript");
    script.src = "http://localhost:8080/scriptel-blockfont.js";
    document.body.appendChild(script);

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    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") {
            console.log("Successfully opened device!");

            canvas.width = msg.device.displayInfo.width;
            canvas.height = msg.device.displayInfo.height;

            //We need to fill the canvas, since transparent comes out black.
            ctx.fillStyle = "white";
            ctx.fillRect(0,0,canvas.width,canvas.height);

            BlockFont.fillText(ctx,"Scriptel Block Font!",msg.device.displayInfo.width/2,msg.device.displayInfo.height/2,"center");

            //Push the canvas to the device.
            var obj = {
                    "_class":"PushBitmapRequest",
                    "x":0,
                    "y":0,
                    "data":canvas.toDataURL("image/png"),
                    "bitDepth":4
                };
                socket.send(JSON.stringify(obj));
        } else {
            console.log("Server sent a message: ",msg);
        }
    };
}