PROVISIO DevBlog

Using Multitouch Gestures in SiteKiosk

Some may have noticed that a great number of multitouch gestures are not working in SiteKiosk by default. This is due to a limitation of the public part of the Microsoft WebBrowser control for which Microsoft only offers very basic touch gesture support. Since the release of SiteKiosk 8.8 this limitation can be lifted by using a little bit of scripting.

SiteKiosk works around the multitouch limitations of the WebBrowser control by using script injection to emulate multitouch events for a page. Because of the possible side effects of script injection this feature of SiteKiosk can be dynamically turned off and on using the SiteKiosk Object Model.

Note that you need a multitouch capable device, Internet Explorer 10 or higher, a website that uses a multitouch framework (e.g. hammer.js) and SiteKiosk 8.8 or higher.

To make your website that supports multitouch ready to be used with SiteKiosk you need to add a few lines of SiteKiosk Object Model Code. In case the website is not only intended to be used with SiteKiosk you may want to have a look at this article to make use of browser detection.

You basically need two SiteKiosk Object Model properties to get going. The first is IsMultitouchCapable which checks whether the device you are using SiteKiosk on is capable of handling multitouch. The second is MultitouchEnabled which lets you retrieve and set the support of multitouch in SiteKiosk. So the lines of code you have to use would look like this:

//Initialize the SiteKiosk Object Model
window.external.InitScriptInterface();
			
//Enable multitouch for the SiteKiosk browser if it is currently not enabled and the device, represented by the currently active SiteKiosk browser window, is capable of multitouch.
if (SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.IsMultitouchCapable && !SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.MultitouchEnabled) {
	SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.MultitouchEnabled = true;
}

Because writing an article about multitouch without showing an actual example would be a litte dull, the following is the code of a simple example page that uses jquery, hammer.js and of course the SiteKiosk Object Model (note that the example also works in Internet Explorer, so feel free to compare):

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" ><!--Required only if for whatever reason the web server may be configured to deliver pages in older IE compatibility modes-->
    <title>SiteKiosk Multitouch Test Page</title>
    <script type="text/jscript" src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/JScript" src="Scripts/hammer.js"></script>
    <script type="text/JScript" src="Scripts/jquery.hammer.js"></script>
     
    <script type="text/javascript">
        //Write debug log messages to the SiteKiosk log files
        function Log(msg) {
            try {
                SiteKiosk.Logfile.Notification(msg);
            }
            catch(ex) {
                console.log(msg);
            }
        }
         
        try {
            //Initialize the SiteKiosk Object Model
            window.external.InitScriptInterface();
             
            //Enable multitouch for the SiteKiosk browser if it is currently not enabled and the device, represented by the currently active SiteKiosk browser window, is capable of multitouch.
            if (SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.IsMultitouchCapable && !SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.MultitouchEnabled) {
                SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.MultitouchEnabled = true;
            }
            else {
                if (!SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.IsMultitouchCapable)
                    Log("Device is not capable of multitouch.");
            }
        }
        catch(ex) {
            Log("Exception: " + ex.message);
        }
 
		function DisableMultitouch(){ //Disabling multitouch when leaving the page
			try{
				SiteKiosk.WindowList.ActiveWindow.SiteKioskWindow.MultitouchEnabled = false;
			}
			catch(ex) {
				Log("Exception: " + ex.message);       
			}
		}  
 
		//Using only jquery, hammer.js and javascript from here on
        var rotation = 1, last_rotation,
            scale=1, last_scale, posX = 0, posY = 0;
 
        $(document).ready(function () {
            $('html').on("contextmenu", function (ev) { ev.preventDefault(); }).
            on("click", function (e) { Log("x: " + e.clientX + " y: "+ e.clientY + " " + document.elementFromPoint(e.clientX,e.clientY))});
             
            $('#testimg').hammer().on("touch", function (ev) {
                last_rotation = rotation;
                last_scale = scale;
            }).on("transform", function (ev) {
                rotation = last_rotation + ev.gesture.rotation;
                scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
                $('#testimg').css("transform", "translate3d(" + posX + "px," + posY + "px,0) rotate(" + rotation + "deg) scale(" + scale + ")");
            }).on("pinch", function (ev) {
                //add code for pinch if desired
            }).on("drag", function (ev) {
                posX = ev.gesture.deltaX;
                posY = ev.gesture.deltaY;
                $('#testimg').css("transform", "translate3d(" + posX + "px," + posY + "px,0) rotate(" + rotation + "deg) scale(" + scale + ")");
            });
        });
    </script>
    <style type="text/css">
        #testimg
        {
            display: inline-block;
            width: 595px;
            height: 838px;
            margin-top: 25px;
            margin-left: 25px;
            background-image: url(sitekiosk.png);
        }
         
        body
        {
            overflow: hidden;
            text-align: center;
            font-family: Arial;
            font-size: 10px;
        }
    </style>
</head>
<body onunload="DisableMultitouch()">
    <div>This SiteKiosk multitouch test page requires SiteKiosk 8.8 or higher. The page uses SiteKiosk Object Model, jquery and hammer.js. Please have a look at the accompanying <a href="http://devblog.provisio.com/post/2013/12/13/Using-Multitouch-Gestures-in-SiteKiosk.aspx" target="_blank">PROVISIO Developer blog article.</a></div>
    <div id="testimg"></div>
</body>
</html>

The page can be accessed under http://www.provisio.com/download/beta/test/sk_multitouch_test/skmultitouchtest.html and added to SiteKiosk as the start page to test it. What you get will look like this: