PROVISIO DevBlog

How to Reposition Buttons in the SiteKiosk Windows Chrome Browser Toolbar

There are many customization options for the SiteKiosk Windows Chrome Browser Toolbar. Both by simply using the configuration tool of SiteKiosk to enable or disable buttons or to change the colors as well as by editing files to give the toolbar a new look. There are several blog posts that deal with this topic, e.g. here and here. This time we are going to learn how to reposition buttons in the toolbar.

As an example, we will move the logout button from the left side of the language selection button the the right side. To do that, we need to open and edit a JSON (JavaScript Object Notation) file that is used by the Chrome Browser of SiteKiosk Windows. The file content.json is located in the folder C:\Users\Public\SiteKiosk\data\content\local\files\projects\d97aa96b962543fcb39625a3f8e8d8fb\000000000000000000000000. Open it with an editor like Notepad++. It is suggested that you make a backup copy of the file before editing it.

The buttons are defined in a number of attribute-value pairs that look like this for the logout button:

{
	"type": "content-button",
	"title": "{{$root.stringTable.strings.buttons.logout.$}}",
	"name": "logoutButton",
	"height": "60px",
	"width": "60px",
	"marginLeft": "0px",
	"marginRight": "0px",
	"_editor_canBeSelected": true,
	"_editor_canBeEdited": true,
	"_editor_canBeDeleted": true,
	"_editor_canAdd": true,
	"layout": {
	},
	"icon": {
		"src": "files/images/logout.svg",
		"color": "[[$root.colors.toolbarButton.icon]]",
		"hoverColor": "[[$root.colors.toolbarButton.iconHover]]",
		"pressedColor": "[[$root.colors.toolbarButton.iconPressed]]"
	},
	"backgroundImage": {
		"src": "files/images/button_background.svg",
		"color": "[[$root.colors.toolbarButton.background]]",
		"hoverColor": "[[$root.colors.toolbarButton.backgroundHover]]",
		"pressedColor": "[[$root.colors.toolbarButton.backgroundPressed]]"
	},
	"action": {
		"target": "{{%main}}",
		"value": "logout"
	},
	"_editor_propertiesToEdit": {
		"applyToAllContentGroups": true,
		"flex": true,
		"margin": true,
		"text": true
	},
	"_editor_propertiesToEditRestrictedUser": {}
},

And like this for the language selection button:

{
	"type": "content-button",
	"title": "{{$root.stringTable.strings.buttons.languages.$}}",
	"name": "languagesButton",
	"height": "60px",
	"width": "60px",
	"marginLeft": "0px",
	"marginRight": "0px",
	"_editor_canBeSelected": true,
	"_editor_canBeEdited": true,
	"_editor_canBeDeleted": true,
	"_editor_canAdd": true,
	"layout": {
	},
	"icon": {
		"src": "files/images/flags.png",
		"height": 32,
		"width": 32
	},
	"outlineImage": {
		"src": "files/images/circle.svg",
		"color": "[[$root.colors.toolbarButton.icon]]",
		"hoverColor": "[[$root.colors.toolbarButton.iconHover]]",
		"pressedColor": "[[$root.colors.toolbarButton.iconPressed]]"
	},
	"backgroundImage": {
		"src": "files/images/button_background.svg",
		"color": "[[$root.colors.toolbarButton.background]]",
		"hoverColor": "[[$root.colors.toolbarButton.backgroundHover]]",
		"pressedColor": "[[$root.colors.toolbarButton.backgroundPressed]]"
	},
	"action": {
		"target": "{{%main}}",
		"value": "showLanguages"
	},
	"_editor_propertiesToEdit": {
		"applyToAllContentGroups": true,
		"flex": true,
		"margin": true,
		"text": true
	},
	"_editor_propertiesToEditRestrictedUser": {}
},

As you can see, the different buttons can be easily identified by the name attribute. All button definitions are in the same order in the JSON document as they appear on the screen if you start SiteKiosk. To reposition a button you simply have to move its definition to the new place you would like the button to have on the screen. In the case of the logout and the language selection button you would simply have to move the complete logout definition shown above behind the definition of the language selection button, also shown above.

This change results in the logout button being shown behind the language selection button, as pictured here:

