Using Input Devices in the SiteKiosk Start Screen

The Start Screen start page of SiteKiosk is Chrome-based and allows you to freely configure a start page for SiteKiosk that matches your requirements. It also supports the SiteKiosk Object Model to further increase the customization options. Because the design is Chrome-based it uses the new SiteKiosk Object Model for the Chrome-based part of SiteKiosk. This Object Model is still in the making so 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 following demonstration shows you how to use the SiteKiosk Object Model in the Start Screen (there is also one other example usage documented here). We will use the new SiteKiosk 9 feature to read input from any USB input device that uses keyboard emulation as an example how to achieve this goal.

First create a new configuration for SiteKiosk and select the Start Screen on the Start Page & Browser page. Click the customize button and for the purpose of this demonstration pick Template 3. Create a new HTML widget and edit it to add the code that contains the SiteKiosk Object Model.

The code to add is loosely based on the general Chrome-based example described in more detail in the SiteKiosk help. The code we will use for the Start Screen looks like this:

<script>
	var callbackFunc = function (data, deviceName) {
		parent.siteKiosk.log.info("TEST",0,deviceName + " registered the following data: " + data);
	};

	function registerDevice() {
		var deviceName = document.getElementById("devicename").value;

		if(deviceName == "")
			parent.siteKiosk.log.info("TEST",0,"No input device found!");

		var device = parent.siteKiosk.devices.getByName(deviceName);

		if(device == null)
			parent.siteKiosk.log.info("TEST",0,"No input device found!");

		device.valueChanged(callbackFunc);

		parent.siteKiosk.log.info("TEST",0,"Registered input device: " + JSON.stringify(device));
	}
</script>
<div style="background:white;padding:10px;">
	Test page for reading the input of keyboard emulation 
	devices configured in the configuration of SiteKiosk 
and writing the received data into the SiteKiosk log.<p />
	<div>
		Listen to input from this device that has been 
		configured in SiteKiosk: 
		<input id="devicename" tpye="text" /> (state the device name) <button onclick="registerDevice()">Register the listener</button>
	</div>
</div>

The most significant changes to the original code example are that you leave out the line that initializes the external script for the Object Model:

<script>(new Function(_siteKiosk.getSiteKioskObjectModelCode()))();</script>

This is because the Object Model is already initialized in the parent of the HTML widget, therefore you can access all objects, methods, etc. of the Chrome-based SiteKiosk Object Model by adding parent when you use it in the Start Screen:

parent.siteKiosk.log.info("TEST",0,deviceName + " registered the following data: " + data);

After you copied the code to the HTML widget you can save the changes to the Start Screen and go to the configuration page for Input Devices. Add an input device. For testing you may just attach an additional keyboard to your computer, but do not use the one attached to your computer already or a keyboard that is exactly the same model, as the device will be exclusively used for the input device feature and therefore does not accept keystrokes for normal usage, e.g. hitting Escape to close SiteKiosk, once you start SiteKiosk. Choose a display name for your device, this will be necessary to identify the device in the script, as it is used to register the device listener:

For this example you should also enable the debug output window under Logfiles in the configuration of SiteKiosk. Then save the configuration and start SiteKiosk in Run Once mode. Type the device name you used in the SiteKiosk configuration into the input field and click on the button to register the device listener. If the registration succeeded you will see a log entry. The same applies if you now create input from the attached device: