How to Create a Chromium-based Fullscreen Browser in SiteKiosk 8.9

In SiteKiosk 8.9 we introduced a Chromium-based browser engine for rendering content. In that version of SiteKiosk the engine is limited to the Start Screen start page skin. Full Chromium browser engine support is planed for SiteKiosk 9.0 coming in 2015, therefore the follwing instructions only apply to SiteKiosk 8.9.

Using Chromium will enhance the browser experience which is evident in the new Start Screen start page skin. With a few lines of code you can convert the Start Screen into a fullscreen browser to for example make use of the enhanced touch screen features for you own web page. This can be useful for an information or self-service kiosk terminal where no browser toolbar is required. Here are the required steps:

1) Install SiteKiosk 8.9.
2) Start the configuration editor and switch to the Start Page & Browser options.
3) Choose the new Start Screen and press the Customize button.
4) Open the configuration editor of the Start Screen from the next dialog.
5) Choose Template 3 in the dropdown at the top of the editor.
6) Click on the Settings button in the toolbar of the editor.
7) Switch to the Background page and select HTML instead of the default Video selection.
Add the following HTML code:

<script>
window.top.document.location = "http://www.google.de/";
</script>

The URL can of course be replaced by whatever you prefer. You may change the background color if you like at the top of the Background options page. Accept the changes by pressing the OK button.
8) Save the settings in the Start Screen editor.
9) Save the SiteKiosk configuration.
10) Start SiteKiosk.

Now your website is displayed in fullscreen mode in the new Chromium-based browser engine of SiteKiosk 8.9.

Please note the there are a number of limitations as the current use of the Chromium engine in SiteKiosk 8.9 is only intended for the Start Screen. For example there are no error pages if you surf to a non-existent page, you will then see just a blank page. So make sure you test this customization thoroughly in case you actually plan to deploy it.

Changing Individual SiteKiosk Configuration Elements with a SiteRemote Job

Often you just need to change a single SiteKiosk configuration setting. Even when using a great number of SiteKiosk machines this is not a problem, you can just use the configuration feature of SiteRemote to distribute the changed configuration file to the machines.

But what if your machines all use configurations that differ in parts, for example the configurations are all using a different start page to reflect their individual locations while the rest of the settings are the same. This challenge can be solved by making use of the fact that the SiteKiosk configuration files are built on the XML format. This enables you to create a Javascript file that can access and edit a specific element of the configuration file.

The following script examples do not use the SiteKiosk Object Model. They use common Javascript/JScript techniques as described for example in the Microsoft MSDN library.

The first example will enable the fullscreen mode of SiteKiosk. The script starts by creating the required ActiveX objects to access the Windows registry and to edit an XML document. Next it queries the path of the latest SiteKiosk configuration file from the registry, either of a 32 or a 64 bit system. It then loads the document and assigns the XML node for the fullscreen setting and changes its text. Finally the edited configuration file is being saved. For further information on the methods to work with an XML document see http://msdn.microsoft.com/en-us/library/System.Xml.XmlDocument_methods%28v=vs.110%29.aspx.

try{
	//Wsh Shell Object
	var WshShell = new ActiveXObject("WScript.Shell");

	//XML support
	var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");

	//Path to the SiteKiosk configuration
	var OsType = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SYSTEM\\CurrentControlSet\\Control\\Session Manager\\Environment\\PROCESSOR_ARCHITECTURE");
	if (OsType == "x86")
		var gstr_configpath = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SOFTWARE\\PROVISIO\\SiteKiosk\\LastCfg"); //you may use an absolute path instead, e.g.: var gstr_configpath = "c:\\program files\\sitekiosk\\config\\myconfig.skcfg"
	else
		var gstr_configpath = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\LastCfg"); //you may use an absolute path instead, e.g.: var gstr_configpath = "c:\\program files\\sitekiosk\\config\\myconfig.skcfg"

	if(xmlDoc.load(gstr_configpath)){
		var lk_nodeselection = xmlDoc.documentElement.selectSingleNode("//sitekiosk-configuration/browserbar/hidemode");
		//Changes the node text to 1 which enables permanent fullscreen mode (0 disables fullscreen, 2 enables fullscreen mode for specific URLs only).
		lk_nodeselection.text = "1";
		//Saves the  changes
		xmlDoc.save(gstr_configpath);
	}
	else{
		//Returns an error exit code to SiteRemote 
		ExitResult.Code = 1;
		ExitResult.Description = "Error opening configuration file.";
	}
}
catch(e){
	try	{
		if(e.number != 0)
			ExitResult.Code = e.number;
		else
			ExitResult.Code = 1;
		ExitResult.Description = e.description;
	}
	catch(e){}
}