Please note that you can easily change the general appearance of the SiteKiosk Windows Chrome Browser through the SiteKiosk configuration. Just go to Start Page & Browser -> Chrome Browser -> Customize -> Browser Toolbar. Here you can show/hide the different buttons and also change the overall display size of the toolbar. You can also add custom buttons, if you need more than 2 of those, please have a look here.

Using the Expert Mode of the SiteCaster Editor

The SiteCaster Editor comes with an expert mode, that allows you to edit settings beyond their default value range. This gives you the opportunity to customize your projects to match very specific requirements. Feel free to experiment with this mode, but be aware that changing values beyond their default range is outside of the scope of our free support.

To enter the expert mode open a project to view the project page. Now click the address bar of your browser and append &expert to the URL. Make sure you place it at the very end of the URL and then press enter to open the expert mode.

Next select the element you want to customize. In our example we want to adjust the font size and the font family of the Time/Date element. To do that, click on the new advanced edit button you will see in the toolbar after entering the expert mode.

After clicking the button you will see a list of all properties of the selected element in the inspector. In the list you will find the dateFontFamily and dateFontSize properties. Use the drop-down of the dateFontFamily property to select String and type in the font family of your liking into the text field. For the dateFontSize property select Number from the dropdown and then type in the pixel value you want to choose. Click on the Save button after you are done to apply the changed values.

To give you an idea of the advanced possibilities you get from choosing the expert mode here is a view of the default options you have for the Time/Date element.

 As you can see the default element will cover the needs of most users but when using the expert mode you can change the properties to whatever you like.

Starting an App from a Web Page in SiteKiosk Android

The SiteKiosk Android Object Model can be used to start any Android app available on a device from a web page. This can be used for example to create a fully individualized start page for SiteKiosk Android or to start an application after providing a password. Note that a SiteKiosk Android Object Model documentation is not publicly available yet but a preliminary version can be obtained by contacting PROVISIO support.

In order to start the application you need to know its guid name, e.g. com.android.calculator2. Either you know this information for the app you would like to start or you can use the SiteKiosk logs to find this information. To do so, just add the desired app in the SiteKiosk configuration under Application -> Android App or Application -> Multiple Applications. Next start SiteKiosk and make sure the app has started at least once. Now close SiteKiosk and open the SiteKiosk log file in the ..\SiteKiosk\Logs folder. Look for an entry with the text System app launched, e.g. System app launched: com.android.calculator2. In our example the guid name we are looking for is com.android.calculator2. This information is required to start that specific app from the code of the web page.

The example HTML code to start the app looks like this:

<!DOCTYPE html>
<html>
<head>
<script>
	//method to initialize the SK Object Model as of SKA 2.5 or higher
	(new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
</script>
<script>
    function startApp() {
        //make sure the SiteKiosk Android Object Method is ready
		siteKiosk.ready(function() {
			//start the Android app by its Guid name
			siteKiosk.system.apps.getByGuid("com.android.calculator2").launch("", "systemApp");
		});
    }
</script>
</head>
<body>
	<button onclick="startApp()">Start App</button>
</body>
</html>

The method _siteKiosk.getSiteKioskObjectModelCode initializes the SiteKiosk Android Object Model. The siteKiosk.ready method makes sure that the SiteKiosk Object Model is ready for use. If that is the case, siteKiosk.system.apps.getByGuid accesses the app and the launch method is used to start it (the default parameters for launch, "" and "systemApp", should be left as is).

Of course you need to change the guid name from the above example (com.android.calculator2) to the guid name of your app for the getByGuid method.

Save the complete code as an html file and place it either locally on the Android device or on a web server. For the purpose of testing you can set the file as the start page of the SiteKiosk Android Browser Application.

You also need to give the html file script permission, so it is allowed to use the SiteKiosk Object Model. Do this under Application -> Browser (or Fullscreen Browser) -> Script permission.

Finally you need to add the app you want to start under Security -> Allow assigned apps.

Changing the Date and Time Format in Chrome Browser of SiteKiosk Windows

When using English as the language setting for the Chrome Browser of SiteKiosk Windows the time is shown in AM/PM format and the date is shown as Month/Day/Year. To change that a quick file edit can be done.

Open the file ..\SiteKiosk\Skins\Chrome_NG_Skin\TrayWnd.html with an editor, e.g. Notepad. Look for these lines:

} else {
	// US
	curDateStr = "" + (curDate.getHours() > 12 ? utils.ensureTrailing0(curDate.getHours() - 12) : utils.ensureTrailing0(curDate.getHours()));
	curDateStr += ":" + utils.ensureTrailing0(curDate.getMinutes(), true);
	curDateStr += (curDate.getHours() >= 12 ? " PM" : " AM");
	curDateStr += "<br />"+utils.ensureTrailing0(curDate.getMonth()+1)+"/"+utils.ensureTrailing0(curDate.getDate())+"/"+utils.ensureTrailing0(curDate.getFullYear());
}

Change the code to:

} else {
	curDateStr = utils.ensureTrailing0(curDate.getHours()) + ":" + utils.ensureTrailing0(curDate.getMinutes(), true);
	curDateStr += "<br />"+utils.ensureTrailing0(curDate.getDate())+"/"+utils.ensureTrailing0(curDate.getMonth()+1)+"/"+utils.ensureTrailing0(curDate.getFullYear());
}

The first line displays the time, the second is the date. Both are assigned to the same variable by way of string concatenation. The string basically contains html code to display the time and date section. Feel free to make changes as you wish.

The above example will change the time and date display to this:

SiteRemote-Controlled Alert System for SiteKiosk Windows

The kiosk management solution SiteRemote can be used to create an alert message system for kiosk systems running SiteKiosk Windows. An alert message will overlay the default SiteKiosk user inferface informing users of special events. Note that the solution described in this blog post is intended as a sort of emergency system. If you just want to show changing information you should consider using SiteCaster.

Two files are needed on the SiteKiosk terminal. One is a JavaScript file (named alertswitch.js in this example) the second is an HTML file (named alert.html in this example). Both should be placed in a folder called alert that should be placed in the HTML folder of the SiteKiosk installation path.

Let's start with the alertswitch.js JavaScript file. The code of the file is as follows:

//Periodic event to check alert conditions every 25 seconds
//The lower this value the harder to use the local SiteKiosk escape menu to close SiteKiosk
SiteKiosk.Scheduler.AddPeriodicEvent(25000, CheckAlertValue);

//Shell object used to read the registry
var WshShell = new ActiveXObject("WScript.Shell");

//Global variable for the event id of the periodic alert text check
var PeriodicEventID = 0;

//Alert dialog properties
var gk_Emergency = SiteKiosk.SiteKioskUI.CreateHTMLDialog();
//Path to the html file used for the alert
gk_Emergency.URL = "file://" + SiteKiosk.SiteKioskDirectory + "Html\\Alert\\Alert.html";
gk_Emergency.TopMostWindow = true;
gk_Emergency.Closable = false;
gk_Emergency.Title = false;
gk_Emergency.Border = false;
gk_Emergency.Scrollbars = false;
gk_Emergency.Sysmenu = false;
gk_Emergency.CloseOnInput = false;
gk_Emergency.OnClose = onClose;
gk_Emergency.Maximize();

function CheckAlertValue(){
	try{
		//Check registry value !NOTE! The following registry path is for 64-Bit systems!
		if (WshShell.RegRead("HKLM\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\AlertValue") !== ""){
			//Resets the screensaver idle timeout to make sure the screensaver is not interfering with the alert
			SiteKiosk.ScreenSaver.Reactivate();
			//Show the alert
			gk_Emergency.ShowDialog();
			//Force hiding of the task bar during the alert (Note: Not required when running SiteKiosk in full screen mode)
			SiteKiosk.SiteSkin.TaskbarVisible = false;
		}
		else{
			if (PeriodicEventID !== 0)
			//Remove the periodic event that checks for alert text changes	
				SiteKiosk.Scheduler.RemoveEvent(PeriodicEventID);
			
			//Show the taskbar again (Note: Not required when running SiteKiosk in full screen mode)
			SiteKiosk.SiteSkin.TaskbarVisible = true;
			
			//Close the alert
			gk_Emergency.CloseDialog();
		}
			
	}
	catch(e){
		//No matching registry value, do nothing
	}
}

//Return the registry value to the alert dialog on request
function GetRegistryValue(){
    return WshShell.RegRead("HKLM\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\AlertValue");
}

//Allow the alert to write the event id of the periodic event that checks for alert text changes
function SetPeriodicEventID(evtid){
    PeriodicEventID = evtid;
}

function onClose(){
	if (PeriodicEventID !== 0)
	//Remove the periodic event that checks for alert text changes because dialog has been closed from outside of the script
		SiteKiosk.Scheduler.RemoveEvent(PeriodicEventID);
}

The file must be added to SiteKiosk as an external script file. This can be done in the configuration of SiteKiosk under Start Page & Browser -> Advanced. The file uses the AddPeriodicEvent method of the SiteKiosk Object Model to periodically check a registry value (in our example HKLM\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\AlertValue). The registry value is either an empty string or contains the alert text that should be displayed. If the check does not return an empty string, the ShowDialog method is used to show the dialog defined with the CreateHTMLDialog method. One of the properties of the dialog is the path to the alert.html file explained below in this document. If the alert is shown the taskbar of SiteKiosk is switched off (only required if no full screen mode is used) using the TaskbarVisible property. Additionally the SiteKiosk screensaver will be prevented during the display of the alert to minimize any possible interference with the alert message, which is why the Reactivate method is used. Once an empty string is detected in the registry the alert is switched off by means of the CloseDialog method.

The external script also contains two methods to provide the HTML file that displays the actual alert with the alert message (GetRegisryValue method) and to receive the event id of the periodic event used in the HTML file to check for changes in the alert text. The id is used to stop the periodic event once the alert message is no longer displayed with the help of the RemoveEvent method.

The alert.html HTML file that accompanies the external script is used to display the alert message. You might change the design of that page to whatever you like. The code of the HTML file is as follows:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<style> 
	html { 
		background: red no-repeat center fixed; 
		background-size: cover;
	}
	body { 
		font-family: arial;
		text-align:center;
		font-size: 100px;
		color: white; 
	}
	div {
		margin-top: 15%;
		padding: 20px;
	}
	</style>
	</head>
	<body style="margin:0px;"> 
		<div id="Alert-Text">
			... 
		</div>
	</body>
	<script type="text/JScript">
		//Initialize the SiteKiosk Object Model
		window.external.InitScriptInterface();
		
		//Get the alert text from the external script
		function GetAlertValue(){
			document.getElementById("Alert-Text").innerHTML = SiteKiosk.ScriptDispatch.GetRegistryValue();
		}
		
		GetAlertValue();
		//Check the alert text every 5 seconds for changes
		var evtid = SiteKiosk.Scheduler.AddPeriodicEvent(5000, GetAlertValue);
		//Write event id to external script to remove event when closing the alert
		SiteKiosk.ScriptDispatch.SetPeriodicEventID(evtid);
	</script>
</html>

After the initialization of the SiteKiosk Object Model the ScriptDispatch object is used to retrieve the alert message from the external script. The AddPeriodicEvent method is used to periodically request the alert message to quickly react to changes. The id for that event is passed to the external script so that the event can be canelled once the alert is closed.

Note that the times for the periodic events in the script can be changed to your liking and the requirements of your environment.

With the two files required on the SiteKiosk terminal in place we can now focus on the SiteRemote part. Obviously the SiteKiosk terminal needs to be registered with a SiteRemote server. Within your SiteRemote team go to the SiteKiosk tab and select Jobs. Scroll all the way down and select New template. For the alert system to work we need at least two templates. One that switches the alert on and one to switch it off. The template that switches the alert on includes the string for the alert message. In case you have different predefined alert messages that you want to display with the alert system based on different situations, you can create different templates for each of the messages.

The create an ON template provide a job name, select SiteKiosk Windows as client type and Execute Script as action type. Click Add next to the selected action type and paste the following script into the script field. Make sure that you do not select the option Script requires SiteKiosk Object:

//ON !NOTE! The following registry path is for 64-Bit systems!
var gk_WshShell = new ActiveXObject("WScript.Shell");
gk_WshShell.RegWrite("HKLM\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\AlertValue", "Alert Text", "REG_SZ");

This will write the string Alert Text to the registry of a SiteKiosk terminal the job will be assigned to. Change the string to whatever you like and make as many different ON templates as you require. Note that you can also change the text each time you assign the job template to a machine.

The OFF template simply writes an empty string to the terminal's registry:

