Tutorial: 09 - Sending Pictures to the Device

Sending Pictures to the Device

View the Video Tutorial

It is possible to send bitmap images to any ScripTouch device which allows you to draw pretty much anything you want on the screen of the device. OmniScript supports sending arbitrary PNG images given that they're smaller than the size of the screen and drawing the image doesn't overflow the screen.

The following example demonstrates how to push a canvas to the screen:

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 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") {
            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.beginPath();

            //Draw two crossing lines.
            ctx.moveTo(0,0);
            ctx.lineTo(canvas.width,canvas.height);
            ctx.moveTo(0,canvas.height);
            ctx.lineTo(canvas.width,0);
            ctx.stroke();

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