After running the script the fullscreen setting of the SiteKiosk configuration looks like this:

The second example adds a URL excluded from filtering to the Content Filter of SiteKiosk. Again it starts by creating the required ActiveX objects and finding the path to the latest SiteKiosk configuration file. Next it adds a new XML node to an existing one for the URL that should be excluded from filtering. After that the document is being saved. For further information on the methods to work with an XML document see http://msdn.microsoft.com/en-us/library/System.Xml.XmlDocument_methods%28v=vs.110%29.aspx.

try{
	//Wsh Shell Object
	var WshShell = new ActiveXObject("WScript.Shell");

	//XML support
	var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");

	//Path to the SiteKiosk configuration
	var OsType = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SYSTEM\\CurrentControlSet\\Control\\Session Manager\\Environment\\PROCESSOR_ARCHITECTURE");
	if (OsType == "x86")
		var gstr_configpath = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SOFTWARE\\PROVISIO\\SiteKiosk\\LastCfg"); //you may use an absolute path instead, e.g.: var gstr_configpath = "c:\\program files\\sitekiosk\\config\\myconfig.skcfg"
	else
		var gstr_configpath = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\LastCfg"); //you may use an absolute path instead, e.g.: var gstr_configpath = "c:\\program files\\sitekiosk\\config\\myconfig.skcfg"

	if (xmlDoc.load(gstr_configpath)){
		var lobj_snglnode = xmlDoc.selectSingleNode("//plugin[@name='SiteCoach']");
		var lobj_newelelement,lstr_newtext;
		lobj_newelelement=xmlDoc.createNode(1, "exclude", lobj_snglnode.namespaceURI);
		lstr_newtext=xmlDoc.createTextNode("http://www.provisio.com");
		lobj_newelelement.appendChild(lstr_newtext);
		lobj_snglnode.appendChild(lobj_newelelement);
		//Saves the  changes
		xmlDoc.save(gstr_configpath);
	}
	else{
		//Returns an error exit code to SiteRemote 
		ExitResult.Code = 1;
		ExitResult.Description = "Error opening configuration file.";
	}
}
catch(e){
	try	{
		if(e.number != 0)
			ExitResult.Code = e.number;
		else
			ExitResult.Code = 1;
		ExitResult.Description = e.description;
	}
	catch(e){}
}

After running the script the Content Filter page of the SiteKiosk configuration looks like this:

To run such a script just go to the Jobs section of SiteRemote and create a new job and select Execute Script as action. Copy and paste the code into the text field and assign the job. Do not activate the checkbox Script requires SiteKiosk Object, as it would run the script within the SiteKiosk user context, who for security reasons does not have the necessary rights to edit the configuration.

Note that you should make changes to the configuration file with care and test them first before applying to a great number of terminals. E.g. writing XML incompatible values to the configuration will make the file unreadable, so SiteKiosk will then load the emergency configuration file instead.

In order to let the new configuration file become the active configuration you need to restart SiteKiosk.

How to Delete HTML5 Web Storage Content

HTML5 Web Storage is intended to store content locally on a PC for longer periods, e.g. for working offline. The web page/web app that stores the content is responsible for deleting it as well, therefore SiteKiosk does not delete Web Storage content by design.

In case you come across a project, where you can't influence the behaviour of a web page that uses Web Storage but need to delete the content nonetheless, you may use the scripting options of SiteKiosk to handle that situation.

The following script makes use of the OnReset and OnScreenSaverBegin events of the SiteKiosk Object Model to trigger deleting the Web Storage content. OnReset fires when a person hits the logout button of SiteKiosk or when a Pay session runs out. OnScreenSaverBegin fires once the screensaver starts. Note that deleting the Web Storage requires a restart of SiteKiosk to also clear the Web Storage content from the currently running instance of the browser. This means that the screensaver will only run for the time we define as the wait time for the content deletion to happen, if we use the OnScreenSaverBegin event. Please consider this fact for your project.

Next we need to wait a few seconds to let SiteKiosk run through the default processes that happen if any of the above events occur. To make SiteKiosk wait, we use the AddDelayedEvent method.

The next step is to actually delete the Web Storage content. For that we use the FileSystemObject of Windows Scripting. Be aware that the location of the folder (C:\Users\[User Name]\AppData\Local\Microsoft\Internet Explorer\DOMStore) that needs to be deleted is user sensitive. Make sure to use the path that is appropriate for the user you run SiteKiosk under. In most cases SiteKiosk will run under the restricted SiteKiosk Windows user, therefore the script we are building uses the path suitable for this environment: C:\Users\SiteKiosk\AppData\Local\Microsoft\Internet Explorer\DOMStore.

The final step is to make a restart of SiteKiosk. Without the restart the current browser instance will still use a cached version of the Web Storage content.

The script looks like this:

//Initializing the events we want to use to delete Web Storage
SiteKiosk.OnReset = WaitBeforeDelete;
SiteKiosk.ScreenSaver.OnScreenSaverBegin = WaitBeforeDelete; //Note that using the screensaver event will basically stop the screensaver from running longer than the wait time defined below, because of the required SiteKiosk restart.

function WaitBeforeDelete()
{
	//Give SiteKiosk some time to run through its default session end/screensaver activation methods
	evtid = SiteKiosk.Scheduler.AddDelayedEvent(5000, DeleteWebStorage);
}

function DeleteWebStorage(eventID)
{  
	try
	{	 
		//Deleting the folder with the help of the FileSystemObject
		var fso = new ActiveXObject("Scripting.FileSystemObject");
 		fso.DeleteFolder("C:\\Users\\SiteKiosk\\AppData\\Local\\Microsoft\\Internet Explorer\\DOMStore", true);
 		SiteKiosk.Logfile.Notification("Deleting the Web Storage content was successful");

		//Required restart to clear the Web Storage from the temporary cache of the current browser instance
		SiteKiosk.Restart();
 	}
	catch (e)
	{
		//Create a SiteKiosk logfile entry in case something goes wrong
		SiteKiosk.Logfile.Notification("There was an error deleting the Web Storage content: " + e.description);
	}
}

Save the script under any name as a javascript file, e.g. DeleteWebStorage.js. Put the file in the ..\SiteKiosk\html folder and then open the SiteKiosk configuration and go to Start Page & Browser, click on Advanced and add the script file as an external script under Execute Script.

If you run the script and monitor the logfiles, a successful deletion of the Web Storage will look like this in the moment of the necessary restart of SiteKiosk:

Using SiteKiosk to Automate Window and Dialog Handling

SiteKiosk Windows allows you to add external applications to be started from within the secure environment that SiteKiosk provides. As an additional security layer, the configuration of SiteKiosk lets you specify the handling of windows and dialogs. Usually this is intended to prevent users from changing settings in an options dialog or making other undesired changes to external applications and operating system settings. To achieve this, SiteKiosk identifies windows and dialogs based on title and/or class. After the identification SiteKiosk sends a Windows Message Command (WM_COMMAND), in most cases this is the WM_CLOSE command, to close the window or dialog directly, but SiteKiosk supports a complete range of commands that can be send.

Little known is the fact that the mechanisms of the windows and dialogs management can also be used to automate processes. For this purpose the different available commands are useful as they allow to not only close a dialog automatically but also to make a window or dialog execute certain actions offered in their specific context.

Let's look at this in more detail with the help of an example. When you are printing a PDF file from within SiteKiosk, you will see the print dialog of the Acrobat Reader, that needs to be confirmed before the actual printing starts. SiteKiosk can auto-confirm this dialog to make printing more convenient for the user. In order for SiteKiosk to auto-confirm the PDF printing we need to open the configuration of SiteKiosk and go to Access/Security, there we select Block system critical windows & dialog boxes and click the Settings button. In the new configuration dialog we click the Add button and create a new treatment rule. We choose to close the window immediately, then we select to send a WM_COMMAND to close the window. As the command we select OK from the dropdown. Now we set the title, which is Print in this case, and the class, which is #32770 in this case (you can use a tool like AutoIT to find the class). All other settings can be left as is.

With these settings SiteKiosk will automatically confirm the PDF print dialog with OK, which triggers the printing of the document. Note that for this example Acrobat Reader XI was used and besides the above window and dialog settings SiteKiosk was configured to allow printing.

Accessing Local Resources from the SiteKiosk Browser

SiteKiosk is a secure web browser, by default it does not allow the use of WScript and similar coding options, that let you access local resources. As part of the requirements of a kiosk project you still may need to access such local resources, e.g. for querying a logged in user or reading/changing a local file or the Windows registry.

By adding an additional security layer, SiteKiosk allows you to execute such code as part of an external script file, that you need to specifically allow in the configuration of SiteKiosk. This script is started togehter with SiteKiosk. You can either execute all the required code just within the external script or you can access the script from a webpage as described in another post.