//OFF !NOTE! The following registry path is for 64-Bit systems!
var gk_WshShell = new ActiveXObject("WScript.Shell");
gk_WshShell.RegWrite("HKLM\\SOFTWARE\\Wow6432Node\\PROVISIO\\SiteKiosk\\AlertValue", "", "REG_SZ");

Each time you want to activate or deactivate an alert on one machine or a number of machines click one of the templates and assign it. If you assign the ON template from this example to a machine that runs the required files described above you will get an alert like this:

Note that for the alert message to be displayed, SiteKiosk must be running, which is the normal state on a SiteKiosk kiosk terminal.

Identifiying Individual SiteKiosk Windows Computers

Identifying individual SiteKiosk Windows computers can be helpful to deliver specific content to these machines. You can use either native JavaScript or the SiteKiosk Object Model to retrieve that information.

To use native JavaScript you need to enable the computer identification feature in the SiteKiosk configuration. When using the SiteKiosk Chrome Browser for example, you can find this feature under Start Page & Browser -> Chrome Browser -> Customize -> Settings -> Computer Identification. Tick the Add SiteKiosk to user agent header option and more importantly the Customize user agent field option.

You can leave the default value $(ComputerName) as this is exactly what we want to work with to identify the SiteKiosk Windows machine. That global variable will be replaced by the individual computer name automatically, so you do not need a separate configuration for each of your SiteKiosk computers. The additional information will be added at the end of the user agent string of the browser seperated by a semicolon.

For the Internet Explorer engine you will find the setting under Start Page & Browser -> Internet Explorer -> Advanced -> Computer Identification.

Here is a simple example for a web page that makes redirects based on the extracted computer name.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script>
		//Get the SiteKiosk computer name by extracting the computer name from the user agent string.
		var SiteKioskComputerName = navigator.userAgent.substring(navigator.userAgent.lastIndexOf(";")+1);
		document.write("SiteKiosk Computer Name: " + SiteKioskComputerName);
		
		var url = "";
		
		//Assign different URLs based on the computer name.
		if (SiteKioskComputerName.includes("SITEKIOSK_COMPUTER_1")){
			url = "https://www.provisio.com/";
		}
		else if (SiteKioskComputerName.includes("SITEKIOSK_COMPUTER_2")){
			url = "https://www.siteremote.net/";
		}
		else{
			//Place code for no matching computer name here.
		}
		
		//Redirect to content for this specific SiteKiosk terminal.
		if (url !== "")
			document.location.href = url;
	</script>
	<title>Check ComputerName with User Agent</title>
</head>
<body>
<!-- Place code for your HTML body here -->
</body>
</html>

The example is using only native HTML and Javascript, so it will work both in SiteKiosk with a Chrome based browser and in SiteKiosk with an Internet Explorer based browser.

If for whatever reason you can't or don't want to use the customized user agent string option, you can also use the SiteKiosk Object Model. Note that the Object Model versions are different for the Chrome and Internet Explorer browser versions of SiteKiosk. The following example is for the Chrome browser version. The SiteKiosk Object Model for use in the Chrome Browser engine of SiteKiosk is still work in progress and does not offer all the features the classic SiteKiosk Object Model for the IE based engine offers. That is why the documentation is only available on request from our support department.

<html>
<head>
	<meta charset="UTF-8">
	<script>
		//Initialize the SiteKiosk Object Model for Chrome.
		(new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
		
		//Get the SiteKiosk computer name by using the SiteKiosk Object Model.
		var SiteKioskComputerName = siteKiosk.system.environment.getVariable("computerName");;
		document.write("SiteKiosk Computer Name: " + SiteKioskComputerName);
		
		var url = "";
		
		//Assign different URLs based on the computer name.
		if (SiteKioskComputerName.includes("SITEKIOSK_COMPUTER_1")){
			url = "https://www.provisio.com/";
		}
		else if (SiteKioskComputerName.includes("SITEKIOSK_COMPUTER_2")){
			url = "https://www.siteremote.net/";
		}
		else{
			//Place code for no matching computer name here.
		}
		
		//Redirect to content for this specific SiteKiosk terminal.
		if (url !== "")
			document.location.href = url;
	</script>
	<title>Check ComputerName with User Agent</title>
</head>
<body>
<!-- Place code for your HTML body here -->
</body>
</html>

As you can see, the difference between this and the user agent variant is quite small. You need to initialize the Object Model and then use the getVariable method to retrieve the computer name.

If using a browser based on the Internet Explorer, please have a look at the documentation for the classic SiteKiosk Object Model. Specifically the ComputerName property.

Note that for security reasons you need to add pages that are using either version of the SiteKiosk Object Model to the list of URLs with SiteKiosk Object Model Permission in the configuration of SiteKiosk under Access/Security.

For a quick working demonstration of the above you may save the examples as HTML pages, put the in the html subfolder of your SiteKiosk directory and set them as the start page of SiteKiosk.

Using VNC Repeater Connection with SiteRemote Server Behind NAT Gateway

If you are using your SiteRemote Server behind a NAT gateway and you want to use the VNC Repeater Connection, you need to make a change to the Siteremoteserver.config file. Please note that this is only required when using the repeater connection, which uses the SiteRemote Server as a repeater, not when using the direct connection.

Open the file ..\PROVISIO\SiteRemote\Config\SiteRemoteServer.config with an editor like Notepad. And look for the line

<VNCRepeater.config Enabled="true" ViewerPort="5901" ServerPort="5500" MaxSessionCount="42" />

Now add the HostName parameter to that line that specifies the host name of the NAT gateway that will forward the repeater request to your SiteRemote Server. Please make sure that required ports are open and forwarded correctly.

The line should look like this, of course with your host name instead of siteremote.your-comp.com:

<VNCRepeater.config HostName="siteremote.your-comp.com" Enabled="true" ViewerPort="5901" ServerPort="5500" MaxSessionCount="42" />

You are now able to use a VNC repeater connection with your SiteRemote Server as the repeater behind a NAT gateway.

The above applies to SiteRemote Server 6.1 or higher.

Using the Classic SiteKiosk Object Model in SiteKiosk Windows Chrome Browser

The SiteKiosk Object Model for use in the Chrome Browser engine of SiteKiosk is still work in progress and does not offer all the features the classic SiteKiosk Object Model for the IE based engine offers. That is why the documentation is only available on request from our support department. To make life a little easier during the transition phase the SiteKiosk Object Model for Chrome offers a way to run the classic SiteKiosk Object Model in a wrapper. Note that this undocumented method comes as-is, it will not enable you to use the full range of the classic SiteKiosk Object Model, e.g. you cannot use code related to controlling the browser window as this specifically refers to the IE based browser and event based code will most likely be problematic.

A simple example looks like this:

var myReturnValue = _siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "return SiteKiosk.Version.VersionString;");

The callHostFunction method requires two strings. The first string must always be system.windows.skLegacy.executeScript, the second string is the one we use to execute the classic SiteKiosk Object Model code. This can be a single line of code as it is in this example, where we query the version of SiteKiosk installed on the system. The return value is optional, depending on the executed code there may be no return value.

The second string can also have multiple lines, e.g. like in this example that combines the version of SiteKiosk with the build date:

var scriptText = `
	var SKBuildDate = SiteKiosk.Version.BuildDateTime;
	var SKVersionString = SiteKiosk.Version.VersionString;
	return SKVersionString + " " + SKBuildDate;
`;
var myReturnValue = _siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", scriptText);