The first example just reads a registry setting and writes its value to the SiteKiosk log files:

//Wsh Shell Object
var WshShell = new ActiveXObject("WScript.Shell");

//This example reads the type of the operating system
var OsType = WshShell.RegRead("HKEY_LOCAL_MACHINE\\SYSTEM\\CurrentControlSet\\Control\\Session Manager\\Environment\\PROCESSOR_ARCHITECTURE");

//Write the gathered information to the SiteKiosk log file
SiteKiosk.Logfile.Notification("Detected OS type: " + OsType);

Just copy the above code into a .js file with whatever name you like and add it as an external script to test for yourself.

The second example queries the user that SiteKiosk currently runs under on the press of a button in a web page. For that we need two files. The html page, that you can put locally or on a web server, and the external script that runs the code that accesses local resources.

First is the external script that will tell us which local user SiteKiosk is running under:

//Initialize the required WScript object
var WshNetwork = new ActiveXObject("WScript.Network");

//Simple method that returns the user name
function QueryUser(){
	return WshNetwork.UserName;
}

Again, just copy the above code into a .js file with whatever name you like and add it as an external script.

Next is the html code that communicates with the external script. Please have a look at this post for more information on that topic.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title>What user is SiteKiosk running under?</title>
<SCRIPT TYPE="text/javascript">
    //Initializing the SiteKiosk Object Model
    window.external.InitScriptInterface();
     
    function QueryUserExt(){
        //Query the user by using the external script file
        var str_user = SiteKiosk.ScriptDispatch.QueryUser();
		window.alert("User Name: " + str_user);
    }
     
//-->
</script>
<body>
    <input type="button" value="What user is SiteKiosk running under?" onclick="QueryUserExt()">
</body>
</html>

Copy the above code into an .html file that you name to your liking and either place it locally (e.g. in the ..\SiteKiosk\html\ folder) or on a web server. If you are not using the ..\SiteKiosk\html\ folder please make sure that the html file has script allowance in the SiteKiosk configuration.

The result of this little experiment will look similar to this:

Be aware that the code is executed with the user rights of the user you run SiteKiosk under, which may limit you options, e.g. you may only be capable of writing in the HKCU branch of the Windows registry and not in HKLM.

Use SiteKiosk to Accept Payment for any kind of Service

The SiteKiosk Pay version allows you to charge a kiosk user for a variety of basic services right out of the box. You can take a fee for surfing the web, making a download, sending a multimedia email, using an application or printing.

By a little bit of code you can use the payment options of SiteKiosk to allow payment directly at the kiosk for whatever service you desire. This can be for goods in a webshop, concert tickets or even fines, e.g. paying a parking violation ticket. This code can even be added to an existing project to add payment by SiteKiosk as an additional feature. You may then use browser detection to execute the SiteKiosk code only within the SiteKiosk browser.

The following code makes use of the SiteKiosk Object Model. It uses the Dispatch object to access the SiteCashScript.js file that implements the StartPullRequest method that we will be using. The file SiteCashScript.js is loaded automatically when you launch SiteKiosk. So to kick off our request for payment we use the following line:

SiteKiosk.Plugins("SiteCash").Script.Dispatch.StartPullRequest("Text to show in the pullmode dialog that states the reason for requesting payment", 0.5, OnPullRequestCompleted, 30);

The first parameter of the StartPullRequest method is a string that states the reason for requesting payment. It will be displayed in the payment request dialog that is triggered by calling the StartPullRequest method. The second parameter is the amount to be requested. The third parameter is the method that is being called once the pull request completes. The fourth and last parameter is the time in seconds that the request dialog will wait for an inpayment.

When the pull request is complete it will call the method you named as the third parameter. This is how it needs to be added to your code:

function OnPullRequestCompleted(bool_success){
    if (bool_success){
        //your code for a successful payment
	}
	else{
		//your code if the payment failed
	}
}

The parameter passed to the method is a boolean value that states whether the requested amount has been paid or not. Depending on the outcome you can add your own code for either of the two scenarios.

A simple implementation of the above could look like this:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title>Pullmode Example</title>
<SCRIPT TYPE="text/javascript">
    //Initializing the SiteKiosk Object Model
    window.external.InitScriptInterface();
     
    function OnPullRequestCompleted(bool_success){
		if (bool_success){
			document.getElementById("result").innerHTML = "Thank you. The payment was successful.";
		}
		else{
			document.getElementById("result").innerHTML = "Payment has not been made.";
		}
	} 
//-->
</script>
<body>
    Please click the button and pay the requested amount 
	<input type="button" value="Make your payment" onclick="SiteKiosk.Plugins('SiteCash').Script.Dispatch.StartPullRequest('Please make your payment! This service', 0.5, OnPullRequestCompleted, 30); ">
    <br />
    <span id="result"></span>
</body>
</html>

When you use the example in SiteKiosk you will see this:

You can even influence the whole process further by editing the StartPullRequest method. We have learned above that the StartPullRequest method is implemented in the file ..\SiteKiosk\SiteCash\SiteCashScript.js and it can be modified to fit your special requirements, e.g. you can change the design of the payment request dialog.

Please make sure to allow scripting for your HTML pages that you use the SiteKiosk Object Model on. To do so, enter the page and the path to the page in the SiteKiosk configuration under ACCESS-> URLs with script permission.

Accessing an External SiteKiosk Script from a Webpage

SiteKiosk offers you the option to run an external script in the background each time SiteKiosk is executed. This is useful to place more general SiteKiosk Object Model code and it can also be used to place variables and functions you want to use in between different web pages.

A simple external script file to illustrate the above can look like this:

var gstr_testvalue = "Default value";
 
function setTestValue(lstr_newvalue){
	gstr_testvalue = lstr_newvalue;
}
 
function retrieveTestValue(){
	return gstr_testvalue;
}

You can save this into a .js-file and add it to your SiteKiosk configuration as an external script.

To continue with our example we create an html page that changes the value of the gstr_testvalue variable. To demonstrate how to access a variable or a function of the external script the example page changes the value both directly and by using the setTestValue function that has been defined in the external script. To actually access the members defined in the external script the ScriptDispatch Object of the SiteKiosk Object Model is used.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title>Page that sets a new value</title>
<SCRIPT TYPE="text/javascript">
	//Initializing the SiteKiosk Object Model
	window.external.InitScriptInterface();
	
	function directVariableAccess(){
		//set the value 1 for the variable in the external script, this overwrites the existing value
		SiteKiosk.ScriptDispatch.gstr_testvalue = "Value created using direct access";
	}
	
	function functionBasedVariableAccess(){
		//set the value 1 for the variable in the external script, this overwrites the existing value
		SiteKiosk.ScriptDispatch.setTestValue("Value created using function-based access");
	}
	
//-->
</script>
<body>
	<input type="button" value="Direct Variable Write Access" onclick="directVariableAccess()">
	<br />
	<input type="button" value="Function-based Variable Write Access" onclick="functionBasedVariableAccess()">
</body>
</html>

Next we create an additional html page that retrieves the value from the external script. Again using a direct and a function-based method.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title>Page that reads the value</title>
<SCRIPT TYPE="text/javascript">
	//Initializing the SiteKiosk Object Model
	window.external.InitScriptInterface();
	
	function directVariableAccess(){
		//set the value 1 for the variable in the external script, this overwrites the existing value
		alert("Current value retrieved using direct access method: " + SiteKiosk.ScriptDispatch.gstr_testvalue);
	}
	
	function functionBasedVariableAccess(){
		//set the value 1 for the variable in the external script, this overwrites the existing value
		alert("Current value retrieved using function-based access method: " + SiteKiosk.ScriptDispatch.retrieveTestValue());
	}
	
//-->
</script>
<body>
	<input type="button" value="Direct Variable Read Access" onclick="directVariableAccess()">
	<br />
	<input type="button" value="Function-based Variable Read Access" onclick="functionBasedVariableAccess()">
</body>
</html>

The two html files can be placed locally on a SiteKiosk computer (e.g. in the html subfolder of the SiteKiosk installation folder) or on a web server. Just make sure that the location you placed the files under is allowed to execute the SiteKiosk Object Model.

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:

Redirect All Navigations to the Main Window of SiteKiosk

Today we are going to create a small script that will redirect all navigations to the main window of SiteKiosk. This can be helpful if you need to work with existing pages in a kiosk project that open new windows instead of navigating in one browser window only. If you can't change the behaviour of those pages you can use the SiteKiosk Object Model to create a solution.

The following script reacts to the OnInsert event that fires whenever a new window is added. It will check that the window is a SiteKiosk browser window and if it is, it will minimize it and trigger a navigation to the URL of the new window in the main SiteKiosk browser window. Once this happened the new window will be closed. Please note that you will see the new window for a very short time, this cannot be prevented. Depending on the nature of the navigation you also might have to increase the delay given for the new window to properly being created.