Finally we want to look at a complete html example that uses methods of the SiteKiosk Multimedia object of the classic object model to manipulate the sound volume of the computer.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<script>
    //method to initialize the SK Chrome Object Model
    (new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
</script>
</head>
    <body>  
		<input id="id_test0" type="button" value="Volume Up" /><br />
		<input id="id_test1" type="button" value="Volume Down" /><br />
		<input id="id_test2" type="button" value="Volume 50%" /><br />
    </body>
    <script type="text/javascript">
        siteKiosk.ready(function (){
            document.getElementById("id_test0").onclick = function () {
				_siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.Multimedia.IncreaseVolume(0.1);");
            };
			document.getElementById("id_test1").onclick = function () {
				_siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.Multimedia.DecreaseVolume(0.1);");
            };
			document.getElementById("id_test2").onclick = function () {
				_siteKiosk.objectModel.callHostFunction("system.windows.skLegacy.executeScript", "SiteKiosk.Multimedia.Volume=0.5;");
            };
        }());
    </script>
</html>

You can copy and paste the example to notepad (or another text editor), save it as an html file, e.g. objectmodeltest.html, in the ..\SiteKiosk\html folder. You can then set it as the start page for the Chrome browser of SiteKiosk to see the classic SiteKiosk Object Model at work in the SiteKiosk Chrome browser.

Adding Terms of Use to SiteKiosk Windows and SiteKiosk Android

There are two ways to present terms of use to the user of a SiteKiosk Windows kiosk system, one is also working for SiteKiosk Android. You can either make use of the Fullscreen feature which works in SiteKiosk Windows and SiteKiosk Android or create an overlay by using the SiteKiosk Object Model which works in SiteKiosk Windows only.

1. Fullscreen method (for SiteKiosk Windows and SiteKiosk Android)

The easiest way to present terms of use is to use the Fullscreen feature of SiteKiosk Windows and SiteKiosk Android. Just set your terms of use page as the start page for SiteKiosk.

Under SiteKiosk Windows you then go to Start Page & Browser, click on Fullscreen and set the fullscreen mode for the same URL, you may also select the option to hide the task bar. This works for the Chrome and Internet Explorer browser engines.

Under SiteKiosk Android you go to Application -> Browser -> Fullscreen Zones and also set your start page (which is your terms of use page) to be displayed in fullscreen mode.

Your terms of use page can be stored locally or online. The code for the terms of use page should include on option to accept the terms. If this option is selected the code of the terms of use page simply navigates to a different URL, which is then shown with the normal browser elements.

Sample code for such a page can look like this:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
	//Terms of use accepted, close the dialog
    function acceptTermsofuse() {
        document.location = "https://www.provisio.com/";
	}
</script>
</head>
<body style="text-align:center;"> 
	Use at your own risk <input type="button" value="OK" onclick="acceptTermsofuse();" />
</body>
</html>

2. Overlay method (for SiteKiosk Windows only)

The other method to show terms of use is to use an overlay over your start page. This can be done by using the SiteKiosk Object Model. First we will create a javascript file, that shows the overlay with the help of the CreateHTMLDialog method. It also shows or hides the overlay on different events (please see the SiteKiosk Object Model documentation for further information). The code for this script file looks like this:

//Initialization of the terms of use dialog
var termsofuseDialog = SiteKiosk.SiteKioskUI.CreateHTMLDialog();
//Path to the terms of use page, this does not have to be local
termsofuseDialog.URL = SiteKiosk.SiteKioskDirectory + "Html/termsofuse.html";
termsofuseDialog.Parent = SiteKiosk.WindowList.MainWindow.Handle;
termsofuseDialog.TopMostWindow = true;
termsofuseDialog.Closable = false;
termsofuseDialog.Title = false;
termsofuseDialog.Border = true;
termsofuseDialog.Scrollbars = false;
termsofuseDialog.Sysmenu = false;
termsofuseDialog.Type = "TERMSOFUSE";
termsofuseDialog.Height = 800;
termsofuseDialog.Width = 1200;
termsofuseDialog.CloseOnInput = false;

//Function that calls the terms of use dialog
function showWindowDelay(){
	termsofuseDialog.ShowModal();
}

//Function that closes the terms of use dialog
function closeDialog(){
	try{
		SiteKiosk.SiteKioskUI.CloseHtmlDialogs('TERMSOFUSE');
	}
	catch(e){}
}

//Show the terms of use dialog when the screensaver ends
SiteKiosk.ScreenSaver.OnScreenSaverEnd = OnScreenSaverEnd;
function OnScreenSaverEnd(){
	SiteKiosk.Scheduler.AddDelayedEvent(1000, showWindowDelay);
}

//Close the terms of use dialog when the screensaver begins
SiteKiosk.ScreenSaver.OnScreenSaverBegin = OnScreenSaverBegin;
function OnScreenSaverBegin(){
	SiteKiosk.Scheduler.AddDelayedEvent(2000, closeDialog);
}

//Show the terms of use dialog when someone uses the logout button
SiteKiosk.OnReset = OnReset;
function OnReset(){
	//Make sure the screensaver is not running
	if (SiteKiosk.ScreenSaver.Active === false){
		SiteKiosk.SiteKioskUI.CloseHtmlDialogs('TERMSOFUSE');
		SiteKiosk.Scheduler.AddDelayedEvent(1000, showWindowDelay);
	}
}

//Show the terms of use dialog when SiteKiosk starts
OnReset();

You can copy and paste the code and save it as a .js file. Put the file into the ..\SiteKiosk\html folder and then add it as an external script to SiteKiosk. For both Internet Explorer and Chrome this is under Start Page & Browser -> Advanced. The following image shows the setting for the Chrome browser engine:

For the actual terms of use page you have two options. The first option does not require any specific code within the terms of use page. Just change the line termsofuseDialog.CloseOnInput = false; to termsofuseDialog.CloseOnInput = true; and any user input, e.g. mouse click, will close the overlay. The second option requires to add SiteKiosk Object Model code to the terms of use page. It makes use of the CloseHtmlDialogs method to close the overlay when the user accepts the terms. Here is a code example of how this can look:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
	//SiteKiosk Object Model initialization
	window.external.InitScriptInterface();
			
	//Terms of use accepted, close the dialog
    function acceptTermsofuse() {
        SiteKiosk.SiteKioskUI.CloseHtmlDialogs('TERMSOFUSE');
	}
</script>
</head>
<body style="text-align:center;background-color:red;"> 
	Use at your own risk <input type="button" value="OK" onclick="acceptTermsofuse();" />
</body>
</html>

The page can be stored locally under ..\SiteKiosk\html or online. When you store it online or under another local path, you will need to give the URL script permission in the SiteKiosk configuration under Access/Security. Just make sure the line termsofuseDialog.URL = SiteKiosk.SiteKioskDirectory + "Html/termsofuse.html"; from the script above contains the correct path to your terms of use page.

Here is a picture of the above example code at work while using the Chrome browser engine of SiteKiosk Windows:

Using the SiteKiosk Object Model in SiteCaster

The PROVISIO Developer Blog has many examples of how to use the SiteKiosk Object Model in the browsers of SiteKiosk Windows and SiteKiosk Android or as an external script in SiteKiosk Windows. This time we will look at a short example that shows you how to use the Object Model in SiteCaster as well.

Because SiteCaster is Chrome-based, it uses the new SiteKiosk Object Model for Chrome. This Object Model is still in the making, the most current state of the preliminary documentation can be obtained through our support department. Interested developers can just send us a short email.

The example code is for SiteKiosk Windows and will show you how you can start an external application from a SiteCaster element.

The first step is to create an html page that will open an application by using the SiteKiosk Object Model. The code for the simple test web page looks like this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<script>
    //method to initialize the SK Object Model for SiteKiosk Windows (Chrome) and SiteKiosk Android
    (new Function(_siteKiosk.getSiteKioskObjectModelCode()))();
</script>
</head>
    <body style="margin:0px;text-align:center;background-color:#FFD932;">
        <input id="id_test" type="button" value="Test" style="margin-top:50px;" />
    </body>
    <script type="text/javascript">
        siteKiosk.ready(function (){
             document.getElementById("id_test").onclick = function () {dotest();};
             
            function dotest(){
                //will only work in SiteKiosk Windows and open the specified application
				siteKiosk.system.windows.skLegacy.externalApps.run("C:\\Program Files (x86)\\Notepad++\\notepad++.exe", false); 
            }
        }());
    </script>
</html>

You need to initialize the SiteKiosk Object Model by running _siteKiosk.getSiteKioskObjectModelCode(). The method siteKiosk.system.windows.skLegacy.externalApps.run(path,checkifalreadyrunning) will start the specified application. The first parameter is a string containing the path (and optional start parameters) to the local application on the machine SiteCaster is running on. The second parameter is a boolean value that specifies whether SiteKiosk should check if the application is alreay running or start additional instances. The page can either be stored locally on the machine where SiteCaster is running or on a web server. Either way, you need to make sure that the URL or path of the file has been added in the SiteCaster configuration of SiteKiosk as an URL with script permission.

The second step is to add the page to SiteCaster. Go to your SiteCaster team and either edit an existing project or create a new one. In this example I use the Start Screen template and add a new Webpage element to the left of the existing center elements.

Step three is publishing the project to the assigned machines where you can then push a button to start a local Windows application from SiteCaster.

Note that depending on the nature of the started application you might want to consider making additional configuration and/or script changes to handle closing the application or allowing/blocking certain dialogs of the application.