//Global variable
var gk_skwin = null;

//Event that fires when a new window is added to the list
SiteKiosk.WindowList.OnInsert = OnInsert;


//Function to call when a new window has been added
function OnInsert(skwin){
	//Write the WindowInfo object received as parameter to the global variable
	gk_skwin = skwin;
	//Add a little delay of 500 milliseconds to allow the window to be created properly
	SiteKiosk.Scheduler.AddDelayedEvent(500, MoveToMainWnd);
}

function MoveToMainWnd(){
	//Check if the type of the new window is a SiteKiosk browser window to make sure we don't try the following on any other window type
	if(gk_skwin.WindowType === 2){
		SiteKiosk.Logfile.Notification("DEBUG: New browser window detected, sending URL to main window"); //This line is for debugging purposes only
		//Minimize the new window to make it as much invisible as possible
		SiteKiosk.WindowList.Minimize(gk_skwin.Handle);
		//Navigate to the address of the new window in the main window
		SiteKiosk.WindowList.MainWindow.SiteKioskWindow.SiteKioskWebBrowser.Navigate(gk_skwin.SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.LocationURL,false);
		//Close the newly opened window
		SiteKiosk.WindowList.Close(gk_skwin.Handle);
	}
}

Copy the above code example to Notepad (or your preferred editor) and save it as a .js script file with whatever name you like, e.g. redirect2mainwnd.js. It is recommended to use the ..\SiteKiosk\html folder to store such files. Open the SiteKiosk configuration, go to Start Page & Browser or Browser Design (depending on the SiteKiosk version you are using), click on the Advanced button and add the script as an external script file. Save the configuration and start it with SiteKiosk. Whenever you are using a link now that will open an new window this navigation is redirected to the main SiteKiosk browser window and the new window will be closed.

Using Browser Detection to Place SiteKiosk Object Model or Kiosk Project Specific Code

When you are doing a kiosk project with SiteKiosk you might plan to use web pages that are utilized for a kiosk browser as well as a normal web browser. In that case you don't want to create and maintain the web pages twice, therefore the kiosk code should be integrated into the normal code. To execute the kiosk specific code only on a kiosk system you need to detect that it is running in SiteKiosk. SiteKiosk provides you with two options for that.

One Option is to use the user agent. SiteKiosk uses the Internet Explorer WebBrowser control, therefore it has a user agent that identifies it as the underlying Internet Explorer. By default SiteKiosk adds SiteKiosk version information to the user agent. Here is an example of that:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SiteKiosk 8.8 Build 1650)

The setting for the user agent can be found in the configuration of SiteKiosk under Start Page & Browser -> Advanced Computer Identification. There you will also find an option to add any text you want to the user agent. The following is an example that bases the browser detection on the user agent:

<html>
<head>
	<title>SiteKiosk User Agent Example</title>
</head>
	<body>
		<span id="SiteKioskOrNot">...</span>
	</body>
	<script type="text/javascript">
		if (navigator.userAgent.indexOf("SiteKiosk") !== -1){
			document.getElementById("SiteKioskOrNot").innerHTML = "You are using SiteKiosk.";
			//Place code for your kiosk project here.
		}
		else{
			document.getElementById("SiteKioskOrNot").innerHTML = "You are not using SiteKiosk.";
			//Place code for normal web browsers here.
		}
	</script>
</html>

 

The other option is to use try-catch in your code. This option is only suitable when you explicitly want to use the SiteKiosk Object Model as part of your kiosk project code. The try-catch basically tries if the initialization of the SiteKiosk Object Model works or not. Here is the code example for that:

<html>
<head>
	<title>SiteKiosk Try-Catch Example</title>
</head>
	<body>
		<span id="SiteKioskOrNot">...</span>
	</body>
	<script type="text/javascript">
		try{
			window.external.InitScriptInterface();
			document.getElementById("SiteKioskOrNot").innerHTML = "You are using SiteKiosk.";
			//Place code for your kiosk project here.
		}
		catch(e){
			document.getElementById("SiteKioskOrNot").innerHTML = "You are not using SiteKiosk.";
			//Place code for normal web browsers here.
		}
	</script>
</html>

Note that you need to allow script permission for the SiteKiosk Object Model to be executed in SiteKiosk. You can do this in the configuration of SiteKiosk under Access/Security -> URLs with Script Permission. Another example for the try-catch option can be found in the SiteKiosk Object Model documentation at the bottom of this page.